:root{
    --brand:#e11d2e;
    --brand-dark:#b91c2b;
    --dark:#111827;
    --dark-2:#1f2937;
    --soft:#f7f8fa;
    --text:#18202b;
    --muted:#667085;
    --border:#e7eaf0;
    --shadow:0 20px 55px rgba(15,23,42,.10);
}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--text);background:#fff}
.vendor-nav{padding:14px 0;background:rgba(10,15,25,.90);backdrop-filter:blur(14px);transition:.25s;z-index:1030}
.vendor-nav.scrolled{padding:9px 0;background:rgba(10,15,25,.98);box-shadow:0 10px 30px rgba(0,0,0,.12)}
.brand-logo{width:42px;height:42px;object-fit:contain;border-radius:9px;background:#fff;padding:4px}
.brand-mark{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:10px;background:var(--brand);color:#fff;font-size:20px}
.navbar-brand{font-size:1.05rem;letter-spacing:-.02em}
.nav-link{color:rgba(255,255,255,.72)!important;font-weight:500;padding:.55rem .8rem!important}
.nav-link:hover,.nav-link.active{color:#fff!important}
.btn-brand{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:700;box-shadow:0 10px 25px rgba(225,29,46,.20)}
.btn-brand:hover{background:var(--brand-dark);border-color:var(--brand-dark);color:#fff;transform:translateY(-1px)}
.hero-section{position:relative;min-height:100vh;background:radial-gradient(circle at 78% 35%,rgba(225,29,46,.34),transparent 27%),linear-gradient(120deg,#090d14 0%,#111827 56%,#202938 100%);overflow:hidden}
.hero-section:after{content:"";position:absolute;width:520px;height:520px;border:1px solid rgba(255,255,255,.09);border-radius:50%;right:-180px;top:14%;box-shadow:0 0 0 70px rgba(255,255,255,.025),0 0 0 140px rgba(255,255,255,.015)}
.hero-overlay{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:45px 45px;mask-image:linear-gradient(to bottom,black,transparent 80%)}
.eyebrow{display:inline-flex;align-items:center;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.05);padding:8px 14px;border-radius:999px;color:rgba(255,255,255,.78);font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.text-brand{color:#ff5361}
.hero-copy{max-width:690px;line-height:1.75}
.hero-card{position:relative;z-index:2;width:360px;padding:24px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.07);backdrop-filter:blur(16px);border-radius:22px;display:flex;gap:16px;align-items:center;box-shadow:0 25px 70px rgba(0,0,0,.25)}
.hero-card-icon{flex:0 0 58px;height:58px;border-radius:16px;background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;font-size:26px}
.trust-strip{background:#fff;border-bottom:1px solid var(--border);padding:22px 0}
.trust-item{display:flex;gap:13px;align-items:center;padding:8px 12px}
.trust-item>i{font-size:26px;color:var(--brand)}
.trust-item strong,.trust-item span{display:block}
.trust-item span{font-size:.82rem;color:var(--muted);margin-top:2px}
.section-padding{padding:100px 0}
.section-soft{background:var(--soft)}
.section-label{color:var(--brand);font-size:.78rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;margin-bottom:12px}
.section-label-light{color:#ff6570}
.section-title{font-size:clamp(2rem,4vw,3.15rem);font-weight:800;letter-spacing:-.045em;line-height:1.08;margin-bottom:20px}
.section-title span{color:var(--brand)}
.section-heading{max-width:680px;margin:0 auto}
.section-heading .section-title{margin-bottom:14px}
.feature-box{display:flex;gap:9px;align-items:center;color:#344054;font-weight:600}
.feature-box i{color:var(--brand)}
.about-visual{min-height:480px;border-radius:32px;background:linear-gradient(145deg,#f1f3f6,#fff);position:relative;overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--border);display:flex;align-items:center;justify-content:center}
.about-visual:before{content:"";position:absolute;width:370px;height:370px;border:1px solid #e2e5ea;border-radius:50%;box-shadow:0 0 0 50px rgba(225,29,46,.025),0 0 0 100px rgba(225,29,46,.018)}
.about-logo-wrap{position:relative;z-index:1;width:210px;height:210px;border-radius:50%;background:#fff;box-shadow:0 20px 50px rgba(15,23,42,.12);display:flex;align-items:center;justify-content:center;padding:32px}
.about-logo{max-width:100%;max-height:100%;object-fit:contain}
.about-logo-wrap>i{font-size:70px;color:var(--brand)}
.about-badge{position:absolute;z-index:2;background:#fff;border:1px solid var(--border);border-radius:15px;padding:13px 16px;box-shadow:0 15px 35px rgba(15,23,42,.10);display:flex;gap:10px;align-items:center;font-size:.8rem;font-weight:700}
.about-badge i{color:var(--brand);font-size:21px}
.badge-one{left:28px;top:65px}.badge-two{right:28px;bottom:65px}
.service-card,.solution-card{background:#fff;border:1px solid var(--border);border-radius:20px;padding:28px;transition:.25s;box-shadow:0 6px 20px rgba(15,23,42,.03)}
.service-card:hover,.solution-card:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:#e1c6ca}
.service-icon{width:54px;height:54px;border-radius:15px;background:#fff1f2;color:var(--brand);display:flex;align-items:center;justify-content:center;font-size:23px;margin-bottom:22px}
.service-card h4{font-size:1.15rem;font-weight:800}
.service-card p,.solution-card p{color:var(--muted);line-height:1.7;font-size:.92rem}
.service-link{display:inline-flex;align-items:center;gap:8px;color:var(--brand);font-weight:700;text-decoration:none;font-size:.9rem}
.dark-panel{border-radius:24px;padding:40px;background:linear-gradient(145deg,#101722,#1e293b);position:relative;overflow:hidden}
.dark-panel:after{content:"";position:absolute;width:250px;height:250px;border-radius:50%;right:-100px;bottom:-100px;border:1px solid rgba(255,255,255,.10);box-shadow:0 0 0 50px rgba(255,255,255,.025)}
.solution-card{position:relative;min-height:210px}
.solution-card>i{font-size:28px;color:var(--brand);display:block;margin:22px 0 13px}
.solution-number{font-size:.72rem;color:#98a2b3;font-weight:800;letter-spacing:.1em}
.contact-section{background:#fbfbfc}
.contact-row{display:flex;gap:15px;align-items:flex-start;margin-bottom:24px}
.contact-icon{width:45px;height:45px;flex:0 0 45px;border-radius:12px;background:#fff1f2;color:var(--brand);display:flex;align-items:center;justify-content:center}
.contact-row small,.contact-row strong,.contact-row a{display:block}
.contact-row small{font-size:.76rem;color:#98a2b3;text-transform:uppercase;letter-spacing:.08em;font-weight:700;margin-bottom:3px}
.contact-row strong,.contact-row a{color:var(--text);font-weight:600;text-decoration:none;line-height:1.55}
.contact-card{background:#fff;border:1px solid var(--border);border-radius:25px;padding:34px;box-shadow:var(--shadow)}
.contact-card-top{display:flex;justify-content:space-between;gap:20px;align-items:center}
.contact-big-icon{width:66px;height:66px;flex:0 0 66px;border-radius:18px;background:#fff1f2;color:var(--brand);display:flex;align-items:center;justify-content:center;font-size:28px}
.divider{height:1px;background:var(--border);margin:28px 0}
.footer{background:#0b1018;padding:48px 0}
.footer-logo{width:40px;height:40px;object-fit:contain;background:#fff;border-radius:8px;padding:4px}
.footer-links{display:flex;justify-content:flex-end;gap:18px;flex-wrap:wrap}
.footer-links a{color:rgba(255,255,255,.62);text-decoration:none;font-size:.88rem}
.footer-links a:hover{color:#fff}
.floating-wa{position:fixed;right:22px;bottom:22px;width:58px;height:58px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#16a34a;color:#fff;font-size:27px;text-decoration:none;z-index:1020;box-shadow:0 14px 35px rgba(22,163,74,.30);transition:.2s}
.floating-wa:hover{color:#fff;transform:translateY(-3px)}
@media(max-width:991.98px){
    .vendor-nav{background:rgba(10,15,25,.98)}
    .navbar-collapse{padding-top:12px}
    .hero-section{min-height:760px}
    .section-padding{padding:75px 0}
}
@media(max-width:575.98px){
    .hero-section h1{font-size:2.65rem}
    .section-padding{padding:65px 0}
    .about-visual{min-height:380px}
    .about-logo-wrap{width:170px;height:170px}
    .badge-one{left:12px;top:30px}.badge-two{right:12px;bottom:30px}
    .contact-card{padding:25px}
    .footer-links{justify-content:flex-start}
}