@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Manrope:wght@500;600;700;800&display=swap');

:root {
  --ink: #24213d;
  --muted: #6f7184;
  --line: #e7e5ef;
  --paper: #fff;
  --soft: #f7f6fc;
  --purple: #6855df;
  --purple-dark: #4d3bc4;
  --purple-soft: #eeebff;
  --shadow: 0 24px 70px rgb(46 36 105 / 13%);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: #fff; font-family: 'DM Sans', system-ui, sans-serif; }
a { color: inherit; }
.skip-link { position: fixed; z-index: 20; top: 10px; left: 10px; padding: 10px 14px; border-radius: 8px; color: #fff; background: #18152b; transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }
.site-header { position: sticky; z-index: 10; top: 0; display: flex; width: min(1180px, calc(100% - 40px)); height: 74px; align-items: center; justify-content: space-between; margin: 0 auto; isolation: isolate; }
.site-header::before { position: absolute; z-index: -1; top: 0; bottom: 0; left: 50%; width: 100vw; border-bottom: 1px solid rgb(231 229 239 / 72%); background: rgb(255 255 255 / 88%); backdrop-filter: blur(18px); content: ''; transform: translateX(-50%); }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand-mark { display: grid; width: 37px; height: 37px; place-items: center; border-radius: 11px; color: #fff; background: linear-gradient(145deg, #8979f1, #5643cd); box-shadow: 0 8px 20px rgb(88 70 211 / 24%); font: 800 18px Manrope, sans-serif; }
.brand strong, .brand small { display: block; }
.brand strong { font: 800 13px Manrope, sans-serif; letter-spacing: .075em; }
.brand small { margin-top: 1px; color: #9292a4; font-size: 8px; }
.site-header nav { display: flex; gap: 32px; }
.site-header nav a { color: #626276; font-size: 12px; font-weight: 600; text-decoration: none; }
.site-header nav a:hover { color: var(--purple); }
.header-cta { padding: 9px 13px; border: 1px solid #dcd7fa; border-radius: 8px; color: #5747bd; background: #f7f5ff; font-size: 10px; font-weight: 700; text-decoration: none; }
.mobile-nav { position: relative; display: none; margin-left: auto; }
.mobile-nav summary { display: grid; width: 39px; height: 39px; place-content: center; gap: 4px; border: 1px solid #dedbea; border-radius: 10px; background: #fff; cursor: pointer; list-style: none; box-shadow: 0 5px 15px rgb(46 36 105 / 8%); }
.mobile-nav summary::-webkit-details-marker { display: none; }
.mobile-nav summary span { display: block; width: 17px; height: 2px; border-radius: 2px; background: #5d4acb; transition: transform .18s, opacity .18s; }
.mobile-nav[open] summary span:first-child { transform: translateY(6px) rotate(45deg); }
.mobile-nav[open] summary span:nth-child(2) { opacity: 0; }
.mobile-nav[open] summary span:last-child { transform: translateY(-6px) rotate(-45deg); }
.mobile-nav nav { position: absolute; z-index: 30; top: calc(100% + 9px); right: 0; display: grid; width: 170px; gap: 4px; padding: 8px; border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: 0 18px 45px rgb(46 36 105 / 18%); }
.mobile-nav nav a { padding: 11px 12px; border-radius: 8px; color: #555469; font-size: 12px; font-weight: 700; text-decoration: none; }
.mobile-nav nav a:hover, .mobile-nav nav a:focus-visible { color: var(--purple-dark); background: var(--purple-soft); outline: none; }

.hero { position: relative; display: grid; width: min(1180px, calc(100% - 40px)); grid-template-columns: minmax(0, .82fr) minmax(520px, 1.18fr); align-items: center; gap: 64px; min-height: 675px; margin: 0 auto; padding: 70px 0 84px; }
.hero::before { position: absolute; z-index: -1; top: 0; right: -8vw; width: 600px; height: 600px; border-radius: 50%; background: radial-gradient(circle, rgb(116 94 229 / 12%), transparent 68%); content: ''; }
.eyebrow { display: flex; align-items: center; gap: 8px; margin: 0 0 18px; color: var(--purple); font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.eyebrow > span { width: 18px; height: 2px; background: currentColor; }
.hero h1 { max-width: 580px; margin: 0; font: 800 clamp(42px, 5.2vw, 66px)/1.04 Manrope, sans-serif; letter-spacing: -.055em; }
.hero h1 em { color: var(--purple); font-style: normal; }
.hero-intro { max-width: 555px; margin: 24px 0 0; color: var(--muted); font-size: 16px; line-height: 1.75; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 30px; }
.button { display: inline-flex; min-height: 47px; align-items: center; justify-content: center; gap: 10px; padding: 0 19px; border: 1px solid var(--line); border-radius: 10px; font-size: 12px; font-weight: 700; text-decoration: none; transition: transform .18s, box-shadow .18s, background .18s; }
.button:hover { transform: translateY(-2px); }
.button.primary { border-color: var(--purple); color: #fff; background: linear-gradient(135deg, #7563e8, #5945d1); box-shadow: 0 11px 24px rgb(95 76 219 / 24%); }
.button.secondary { background: #fff; }
.play { display: grid; width: 23px; height: 23px; place-items: center; border-radius: 50%; color: var(--purple); background: var(--purple-soft); font-size: 8px; }
.hero-trust { display: flex; flex-wrap: wrap; gap: 16px; margin: 27px 0 0; padding: 0; color: #77788a; font-size: 10px; list-style: none; }
.hero-trust li { display: flex; align-items: center; gap: 5px; }
.hero-trust span { display: grid; width: 16px; height: 16px; place-items: center; border-radius: 50%; color: #2f9e70; background: #e9f8f1; font-size: 8px; font-weight: 800; }

.product-preview { overflow: hidden; user-select: none; border: 1px solid #dedbea; border-radius: 17px; background: #fff; box-shadow: var(--shadow); transform: perspective(1300px) rotateY(-2deg) rotateX(1deg); }
.window-bar { display: flex; height: 43px; align-items: center; gap: 6px; padding: 0 13px; border-bottom: 1px solid #e8e6ef; background: #fafafe; }
.window-dot { width: 7px; height: 7px; border-radius: 50%; }.window-dot.red{background:#f17b75}.window-dot.amber{background:#e9b953}.window-dot.green{background:#62c48b}
.address-bar { overflow: hidden; width: 230px; margin-left: 8px; padding: 6px 11px; border: 1px solid #e4e2eb; border-radius: 6px; color: #9a9aaa; background: #fff; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.status-pill { display: flex; align-items: center; gap: 5px; margin-left: auto; color: #3d936d; font-size: 7px; font-weight: 700; }.status-pill i{width:6px;height:6px;border-radius:50%;background:#42b982}
.app-preview { display: grid; min-height: 390px; grid-template-columns: 105px 1fr; }
.app-preview aside { display: grid; align-content: start; gap: 7px; padding: 14px 9px; border-right: 1px solid #e9e7ef; background: #fcfcfe; }
.mini-brand { display: flex; align-items: center; gap: 7px; margin-bottom: 12px; padding: 0 5px; font-size: 8px; font-weight: 800; }.mini-brand b{display:grid;width:22px;height:22px;place-items:center;border-radius:6px;color:#fff;background:var(--purple)}
.app-preview aside > span { display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 6px; color: #9292a3; font-size: 10px; }.app-preview aside i{font-size:7px;font-style:normal}.app-preview aside .active{color:#5c4acb;background:#efedff}
.preview-main { padding: 19px; background: #f8f8fb; }
.preview-heading { display: flex; align-items: center; justify-content: space-between; }.preview-heading small,.preview-heading strong{display:block}.preview-heading small{color:#7a69df;font-size:6px;font-weight:800;letter-spacing:.1em}.preview-heading strong{margin-top:4px;font-size:13px}.preview-heading button{border:0;border-radius:6px;padding:8px 10px;color:#fff;background:var(--purple);font-size:7px;font-weight:700}
.workflow-board { margin-top: 16px; padding: 15px; border: 1px solid #e5e3eb; border-radius: 10px; background: #fff; }
.step { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 10px; min-height: 58px; padding: 9px 11px; border: 1px solid #e5e3eb; border-radius: 8px; background: #fff; box-shadow: 0 3px 9px rgb(38 35 68 / 3%); }.step>b{display:grid;width:28px;height:28px;place-items:center;border-radius:7px;color:#526dca;background:#eef3ff;font-size:8px}.step span>*{display:block}.step small{color:#78839d;font-size:5px;font-weight:800;letter-spacing:.08em}.step strong{margin-top:2px;font-size:8px}.step em{margin-top:3px;color:#9a9ba9;font-size:6px;font-style:normal}.step>i{color:#a5a5b0;font-size:7px;font-style:normal}
.step.purple { border-color:#d8d1ff;background:#fbfaff}.step.purple>b{color:#644fd6;background:#ebe7ff}.step.success>b{color:#238b62;background:#e8f8f0}
.flow-line { width: 1px; height: 10px; margin: 0 0 0 25px; background: #d7d4e2; }
.nested-steps { display: grid; gap: 7px; margin: 7px 0 7px 19px; padding-left: 13px; border-left: 2px solid #dad4ff; }.step.compact{min-height:45px}.step.compact>b{width:24px;height:24px}

.proof { display: flex; min-height: 105px; align-items: center; justify-content: space-between; padding: 0 max(40px, calc((100vw - 1180px) / 2)); border-block: 1px solid var(--line); background: #fafafe; }
.proof p { color: #9a9aab; font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.proof div { display: flex; gap: 38px; }.proof span{display:flex;align-items:center;gap:8px;color:#858598;font-size:15px}.proof b{font-size:10px}
.section { width: min(1100px, calc(100% - 40px)); margin: 0 auto; padding: 108px 0; }
.section-heading { max-width: 670px; margin: 0 auto 50px; text-align: center; }.section-heading .eyebrow{justify-content:center}.section h2,.cta h2{margin:0;font:800 clamp(31px,4vw,46px)/1.12 Manrope,sans-serif;letter-spacing:-.045em}.section-heading>p:last-child,.workflow-copy>p:last-child{margin:17px 0 0;color:var(--muted);font-size:14px;line-height:1.7}
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.feature-grid article { min-height: 220px; padding: 25px; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: 0 8px 28px rgb(39 35 72 / 4%); }.feature-grid h3{margin:19px 0 9px;font:700 15px Manrope,sans-serif}.feature-grid h3 small{margin-left:5px;padding:3px 5px;border-radius:4px;color:#6652d1;background:#ece8ff;font-size:6px;vertical-align:2px}.feature-grid p{margin:0;color:var(--muted);font-size:11px;line-height:1.7}
.feature-icon { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 11px; font-size: 19px; }.feature-icon.violet{color:#6652d8;background:#efecff}.feature-icon.blue{color:#3e77c9;background:#edf5ff}.feature-icon.green{color:#299269;background:#eaf8f2}.feature-icon.orange{color:#c47b2c;background:#fff4e8}.feature-icon.rose{color:#c05470;background:#fff0f4}.feature-icon.cyan{color:#278a99;background:#e9f8fa}

.workflow { display: grid; width: 100%; max-width: none; grid-template-columns: minmax(280px, .8fr) minmax(440px, 1.2fr); gap: 100px; padding-inline: max(40px, calc((100vw - 1060px) / 2)); background: #f8f7fc; }
.workflow-copy { align-self: center; }.process{margin:0;padding:0;list-style:none}.process li{display:grid;grid-template-columns:50px 1fr;gap:18px;padding:22px 0;border-bottom:1px solid #dedce7}.process li:first-child{padding-top:0}.process li>b{display:grid;width:38px;height:38px;place-items:center;border-radius:10px;color:#6655d0;background:#ece9ff;font-size:9px}.process strong{font:700 14px Manrope,sans-serif}.process p{margin:7px 0 0;color:var(--muted);font-size:11px;line-height:1.55}
.privacy { width: min(1180px, calc(100% - 40px)); }.privacy-panel{position:relative;display:grid;grid-template-columns:1fr 370px;gap:80px;align-items:center;overflow:hidden;padding:65px 75px;border-radius:22px;color:#fff;background:linear-gradient(135deg,#252044,#332966 60%,#4d3ca1)}.privacy-panel::after{position:absolute;right:-100px;bottom:-150px;width:400px;height:400px;border:1px solid rgb(255 255 255 / 10%);border-radius:50%;content:''}.eyebrow.light{color:#b9afff}.privacy-copy{position:relative;z-index:1}.privacy-copy>p:not(.eyebrow){max-width:600px;margin:18px 0 0;color:#c9c4df;font-size:13px;line-height:1.75}.privacy-copy ul{display:flex;flex-wrap:wrap;gap:14px;margin:25px 0 0;padding:0;color:#ddd9ed;font-size:9px;list-style:none}
.security-card { position:relative; user-select: none; z-index:1;padding:24px;border:1px solid rgb(255 255 255 / 16%);border-radius:15px;background:rgb(255 255 255 / 10%);box-shadow:0 20px 50px rgb(16 10 48 / 25%);backdrop-filter:blur(15px)}.shield{display:grid;width:40px;height:40px;place-items:center;border-radius:11px;color:#fff;background:rgb(255 255 255 / 13%);font-size:24px}.security-card>span{display:block;margin-top:16px;color:#afa8d1;font-size:6px;font-weight:800;letter-spacing:.12em}.security-card>strong{display:block;margin:4px 0 17px;font-size:16px}.security-card>div:not(.shield){display:grid;grid-template-columns:8px 1fr auto;align-items:center;gap:10px;padding:12px 0;border-top:1px solid rgb(255 255 255 / 10%)}.security-card div i{width:7px;height:7px;border-radius:50%;background:#63d4a0}.security-card p{margin:0}.security-card p b,.security-card p small{display:block}.security-card p b{font-size:8px}.security-card p small{margin-top:3px;color:#aca6c8;font-size:6px}.security-card em{padding:3px 5px;border-radius:4px;color:#77dfac;background:rgb(80 207 145 / 12%);font-size:5px;font-style:normal;font-weight:800}
.downloads { padding-top: 76px; }
.downloads .section-heading { margin-bottom: 34px; }
.download-list { display: grid; width: min(820px, 100%); gap: 10px; margin: 0 auto; }
.download-item { display: grid; grid-template-columns: 44px minmax(0, 1fr) 34px; align-items: center; gap: 14px; min-height: 76px; padding: 13px 16px; border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: 0 6px 20px rgb(40 35 76 / 4%); text-decoration: none; transition: border-color .16s, box-shadow .16s, transform .16s; }
.download-item:hover { border-color: #cfc8fa; box-shadow: 0 10px 27px rgb(58 44 130 / 9%); transform: translateY(-1px); }
.download-file-icon { display: grid; width: 44px; height: 44px; place-items: center; overflow: hidden; border-radius: 10px; color: #5d49cc; background: var(--purple-soft); font-size: 7px; font-weight: 850; letter-spacing: .04em; }
.download-item > span:nth-child(2) { min-width: 0; }
.download-item strong, .download-item small { display: block; }
.download-item strong { overflow: hidden; font: 700 12px Manrope, sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.download-item small { margin-top: 5px; color: var(--muted); font-size: 8px; }
.download-item > i { display: grid; width: 31px; height: 31px; place-items: center; border-radius: 8px; color: var(--purple); background: #f4f2ff; font-size: 16px; font-style: normal; }
.download-empty { display: grid; width: min(820px, 100%); min-height: 210px; place-content: center; justify-items: center; margin: 0 auto; padding: 30px; border: 1px dashed #d9d5ed; border-radius: 14px; background: #faf9fe; text-align: center; }
.download-empty > span { display: grid; width: 46px; height: 46px; place-items: center; border-radius: 12px; color: var(--purple); background: var(--purple-soft); font-size: 21px; }
.download-empty strong { margin-top: 14px; font: 700 13px Manrope, sans-serif; }
.download-empty p { margin: 7px 0 0; color: var(--muted); font-size: 10px; }
.cta { position:relative;overflow:hidden;margin-top:15px;padding:100px 30px;color:#fff;background:linear-gradient(135deg,#6450dc,#4836b9);text-align:center}.cta .eyebrow{justify-content:center}.cta>p:not(.eyebrow){margin:18px auto 28px;color:#d7d1fb;font-size:13px}.button.white{position:relative;z-index:1;border-color:#fff;color:#5140bf;background:#fff;box-shadow:0 12px 28px rgb(31 21 94 / 25%)}.cta-orb{position:absolute;border:1px solid rgb(255 255 255 / 10%);border-radius:50%}.cta-orb.one{top:-180px;left:-80px;width:430px;height:430px}.cta-orb.two{right:-120px;bottom:-220px;width:500px;height:500px}
footer { display:grid;width:min(1180px,calc(100% - 40px));grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;min-height:120px;margin:0 auto;color:#9292a2;font-size:9px}footer p{text-align:center}footer>span{text-align:right}

@media (max-width: 960px) {
  .site-header > nav { display: none; }
  .hero { grid-template-columns: 1fr; gap: 45px; padding-top: 60px; }
  .hero-copy { text-align: center; }.hero .eyebrow,.hero-actions,.hero-trust{justify-content:center}.hero h1,.hero-intro{margin-inline:auto}
  .product-preview { width: min(680px, 100%); margin: 0 auto; transform: none; }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .workflow { grid-template-columns: 1fr; gap: 50px; }
  .privacy-panel { grid-template-columns: 1fr; gap: 45px; }.security-card{width:min(430px,100%)}
}

@media (max-width: 640px) {
  .site-header { width: calc(100% - 28px); }.header-cta{display:none}.mobile-nav{display:block}.mobile-nav nav{display:grid}
  .hero,.section,.privacy { width: calc(100% - 28px); }.hero{grid-template-columns:minmax(0,1fr);padding-top:45px}.hero h1{font-size:39px}.hero-intro{font-size:14px}
  .app-preview { grid-template-columns: 70px 1fr; }.app-preview aside i,.mini-brand span{display:none}.address-bar{width:150px}.preview-main{padding:11px}.workflow-board{padding:9px}
  .proof { display: grid; gap: 15px; padding: 24px 20px; }.proof div{display:grid;grid-template-columns:1fr 1fr;gap:13px}
  .section { padding-block: 78px; }.feature-grid{grid-template-columns:1fr}.workflow{padding-inline:20px}.privacy-panel{padding:42px 24px}.privacy-copy ul{display:grid}
  footer{grid-template-columns:1fr;justify-items:center;padding:35px 0}footer p,footer>span{text-align:center}
}

@media (prefers-reduced-motion: reduce) { html{scroll-behavior:auto}.button{transition:none} }

.privacy-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 25px; color: #fff; font-size: 11px; font-weight: 700; text-decoration: none; }
.privacy-link:hover { text-decoration: underline; }
.legal-page { background: #f8f7fc; }
.legal-header { position: relative; top: auto; }
.legal-main { width: min(900px, calc(100% - 40px)); margin: 0 auto; padding: 72px 0 100px; }
.legal-hero { padding-bottom: 38px; border-bottom: 1px solid var(--line); }
.legal-hero h1 { margin: 0; font: 800 clamp(38px, 6vw, 58px)/1.08 Manrope, sans-serif; letter-spacing: -.05em; }
.legal-hero > p:not(.eyebrow) { max-width: 720px; margin: 19px 0 0; color: var(--muted); font-size: 15px; line-height: 1.75; }
.legal-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.legal-meta span { padding: 7px 10px; border: 1px solid #ddd9f1; border-radius: 7px; color: #5d51a4; background: #f1efff; font-size: 9px; font-weight: 700; }
.legal-content { display: grid; gap: 16px; margin-top: 34px; }
.legal-content section { padding: 28px 30px; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: 0 7px 24px rgb(40 35 76 / 4%); }
.legal-content h2 { margin: 0 0 12px; font: 750 19px Manrope, sans-serif; }
.legal-content h3 { margin: 20px 0 8px; font: 700 14px Manrope, sans-serif; }
.legal-content p, .legal-content li { color: #626477; font-size: 12px; line-height: 1.75; }
.legal-content p { margin: 9px 0; }
.legal-content ul { margin: 10px 0 0; padding-left: 20px; }
.legal-content a { color: var(--purple-dark); font-weight: 650; }
.legal-content code { padding: 2px 5px; border-radius: 4px; color: #4d3bc4; background: #ebe8ff; font-size: .9em; }
.legal-summary { border-color: #d9d3fb !important; background: #f7f5ff !important; }
.legal-footer { background: #fff; }

@media (max-width: 640px) {
  .legal-main { width: calc(100% - 28px); padding-top: 45px; }
  .legal-content section { padding: 22px 20px; }
}