:root{
  --bg:#f2f4f6;
  --text:#0b1020;
  --muted:#5f6778;
  --line:#d9dfe8;
  --panel:#ffffff;
  --panel-soft:#eef2f6;
  --dark:#091a33;
  --green:#a7f16a;
  --green-ink:#1b2c08;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:"Manrope",sans-serif;background:var(--bg);color:var(--text);line-height:1.5}
a{color:inherit}
.container-wrap{width:min(1160px,92vw);margin:0 auto}

.top-strip{background:#06192b;color:#d8e5f8;font-size:.84rem}
.top-strip-inner{display:flex;justify-content:space-between;align-items:center;padding:.45rem 0}
.top-strip a{text-decoration:none;font-weight:700}

.nav-wrap{display:flex;justify-content:space-between;align-items:center;padding:14px 0;gap:12px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:"Outfit",sans-serif;font-weight:700;font-size:1.12rem}
.brand-dot{width:34px;height:34px;border-radius:10px;background:#0f203f;color:#d7e3fa;display:grid;place-items:center}
.nav-links{display:flex;gap:18px}
.nav-links a{text-decoration:none;color:#25324d;font-weight:600}
.nav-actions{display:flex;gap:10px}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:.62rem 1rem;border-radius:999px;border:1px solid transparent;text-decoration:none;font-weight:700;font-size:.9rem}
.btn.solid{background:#0f203f;color:#fff}
.btn.ghost{border-color:#cbd5e2;color:#19233a;background:#fff}

.section-space{padding:42px 0}
.section-soft{background:#e9edf2;border-top:1px solid #dce2eb;border-bottom:1px solid #dce2eb}

.hero{position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle at 20% 20%, rgba(167,241,106,.25) 0, transparent 35%), radial-gradient(circle at 80% 0%, rgba(13,32,63,.08) 0, transparent 32%);pointer-events:none}
.hero-grid{position:relative;display:grid;grid-template-columns:220px 1fr 220px;gap:22px;align-items:center}
.hero-copy{text-align:center;background:transparent;padding:10px 12px}
.eyebrow{font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:#4a5a77}
h1,h2,h3,h4,h5{font-family:"Outfit",sans-serif;line-height:1.2;margin:.45rem 0}
h1{font-size:clamp(2rem,4.5vw,3.35rem);font-weight:700}
h2{font-size:clamp(1.5rem,3.3vw,2.4rem)}
.hero-copy p{max-width:58ch;margin:.6rem auto;color:var(--muted)}
.hl{background:var(--green);padding:0 .2em;color:var(--green-ink)}
.hero-cta{display:flex;gap:10px;justify-content:center;margin-top:14px;flex-wrap:wrap}
.meta-row{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin-top:14px;color:#374766;font-size:.88rem}
.meta-row i{color:#3b7f10}

.floating-card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px;box-shadow:0 10px 24px rgba(22,39,68,.08)}
.floating-card .label{font-size:.75rem;color:#6a7489;margin:0}
.floating-card h4{margin:.25rem 0 .6rem}
.spark{height:38px;border-radius:8px;background:linear-gradient(180deg,#eef4fb 0,#fff 100%);position:relative;overflow:hidden}
.spark::after{content:"";position:absolute;inset:0;background:linear-gradient(135deg, transparent 0%, transparent 45%, #96ea5e 46%, #6dbd3f 58%, transparent 59%, transparent 100%)}

.logo-strip{padding:12px 0;border-top:1px solid #dbe2ec;border-bottom:1px solid #dbe2ec;background:#f7f9fc}
.logos{display:flex;gap:18px;justify-content:space-between;flex-wrap:wrap;color:#4e5870;font-weight:700}
.logos span:first-child{color:#7a8396;font-weight:600}

.split{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:center}
.split.reverse > :first-child{order:2}
.split p{color:var(--muted)}
.ticks{list-style:none;padding:0;margin:12px 0 0}
.ticks li{padding:.35rem 0}
.ticks li::before{content:"\2713";color:#3d8d0f;font-weight:800;margin-right:.55rem}
.media-card{border:1px solid var(--line);border-radius:18px;background:#fff;overflow:hidden;min-height:280px}
.media-card.tall{min-height:350px}
.mock-img{height:100%;min-height:inherit;background:
  linear-gradient(135deg, rgba(9,26,51,.09), rgba(9,26,51,.02)),
  radial-gradient(circle at 20% 20%, rgba(167,241,106,.5), transparent 30%),
  radial-gradient(circle at 80% 80%, rgba(9,26,51,.15), transparent 40%),
  #f1f4f8;
  display:grid;place-items:center;color:#2e3a52;font-family:"Outfit",sans-serif;font-size:1.1rem}

.mini-stack{display:grid;gap:8px;margin-top:14px}
.mini-stack div{display:flex;justify-content:space-between;gap:10px;padding:10px 12px;background:#fff;border:1px solid var(--line);border-radius:10px}
.mini-stack strong{font-size:.95rem}
.mini-stack span{font-size:.85rem;color:#5f6778}

.accordion{display:grid;gap:9px;margin-top:10px}
.acc-item{background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.acc-toggle{all:unset;cursor:pointer;font-weight:700;display:block;width:100%}
.acc-item p{margin:.45rem 0 0;display:none}
.acc-item.open p{display:block}

.center{text-align:center}
.review-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:12px;margin-top:14px}
.review-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px}
.review-card.large{grid-row:span 2;display:grid;grid-template-rows:170px auto;gap:8px}
.thumb{background:linear-gradient(135deg,#d9e1ec,#f4f7fb);height:88px;border-radius:8px}
.review-card.large .thumb{height:170px}
.review-card p{margin:.3rem 0;color:#5c6578;font-size:.92rem}

.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:12px}
.feature-grid article{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px}
.feature-grid i{font-size:1.25rem;color:#3f8611}
.feature-grid p{margin:.3rem 0 0;color:#5d6679}

.integration-banner{background:#f6f9ff;border:1px solid #d9e1ee;border-radius:16px;padding:18px;display:grid;grid-template-columns:1.2fr .8fr;gap:10px;align-items:center}
.integration-banner p{color:#5f687c}
.icon-ring{display:grid;grid-template-columns:repeat(3,58px);gap:12px;justify-content:center}
.icon-ring span{width:58px;height:58px;border-radius:999px;background:#fff;border:1px solid #d5dcea;display:grid;place-items:center;color:#2f3a55}

.plan-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}
.plan-card{position:relative;background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px}
.plan-card.focus{border-color:#7ec43f;box-shadow:0 10px 25px rgba(80,132,41,.15)}
.badge{position:absolute;right:14px;top:-10px;background:#94e457;color:#122902;font-size:.74rem;padding:.2rem .5rem;border-radius:999px;font-weight:800}
.amt{font-size:1.8rem;font-family:"Outfit",sans-serif;margin:.45rem 0 .7rem}
.amt small{font-size:.85rem;color:#6a7388}
.plan-card ul{margin:0 0 12px;padding-left:18px;color:#556078}

.faq-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}
.faq-grid article{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px}
.faq-grid p{margin:.45rem 0 0;color:#5d667b}

.footer{background:#071329;color:#d9e4f8;margin-top:34px;padding:30px 0}
.footer-grid{display:grid;grid-template-columns:1.3fr .8fr .8fr 1.1fr;gap:14px}
.footer p{color:#9eb1d3}
.footer h5{margin:0 0 .5rem}
.footer a{display:block;text-decoration:none;color:#d5e0f4;margin:.3rem 0}
.newsletter div{display:flex;background:#0f1f3f;border:1px solid #25385f;border-radius:999px;padding:4px}
.newsletter input{flex:1;border:0;outline:none;background:transparent;color:#fff;padding:.45rem .65rem}
.newsletter button{border:0;background:#9ae85e;color:#132902;border-radius:999px;padding:.42rem .8rem;font-weight:800}

.reveal{opacity:0;transform:translateY(22px);transition:all .55s ease}
.reveal.in{opacity:1;transform:translateY(0)}

@media (max-width: 1060px){
  .hero-grid{grid-template-columns:1fr}
  .left-card,.right-card{display:none}
  .nav-links{display:none}
  .split,.integration-banner{grid-template-columns:1fr}
  .feature-grid,.faq-grid,.plan-grid{grid-template-columns:1fr 1fr}
  .review-grid{grid-template-columns:1fr 1fr}
  .review-card.large{grid-column:1 / -1}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width: 680px){
  .top-strip-inner{flex-direction:column;gap:4px;align-items:flex-start}
  .nav-wrap{flex-wrap:wrap}
  .nav-actions{width:100%}
  .nav-actions .btn{flex:1}
  .feature-grid,.faq-grid,.plan-grid,.review-grid,.footer-grid{grid-template-columns:1fr}
  .section-space{padding:30px 0}
}