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

:root{
    --bg:#f7f8fa;
    --ink:#11151c;
    --muted:#69707d;
    --line:#e4e7ec;
    --accent:#6d4aff;
    --accent2:#9a72ff;
    --dark:#10131a;
    --white:#fff;
    --radius:24px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:"DM Sans",sans-serif;background:var(--bg);color:var(--ink);line-height:1.6}
a{text-decoration:none;color:inherit}
.container{width:min(1160px,calc(100% - 40px));margin:auto}
.navbar{height:78px;overflow:hidden;background:rgba(247,248,250,.9);backdrop-filter:blur(16px);border-bottom:1px solid rgba(228,231,236,.8);position:sticky;top:0;z-index:20}
.nav-inner{height:100%;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:10px;font-family:"Space Grotesk";font-weight:600;letter-spacing:-.4px;min-width:0;white-space:nowrap}
.brand b{font-weight:700}
.brand-logo{display:block!important;flex:0 0 42px!important;width:42px!important;height:42px!important;max-width:42px!important;max-height:42px!important;object-fit:contain!important;overflow:hidden}
nav{display:flex;align-items:center;gap:30px;font-size:14px;font-weight:600}
nav a{color:#555d69;transition:.2s}
nav a:hover{color:var(--ink)}
.nav-cta{padding:11px 18px;background:var(--ink);color:#fff!important;border-radius:12px}
.hero{min-height:650px;display:flex;align-items:center;padding:80px 0 90px;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:70px;align-items:center}
.eyebrow{font-size:11px;font-weight:700;letter-spacing:2px;color:var(--accent);margin-bottom:16px}
.hero h1{font:700 clamp(48px,6vw,78px)/.98 "Space Grotesk";letter-spacing:-4px;max-width:720px}
.hero h1 span{color:var(--accent)}
.hero-copy>p{font-size:18px;color:var(--muted);max-width:600px;margin:26px 0 32px}
.hero-buttons{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:14px;padding:14px 20px;border-radius:13px;font-weight:700;font-size:14px;transition:.2s}
.btn.primary{background:var(--accent);color:white;box-shadow:0 10px 30px rgba(109,74,255,.2)}
.btn.primary:hover{transform:translateY(-2px)}
.btn.secondary{border:1px solid var(--line);background:#fff}
.btn.secondary:hover{border-color:#c8ccd5}
.trust-line{margin-top:30px;color:#8a909a;font-size:12px}
.trust-line span{color:var(--accent)}
.hero-visual{height:450px;position:relative;display:grid;place-items:center}
.hero-visual:before{content:"";position:absolute;width:360px;height:360px;border-radius:50%;border:1px solid #ddd8ff;box-shadow:0 0 100px rgba(109,74,255,.12);transform:rotate(20deg)}
.orb{position:absolute;border-radius:50%;filter:blur(1px)}
.orb-one{width:100px;height:100px;background:#cfc4ff;top:20px;right:30px;opacity:.65}
.orb-two{width:55px;height:55px;background:#b9c4ff;bottom:30px;left:25px;opacity:.55}
.dashboard-card{position:relative;width:350px;background:#fff;border:1px solid #e4e3ee;border-radius:22px;box-shadow:0 30px 70px rgba(34,28,80,.14);overflow:hidden;z-index:2}
.dash-top{height:48px;background:#fafaff;border-bottom:1px solid #ececf2;display:flex;align-items:center;padding:0 17px;gap:6px}
.dot{width:7px;height:7px;border-radius:50%;background:#d5d8e0}
.dash-title{margin-left:auto;font:600 11px "Space Grotesk";color:#717786}
.dash-content{padding:25px}
.mini-label{font-size:9px;letter-spacing:1.4px;color:#8b91a0;font-weight:700;margin-bottom:22px}
.dash-row{display:flex;justify-content:space-between;padding:13px 0;border-bottom:1px solid #eff0f3;font-size:13px}
.dash-row span{color:#818895}.dash-row strong{font-family:"Space Grotesk"}
.progress{height:8px;background:#eeebff;border-radius:20px;margin:25px 0 15px;overflow:hidden}
.progress i{display:block;width:72%;height:100%;background:var(--accent);border-radius:20px}
.dash-bottom{display:flex;justify-content:space-between;font-size:11px;color:#8a909a}
.dash-bottom b{color:var(--accent)}
.float-card{position:absolute;background:white;border:1px solid #e8e9ee;box-shadow:0 15px 40px rgba(30,32,45,.1);border-radius:14px;padding:11px 14px;font-size:11px;font-weight:700;z-index:3;display:flex;gap:8px;align-items:center}
.float-one{top:85px;left:0}.float-two{right:0;bottom:75px}.float-card:first-letter{color:var(--accent)}
.stats{background:#11151c;color:white;padding:28px 0}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.stats-grid>div{display:flex;gap:16px;align-items:center;border-right:1px solid #30343d}
.stats-grid>div:last-child{border:0}
.stats strong{font:700 28px "Space Grotesk";color:#a38cff}
.stats span{font-size:12px;color:#b9bec8;line-height:1.35}
.section{padding:110px 0}
.section-head{display:grid;grid-template-columns:1fr 420px;gap:80px;align-items:end;margin-bottom:55px}
.section-head h2,.about h2,.coming h2,.contact h2{font:700 clamp(36px,4vw,52px)/1.05 "Space Grotesk";letter-spacing:-2.5px}
.section-head>p{color:var(--muted);font-size:15px}
.software-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.software-card{background:white;border:1px solid var(--line);border-radius:var(--radius);padding:34px;position:relative;overflow:hidden}
.software-card.featured{background:linear-gradient(145deg,#f4f1ff,#fff)}
.card-icon{width:45px;height:45px;border-radius:13px;background:var(--ink);color:white;display:grid;place-items:center;font:700 20px "Space Grotesk";margin-bottom:28px}
.card-number{position:absolute;right:28px;top:28px;font:600 13px "Space Grotesk";color:#a0a5ae}
.software-card h3{font:700 27px/1.12 "Space Grotesk";letter-spacing:-1px;margin-bottom:15px}
.software-card>p{font-size:14px;color:var(--muted);min-height:70px}
.software-card ul{list-style:none;margin:22px 0 25px;border-top:1px solid #e8e8ed;padding-top:10px}
.software-card li{font-size:13px;padding:7px 0;color:#4e5561}
.software-card li:before{content:"✓";color:var(--accent);font-weight:700;margin-right:9px}
.card-link{font-size:13px;font-weight:700;color:var(--accent)}
.card-link span{margin-left:8px}
.dark-section{background:var(--dark);color:white;padding:110px 0}
.light .eyebrow{color:#a794ff}.light>p{color:#9da4af}
.solutions-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid #30343d}
.solution{padding:28px 25px 10px 0;border-right:1px solid #30343d;margin-right:25px}
.solution:last-child{border:0}
.solution span{font:600 12px "Space Grotesk";color:#9f8cff}
.solution h3{font:700 19px/1.2 "Space Grotesk";margin:30px 0 13px}
.solution p{font-size:13px;color:#9da4af}
.about{background:#fff}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:100px}
.about h2{max-width:520px}
.about .large{font:500 22px/1.45 "Space Grotesk";letter-spacing:-.5px;margin-bottom:22px}
.about p:not(.large){color:var(--muted);font-size:15px;max-width:550px}
.coming{padding:100px 0;background:#efedff}
.coming-inner{display:flex;justify-content:space-between;align-items:center;gap:50px}
.coming h2{margin-bottom:20px}
.coming p{color:#656a76;max-width:600px}
.coming-badge{width:210px;height:210px;border-radius:50%;background:var(--ink);color:white;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;flex:none;box-shadow:0 20px 50px rgba(17,21,28,.2)}
.coming-badge span{font-size:9px;letter-spacing:2px;color:#a794ff}
.coming-badge strong{font:700 31px/.9 "Space Grotesk";letter-spacing:-1px;margin:12px 0}
.coming-badge small{font-size:8px;letter-spacing:1.5px;color:#aeb3bc}
.contact{background:var(--accent);color:white;padding:100px 0}
.contact .eyebrow{color:#dcd5ff}
.contact-inner{display:grid;grid-template-columns:1fr 430px;gap:90px;align-items:center}
.contact h2{color:white}
.contact-inner>div>p{margin-top:25px;color:#ddd8f7;max-width:550px}
.contact-box{background:white;border-radius:22px;padding:22px;color:var(--ink)}
.contact-item{display:flex;align-items:center;gap:14px;padding:16px 10px;border-bottom:1px solid var(--line)}
.contact-icon{width:38px;height:38px;background:#f0eeff;border-radius:11px;display:grid;place-items:center;color:var(--accent);font-weight:700}
.contact-item small{display:block;color:#8c919b;font-size:9px;letter-spacing:1.3px;font-weight:700}
.contact-item b{display:block;font-size:13px;margin-top:2px}
.contact-box .full{width:100%;margin-top:18px}
footer{background:#0b0d12;color:#9096a0;padding:27px 0}
.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:11px}
footer .brand{color:white;font-size:13px}
footer a{color:#c7cbd2}
@media(max-width:900px){
    .hero-grid,.about-grid,.contact-inner{grid-template-columns:1fr;gap:50px}
    .hero{padding-top:60px}.hero-visual{height:390px}
    .section-head{grid-template-columns:1fr;gap:20px}
    .software-grid{grid-template-columns:1fr}
    .solutions-grid{grid-template-columns:1fr 1fr}
    .solution:nth-child(2){border-right:0}
    .stats-grid{grid-template-columns:1fr 1fr}.stats-grid>div:nth-child(2){border-right:0}
    .coming-inner{align-items:flex-start}.contact-inner{gap:35px}
}
@media(max-width:650px){
    .brand-logo{flex-basis:38px!important;width:38px!important;height:38px!important;max-width:38px!important;max-height:38px!important}
    .container{width:min(100% - 28px,1160px)}
    .navbar{height:68px}nav{display:none}
    .hero{padding:55px 0 60px;min-height:auto}
    .hero h1{font-size:47px;letter-spacing:-2.8px}
    .hero-copy>p{font-size:16px}
    .hero-visual{height:330px}.dashboard-card{width:290px}.float-one{left:0;top:55px}.float-two{right:0;bottom:35px}
    .stats-grid{grid-template-columns:1fr 1fr;gap:0}.stats-grid>div{padding:16px 0;border-right:0;border-bottom:1px solid #30343d!important}.stats-grid>div:nth-last-child(-n+2){border-bottom:0!important}
    .section,.dark-section{padding:75px 0}
    .software-card{padding:27px}.software-card h3{font-size:24px}
    .solutions-grid{grid-template-columns:1fr}.solution{border-right:0;border-bottom:1px solid #30343d;padding:25px 0;margin:0}.solution:last-child{border-bottom:0}
    .about-grid{gap:35px}.about .large{font-size:20px}
    .coming{padding:75px 0}.coming-inner{flex-direction:column}.coming-badge{width:165px;height:165px}.coming-badge strong{font-size:25px}
    .contact{padding:75px 0}.contact-inner{grid-template-columns:1fr}.contact-box{padding:16px}
    .footer-inner{flex-direction:column;align-items:flex-start}
}