/* ==========================================================================
   Bonzer AI Solutions — main stylesheet
   Brand palette: change the variables below to re-theme the whole site.
   ========================================================================== */
:root {
    --brand: #0B4DCC;          /* Bonzer blue — buttons, links, highlights */
    --brand-dark: #083B9E;     /* hover */
    --brand-text: #0B4DCC;     /* brand color for text on white */
    --brand-soft: #EAF0FC;     /* pale blue tint */
    --brand-line: #B9CDF3;     /* light blue borders */
    --navy: #13284F;           /* headings, dark sections */
    --navy-deep: #0C1B38;      /* footer / top bar */
    --navy-mid: #1C3566;       /* cards on dark */
    --ink: #13284F;
    --sub: #5B6880;
    --line: #E1E6EF;
    --bg: #F6F8FC;
    --white: #fff;
    --shadow: 0 16px 55px rgba(11, 77, 204, .08);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font:15px/1.65 Poppins,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;background:var(--bg);color:var(--ink)}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit}
button{cursor:pointer}
img{max-width:100%}
.wrap{max-width:1190px;margin:auto;padding:0 28px}

/* Top bar */
.topbar{background:var(--navy-deep);color:#c9d2e0;font-size:12px}
.topbar .wrap{display:flex;justify-content:space-between;padding-top:7px;padding-bottom:7px}
.topbar a:hover,.footer a:hover{color:#8FB3F5}

/* Navigation */
.nav{position:sticky;top:0;background:rgba(255,255,255,.98);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);z-index:40}
.nav-in{height:80px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:12px;flex-shrink:0}
.logo{height:44px;width:auto;display:block}
.brand-sub{font-size:10px;font-weight:700;color:var(--brand-text);letter-spacing:1.4px;border-left:1px solid var(--line);padding-left:12px}
.links{display:flex;align-items:center;gap:24px}
.links>a,.menu-trigger{font-weight:600;font-size:13px;color:var(--navy);background:none;border:0;padding:13px 0;border-bottom:2px solid transparent}
.links>a:hover,.menu-trigger:hover,.links .active{color:var(--brand-text);border-bottom-color:var(--brand)}
.dropdown{position:relative}
.drop{display:none;position:absolute;top:100%;left:-20px;width:315px;background:#fff;padding:9px;border:1px solid var(--line);border-radius:13px;box-shadow:var(--shadow)}
.dropdown:hover .drop,.dropdown:focus-within .drop{display:block}
.drop a{display:block;padding:11px 12px;border-radius:8px;font-weight:600;font-size:13px}
.drop a:hover{background:var(--brand-soft);color:var(--brand-text)}
.drop a span{display:block;color:var(--sub);font-size:11px;font-weight:400}
.mobile-toggle{display:none;background:white;border:1px solid var(--line);border-radius:8px;padding:7px 12px}
.mobile-panel{display:none}

/* Buttons */
.button{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--brand);color:#fff;border:1px solid var(--brand);padding:12px 22px;border-radius:9px;font-weight:700;font-size:13px;transition:.18s}
.button:hover{background:var(--brand-dark);border-color:var(--brand-dark);transform:translateY(-1px)}
.button.secondary{background:white;color:var(--navy);border:1px solid #cdd5e1}
.button.secondary:hover{background:#f2f4f8}
.button.light{background:#fff;color:var(--navy);border-color:#fff}
.button.light:hover{background:var(--brand-soft)}
.button.small{padding:9px 14px;font-size:12px}

/* Hero */
.eyebrow{text-transform:uppercase;letter-spacing:2px;font-weight:700;color:var(--brand-text);font-size:11px}
.hero{background:radial-gradient(circle at 87% 15%,#dde8fb 0%,transparent 38%),linear-gradient(125deg,#f3f5f9,#fff 62%);padding:88px 0 72px;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.06fr .94fr;gap:55px;align-items:center}
.hero h1{font-size:clamp(40px,4.8vw,62px);letter-spacing:-2.5px;line-height:1.1;margin:19px 0 22px;color:var(--navy)}
.hero h1 em{font-style:normal;color:var(--brand)}
.lead{font-size:18px;color:var(--sub);line-height:1.7;max-width:650px}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:29px}
.micro{font-size:12px;color:#717e92;margin-top:17px}
.visual{background:#fff;border:1px solid var(--line);border-radius:22px;padding:18px;box-shadow:0 30px 85px rgba(11,77,204,.12);transform:rotate(1deg)}
.vhead{display:flex;justify-content:space-between;align-items:center;padding:8px 6px 15px;border-bottom:1px solid var(--line);font-size:13px;font-weight:700}
.status{background:var(--brand-soft);color:var(--brand-text);border-radius:30px;padding:5px 10px;font-size:10px}
.flowbox{padding:19px;background:#f6f7fa;border:1px solid var(--line);border-radius:11px;margin-top:13px}
.flowbox b{display:block;font-size:13px}
.flowbox small{color:var(--sub)}
.logic{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:13px 0}
.logic .flowbox{margin:0;background:white}
.arrows{text-align:center;color:#9aa6b8;padding:5px}
.linechart{height:95px;display:flex;align-items:end;gap:8px;margin:13px 0}
.linechart i{width:100%;background:linear-gradient(var(--brand),#9dbcf2);border-radius:5px 5px 0 0}

/* Trust strip */
.trust{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:white}
.trust-in{display:flex;align-items:center;gap:35px;justify-content:space-between;padding-top:25px;padding-bottom:25px;font-size:12px;color:var(--sub);flex-wrap:wrap}
.trust strong{font-size:14px;color:var(--navy)}

/* Sections & cards */
.section{padding:84px 0}
.section.alt{background:#fff}
.heading{max-width:760px;margin-bottom:37px}
.heading h2{font-size:clamp(29px,3.3vw,42px);letter-spacing:-1.4px;line-height:1.2;margin:12px 0;color:var(--navy)}
.heading p{color:var(--sub);font-size:16px}
.grid{display:grid;gap:19px}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{background:white;border:1px solid var(--line);border-radius:16px;padding:26px;box-shadow:0 5px 24px rgba(27,42,71,.03);transition:.18s}
.card:hover{border-color:var(--brand-line)}
.card h3{font-size:19px;line-height:1.3;letter-spacing:-.4px;margin:17px 0 9px}
.card p{color:var(--sub);font-size:13px}
.textlink{color:var(--brand-text);font-weight:700;font-size:13px}
.textlink:hover{text-decoration:underline}
.ico{width:44px;height:44px;background:var(--brand-soft);border-radius:12px;display:grid;place-items:center;color:var(--brand-text);font-size:22px}
.points{padding-left:19px;color:#46536a}
.points li{margin-bottom:8px}
.points li::marker{color:var(--brand)}
.smalltext{font-size:13px;color:var(--sub)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.panel{background:#f1f3f8;border:1px solid var(--line);border-radius:19px;padding:30px}
.tag{font-size:11px;color:var(--brand-text);text-transform:uppercase;letter-spacing:.8px;font-weight:700}
.tilelink{display:flex;justify-content:space-between;gap:20px;align-items:center;padding:15px 0;border-bottom:1px solid var(--line);font-size:14px;font-weight:600}

/* Dark section */
.darksection{background:var(--navy);color:white}
.darksection .heading h2{color:#fff}
.darksection .heading p{color:#c3cde0}
.darksection .eyebrow{color:#8FB3F5}
.darksection .card{background:var(--navy-mid);border-color:#34497a;color:white}
.darksection .card p{color:#c3cde0}

/* Steps */
.step{border-left:2px solid var(--line);padding:0 0 26px 27px;position:relative}
.step:before{position:absolute;left:-14px;top:0;width:25px;height:25px;display:grid;place-items:center;border-radius:50%;background:var(--brand);border:2px solid white;box-shadow:0 0 0 1px var(--brand-line);color:#fff;content:attr(data-step);font-size:11px;font-weight:800}
.step:last-child{border-left-color:transparent}
.step h3{margin:0 0 4px}
.step p{margin:0;color:var(--sub)}

/* CTA */
.cta{padding:56px 0;background:linear-gradient(120deg,var(--brand),#0A3A9A);color:white}
.cta .eyebrow{color:#B7CEF8}
.cta h2{font-size:34px;line-height:1.2;margin:9px 0}
.cta p{color:#d4dceb}

/* Footer */
.footer{background:var(--navy-deep);color:#d2d9e6;padding:63px 0 28px;border-top:4px solid var(--brand)}
.footgrid{display:grid;grid-template-columns:2fr 1fr 1fr 1.2fr;gap:35px}
.footer h4{color:white;margin:0 0 16px}
.footer a{display:block;font-size:12px;padding:5px 0;color:#bfc9da}
.footer p{font-size:13px;color:#a8b4c8}
.logo-footer{height:56px;background:#fff;padding:6px 10px;border-radius:8px;margin-bottom:6px}
.footbot{margin-top:46px;border-top:1px solid #2a3a5c;padding-top:20px;font-size:12px;color:#93a1b8;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px}
.footbot .tagline{text-align:center}
.social{display:flex;gap:10px;justify-self:end}
.footer .social a{display:grid;place-items:center;width:36px;height:36px;padding:0;border-radius:50%;background:#1c2e52;color:#d2d9e6;transition:.18s}
.footer .social a:hover{background:var(--brand);color:#fff}
.social svg{width:17px;height:17px;fill:currentColor}

/* Inner pages */
.pagehero{background:linear-gradient(120deg,#f1f3f8,#fff);padding:68px 0 61px;border-bottom:1px solid var(--line)}
.pagehero h1{font-size:clamp(35px,4.4vw,54px);letter-spacing:-2px;line-height:1.15;max-width:820px;margin:12px 0 17px;color:var(--navy)}
.pagehero p{max-width:780px;color:var(--sub);font-size:17px}
.crumb{font-size:12px;color:#717e92;margin-bottom:23px}
.crumb a{color:var(--brand-text)}
.pill-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:21px}
.pill{border:1px solid #d6dce6;border-radius:30px;padding:7px 12px;font-weight:600;font-size:12px;color:var(--navy);background:#fff}
.details{display:grid;grid-template-columns:1.45fr .7fr;gap:50px}
.prose h2{font-size:26px;letter-spacing:-.8px;margin:34px 0 12px;color:var(--navy)}
.prose h3{font-size:18px;margin:24px 0 9px}
.prose p{color:#535f75}
.sidebar{position:sticky;top:105px;align-self:start}
.sidebar .card{margin-bottom:17px}
.feature{background:white;border:1px solid var(--line);border-radius:13px;padding:22px}
.feature h3{margin:0 0 8px;font-size:16px}
.feature p{font-size:13px;color:var(--sub);margin:0}
.notice{background:var(--brand-soft);border-left:3px solid var(--brand);padding:17px 19px;border-radius:7px;font-size:13px;color:#2f4166}
.linkout{border:1px solid var(--line);border-radius:11px;padding:15px;display:block;background:#fff;margin:10px 0;color:var(--navy);font-weight:600}
.linkout:hover{background:var(--brand-soft)}
.faq-item{border-bottom:1px solid var(--line);padding:17px 0}
.faq-item summary{font-weight:600;cursor:pointer}
.faq-item p{color:var(--sub);margin:9px 0 0}
.hide{display:none!important}

/* Contact page */
.form{background:#fff;border:1px solid var(--line);border-radius:17px;padding:29px;box-shadow:var(--shadow)}
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:18px}
.field label{font-size:12px;font-weight:600;color:var(--navy)}
.field input,.field select,.field textarea{width:100%;border:1px solid #d3dae5;border-radius:8px;padding:12px 13px;background:#fff;outline:none;color:var(--ink)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--brand);box-shadow:0 0 0 3px #d4e2fb}
.field textarea{min-height:130px;resize:vertical}
.field .err{color:#b3261e;font-size:12px}
.field.has-error input,.field.has-error select,.field.has-error textarea{border-color:#d9534f}
.required{color:#c0392b}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.alert{padding:15px 18px;border-radius:9px;margin-bottom:20px;font-size:14px}
.alert.success{background:#e8f7ee;border:1px solid #b6e2c6;color:#1d6b3c}
.alert.error{background:#fdecea;border:1px solid #f5c2bd;color:#9b2c22}

/* Responsive */
@media(max-width:1060px){
    .links{display:none}
    .mobile-toggle{display:block}
    .mobile-panel{display:block;background:#fff;border-top:1px solid var(--line);padding:12px 27px;max-height:70vh;overflow:auto}
    .mobile-panel a{display:block;padding:9px;border-bottom:1px solid #eef1f5;font-weight:600}
    .mobile-panel a.sub{padding-left:22px;font-weight:400;font-size:14px;color:var(--sub)}
}
@media(max-width:980px){
    .hero-grid,.split,.details{grid-template-columns:1fr}
    .hero-grid{gap:35px}
    .g4{grid-template-columns:repeat(2,1fr)}
    .footgrid{grid-template-columns:1fr 1fr}
    .sidebar{position:static}
    .footbot{grid-template-columns:1fr;justify-items:center;text-align:center}
    .social{justify-self:center}
}
@media(max-width:680px){
    .wrap{padding-left:16px;padding-right:16px}
    .hero{padding:48px 0}
    .hero h1{letter-spacing:-1.5px}
    .section{padding:54px 0}
    .g3,.g2,.g4{grid-template-columns:1fr}
    .footgrid{grid-template-columns:1fr 1fr;gap:25px}
    .topbar .wrap span:last-child{display:none}
    .pagehero{padding:45px 0}
    .cta h2{font-size:27px}
    .hero .visual{transform:none}
    .actions .button{width:100%}
    .card{padding:22px}
    .logo{height:36px}
    .brand-sub{display:none}
}