:root{
--navy:#101A3B;
--blue:#00A9EA;
--green:#20C765;
--slate:#75869B;
--light:#F4F7FB;
--ink:#14213E;
--white:#FFFFFF;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
margin:0;
background:white;
color:var(--ink);
font-family:"Segoe UI",Arial,sans-serif;
line-height:1.65;
}
a{text-decoration:none;color:inherit}
.container{width:min(1200px,92%);margin:auto}
.header{
background:var(--navy);
color:white;
position:sticky;
top:0;
z-index:20;
box-shadow:0 4px 25px #07152a24;
}
.nav{
min-height:80px;
display:flex;
align-items:center;
justify-content:space-between;
gap:25px;
}
.brand{
display:flex;
align-items:center;
gap:10px;
font-size:25px;
font-weight:800;
letter-spacing:-.8px;
}
.brand svg{width:46px;height:46px}
.brand span span{color:var(--green)}
.menu{display:flex;align-items:center;gap:25px;font-size:14px}
.menu a:hover{color:var(--green)}
.menu .nav-cta{
background:var(--green);
padding:10px 17px;
border-radius:7px;
color:var(--navy);
font-weight:800;
}
.hero{
background:
radial-gradient(circle at 90% 5%,#00a9ea29,transparent 40%),
linear-gradient(115deg,#08142f,#101a3b 75%);
color:white;
padding:86px 0 95px;
overflow:hidden;
}
.hero-grid{
display:grid;
grid-template-columns:.92fr 1.08fr;
align-items:center;
gap:55px;
}
.eyebrow{
font-size:12px;
font-weight:800;
letter-spacing:2px;
text-transform:uppercase;
color:var(--green);
}
.hero h1{
font-size:clamp(39px,4.5vw,65px);
letter-spacing:-2px;
line-height:1.12;
margin:20px 0;
}
.hero h1 span{color:var(--green)}
.hero p{color:#d2deef;font-size:18px;max-width:550px}
.buttons{display:flex;gap:12px;flex-wrap:wrap;margin:30px 0}
.button{
display:inline-block;
padding:14px 22px;
border-radius:8px;
font-size:14px;
font-weight:800;
text-align:center;
transition:transform .2s,background .2s;
}
.button:hover{transform:translateY(-2px)}
.button-green{background:var(--green);color:var(--navy)}
.button-outline{border:1px solid #7796ba;color:white}
.button-navy{background:var(--navy);color:white}
.button-white{background:white;color:var(--navy)}
.staging-form{display:grid;gap:12px;max-width:620px;margin:28px 0}.staging-form label{font-weight:700}.staging-form input:not([type=checkbox]){padding:12px;border:1px solid #cbd9e5;border-radius:7px;font:inherit}.staging-form input[type=checkbox]{margin-right:8px}.help-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:30px 0}.help-card{overflow:hidden}.help-card-image{display:block;margin:18px 0 0;background:#edf3f8;border:1px solid #d6e2ed;border-radius:8px;overflow:hidden}.help-card-image img{display:block;width:100%;height:150px;object-fit:cover;object-position:top}.help-screenshot{margin:26px 0 30px;background:#f7fafc;border:1px solid #d6e2ed;border-radius:10px;overflow:hidden}.help-screenshot img{display:block;width:100%;height:auto}.help-screenshot figcaption{padding:10px 12px;color:#61748b;font-size:12px}.help-capture{padding:16px;border-left:4px solid var(--green);background:#edf8f1;color:#315845}.legal{padding:60px 0 90px;max-width:900px}.legal h1{margin-top:12px}.legal h2{font-size:26px;margin-top:34px}.legal li{margin:9px 0}@media(max-width:800px){.help-grid{grid-template-columns:1fr}.menu{gap:10px;flex-wrap:wrap}.nav{padding:14px 0}.legal{padding-top:35px}}
.trust{
display:flex;
flex-wrap:wrap;
gap:15px;
color:#c6d7e9;
font-size:12px;
margin-top:20px;
}
.trust span:before{content:"\2713 ";color:var(--green)}
.hero-visual{
position:relative;
background:white;
border:7px solid #ffffff22;
border-radius:18px;
overflow:hidden;
box-shadow:0 30px 75px #0006;
}
.hero-visual img{display:block;width:100%;height:auto}
.hero-visual img[hidden]{display:none}
.visual-fallback{
background:linear-gradient(130deg,#f3f8fc,#dfeefa);
padding:40px;
color:var(--navy);
min-height:360px;
}
.visual-fallback h3{font-size:35px;line-height:1.2}
.fallback-line{height:13px;border-radius:8px;background:#bdd5e8;margin:19px 0}
.fallback-line.short{width:55%}
.hero-caption{
background:#101A3B;
color:#dceaf8;
padding:9px;
font-size:11px;
text-align:center;
}
section.section{padding:88px 0}
.kicker{
font-size:12px;
font-weight:800;
letter-spacing:1.7px;
text-transform:uppercase;
color:#087eaa;
}
h2{
font-size:clamp(30px,3.2vw,46px);
line-height:1.18;
letter-spacing:-1.1px;
margin:15px 0;
}
.lead{font-size:17px;color:#62748b;max-width:750px}
.soft{background:var(--light)}
.industry-grid{
display:grid;
grid-template-columns:repeat(5,1fr);
gap:13px;
margin-top:34px;
}
.industry{
background:white;
border:1px solid #dce7f0;
border-radius:12px;
padding:22px 15px;
text-align:center;
box-shadow:0 8px 25px #101a3b0d;
}
.industry-image{height:118px;border-radius:9px;margin:-8px -7px 17px;overflow:hidden;background:#edf3f8}
.industry-image img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.industry .glyph{
font-size:30px;
font-weight:800;
color:#0787bc;
display:block;
margin-bottom:11px;
}
.industry strong{font-size:14px;display:block;line-height:1.4}
.industry small{display:block;color:#73859a;margin-top:7px}
.feature-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:17px;
margin-top:35px;
}
.feature{
border:1px solid #dce7f0;
background:white;
border-radius:13px;
padding:26px;
}
.feature svg{width:32px;height:32px;stroke:#078fc4;fill:none;stroke-width:2}
.feature h3{font-size:18px;margin:18px 0 10px}
.feature p{font-size:14px;color:#60738b;margin:0}
.showcase-grid{
display:grid;
grid-template-columns:minmax(300px,.72fr) minmax(0,1.28fr);
gap:60px;
align-items:center;
}
.showcase-preview{
background:white;
border-radius:15px;
border:1px solid #d6e2ed;
overflow:hidden;
box-shadow:0 20px 55px #101a3b20;
}
.media-gallery{padding:12px}
.product-shot{margin:0;background:#f7fafc;border:1px solid #d6e2ed;border-radius:10px;overflow:hidden}
.product-shot img{display:block;width:100%;height:auto}
.product-shot figcaption{padding:9px 11px;color:#61748b;font-size:12px}
.product-shot-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
.finance-options-card{min-height:177px;background:#fff;color:var(--navy);padding:14px;border-radius:8px;text-align:left}
.finance-card-top{display:flex;justify-content:space-between;gap:8px;align-items:center;border-bottom:1px solid #dce7f0;padding-bottom:9px;font-size:11px}
.finance-card-top span{color:#20a95a;font-weight:800}.finance-card-top strong{font-size:12px}
.finance-select-label{margin-top:12px;font-size:10px;color:#60738b;font-weight:700}
.finance-select{margin-top:4px;border:2px solid #078fc4;border-radius:6px;padding:7px 9px;font-size:12px;font-weight:700;display:flex;justify-content:space-between}
.finance-options{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-top:7px;color:#274563;font-size:10px}
.finance-options span{padding:5px 7px;background:#f0f6fa;border-radius:4px}
.finance-card-foot{margin-top:9px;color:#71849a;font-size:9px}
.preview-top{
background:var(--navy);
padding:14px 18px;
color:white;
font-weight:800;
}
.preview-body{display:grid;grid-template-columns:130px 1fr;min-height:310px}
.preview-side{
background:#1c3157;
color:#dbe8f7;
padding:15px 8px;
display:flex;
flex-direction:column;
gap:5px;
}
.preview-side div{padding:8px;font-size:11px;border-radius:5px}
.preview-side .selected{background:#2b527b;border-left:3px solid var(--green)}
.preview-main{background:#f7fafc;padding:20px}
.preview-main h3{margin:0}
.metrics{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:9px;
margin:20px 0;
}
.metric{padding:12px;border:1px solid #dfe8f0;background:white;border-radius:7px}
.metric small{display:block;color:#72849a;font-size:10px}
.metric b{font-size:22px}
.mockrows{background:white;border-radius:8px;border:1px solid #dfe8f0}
.mockrows div{padding:11px;border-bottom:1px solid #e5ecf2;font-size:11px}
.mockrows div:last-child{border:0}
.preview-note{text-align:center;font-size:11px;padding:9px;color:#61748b}
.benefits{display:grid;gap:13px;margin-top:27px}
.benefit{display:flex;gap:13px;align-items:flex-start}
.tick{
background:var(--green);
color:var(--navy);
border-radius:50%;
font-size:13px;
padding:2px 7px;
font-weight:900;
flex:none;
}
.benefit span{font-size:15px}
.branding{
background:linear-gradient(120deg,#101a3b,#173867);
color:white;
}
.branding .lead{color:#d3e2ef}
.branding-grid{display:grid;grid-template-columns:minmax(300px,.78fr) minmax(0,1.22fr);gap:60px;align-items:center}
.brand-demo{
background:white;
border-radius:12px;
padding:25px;
color:var(--navy);
box-shadow:0 25px 55px #0003;
}
.brand-demo .demo-head{
display:flex;justify-content:space-between;
border-bottom:4px solid var(--green);
padding-bottom:16px;
font-weight:800;
}
.brand-demo .demo-box{
margin-top:19px;
height:12px;
background:#d9e8f2;
border-radius:8px;
}
.brand-demo .demo-box.short{width:60%}
.brand-demo .demo-total{
margin-top:25px;
text-align:right;
font-size:25px;
font-weight:900;
color:var(--navy);
}
.product-document-preview{padding:12px}
.product-document-preview img{display:block;width:100%;height:auto;border-radius:8px}
.product-document-preview .note{margin:10px 4px 2px}
.video-layout{
display:grid;
grid-template-columns:minmax(260px,.78fr) minmax(0,1.42fr);
gap:55px;
align-items:center;
}
.video-frame{
background:#101a3b;
border-radius:16px;
overflow:hidden;
box-shadow:0 20px 45px #101a3b25;
}
.video-frame video{
display:block;
width:100%;
max-height:none;
aspect-ratio:36 / 17.5;
object-fit:contain;
background:#050b17;
}
.video-placeholder{
padding:85px 25px;
text-align:center;
color:white;
}
.video-placeholder .play{
font-size:38px;
color:var(--green);
}
.video-placeholder p{color:#d2e0ee;font-size:13px}
.pricing{background:#eaf3f9}
.pricing-grid{display:grid;grid-template-columns:1fr 1fr;gap:75px;align-items:center}
.pricing-card{
background:white;
padding:37px;
border:1px solid #dce8f1;
border-radius:16px;
box-shadow:0 17px 48px #101a3b15;
}
.price{
font-size:65px;
line-height:1.2;
letter-spacing:-2px;
font-weight:900;
}
.price small{font-size:16px;font-weight:500;letter-spacing:0;color:#607289}
.pricing-card ul{padding-left:20px;line-height:2.3}
.pricing-card .button{display:block}
.note{font-size:12px;color:#6b7c90}
.faq{max-width:800px}
details{padding:17px 0;border-bottom:1px solid #dce5ee}
summary{font-weight:700;cursor:pointer}
details p{color:#63748a}
.cta{
background:var(--navy);
color:white;
padding:85px 0;
text-align:center;
}
.cta p{color:#cbd9e7}
.footer{background:#09132c;color:#c9d6e6;padding:33px 0}
.footer-inner{display:flex;justify-content:space-between;gap:25px}
.footer a{margin-left:20px;font-size:13px}
.legal{padding:65px 0;max-width:800px}
.legal p{color:#61738a}
@media(max-width:950px){
.hero-grid,.showcase-grid,.branding-grid,.video-layout,.pricing-grid{grid-template-columns:1fr}
.industry-grid{grid-template-columns:repeat(3,1fr)}
.feature-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:600px){
.nav{align-items:flex-start;flex-direction:column;padding:15px 0}
.menu{flex-wrap:wrap;gap:13px}
.hero{padding:55px 0}
.industry-grid{grid-template-columns:repeat(2,1fr)}
.feature-grid{grid-template-columns:1fr}
.preview-body{grid-template-columns:100px 1fr}
.preview-main{padding:10px}
.metric{padding:7px}
.metric b{font-size:18px}
.footer-inner{flex-direction:column}
.footer a{margin-left:0;margin-right:17px}
section.section{padding:65px 0}
}
@media(prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
.button{transition:none}
}