/* CRM Syntax main stylesheet v2 */
:root{--navy:#032d60;--deep:#021a3a;--ink:#0e2238;--green:#00e0a4;--blue:#1b96ff;--orange:#ff7a59;--bg:#f5f8fc;--line:#dbe4ef;--mut:#5a6b80;--r:16px}
*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}
body{font:400 16px/1.65 'Inter',system-ui,sans-serif;color:var(--ink);background:#fff;overflow-x:hidden}
h1,h2,h3,h4{font-family:'Sora','Inter',sans-serif;line-height:1.18;color:var(--deep)}
img,svg{max-width:100%}a{color:inherit;text-decoration:none}
.wrap{width:min(1180px,92%);margin:auto}.sec{padding:96px 0}.alt{background:var(--bg)}
h2{font-size:clamp(1.8rem,3.4vw,2.7rem);margin-bottom:14px}.lead{color:var(--mut);max-width:680px;font-size:1.1rem}.center{text-align:center}.center .lead{margin:auto}
:focus-visible{outline:3px solid var(--green);outline-offset:3px}
.btn{display:inline-block;padding:14px 28px;border-radius:50px;font-weight:600;border:2px solid var(--green);background:var(--green);color:var(--deep);transition:.25s;cursor:pointer;font-size:1rem}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,224,164,.35)}
.btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}.btn.ghost:hover{background:#fff;color:var(--deep)}
.btn.navy{background:var(--navy);border-color:var(--navy);color:#fff}
/* top bar + nav */
.promo{background:var(--green);color:var(--deep);text-align:center;font-size:.88rem;font-weight:600;padding:8px 12px}
header{position:sticky;top:0;z-index:50;background:rgba(2,26,58,.96);backdrop-filter:blur(10px)}
.nav{display:flex;align-items:center;justify-content:space-between;height:76px}
.logo{font:700 1.5rem 'Sora';color:#fff}.logo span{color:var(--green)}
.menu{display:flex;align-items:center;gap:6px;list-style:none}
.menu>li{position:relative}.menu>li>a{display:block;padding:26px 14px;color:#dbe7f5;font-weight:500;font-size:.95rem;transition:.2s}
.menu>li>a:hover,.menu>li>a.on{color:var(--green)}
.has>a:after{content:"▾";margin-left:6px;font-size:.7rem}
.drop{position:absolute;top:100%;left:0;min-width:330px;background:#fff;border-radius:0 0 var(--r) var(--r);box-shadow:0 24px 50px rgba(0,0,0,.25);padding:12px;list-style:none;opacity:0;visibility:hidden;transform:translateY(10px);transition:.25s}
.has:hover .drop,.has:focus-within .drop{opacity:1;visibility:visible;transform:none}
.drop a{display:block;padding:10px 14px;border-radius:10px;color:var(--ink);font-size:.93rem}.drop a:hover{background:var(--bg);color:var(--navy)}
.cta-nav{margin-left:10px;padding:11px 22px!important;border-radius:40px;background:var(--green);color:var(--deep)!important;font-weight:700}
.burger{display:none;background:none;border:0;color:#fff;font-size:2rem;cursor:pointer}
/* hero */
.hero{position:relative;background:radial-gradient(1200px 600px at 80% -10%,#0b4a9e 0,transparent 60%),linear-gradient(160deg,var(--deep),var(--navy));color:#fff;padding:120px 0 110px;overflow:hidden}
.hero h1{color:#fff;font-size:clamp(2.3rem,5.4vw,4.2rem);max-width:860px}.hero h1 b{color:var(--green)}
.hero p{max-width:640px;margin:22px 0 34px;color:#c8d8ec;font-size:1.15rem}.hero .row{display:flex;gap:14px;flex-wrap:wrap}
.orb{position:absolute;border-radius:50%;filter:blur(70px);opacity:.45;animation:float 12s ease-in-out infinite}
.o1{width:380px;height:380px;background:var(--blue);right:-80px;top:40px}.o2{width:260px;height:260px;background:var(--green);right:30%;bottom:-120px;animation-delay:-5s}
@keyframes float{50%{transform:translate(-30px,30px) scale(1.1)}}
.hero.hs{background:radial-gradient(1000px 500px at 80% -10%,#a3421f 0,transparent 60%),linear-gradient(160deg,var(--deep),#12294a)}
.hero.hs .o1{background:var(--orange)}
.hero .chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:44px}.chips span{border:1px solid rgba(255,255,255,.25);padding:8px 16px;border-radius:30px;font-size:.88rem;color:#dbe7f5}
/* grids */
.grid{display:grid;gap:24px;margin-top:48px}.g3{grid-template-columns:repeat(3,1fr)}.g2{grid-template-columns:repeat(2,1fr)}.g4{grid-template-columns:repeat(4,1fr)}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:32px;transition:.3s;position:relative;overflow:hidden}
.card:hover{transform:translateY(-6px);box-shadow:0 22px 44px rgba(3,45,96,.13);border-color:var(--green)}
.card h3{font-size:1.2rem;margin:14px 0 10px}.card p{color:var(--mut);font-size:.97rem}
.ico{width:52px;height:52px;border-radius:14px;background:linear-gradient(135deg,var(--navy),var(--blue));display:grid;place-items:center;color:#fff;font-size:1.4rem}
.card a.more{display:inline-block;margin-top:16px;font-weight:600;color:var(--navy)}.card a.more:after{content:" →"}
.card ul{list-style:none;margin-top:14px}.card li{padding-left:24px;position:relative;margin:7px 0;font-size:.95rem;color:var(--ink)}.card li:before{content:"✓";position:absolute;left:0;color:#00a67a;font-weight:700}
/* dark band + stats */
.band{background:var(--deep);color:#fff}.band h2,.band h3{color:#fff}.band .lead{color:#b5c6dc}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center;margin-top:48px}
.stats b{display:block;font:700 3rem 'Sora';color:var(--green)}.stats span{color:#b5c6dc}
.bars{margin-top:30px}.bar{margin:18px 0}.bar div{display:flex;justify-content:space-between;font-weight:600;margin-bottom:8px}
.track{height:10px;border-radius:10px;background:rgba(255,255,255,.12);overflow:hidden}.track i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--green),var(--blue));border-radius:10px;transition:width 1.6s ease}
.split{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center}
/* method steps */
.steps{counter-reset:s;display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:48px}
.step{border-top:3px solid var(--green);padding-top:18px}.step:before{counter-increment:s;content:"Step " counter(s);font-weight:600;color:#00a67a;font-size:.85rem}
.step h3{margin:6px 0}.step p{color:var(--mut);font-size:.95rem}
/* marquee */
.marq{overflow:hidden;padding:30px 0;background:var(--bg);border-block:1px solid var(--line)}
.marq div{display:flex;gap:70px;width:max-content;animation:slide 28s linear infinite;font:600 1.15rem 'Sora';color:#8aa0ba;white-space:nowrap}
@keyframes slide{to{transform:translateX(-50%)}}
/* faq */
details{border:1px solid var(--line);border-radius:12px;padding:18px 24px;margin:12px 0;background:#fff}summary{cursor:pointer;font-weight:600;color:var(--deep)}details p{margin-top:10px;color:var(--mut)}
/* quote */
.q{font-size:1.05rem;color:var(--ink)}.q small{display:block;margin-top:14px;color:var(--mut)}
/* contact */
.contact{background:linear-gradient(160deg,var(--navy),var(--deep));color:#fff}.contact h2{color:#fff}.contact .lead{color:#b5c6dc}
form{background:#fff;color:var(--ink);padding:34px;border-radius:var(--r);display:grid;gap:16px;box-shadow:0 30px 60px rgba(0,0,0,.3)}
label{font-weight:600;font-size:.9rem;display:grid;gap:6px}
input,select,textarea{font:inherit;padding:13px 14px;border:1px solid var(--line);border-radius:10px;width:100%;background:#fff}
input:focus,select:focus,textarea:focus{outline:2px solid var(--blue);border-color:transparent}
.hp{position:absolute;left:-9999px}.msg{padding:14px;border-radius:10px;font-weight:600;display:none}.msg.ok{display:block;background:#d9fbef;color:#065f46}.msg.err{display:block;background:#fee2e2;color:#991b1b}
.clist{list-style:none;margin-top:24px}.clist li{margin:10px 0;color:#dbe7f5}
footer{background:#010f24;color:#9fb2c9;padding:64px 0 28px}
.fg{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px}footer h4{color:#fff;margin-bottom:14px;font-size:1rem}footer li{list-style:none;margin:8px 0}footer a:hover{color:var(--green)}
.copy{border-top:1px solid rgba(255,255,255,.1);margin-top:40px;padding-top:22px;font-size:.88rem}
.js .rv{opacity:0;transform:translateY(26px);transition:.8s}
.js .rv.in{opacity:1;transform:none}
@media(max-width:1000px){.g3,.g4,.steps,.stats{grid-template-columns:repeat(2,1fr)}.split,.g2{grid-template-columns:1fr}.fg{grid-template-columns:1fr 1fr}}
@media(max-width:860px){.burger{display:block}.menu{position:absolute;top:76px;left:0;right:0;background:var(--deep);flex-direction:column;align-items:stretch;gap:0;padding:10px 4%;max-height:0;overflow:hidden;transition:.35s;visibility:hidden}
.menu.open{max-height:90vh;overflow:auto;visibility:visible}.menu>li>a{padding:14px 8px}.drop{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;background:transparent;display:none;padding:0 0 8px 12px}
.has.open .drop{display:block}.drop a{color:#b5c6dc}.cta-nav{margin:10px 0;text-align:center}.sec{padding:70px 0}.hero{padding:80px 0}}
@media(max-width:600px){.g3,.g4,.steps,.stats,.fg{grid-template-columns:1fr}form{padding:22px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.js .rv{opacity:1;transform:none}}