:root{--bg:#fff;--fg:#181d26;--ink:#0b1220;--muted:#4a5160;--border:#e0e2e6;--btn-border:#d5d8dd;--soft:#f3f7fe;--footer:#f8fafc;--accent:#1d4ed8;--accent-strong:#1e3a8a;--accent-fill:#c9d6fa;--green:#2e7d32;--sans:"Geist",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--sans);-webkit-font-smoothing:antialiased;overflow-wrap:anywhere}
a{color:inherit;text-decoration:none}
h1,h2,h3,p{margin:0}
.wrap{padding-inline:80px}
.nav{display:flex;align-items:center;justify-content:space-between;padding:28px 80px}
.nav img{display:block;height:44px;width:auto}
.nav-links{display:flex;align-items:center;gap:32px;font-size:15px;font-weight:500;line-height:18px}
.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:12px;font-weight:600;font-size:16px;line-height:20px;height:52px;padding-inline:24px;border:1px solid var(--btn-border);color:var(--fg);background:transparent}
.btn.sm{height:40px;padding-inline:18px;font-size:15px;line-height:18px}
.btn.dark{background:var(--fg);border-color:var(--fg);color:#fff}
.btn.blue{background:var(--accent);border-color:var(--accent);color:#fff}
.btn:focus-visible,.nav a:focus-visible,.foot a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.eyebrow{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.08em;line-height:16px;text-transform:uppercase;color:var(--accent)}
.pill{display:inline-flex;align-items:center;gap:8px;height:30px;padding-inline:12px;border-radius:999px;background:#e4ebfd;color:var(--accent-strong);font-size:13px;font-weight:500}
.pill i{width:7px;height:7px;border-radius:50%;background:var(--green)}
.hero{display:flex;flex-direction:column;align-items:flex-start;gap:28px;padding:72px 80px 56px}
.hero h1{font-size:88px;line-height:88px;font-weight:600;letter-spacing:-.045em;color:var(--ink);max-width:1000px}
.hero .lead{font-size:21px;line-height:32px;color:var(--muted);max-width:640px}
.ctas{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding-top:8px}
.soon{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.06em;line-height:16px;text-transform:uppercase;color:#6b7280;padding-left:12px}
.show{padding-inline:40px}
.panel{position:relative;display:flex;align-items:flex-end;justify-content:center;height:640px;overflow:hidden;padding:64px 64px 0;background:var(--accent-strong);border-radius:28px}
.panel .web{flex-shrink:0;width:960px;max-width:100%;height:600px;object-fit:cover;object-position:top;border-radius:14px 14px 0 0;box-shadow:0 30px 80px #050c2873}
.panel .ring{position:absolute;right:-140px;top:-140px;width:460px;height:460px;border:70px solid #c9d6fa1f;border-radius:50%}
.panel .phone{position:absolute;right:96px;bottom:-60px;width:270px;height:584px;padding:10px;background:var(--ink);border-radius:44px;box-shadow:0 30px 80px #050c288c}
.panel .phone img{display:block;width:100%;height:100%;object-fit:cover;object-position:top;border-radius:34px}
.how{padding:120px 80px 40px;display:flex;flex-direction:column;gap:48px}
.how-head{display:flex;align-items:flex-end;justify-content:space-between;gap:40px}
.how-head h2{font-size:52px;line-height:56px;font-weight:600;letter-spacing:-.04em;color:var(--ink);max-width:620px}
.how-head p{font-size:17px;line-height:26px;color:var(--muted);max-width:420px}
.steps{display:flex;gap:40px;border-top:1px solid var(--border);padding-top:32px}
.step{flex:1;display:flex;flex-direction:column;gap:12px}
.step b{font-family:var(--mono);font-size:13px;font-weight:500;color:var(--accent)}
.step h3{font-size:22px;line-height:28px;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.step p{font-size:16px;line-height:24px;color:var(--muted)}
.duo{display:flex;gap:40px;padding:80px}
.card{border-radius:24px;padding:40px;display:flex;flex-direction:column;gap:24px}
.card.erp{flex:1;background:var(--soft)}
.card.sec{flex:1.4;background:var(--ink)}
.card .eyebrow{color:var(--accent-strong)}
.card.sec .eyebrow{color:var(--accent-fill)}
.card h2{font-size:40px;line-height:46px;font-weight:600;letter-spacing:-.035em;color:var(--ink)}
.card.sec h2{font-size:32px;line-height:38px;letter-spacing:-.03em;color:#fff}
.card p{font-size:16px;line-height:24px;color:var(--muted)}
.card ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px}
.card li{display:flex;gap:12px;font-size:16px;line-height:24px;color:#dce6fd}
.card li::before{content:"";flex-shrink:0;width:8px;height:8px;margin-top:8px;border-radius:50%;background:#7bc86c}
.cta{display:flex;align-items:center;justify-content:space-between;gap:40px;border-top:1px solid var(--border);padding:72px 80px}
.cta h2{font-size:44px;line-height:50px;font-weight:600;letter-spacing:-.035em;color:var(--ink);max-width:640px}
.cta .side{display:flex;flex-direction:column;align-items:flex-end;gap:12px;font-size:14px;line-height:18px;color:var(--muted)}
.cta .side a:not(.btn){text-decoration:underline}
.foot{display:flex;align-items:center;justify-content:space-between;gap:24px;background:var(--footer);padding:28px 80px 40px}
.foot .left{display:flex;align-items:center;gap:16px;font-size:13px;line-height:16px;color:var(--muted)}
.foot img{display:block;height:30px;width:auto}
.foot nav{display:flex;flex-wrap:wrap;gap:28px;font-size:14px;font-weight:500;line-height:18px}
.page-head{display:flex;flex-direction:column;gap:16px;padding:64px 80px 48px}
.page-head h1{font-size:64px;line-height:66px;font-weight:600;letter-spacing:-.045em;color:var(--ink)}
.page-head p{font-size:19px;line-height:28px;color:var(--muted);max-width:620px}
.cards{display:flex;gap:24px;padding:0 80px 64px}
.cards .card{flex:1;gap:14px;padding:32px;border-radius:20px;background:var(--soft)}
.cards .card.main{background:var(--accent-strong)}
.cards .card h2{font-size:24px;line-height:30px;letter-spacing:-.025em}
.cards .card.main h2{font-size:30px;line-height:36px;letter-spacing:-.03em;color:#fff}
.cards .card.main .eyebrow{color:var(--accent-fill)}
.cards .card.main p{color:#dce6fd}
.cards .card.main a{text-decoration:underline;text-underline-offset:4px}
.cards .card p a{color:var(--accent);text-decoration:underline}
.err{display:flex;flex-direction:column;align-items:flex-start;gap:20px;padding:96px 80px}
.err h1{font-size:64px;line-height:66px;font-weight:600;letter-spacing:-.045em;color:var(--ink)}
@media (max-width:900px){
  .wrap,.how,.duo,.cta,.foot,.page-head,.cards,.err{padding-inline:20px}
  .nav{padding:20px}.nav img{height:34px}.nav-links{gap:16px;font-size:14px}.nav-links .hide-m{display:none}
  .btn.sm{height:36px;padding-inline:14px;font-size:14px;border-radius:10px}
  .hero{gap:20px;padding:32px 20px 36px}
  .pill{height:28px;padding-inline:10px;font-size:12px}
  .hero h1{font-size:44px;line-height:46px}
  .hero .lead{font-size:17px;line-height:26px}
  .ctas{flex-direction:column;align-items:stretch;gap:10px;width:100%;padding-top:4px}
  .ctas .btn{height:50px}
  .soon{display:none}
  .show{padding-inline:12px}
  .panel{height:440px;padding:40px 0 0;border-radius:24px}
  .panel .web,.panel .ring.big{display:none}
  .panel .ring{right:-90px;top:-90px;width:260px;height:260px;border-width:44px}
  .panel .phone{position:static;width:228px;height:494px;padding:9px;border-radius:40px;box-shadow:0 24px 60px #050c2880}
  .panel .phone img{border-radius:31px}
  .how{padding:56px 20px 24px;gap:24px}
  .how-head{display:block}.how-head h2{font-size:32px;line-height:36px;letter-spacing:-.035em}.how-head p{display:none}
  .steps{flex-direction:column;gap:24px;border:0;padding:0}
  .step{border-top:1px solid var(--border);padding-top:18px;gap:6px}
  .step b{font-size:12px}.step h3{font-size:19px;line-height:24px}.step p{font-size:15px;line-height:22px}
  .duo{flex-direction:column;gap:12px;padding:32px 12px}
  .card{border-radius:20px;padding:28px 24px;gap:14px}
  .card h2{font-size:30px;line-height:36px}.card.sec h2{font-size:24px;line-height:30px}
  .card p,.card li{font-size:15px;line-height:22px}
  .cta{flex-direction:column;align-items:stretch;gap:16px;border:0;padding:32px 20px 40px}
  .cta h2{font-size:30px;line-height:34px}
  .cta .side{align-items:stretch;text-align:center}.cta .btn{height:50px}
  .foot{flex-direction:column;align-items:flex-start;gap:16px;padding:28px 20px 36px}
  .foot .left{flex-direction:column;align-items:flex-start;gap:16px}.foot nav{order:-1;gap:20px}
  .page-head{padding:40px 20px 32px}.page-head h1,.err h1{font-size:40px;line-height:44px}.page-head p{font-size:17px;line-height:26px}
  .cards{flex-direction:column;gap:12px;padding:0 12px 40px}
  .err{padding:48px 20px}
}
