:root{
  --mo-bg:#f7fafc; --mo-card:#fff; --mo-text:#0f172a; --mo-muted:#5b6474;
  --mo-pri:#2b6cff; --mo-pri-ink:#214fcc; --mo-line:#e6e9ef;
  --mo-shadow:0 8px 28px rgba(15,23,42,.08); --mo-radius:16px;
  --glow:rgba(43,108,255,.14);
}
*{box-sizing:border-box}
.mo-page{color:var(--mo-text)}
.mo-container{max-width:1120px;margin:0 auto;padding:0 20px}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:10px;padding:12px 18px;border-radius:999px;border:1px solid transparent;text-decoration:none;font-weight:600}
.btn.primary{background:var(--mo-pri);color:#fff}
.btn.primary:hover{background:var(--mo-pri-ink)}
.btn.ghost{background:transparent;border-color:var(--mo-line);color:var(--mo-text)}
.btn.small{padding:10px 14px;font-size:14px}

.mo-pill{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:999px;background:rgba(43,108,255,0.12);color:var(--mo-pri);font-weight:700;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase}
.mo-section-head{display:grid;gap:12px;text-align:center;max-width:720px;margin:0 auto 36px}
.mo-section-head h2{margin:0}
.mo-section-head .mo-lead{margin:0;color:var(--mo-muted)}
.mo-center{text-align:center;margin-top:28px}

/* HERO */
.mo-hero{padding:72px 0}
.mo-hero .mo-container{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:center}
.mo-kicker{color:var(--mo-pri);font-weight:800;margin:0 0 8px; margin-bottom: 10px;}
.mo-hero h1{font-size:42px;line-height:1.15;margin:0 0 12px;color:var(--mo-text)}
.mo-sub{color:var(--mo-muted);font-size:18px;margin:0 0 20px}
.mo-cta-row{display:flex;gap:12px;flex-wrap:wrap}
.mo-trust{display:flex;gap:16px;list-style:none;padding:0;margin:14px 0 0;color:var(--mo-muted);font-size:14px}
.mo-hero__media{display:grid;gap:16px}
.mo-hero__media .mo-screen-card{background:var(--mo-card);border:1px solid var(--mo-line);border-radius:20px;box-shadow:var(--mo-shadow);overflow:hidden}
.mo-screen-head{display:flex;gap:6px;padding:10px 12px;border-bottom:1px solid var(--mo-line)}
.mo-screen-head span{width:10px;height:10px;border-radius:50%;background:#e2e8f0}
.mo-screen-body{padding:16px}
.mo-screen-body img{width:100%;display:block;border-radius:8px}
.mo-hero-note{background:var(--mo-card);border:1px solid var(--mo-line);border-radius:16px;padding:16px;color:var(--mo-muted);box-shadow:var(--mo-shadow);font-size:.92rem}

/* Badges */
.mo-badges{padding:24px 0}
.mo-badges p{text-align:center;color:var(--mo-muted);margin:0 0 14px}
.mo-badge-row{display:flex;gap:28px;justify-content:center;flex-wrap:wrap;opacity:.85}
.mo-badge-row img{height:28px}

/* Explainer */
.mo-explainer{padding:64px 0;border-top:1px solid var(--mo-line)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.mo-explainer__media img{width:100%;border-radius:14px;border:1px solid var(--mo-line);box-shadow:var(--mo-shadow)}
.mo-explainer__text h2{margin:0 0 10px}
.mo-explainer__text p{color:var(--mo-muted)}
.mo-checks{margin:14px 0 18px;padding-left:18px}
.mo-checks li{margin:6px 0}

/* Generic grid helpers */
.mo-grid{display:grid;gap:18px}
.mo-grid--feature{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:26px;margin-top:8px}

/* Feature cards */
 .mo-card{background:var(--mo-card);border:1px solid var(--mo-line);border-radius:var(--mo-radius);padding:18px;box-shadow:var(--mo-shadow)}
.mo-card h3{margin:0 0 8px;font-size:18px}
.mo-card p{margin:0;color:var(--mo-muted)}

.mo-card--accent{position:relative;overflow:hidden;border:0;padding:28px 26px 34px;border-radius:22px;background:var(--mo-card-bg, rgba(255,255,255,0.94));color:var(--mo-card-text, var(--mo-text));box-shadow:0 24px 60px rgba(15,23,42,0.14);isolation:isolate;min-height:190px}
.mo-card--accent h3{margin:0 0 10px;font-size:1.1rem;color:inherit}
.mo-card--accent p{color:rgba(17,24,39,0.72);line-height:1.55}
.mo-card__body{position:relative;display:grid;gap:10px}
.mo-card__halo{position:absolute;inset:auto -40px -60px;min-width:220px;height:200px;background:radial-gradient(closest-side,var(--mo-card-glow,rgba(43,108,255,0.32)),transparent 68%);opacity:.85;pointer-events:none;z-index:0}
.mo-card__icon{position:absolute;top:-24px;right:22px;display:grid;place-items:center;width:64px;height:64px;border-radius:22px;background:var(--mo-card-accent-soft,rgba(43,108,255,0.18));color:var(--mo-card-accent,#2b6cff);font-weight:700;font-size:1.08rem;box-shadow:0 18px 44px rgba(15,23,42,0.16);z-index:1}
.mo-card--accent::after{content:"";position:absolute;inset:0 0 auto;margin:0 22px;height:1px;background:linear-gradient(90deg,rgba(255,255,255,0.6),rgba(255,255,255,0));opacity:.5}

.mo-card--sky{--mo-card-accent:#4a6dff;--mo-card-accent-soft:rgba(74,109,255,0.16);--mo-card-bg:linear-gradient(140deg,rgba(74,109,255,0.24),rgba(74,109,255,0.06));--mo-card-glow:rgba(74,109,255,0.4)}
.mo-card--mint{--mo-card-accent:#0fba81;--mo-card-accent-soft:rgba(15,186,129,0.2);--mo-card-bg:linear-gradient(140deg,rgba(15,186,129,0.22),rgba(15,186,129,0.05));--mo-card-glow:rgba(15,186,129,0.36)}
.mo-card--iris{--mo-card-accent:#7c3aed;--mo-card-accent-soft:rgba(124,58,237,0.18);--mo-card-bg:linear-gradient(140deg,rgba(124,58,237,0.24),rgba(124,58,237,0.07));--mo-card-glow:rgba(124,58,237,0.38)}
.mo-card--peach{--mo-card-accent:#f97316;--mo-card-accent-soft:rgba(249,115,22,0.22);--mo-card-bg:linear-gradient(140deg,rgba(249,115,22,0.22),rgba(249,115,22,0.06));--mo-card-glow:rgba(249,115,22,0.34)}
.mo-card--slate{--mo-card-accent:#1f2937;--mo-card-accent-soft:rgba(31,41,55,0.18);--mo-card-bg:linear-gradient(140deg,rgba(31,41,55,0.18),rgba(31,41,55,0.05));--mo-card-glow:rgba(31,41,55,0.3);--mo-card-text:#0f172a}
.mo-card--violet{--mo-card-accent:#6366f1;--mo-card-accent-soft:rgba(99,102,241,0.2);--mo-card-bg:linear-gradient(140deg,rgba(99,102,241,0.24),rgba(99,102,241,0.06));--mo-card-glow:rgba(99,102,241,0.38)}
.mo-card--sand{--mo-card-accent:#d97706;--mo-card-accent-soft:rgba(217,119,6,0.2);--mo-card-bg:linear-gradient(140deg,rgba(217,119,6,0.22),rgba(217,119,6,0.06));--mo-card-glow:rgba(217,119,6,0.34)}
.mo-card--teal{--mo-card-accent:#0ea5e9;--mo-card-accent-soft:rgba(14,165,233,0.2);--mo-card-bg:linear-gradient(140deg,rgba(14,165,233,0.24),rgba(14,165,233,0.06));--mo-card-glow:rgba(14,165,233,0.38)}
.mo-card--rose{--mo-card-accent:#f43f5e;--mo-card-accent-soft:rgba(244,63,94,0.2);--mo-card-bg:linear-gradient(140deg,rgba(244,63,94,0.24),rgba(244,63,94,0.06));--mo-card-glow:rgba(244,63,94,0.38)} 

/* Grid polish */
.mo-grid--feature{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}

/* Base reveal states */
.fx-reveal, .fx-stagger > *{
  opacity:0; transform:translateY(18px) scale(.98); filter:blur(6px);
  transition:opacity .7s cubic-bezier(.2,.65,.2,1),
             transform .7s cubic-bezier(.2,.65,.2,1),
             filter .7s cubic-bezier(.2,.65,.2,1);
  will-change:transform,opacity,filter;
}
.fx-reveal.is-inview, .fx-stagger.is-inview > *{opacity:1;transform:none;filter:blur(0)}
.fx-stagger.is-inview > *{transition-delay:calc(var(--i,0)*90ms)}
.fx-heading{position:relative}
.fx-heading h2{transform:translateY(.6em);opacity:0;transition:transform .7s ease,opacity .7s ease}
.fx-heading.is-inview h2{transform:none;opacity:1}

/* --- Card glam --- */
.mo-card--accent{
  position:relative; overflow:hidden; border:0; padding:28px 26px 34px;
  border-radius:22px; background:var(--mo-card-bg,rgba(255,255,255,.94));
  color:var(--mo-card-text,var(--mo-text)); box-shadow:0 24px 60px rgba(15,23,42,.12);
  transform-style:preserve-3d; transition:transform .25s ease, box-shadow .25s ease;
}
.mo-card--accent:hover{
  box-shadow:0 28px 70px rgba(15,23,42,.16);
}

/* animated gradient border */
.mo-card--accent::before{
  content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1px;
  background:conic-gradient(from 180deg, var(--mo-card-accent,#2b6cff),
    rgba(255,255,255,0) 20%, var(--mo-card-accent,#2b6cff) 40%, rgba(255,255,255,0) 60%, var(--mo-card-accent,#2b6cff) 80%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; animation:borderShift 6s linear infinite;
  opacity:.35; pointer-events:none;
}
@keyframes borderShift{to{transform:rotate(360deg)}}

/* floating orb behind content */
.mo-card__orb{
  position:absolute; width:220px; height:220px; border-radius:50%;
  background:radial-gradient(closest-side, var(--mo-card-glow, rgba(43,108,255,.32)), transparent 70%);
  right:-60px; bottom:-80px; filter:blur(2px); animation:floaty 8s ease-in-out infinite;
}
@keyframes floaty{
  0%,100%{transform:translate3d(0,0,0)}
  50%{transform:translate3d(-12px,-10px,0)}
}

/* cursor-follow sheen */
.mo-card__shine{
  position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(200px 200px at var(--mx,50%) var(--my,50%),
             rgba(255,255,255,.22), transparent 60%);
  mix-blend-mode:soft-light; opacity:.0; transition:opacity .25s ease;
}
.mo-card--accent:hover .mo-card__shine{opacity:.9}

/* number badge entrance */
.mo-card__icon{transform:translateY(-8px); opacity:0; transition:transform .5s ease .2s, opacity .5s ease .2s}
.fx-reveal.is-inview .mo-card__icon{transform:none; opacity:1}

/* links with animated underline */
.text-link{
  position:relative; display:inline-block; font-weight:700; color:var(--mo-card-accent,#2b6cff); text-decoration:none;
}
.text-link::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px;
  background:linear-gradient(90deg, var(--mo-card-accent,#2b6cff), transparent);
  transform:scaleX(0); transform-origin:left; transition:transform .35s ease;
}
.text-link:hover::after{transform:scaleX(1)}

/* mini action cards hover */
.mo-cta-card{transition:transform .25s ease, box-shadow .25s ease}
.mo-cta-card:hover{transform:translateY(-4px); box-shadow:0 18px 44px rgba(15,23,42,.12)}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .fx-reveal, .fx-stagger > *{transition:none; transform:none !important; filter:none; opacity:1}
  .mo-card--accent::before{animation:none}
  .mo-card__orb{animation:none}
}




/* How it works timeline */
.mo-how{padding:64px 0}
.mo-how h2{text-align:center;margin:0 0 8px}
.mo-lead{text-align:center;color:var(--mo-muted);max-width:760px;margin:0 auto 22px}
.mo-steps--timeline{list-style:none;padding:0;margin:0 auto;max-width:840px;display:grid;gap:22px}
.mo-step{position:relative;display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:flex-start;padding:26px 26px;border-radius:22px;background:var(--mo-card);border:1px solid rgba(43,56,86,0.08);box-shadow:0 22px 52px rgba(15,23,42,0.12);overflow:hidden}
.mo-step__marker{position:relative;justify-self:flex-start;width:56px;height:56px;border-radius:20px;background:linear-gradient(135deg,rgba(43,108,255,0.16),rgba(43,108,255,0.04));display:grid;place-items:center;font-weight:700;color:var(--mo-pri);font-size:1.05rem;box-shadow:0 18px 40px rgba(43,108,255,0.18);z-index:1}
.mo-step__marker span{background:#fff;border-radius:14px;padding:6px 14px;display:inline-flex;align-items:center;justify-content:center;min-width:40px}
.mo-step__marker::after{content:"";position:absolute;left:50%;top:56px;bottom:-42px;width:2px;background:linear-gradient(180deg,rgba(43,108,255,0.2),rgba(43,108,255,0));transform:translateX(-50%)}
.mo-step:last-child .mo-step__marker::after{display:none}
.mo-step__body{display:grid;gap:8px}
.mo-step__body h3{margin:0;font-size:1.05rem}
.mo-step__body p{margin:0;color:var(--mo-muted);line-height:1.58}

/* Integrations */
.mo-integrations{padding:64px 0;background:linear-gradient(180deg,#fff,#f7faff)}
.mo-grid--integrations{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin-bottom:24px}
.mo-integration-card{background:var(--mo-card);border:1px solid var(--mo-line);border-radius:16px;padding:18px;box-shadow:var(--mo-shadow);display:grid;gap:10px}
.mo-integration-card ul{margin:0;padding-left:18px;color:var(--mo-muted);display:grid;gap:8px}
.mo-logo-list{display:flex;flex-wrap:wrap;gap:10px;padding-left:0;margin:12px 0 0}
.mo-logo-list li{list-style:none;background:#f1f5f9;border:1px solid #e2e8f0;border-radius:999px;padding:6px 10px;font-size:13px}

/* Config */
.mo-config{padding:64px 0}
.mo-config-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.mo-config-card{background:var(--mo-card);border:1px solid var(--mo-line);border-radius:16px;padding:18px;box-shadow:var(--mo-shadow)}
.mo-control{margin:10px 0}
.mo-control label{display:block;font-weight:600;margin-bottom:6px}
.mo-control input[type="range"]{width:100%}
.mo-out{font-size:14px;color:var(--mo-muted)}
.mo-ticks{list-style:none;margin:0;padding:0}
.mo-ticks li{display:flex;align-items:center;gap:8px;margin:8px 0}
.mo-muted{color:var(--mo-muted);font-size:13px}

/* FAQ */
.mo-faq{padding:64px 0;background:var(--mo-bg)}
.mo-accordion{display:grid;gap:12px}
.mo-acc-item{border:1px solid var(--mo-line);background:#fff;border-radius:12px;margin:0;overflow:hidden;box-shadow:var(--mo-shadow)}
.mo-acc-head{width:100%;text-align:left;padding:14px 16px;background:#fff;font:inherit;font-weight:600;cursor:pointer;border:0;display:flex;align-items:center;gap:12px;color:var(--mo-text)}
.mo-acc-num{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:rgba(43,108,255,0.12);color:var(--mo-pri);font-weight:700}
.mo-acc-plus{margin-left:auto;font-size:1.2rem;color:var(--mo-muted);transition:transform .2s ease}
.mo-acc-body{display:none;padding:0 16px 14px;color:var(--mo-muted);border-top:1px solid var(--mo-line)}
.mo-acc-item.active .mo-acc-body{display:block}
.mo-acc-item.active .mo-acc-plus{transform:rotate(45deg)}

/* Rating */
.mo-rating{padding:56px 0}
.rating-wrap{display:grid;justify-items:center;text-align:center;gap:10px}
.mo-score{font-size:44px;font-weight:800;color:#111;background:#f8fafc;border:1px solid var(--mo-line);border-radius:14px;padding:10px 16px}
.mo-score span{font-size:.55em;color:var(--mo-muted)}

/* CTA */
.mo-cta{padding:80px 0;background:linear-gradient(180deg,#f7faff 0%,#eef2ff 100%)}
.mo-cta__wrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:28px;align-items:center}
.mo-cta__copy h2{margin:0 0 12px}
.mo-cta__actions{display:flex;gap:14px;flex-wrap:wrap;justify-content:flex-end}

/* Responsive */
@media (max-width:980px){
  .mo-hero .mo-container,
  .split{grid-template-columns:1fr}
  .mo-grid--feature{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
  .mo-cta__wrap{grid-template-columns:1fr;text-align:center}
  .mo-cta__actions{justify-content:center}
}
@media (max-width:720px){
  .mo-grid--feature{grid-template-columns:1fr}
  .mo-card__icon{width:54px;height:54px;top:-20px;right:18px;font-size:1rem}
  .mo-step{grid-template-columns:1fr;padding:24px 22px}
  .mo-step__marker{width:48px;height:48px;margin-bottom:6px}
  .mo-step__marker span{min-width:0;width:40px;padding:6px 0}
  .mo-step__marker::after{left:24px}
}
@media (max-width:620px){
  .mo-hero h1{font-size:34px}
}


.mo-quicklinks{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0 0}
.mo-quicklinks a{padding:8px 14px;border:1px solid #e3e9ff;border-radius:999px;background:#fff;font-weight:700;color:#2b3a7a;text-decoration:none}
.mo-quicklinks a:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(15,23,42,.08)}

.mo-cta-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-top:18px}
.mo-cta-card{display:flex;flex-direction:column;gap:4px;padding:16px;border:1px solid #e6e9ff;border-radius:14px;text-decoration:none;background:#fff}
.mo-cta-card strong{color:#111a3a}
.mo-cta-card span{color:#667099}
.mo-flow-cta .btn,.mo-faq-cta .btn{margin:6px}

 .hero-heading__accent{
  color:transparent;
  background:linear-gradient(120deg,#5b63ff 0%,#8a5dff 48%,#5ce7ff 100%);
  -webkit-background-clip:text;
  background-clip:text;
}

.parallax-section{
  position:relative;
  padding:92px 0;
  overflow:hidden;
  transform-style:preserve-3d;
}

.bubble-1{background:radial-gradient(circle at 30% 30%,rgba(108,99,255,.28),rgba(108,99,255,0) 70%);top:-120px;left:-120px;}
.bubble-2{background:radial-gradient(circle at 70% 30%,rgba(96,213,255,.24),rgba(96,213,255,0) 70%);top:-160px;right:-140px;}
.bubble-3{background:radial-gradient(circle at 40% 60%,rgba(255,154,218,.18),rgba(255,154,218,0) 70%);bottom:-160px;right:20%;}

.hero-gradient--one{
  width:540px;height:540px;
  top:-180px;left:-220px;
  background:radial-gradient(circle,#9ea6ff 0%,rgba(158,166,255,0) 70%);
}

.hero p {
    color: var(--muted);
    max-width: 720px;
    margin-bottom: 20px;
    max-width: 600px;
    color: #435078;
    font-size: 18px;
    line-height: 1.65;
    margin-top:20px;
}