/* ============ Known CRM — Marketing site ============ */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
    margin:0;
    font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    color:#1e293b;
    background:#fff;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:#1b6ca8;text-decoration:none;transition:color .15s;}
a:hover{color:#0f4c75;}
.container{max-width:1200px;margin:0 auto;padding:0 22px;}

/* buttons */
.btn{
    display:inline-flex;align-items:center;gap:8px;
    padding:10px 18px;border-radius:10px;
    font-weight:700;font-size:13px;
    border:1.5px solid transparent;cursor:pointer;
    transition:all .18s;white-space:nowrap;
    text-decoration:none;
}
.btn-primary{background:linear-gradient(135deg,#1b6ca8,#2196b6);color:#fff;box-shadow:0 6px 18px rgba(27,108,168,.28);}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(27,108,168,.38);color:#fff;}
.btn-outline{border-color:#cbd5e1;color:#1e293b;background:#fff;}
.btn-outline:hover{border-color:#1b6ca8;color:#1b6ca8;}
.btn-ghost{color:#475569;background:transparent;}
.btn-ghost:hover{color:#1b6ca8;}
.btn-lg{padding:14px 24px;font-size:14px;}
.btn-full{width:100%;justify-content:center;}

/* Nav */
.nav{
    position:sticky;top:0;z-index:50;
    background:rgba(255,255,255,.85);
    backdrop-filter:blur(12px);
    border-bottom:1px solid rgba(226,232,240,.7);
}
.nav-wrap{display:flex;align-items:center;justify-content:space-between;height:66px;gap:16px;}
.logo{display:flex;align-items:center;gap:9px;font-weight:900;font-size:18px;color:#0f172a;}
.logo-mark{
    width:32px;height:32px;border-radius:9px;
    background:linear-gradient(135deg,#1b6ca8,#2196b6);
    color:#fff;display:flex;align-items:center;justify-content:center;
    font-weight:900;font-size:16px;
    box-shadow:0 4px 12px rgba(27,108,168,.35);
}
.logo-img{height:38px;width:auto;display:block;}
.logo-img-footer{height:34px;filter:brightness(0) invert(1);}
.nav-links{display:flex;gap:26px;}
.nav-links a{color:#475569;font-weight:600;font-size:13px;}
.nav-links a:hover{color:#1b6ca8;}
.nav-cta{display:flex;gap:8px;align-items:center;}
.nav-burger{display:none;background:none;border:none;font-size:20px;color:#475569;cursor:pointer;}
@media(max-width:900px){
    .nav-links{display:none;position:absolute;top:66px;left:0;right:0;background:#fff;flex-direction:column;padding:14px 22px;border-bottom:1px solid #e2e8f0;gap:14px;}
    .nav-links.open{display:flex;}
    .nav-cta .btn-ghost{display:none;}
    .nav-burger{display:block;}
}

/* Hero */
.hero{
    padding:70px 0 90px;
    background:
        radial-gradient(1200px 500px at 10% -10%, rgba(27,108,168,.12), transparent 60%),
        radial-gradient(900px 400px at 100% 10%, rgba(124,58,237,.10), transparent 60%),
        linear-gradient(180deg,#fafbff 0%,#fff 100%);
}
.hero-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:60px;align-items:center;}
@media(max-width:960px){.hero-grid{grid-template-columns:1fr;gap:40px;}}
.pill{
    display:inline-flex;align-items:center;gap:6px;
    padding:6px 12px;border-radius:100px;
    background:#eff6ff;color:#1b6ca8;
    font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;
    border:1px solid #bfdbfe;
}
.hero-copy h1{
    font-size:clamp(32px,5vw,56px);
    line-height:1.08;font-weight:900;letter-spacing:-.02em;
    margin:18px 0 18px;color:#0f172a;
}
.grad{background:linear-gradient(135deg,#1b6ca8 0%,#7c3aed 100%);-webkit-background-clip:text;background-clip:text;color:transparent;}
.lead{font-size:17px;color:#475569;margin:0 0 28px;max-width:580px;}
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:36px;}
.hero-stats{display:flex;gap:36px;flex-wrap:wrap;}
.hero-stats div{display:flex;flex-direction:column;}
.hero-stats b{font-size:26px;font-weight:900;color:#1b6ca8;letter-spacing:-.02em;}
.hero-stats span{font-size:12px;color:#64748b;font-weight:600;}

/* Hero art */
.hero-art{position:relative;height:460px;}
.hero-card{
    position:absolute;
    background:#fff;
    border-radius:16px;
    box-shadow:0 20px 60px rgba(15,23,42,.12),0 2px 8px rgba(15,23,42,.04);
    border:1px solid #eef2f7;
    padding:16px 18px;
    animation:float 6s ease-in-out infinite;
}
@keyframes float{0%,100%{transform:translateY(0);}50%{transform:translateY(-8px);}}
.hero-card-1{top:30px;left:0;width:300px;animation-delay:0s;}
.hero-card-2{top:160px;right:0;width:240px;animation-delay:1.5s;}
.hero-card-3{bottom:20px;left:60px;width:310px;animation-delay:3s;display:flex;align-items:center;gap:10px;font-size:12px;font-weight:600;}
.hc-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;}
.hc-badge{padding:3px 10px;border-radius:20px;background:#f0fdf4;color:#16a34a;font-size:10px;font-weight:800;}
.hc-time{font-size:11px;color:#94a3b8;}
.hc-body{display:flex;gap:12px;align-items:center;padding-bottom:14px;border-bottom:1px solid #f1f5f9;}
.hc-avatar{width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,#7c3aed,#1b6ca8);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;font-size:14px;}
.hc-name{font-weight:800;font-size:14px;color:#0f172a;}
.hc-meta{font-size:11px;color:#94a3b8;}
.hc-foot{display:flex;align-items:center;gap:10px;margin-top:12px;}
.hc-foot span:not(.hc-pill-g){width:30px;height:30px;border-radius:8px;background:#f8fafc;display:flex;align-items:center;justify-content:center;font-size:12px;color:#475569;}
.hc-pill-g{margin-left:auto;padding:4px 10px;border-radius:16px;background:#ecfdf5;color:#16a34a;font-size:10px;font-weight:800;}
.hc-metric-label{font-size:10px;font-weight:800;color:#94a3b8;text-transform:uppercase;letter-spacing:.06em;}
.hc-metric{font-size:38px;font-weight:900;color:#0f172a;margin:6px 0 14px;letter-spacing:-.02em;}
.hc-chart{display:flex;gap:5px;align-items:flex-end;height:64px;}
.hc-chart span{flex:1;background:linear-gradient(180deg,#2196b6,#1b6ca8);border-radius:4px 4px 0 0;}
.hc-tag{margin-left:auto;padding:3px 9px;border-radius:5px;background:#eff6ff;color:#1b6ca8;font-size:10px;font-weight:800;}

/* Strip */
.strip{padding:40px 0;border-top:1px solid #eef2f7;border-bottom:1px solid #eef2f7;background:#fafbff;}
.strip-inner{display:flex;align-items:center;gap:30px;flex-wrap:wrap;}
.strip-label{font-size:11px;font-weight:800;color:#94a3b8;text-transform:uppercase;letter-spacing:.08em;}
.strip-logos{display:flex;gap:40px;flex-wrap:wrap;flex:1;justify-content:space-around;}
.strip-logos span{font-weight:900;font-size:14px;color:#cbd5e1;letter-spacing:.06em;}

/* Sections */
.section{padding:96px 0;}
.section-alt{background:linear-gradient(180deg,#fafbff,#fff);}
.section-head{max-width:680px;margin:0 auto 56px;text-align:center;}
.kicker{display:inline-block;font-size:11px;font-weight:800;color:#1b6ca8;text-transform:uppercase;letter-spacing:.1em;background:#eff6ff;padding:5px 12px;border-radius:100px;margin-bottom:14px;}
.section-head h2{font-size:clamp(26px,3.2vw,40px);font-weight:900;letter-spacing:-.02em;margin:0 0 14px;color:#0f172a;line-height:1.15;}
.section-head p{font-size:16px;color:#64748b;margin:0;}

/* Features */
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
@media(max-width:900px){.feature-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:600px){.feature-grid{grid-template-columns:1fr;}}
.feature{background:#fff;border:1px solid #eef2f7;border-radius:14px;padding:24px 22px;transition:all .2s;}
.feature:hover{border-color:#bfdbfe;box-shadow:0 14px 36px rgba(27,108,168,.08);transform:translateY(-2px);}
.ficon{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:19px;margin-bottom:14px;}
.feature h3{font-size:16px;font-weight:800;margin:0 0 6px;color:#0f172a;}
.feature p{font-size:13px;color:#64748b;margin:0;}

/* Modules */
.mod-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
@media(max-width:900px){.mod-grid{grid-template-columns:repeat(2,1fr);}}
.mod{
    background:#fff;border:1px solid #eef2f7;border-radius:14px;
    padding:24px 18px;text-align:center;
    transition:all .2s;
}
.mod:hover{border-color:var(--c);box-shadow:0 12px 30px rgba(0,0,0,.06);}
.mod i{font-size:28px;color:var(--c);background:var(--b);width:56px;height:56px;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;margin-bottom:12px;}
.mod h4{font-size:15px;font-weight:800;margin:0 0 3px;color:#0f172a;}
.mod span{font-size:11px;color:#94a3b8;}

/* Integrations */
.int-grid{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;max-width:860px;margin:0 auto;}
.int-chip{
    background:#fff;border:1.5px solid #eef2f7;border-radius:10px;
    padding:12px 16px;display:inline-flex;align-items:center;gap:8px;
    font-size:13px;font-weight:700;color:#1e293b;
    transition:all .15s;
}
.int-chip:hover{border-color:#bfdbfe;transform:translateY(-1px);box-shadow:0 6px 18px rgba(0,0,0,.05);}

/* Pricing */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:980px;margin:0 auto;}
@media(max-width:860px){.price-grid{grid-template-columns:1fr;}}
.price{background:#fff;border:1.5px solid #eef2f7;border-radius:16px;padding:30px 26px;position:relative;transition:all .2s;}
.price:hover{border-color:#bfdbfe;transform:translateY(-2px);}
.price-featured{border-color:#1b6ca8;box-shadow:0 22px 60px rgba(27,108,168,.18);transform:scale(1.02);}
.price-badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);padding:4px 14px;border-radius:100px;background:linear-gradient(135deg,#1b6ca8,#2196b6);color:#fff;font-size:11px;font-weight:800;}
.price-name{font-size:13px;font-weight:800;color:#64748b;text-transform:uppercase;letter-spacing:.08em;}
.price-tag{font-size:38px;font-weight:900;color:#0f172a;margin:10px 0 18px;letter-spacing:-.02em;}
.price-tag span{font-size:14px;font-weight:600;color:#94a3b8;margin-left:4px;}
.price ul{list-style:none;padding:0;margin:0 0 24px;}
.price ul li{padding:8px 0;font-size:13px;color:#475569;border-bottom:1px solid #f8fafc;position:relative;padding-left:22px;}
.price ul li::before{content:'✓';position:absolute;left:0;color:#16a34a;font-weight:900;}

/* CTA */
.cta{
    background:linear-gradient(135deg,#0f172a 0%,#1b6ca8 50%,#2196b6 100%);
    padding:80px 0;color:#fff;
    position:relative;overflow:hidden;
}
.cta::before{content:'';position:absolute;inset:0;background:radial-gradient(600px 300px at 90% 0%,rgba(255,255,255,.1),transparent);}
.cta-wrap{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;position:relative;}
@media(max-width:860px){.cta-wrap{grid-template-columns:1fr;}}
.cta h2{font-size:clamp(26px,3.2vw,38px);font-weight:900;margin:0 0 12px;letter-spacing:-.02em;line-height:1.15;}
.cta p{color:rgba(255,255,255,.75);margin:0 0 18px;font-size:15px;}
.cta-phones{display:flex;flex-wrap:wrap;gap:10px;}
.cta-phones a{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:10px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:#fff;font-weight:700;font-size:14px;transition:all .15s;text-decoration:none;}
.cta-phones a:hover{background:rgba(255,255,255,.2);border-color:#fff;transform:translateY(-1px);}
.cta-phones a i{font-size:12px;color:#a7f3d0;}
.cta-form{display:flex;flex-direction:column;gap:10px;padding:22px;background:rgba(255,255,255,.08);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.15);border-radius:16px;}
.cta-form input{padding:13px 16px;border-radius:9px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.1);color:#fff;font-size:14px;font-family:inherit;}
.cta-form input::placeholder{color:rgba(255,255,255,.55);}
.cta-form input:focus{outline:none;border-color:#fff;background:rgba(255,255,255,.18);}
.cta-form button{padding:14px 20px;border-radius:9px;border:none;background:#fff;color:#1b6ca8;font-weight:800;font-size:14px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:all .15s;}
.cta-form button:hover{background:#f8fafc;transform:translateY(-1px);}

/* Footer */
.footer{background:#0f172a;color:#cbd5e1;padding:64px 0 28px;}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;margin-bottom:40px;}
@media(max-width:800px){.footer-grid{grid-template-columns:1fr 1fr;}}
.footer .logo{color:#fff;margin-bottom:10px;}
.footer-tag{font-size:13px;color:#94a3b8;margin:0 0 16px;max-width:280px;}
.socials{display:flex;gap:8px;}
.socials a{width:34px;height:34px;border-radius:9px;background:rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;color:#cbd5e1;font-size:14px;transition:all .15s;}
.socials a:hover{background:#1b6ca8;color:#fff;}
.footer h5{color:#fff;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;margin:0 0 14px;}
.footer a:not(.logo):not(.socials a){display:block;color:#94a3b8;font-size:13px;padding:4px 0;}
.footer a:hover{color:#fff;}
.footer-base{display:flex;justify-content:space-between;padding-top:22px;border-top:1px solid rgba(255,255,255,.08);font-size:12px;color:#64748b;}
@media(max-width:600px){.footer-base{flex-direction:column;gap:6px;}}