:root{
    --navy:#202c61; --blue:#526bf4; --purple:#5b10f5; --teal:#00b8ae;
    --ink:#253044; --muted:#596273; --line:#c5dcff; --pale:#f1f6ff;
    --white:#fff; --shadow:0 3px 9px rgba(27,48,83,.10);
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{margin:0;color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;line-height:1.55;background:#fff}
  a{color:inherit;text-decoration:none}
  button{font:inherit}
  .container{width:min(1180px,calc(100% - 44px));margin:auto}
  .site-header{height:88px;display:flex;align-items:center;justify-content:space-between;gap:24px}
  .brand{font-size:27px;font-weight:800;color:var(--blue);letter-spacing:-1.2px}
  .brand-mark{display:inline-grid;place-items:center;width:30px;height:30px;margin-right:8px;border:5px solid var(--blue);border-bottom-color:transparent;border-radius:50%;transform:rotate(-35deg);vertical-align:-4px}
  .brand-markk{width: 50%;}
  .nav{display:flex;align-items:center;gap:34px;color:#30394b;font-weight:550}
  .menu-toggle{display:none;border:0;background:none;font-size:28px}
  .hero{position:relative;overflow:hidden;padding:66px 0 82px;background:linear-gradient(115deg,#fff 20%,#f3f8ff 65%,#d9efff)}
  .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:44px}
  .eyebrow{font-size:13px;letter-spacing:2px;text-transform:uppercase;color:var(--blue);font-weight:700}
  h1{font-size:clamp(46px,6.2vw,78px);line-height:1.04;letter-spacing:-3px;color:#1d285d;margin:16px 0 24px}
  .lead{font-size:20px;max-width:610px;color:#4d586a}
  .hero-art{height:390px;position:relative;display:grid;place-items:center}
  .orb{position:absolute;border-radius:50%;filter:drop-shadow(8px 14px 7px #1d2c5b33)}
  .orb.one{width:220px;height:220px;background:linear-gradient(145deg,#7189ff,#3854d8);left:4%;top:20%}
  .orb.two{width:160px;height:160px;background:linear-gradient(145deg,#a88bff,#4520c6);right:18%;top:5%}
  .orb.three{width:190px;height:190px;background:linear-gradient(145deg,#72e900,#21b65a);right:2%;bottom:5%;border-radius:35px}
  .ring{position:absolute;width:190px;height:190px;border:32px solid #e7e9ee;border-radius:50%;right:5%;top:14%;transform:rotate(-24deg)}
  .glass{position:relative;width:210px;height:240px;border:2px solid #b6f1d8;border-radius:24px;background:#ffffff55;backdrop-filter:blur(4px);box-shadow:0 12px 40px #243a7a22}
  .glass:before,.glass:after{content:"";position:absolute;width:12px;height:12px;border:2px solid #fff;border-radius:50%;top:12px}
  .glass:before{left:14px}.glass:after{right:14px}
  .hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}
  .btn{display:inline-flex;align-items:center;justify-content:center;padding:14px 22px;border-radius:12px;background:var(--purple);color:#fff;font-weight:700;border:0;cursor:pointer;box-shadow:var(--shadow)}
  .btn.secondary{background:#fff;color:var(--navy);border:1px solid #dce5f5}
  .section{padding:78px 0}
  .section-heading{font-size:clamp(28px,4vw,42px);text-align:center;margin:0 0 48px;color:#202b5e}
  .section-heading span{border-bottom:3px solid #263248;padding-bottom:6px}
  .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
  .choice{border:2px solid var(--line);border-radius:28px;padding:30px;background:#fff;box-shadow:var(--shadow);min-height:250px}
  .choice-icon{height:62px;width:62px;border-radius:18px;background:#e7edff;color:#7289ff;display:grid;place-items:center;font-size:28px}
  .choice hr{border:0;border-top:1px solid var(--line);margin:25px 0}
  .choice h3{font-size:27px;color:#303c79;margin:0 0 10px}
  .choice p{font-size:17px;color:#566174;margin:0}
  .partners{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;align-items:center;text-align:center;padding:52px 0;color:#929bbb;font-weight:800;font-size:23px}
  .partners span{padding:12px}
  .feature{border-radius:34px;padding:52px;background:linear-gradient(120deg,#f7f8fb,#dfe4ff);margin:26px 0;display:grid;grid-template-columns:.85fr 1.15fr;gap:36px;align-items:center;overflow:hidden}
  .feature.teal{background:linear-gradient(120deg,#f5fbfb,#58ddd2)}
  .feature.purple{background:linear-gradient(120deg,#f8f7ff,#d7d4ff)}
  .mock-phone{width:min(245px,100%);height:350px;border:12px solid #586b8b;border-radius:42px;background:#fff;margin:auto;padding:22px 14px;box-shadow:0 12px 24px #25345a22;display:flex;flex-direction:column;gap:12px}
  .phone-top{font-size:11px;text-align:center;font-weight:800}
  .phone-pill{height:36px;border-radius:10px;background:#f0f3f9;padding:8px;font-size:10px;color:#65718a}
  .phone-panel{flex:1;border-radius:16px;background:linear-gradient(160deg,#e4faff,#f7f8ff);display:grid;place-items:center;text-align:center;padding:12px;font-size:12px;color:#50617a}
  .feature-label{font-size:28px;font-weight:800;color:var(--blue);margin-bottom:12px}
  .feature h2{font-size:clamp(32px,4vw,52px);line-height:1.12;color:#2c376f;margin:0 0 18px;letter-spacing:-1.5px}
  .feature p{font-size:18px;color:#566174}
  .checks{list-style:none;padding:0;margin:22px 0;display:grid;gap:14px;color:#455064}
  .checks li:before{content:"✓";display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--blue);color:#fff;font-size:13px;font-weight:800;margin-right:12px}
  .developer{background:#303a78;color:#fff;padding:82px 0}
  .developer .section-heading{color:#fff;text-align:left}
  .dashboard{border:2px solid #7581b1;border-radius:28px;background:#151923;padding:28px;display:grid;grid-template-columns:180px 1fr;gap:20px;min-height:290px;box-shadow:0 15px 35px #11172f55}
  .dash-side{border-right:1px solid #333b4b;color:#aeb8d1;font-size:13px}
  .dash-side b{display:block;color:#fff;margin:8px 0 25px}
  .dash-main{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  .dash-box{background:#202632;border-radius:18px;padding:20px;color:#c7d0e2;font-size:13px}
  .dash-box strong{display:block;color:#fff;margin-bottom:12px}
  .articles{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
  .article{background:#eff5ff;border-radius:28px;padding:36px;box-shadow:var(--shadow);min-height:260px}
  .article time{color:#52618a;letter-spacing:1px}
  .article h3{font-size:27px;line-height:1.25;color:#202b5e;margin:22px 0}
  .article a{color:#3158dc;font-weight:700}
  footer{background:#151b2d;color:#d6dcec;padding:34px 0;margin-top:30px}
  .ticker{position:fixed;bottom:0;left:0;right:0;background:#171d30;color:#e5e9f3;padding:10px 18px;white-space:nowrap;overflow:hidden;font-size:14px;z-index:10}
  .ticker{padding:0;display:flex;overflow:hidden}
  .ticker-track{display:flex;align-items:center;gap:34px;width:max-content;padding:10px 18px;animation:ticker-scroll 28s linear infinite}
  .ticker-track span{flex:none}
  .ticker:hover .ticker-track{animation-play-state:paused}
  @keyframes ticker-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
  .up{color:#28c76f}.down{color:#ff5c63}
  @media(prefers-reduced-motion:reduce){.ticker-track{animation:none}}
  .demo-note{font-size:13px;color:#687386;margin-top:14px}
  @media(max-width:800px){
    .container{width:min(100% - 34px,620px)}
    .nav{display:none}.menu-toggle{display:block}
    .hero{padding:42px 0 55px}.hero-grid{grid-template-columns:1fr;gap:18px}
    .hero-art{height:290px;order:-1}.orb.one{width:170px;height:170px}.orb.two{width:125px;height:125px}
    .orb.three{width:145px;height:145px}.ring{width:145px;height:145px;border-width:24px}
    .glass{width:160px;height:190px}
    .cards{grid-template-columns:1fr}.choice{min-height:auto}
    .partners{grid-template-columns:repeat(2,1fr);font-size:18px;gap:12px}
    .feature{grid-template-columns:1fr;padding:30px;gap:28px}
    .mock-phone{height:300px}
    .articles{grid-template-columns:1fr}
    .dashboard{grid-template-columns:1fr}.dash-side{border:0;border-bottom:1px solid #333b4b;padding-bottom:14px}
    .dash-main{grid-template-columns:1fr}
    .section{padding:58px 0}
    h1{letter-spacing:-2px}
  }

.nav.show{display:flex;position:absolute;right:20px;top:72px;z-index:20;background:white;padding:20px;border-radius:14px;box-shadow:var(--shadow);flex-direction:column;gap:16px}

.choice {
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: transform 0.25s ease,
              box-shadow 0.25s ease;
}

.choice:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.12);
}

.wc-footer{
    font-family:”Lato”,”Helvetica Neue”,Arial,sans-serif;
    background:#fff;
    padding:48px 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width:520px;
    box-sizing:border-box;
    color:#1c1e2b;
}
.wc-footer *{
  box-sizing:border-box
}
.wc-footer h4{
  display: flex;
  justify-content: center;
  font-size:18px;
  font-weight:700;
  text-transform:uppercase;
  color:#7b808c;
  letter-spacing:.2px;
}
.wc-footer ul{list-style:none;margin:0 0 56px;padding:0}
.wc-footer li{margin-bottom:18px}
.wc-footer li a{
  color:#1c1e2b;
  text-decoration:none;
  font-size:20px;
}
.wc-footer li a:hover{color:#3a10e5}
.wc-footer .note{
  margin:0 0 20px;
  padding-left:6px;
  font-size:20px;
  line-height:1.45;
  color:#1c1e2b;
}
.wc-footer .note a{color:inherit;text-decoration:none}
.wc-footer form{display:flex;max-width:440px}
.wc-footer input{
  flex:1;
  min-width:0;
  height:58px;
  padding:0 24px;
  font:inherit;
  font-size:20px;
  border:2px solid #d9dadf;
  border-right:0;
  border-radius:12px 0 0 12px;
  outline:none;
}
.wc-footer input::placeholder{color:#a3a5b4}
.wc-footer input:focus{border-color:#3a10e5}
.wc-footer button{
  height:58px;
  padding:0 26px;
  font:inherit;
  font-size:20px;
  font-weight:700;
  color:#fff;
  background:#3a10e5;
  border:0;
  border-radius:0 12px 12px 0;
  cursor:pointer;
}
.wc-footer button:hover{background:#2f0cc0}
.wc-footer hr{
  border:0;
  border-top:1px solid #e4e5e9;
  margin:48px 0 28px;
}
.wc-footer .copy{
  display:flex;
  align-items:center;
  gap:12px;
  padding-left:24px;
  font-size:22px;
  color:#d5d9e0;
}
.wc-footer .social{
  display:flex;
  gap:28px;
  padding:44px 0 0 24px;
}
.wc-footer .social a{display:inline-flex;color:#d5d9e0}
.wc-footer .social a:hover{color:#3a10e5}
.wc-footer svg{width:36px;height:36px;fill:currentColor}