*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
html,body{ margin:0; padding:0; }
body{ font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, Helvetica, sans-serif; font-size:16px; line-height:1.6; color:#2b3a4a; background:#fff; }
a{ color:#1e88e5; text-decoration:none; }
img{ max-width:100%; height:auto; display:block; }
.wrap{ max-width:1000px; margin:0 auto; padding:0 20px; }
h2{ font-size:28px; line-height:1.25; margin:0 0 10px; color:#0f2a44; text-align:center; }
h3{ margin:0 0 6px; font-size:17px; color:#0f2a44; }
.sub{ text-align:center; color:#5f6f7f; max-width:680px; margin:0 auto 32px; }
.center{ text-align:center; }
.center img{ margin:0 auto; }
.sec{ padding:64px 0; }
.sec.alt{ background:#f4f8fc; }
/* buttons */
.btn{ display:inline-block; padding:13px 26px; border-radius:8px; border:2px solid #1e88e5; color:#1e88e5; background:#fff; font-size:16px; font-weight:700; cursor:pointer; font-family:inherit; line-height:1.2; }
.btn:hover{ background:#1e88e5; color:#fff; }
.btn.primary{ background:#ff7a1a; border-color:#ff7a1a; color:#fff; }
.btn.primary:hover{ background:#e86a0f; border-color:#e86a0f; }
.btn.wa{ background:#25d366; border-color:#25d366; color:#fff; }
.btn.wa:hover{ background:#1fb857; border-color:#1fb857; }
.btn.ghost{ background:transparent; border-color:#fff; color:#fff; }
.btn.ghost:hover{ background:rgba(255,255,255,.15); }
.sec-cta{ text-align:center; margin-top:32px; }
.sec-cta .btn{ margin:6px; }
/* header */
.hdr{ position:sticky; top:0; z-index:50; background:#fff; border-bottom:1px solid #e6ebf0; }
.hdr .wrap{ display:flex; align-items:center; justify-content:space-between; height:64px; }
.logo img{ height:40px; width:auto; }
.nav a{ margin-left:20px; color:#2b3a4a; font-size:15px; font-weight:500; }
.nav a:hover{ color:#1e88e5; }
.nav a.btn{ padding:9px 18px; font-size:14px; }
.burger{ display:none; background:none; border:0; font-size:26px; color:#0f2a44; cursor:pointer; padding:0 4px; }
/* hero */
.hero{ background:#0f2a44; background:linear-gradient(135deg,#0f2a44 0%,#163d63 60%,#1e88e5 140%); color:#fff; padding:72px 0 0; }
.hero .wrap{ display:grid; grid-template-columns:1.1fr 1fr; gap:40px; align-items:center; }
.hero h1{ font-size:40px; line-height:1.15; margin:0 0 16px; color:#fff; }
.hero h1 span{ color:#7cc4ff; }
.hero p.lead{ font-size:18px; color:#d6e6f5; margin:0 0 26px; }
.hero .btn{ margin:0 8px 10px 0; }
.hero .small{ font-size:14px; color:#a9c4dd; margin-top:6px; }
.hero .img{ border-radius:12px; overflow:hidden; box-shadow:0 20px 50px rgba(0,0,0,.35); background:#fff; }
.trust{ margin-top:56px; background:rgba(255,255,255,.08); border-top:1px solid rgba(255,255,255,.15); }
.trust .wrap{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding:22px 20px; text-align:center; }
.trust b{ display:block; font-size:26px; color:#fff; }
.trust span{ font-size:14px; color:#a9c4dd; }
/* pain points */
.pain{ max-width:640px; margin:0 auto; }
.pain li{ list-style:none; display:flex; gap:12px; align-items:flex-start; padding:12px 16px; margin:0 0 10px; background:#fff; border:1px solid #e6ebf0; border-radius:8px; font-size:16px; }
.pain ul{ padding:0; margin:0 0 24px; }
.pain .x{ color:#e0453a; font-weight:700; flex:0 0 auto; }
.solution{ background:#0f2a44; color:#fff; border-radius:10px; padding:22px 26px; text-align:center; font-size:18px; }
.solution b{ color:#7cc4ff; }
/* cards */
.grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.grid.two{ grid-template-columns:repeat(2,1fr); max-width:760px; margin:0 auto; }
.card{ background:#fff; border:1px solid #e6ebf0; border-radius:12px; padding:24px; }
.card .ic{ width:46px; height:46px; border-radius:10px; background:#e8f2fc; color:#1e88e5; display:flex; align-items:center; justify-content:center; font-size:22px; margin-bottom:14px; }
.card p{ margin:0; font-size:15px; color:#5a6a7a; }
.card .feat{ font-size:12px; color:#8a9aaa; text-transform:uppercase; letter-spacing:.5px; margin-bottom:4px; }
/* steps */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-bottom:36px; }
.step{ text-align:center; padding:0 10px; }
.step .n{ width:48px; height:48px; border-radius:50%; background:#1e88e5; color:#fff; font-weight:700; font-size:20px; display:flex; align-items:center; justify-content:center; margin:0 auto 12px; }
.step p{ margin:0; color:#5a6a7a; font-size:15px; }
/* demo */
.video{ position:relative; max-width:760px; margin:0 auto; padding-top:56.25%; }
@media (min-width:800px){ .video{ padding-top:428px; } }
.video iframe{ position:absolute; top:0; left:0; width:100%; height:100%; border:0; border-radius:12px; box-shadow:0 12px 40px rgba(15,42,68,.18); }
/* segments */
.seg{ background:#fff; border:1px solid #e6ebf0; border-radius:12px; padding:24px; }
.seg .em{ font-size:30px; margin-bottom:8px; }
.seg ul{ margin:8px 0 0; padding-left:18px; color:#5a6a7a; font-size:15px; }
.seg li{ margin:4px 0; }
/* pricing */
.price{ background:#fff; border:2px solid #e6ebf0; border-radius:14px; padding:28px; position:relative; }
.price.hi{ border-color:#1e88e5; }
.price .tag{ position:absolute; top:-13px; left:24px; background:#1e88e5; color:#fff; font-size:12px; font-weight:700; padding:4px 12px; border-radius:999px; text-transform:uppercase; letter-spacing:.5px; }
.price .amt{ font-size:28px; font-weight:800; color:#0f2a44; margin:8px 0 2px; }
.price .per{ font-size:14px; color:#7a8a9a; margin-bottom:16px; }
.price ul{ margin:0 0 20px; padding:0; }
.price li{ list-style:none; padding:6px 0 6px 26px; position:relative; font-size:15px; color:#3d4d5d; border-top:1px solid #f0f3f6; }
.price li:before{ content:"\2714"; position:absolute; left:0; color:#25a55b; font-weight:700; }
.price .btn{ width:100%; text-align:center; }
.price-note{ text-align:center; font-size:14px; color:#7a8a9a; margin-top:20px; }
/* testimonials */
.testi .card{ display:flex; flex-direction:column; }
.testi .stars{ color:#f5b301; letter-spacing:2px; margin-bottom:10px; }
.testi .isi{ flex:1; font-style:italic; color:#3d4d5d; margin:0 0 16px; }
.testi .who b{ display:block; color:#0f2a44; font-style:normal; }
.testi .who span{ font-size:13px; color:#7a8a9a; }
/* faq */
.faq{ max-width:760px; margin:0 auto; }
.faq .q{ border:1px solid #e6ebf0; border-radius:10px; margin-bottom:10px; background:#fff; overflow:hidden; }
.faq .q h4{ margin:0; padding:16px 48px 16px 20px; font-size:16px; color:#0f2a44; cursor:pointer; position:relative; }
.faq .q h4:after{ content:"+"; position:absolute; right:20px; top:12px; font-size:22px; color:#1e88e5; }
.faq .q.open h4:after{ content:"\2212"; }
.faq .a{ display:none; padding:0 20px 16px; color:#5a6a7a; font-size:15px; }
/* final cta */
.cta{ background:#0f2a44; background:linear-gradient(135deg,#0f2a44,#1e88e5); color:#fff; text-align:center; padding:72px 0; }
.cta h2{ color:#fff; font-size:32px; }
.cta p{ color:#d6e6f5; max-width:600px; margin:0 auto 28px; font-size:17px; }
.cta .btn{ margin:6px; }
/* note */
.note{ background:#fff8e6; border:1px solid #f3e2b0; border-radius:10px; padding:18px 22px; max-width:760px; margin:0 auto; color:#5a4a1e; font-size:15px; }
.note b{ color:#0f2a44; }
/* footer */
.site-footer{ background:#0a1d30; color:#9fb3c6; padding:32px 0; font-size:14px; text-align:center; }
.site-footer a{ color:#fff; margin:0 8px; }
.site-footer .st{ opacity:.6; cursor:pointer; }
/* floating WA */
.wa-float{ position:fixed; right:18px; bottom:18px; z-index:60; display:flex; align-items:center; gap:10px; background:#25d366; color:#fff; font-weight:700; padding:12px 18px 12px 14px; border-radius:999px; box-shadow:0 8px 24px rgba(0,0,0,.25); }
.wa-float:hover{ background:#1fb857; }
.wa-float svg{ width:24px; height:24px; fill:#fff; }
/* modal */
#ol{ display:none; position:fixed; z-index:100; left:0; top:0; width:100%; height:100%; background:rgba(10,29,48,.6); }
#ol .box{ background:#fff; width:92%; max-width:720px; max-height:88vh; margin:6vh auto 0; border-radius:12px; overflow:auto; box-shadow:0 20px 50px rgba(0,0,0,.35); }
#ol .bar{ display:flex; justify-content:space-between; align-items:center; padding:12px 18px; border-bottom:1px solid #e6ebf0; position:sticky; top:0; background:#fff; }
#ol .bar b{ color:#0f2a44; }
#bc{ background:none; border:0; font-size:24px; color:#6a7a8a; cursor:pointer; padding:0 4px; }
#ol2{ padding:18px; text-align:left; }
#ol2 input{ height:36px; padding:0 10px; border:1px solid #cfd8e0; border-radius:6px; font:inherit; }
#ol2 input[type="submit"]{ background:#1e88e5; color:#fff; border-color:#1e88e5; cursor:pointer; padding:0 18px; font-weight:700; }
@media (max-width:820px){
.hero .wrap{ grid-template-columns:1fr; text-align:center; }
.hero .img{ max-width:520px; margin:0 auto; }
.grid, .steps{ grid-template-columns:1fr 1fr; }
}
@media (max-width:640px){
.burger{ display:block; }
.nav{ display:none; position:absolute; top:64px; left:0; right:0; background:#fff; border-bottom:1px solid #e6ebf0; padding:8px 20px 16px; }
.nav.open{ display:block; }
.nav a{ display:block; margin:0; padding:10px 0; border-bottom:1px solid #f0f3f6; }
.nav a.btn{ margin-top:12px; text-align:center; }
.hero{ padding-top:44px; }
.hero h1{ font-size:30px; }
.hero p.lead{ font-size:16px; }
.hero .btn{ display:block; margin:0 0 10px; }
.trust .wrap{ grid-template-columns:1fr; gap:10px; }
.trust b{ font-size:22px; }
.sec{ padding:44px 0; }
h2{ font-size:24px; }
.grid, .grid.two, .steps{ grid-template-columns:1fr; }
.cta h2{ font-size:26px; }
.wa-float span{ display:none; }
.wa-float{ padding:14px; }
}
/* WP */
.admin-bar .hdr{ top:32px; }
@media (max-width:782px){ .admin-bar .hdr{ top:46px; } .admin-bar .nav{ top:110px; } }
.screen-reader-text{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); }
.nav ul{ list-style:none; margin:0; padding:0; display:inline; }
.nav li{ display:inline; }
.nav .current-menu-item > a{ color:#1e88e5; }
@media (max-width:640px){ .nav ul, .nav li{ display:block; } }
/* inner pages */
.page-content{ padding:48px 0; max-width:760px; margin:0 auto; }
.page-content h1{ color:#0f2a44; font-size:32px; margin:0 0 16px; }
.page-content img{ border-radius:8px; }
.page-content .btn{ margin:4px 4px 4px 0; }