:root{
  --red:#b21305;
  --red-dark:#7a0d02;
  --black:#161616;
  --grey:#f4f5f7;
  --line:#e5e7eb;
}
*{scroll-behavior:smooth}
body{font-family:'Segoe UI',Roboto,Helvetica,Arial,sans-serif;background:var(--grey);color:#222}
a{text-decoration:none}

/* ---------- Marquee ---------- */
.top-marquee{background:linear-gradient(90deg,var(--black),#2a2a2a);color:#fff;overflow:hidden;white-space:nowrap;font-weight:600;font-size:.82rem;border-bottom:3px solid var(--red)}
.marquee-track{display:inline-block;padding:6px 0;animation:scroll 28s linear infinite}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- Contact bar ---------- */
.contact-bar{background:#fff;border-bottom:1px solid var(--line);padding:6px 0}
.contact-bar a{color:#444}
.contact-bar a:hover{color:var(--red)}

/* ---------- Navbar ---------- */
/* Black header so the red/coral logo pops against it instead of blending in. */
.main-nav{background:linear-gradient(90deg,var(--black),#000);box-shadow:0 2px 10px rgba(0,0,0,.25);border-bottom:2px solid var(--red)}
.main-nav .navbar-brand{font-weight:800;font-size:1.5rem;display:flex;align-items:center;padding:.25rem 0}
.brand-m{color:#fff}
.brand-g{color:#161616;background:#fff;padding:0 6px;border-radius:4px;margin-left:2px}
.main-nav .nav-link{color:#fff !important;font-weight:500;margin:0 .3rem}
.main-nav .nav-link:hover{color:var(--red) !important}
.navbar-toggler{border-color:rgba(255,255,255,.5)}
.btn-buy{background:var(--red);color:#fff !important;border-radius:30px;padding:.4rem 1.1rem;font-weight:600}
.btn-buy:hover{background:var(--red-dark);color:#fff}

/* ---------- Brand logo ----------
   Base size is also set inline on the <img> (height:34px) as a guaranteed
   fallback in case this stylesheet is ever cached/stale — the media queries
   below use !important so they still win over that inline style on smaller
   screens. */
.brand-logo-badge{background:#fff;border-radius:9px;padding:4px 10px;display:inline-flex;align-items:center;box-shadow:0 2px 8px rgba(0,0,0,.18);max-width:100%}
.brand-logo-img{height:34px;width:auto;max-width:100%;display:block}
@media(max-width:991.98px){.brand-logo-img{height:28px !important}.brand-logo-badge{padding:4px 8px}}
@media(max-width:575.98px){.brand-logo-img{height:22px !important}.brand-logo-badge{padding:3px 6px;border-radius:7px}}

/* ---------- Header search ---------- */
.header-search{display:flex;gap:0;max-width:280px}
.header-search .form-control{border-radius:20px 0 0 20px;border:none}
.header-search .btn{border-radius:0 20px 20px 0;background:var(--red);color:#fff;border:none}
.header-search .btn:hover{background:var(--red-dark)}
.header-search-mobile{max-width:100%;margin:.6rem 0}
@media(max-width:991.98px){.header-search{max-width:100%}}

/* ---------- Hero ---------- */
.hero{background:linear-gradient(120deg,var(--black) 0%,var(--red-dark) 60%,var(--red) 100%);color:#fff;border-radius:16px;padding:48px 36px;margin-bottom:30px;position:relative;overflow:hidden}
.hero h1{font-weight:800;font-size:2.2rem}
.hero .lead{opacity:.92}
.hero .badge-pill{background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.35);padding:.5rem .9rem;border-radius:30px;display:inline-block;margin:.2rem;font-size:.85rem}

/* ---------- Cards ---------- */
.svc-card,.feature-card{background:#fff;border:1px solid var(--line);border-radius:14px;transition:.2s;height:100%}
.svc-card:hover,.feature-card:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgba(200,29,46,.15);border-color:var(--red)}
.feature-icon{width:58px;height:58px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--red),var(--red-dark));color:#fff;font-size:1.6rem;margin-bottom:12px}
.price-tag{color:var(--red);font-weight:800;font-size:1.15rem}
.hot-badge{background:var(--red);color:#fff;font-size:.7rem;padding:2px 8px;border-radius:20px;font-weight:700}

.section-title{font-weight:800;color:var(--black);position:relative;display:inline-block;margin-bottom:1.5rem}
.section-title::after{content:"";position:absolute;left:0;bottom:-8px;width:55px;height:4px;background:var(--red);border-radius:3px}

/* delivery badges */
.tier-green{background:#e7f6ec;color:#1a7f37;border:1px solid #b7e4c7}
.tier-yellow{background:#fff8e1;color:#9a6b00;border:1px solid #ffe08a}
.badge-soft{padding:.3rem .6rem;border-radius:8px;font-size:.78rem;font-weight:600}

/* ---------- Tables ---------- */
.table thead{background:var(--black);color:#fff}
.table-hover tbody tr:hover{background:#fff5f5}
.highlight-row{background:#fff2ee !important;box-shadow:inset 3px 0 0 var(--red);animation:highlightFade 2.5s ease-out 1}
@keyframes highlightFade{0%{background:#ffdcd3 !important}100%{background:#fff2ee !important}}

/* ---------- Official Partners ----------
   Fixed-width cards in a wrapping flex row (not Bootstrap % columns) so a
   small, fixed number of partner logos always look right-sized and centered
   instead of stretching/shrinking to fill whatever the row's column width is. */
.partners-row{display:flex;flex-wrap:wrap;justify-content:center;gap:24px;margin-bottom:3rem}
.partner-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:28px 20px;text-align:center;transition:.2s;width:220px;max-width:100%;min-height:180px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.partner-card:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgba(200,29,46,.15);border-color:var(--red)}
.partner-card img{height:80px;width:auto;max-width:100%;object-fit:contain}
@media(max-width:575.98px){.partner-card{width:100%;max-width:280px}}

/* ---------- Buttons ---------- */
.btn-red{background:var(--red);border-color:var(--red);color:#fff;font-weight:600}
.btn-red:hover{background:var(--red-dark);border-color:var(--red-dark);color:#fff}
.btn-outline-red{border:1px solid var(--red);color:var(--red);font-weight:600}
.btn-outline-red:hover{background:var(--red);color:#fff}

/* ---------- Dashboard ---------- */
.stat-card{background:#fff;border-radius:14px;border:1px solid var(--line);padding:20px}
.stat-card .num{font-size:1.8rem;font-weight:800;color:var(--red)}
.dash-side .list-group-item{border:none;border-radius:10px !important;margin-bottom:4px;font-weight:500}
.dash-side .list-group-item.active{background:var(--red);border-color:var(--red)}

/* ---------- Footer ---------- */
.site-footer{background:var(--black);color:#cfcfcf;padding:40px 0 20px;margin-top:40px}
.site-footer h6{color:#fff;font-weight:700;margin-bottom:1rem}
.site-footer a{color:#cfcfcf}
.site-footer a:hover{color:var(--red)}
.text-light-50{color:#9a9a9a}
.footer-brand{font-size:1.4rem;font-weight:800}

/* ---------- Floating contacts ---------- */
.float-contacts{position:fixed;right:18px;bottom:18px;display:flex;flex-direction:column;gap:12px;z-index:999}
.fc{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.5rem;box-shadow:0 6px 16px rgba(0,0,0,.25);transition:.2s}
.fc:hover{transform:scale(1.08);color:#fff}
.fc-wa{background:#25d366}
.fc-tg{background:#229ed9}

/* ---------- Auth ---------- */
.auth-wrap{max-width:440px;margin:30px auto}
.auth-card{background:#fff;border-radius:16px;border:1px solid var(--line);padding:32px}

@media(max-width:768px){.hero{padding:32px 22px}.hero h1{font-size:1.6rem}}