/* Anderson IT Technology – one-page overrides */
html { scroll-behavior: auto; }
section[id], #home { scroll-margin-top: 80px; }

/* Brand */
.brand-logo { display: inline-flex; align-items: center; gap: 12px; }
.brand-logo .brand-mark { height: 40px; width: auto; flex-shrink: 0; }
.brand-logo .brand-word { height: 34px; width: auto; }
.footer-brand .brand-mark { height: 48px; }
.footer-brand .brand-word { height: 40px; }
.footer-brand { justify-content: center; }
@media (min-width: 992px) { .footer-brand { justify-content: flex-start; } }

/* Hero fleet panel (illustrative UI) */
.fleet-panel { width: 100%; max-width: 400px; padding: 22px; border-radius: 20px; background: rgba(20, 18, 38, .78); border: 1px solid rgba(255,255,255,.1); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 30px 80px rgba(0,0,0,.45); text-align: left; }
.fleet-panel .fp-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.fleet-panel .fp-head h6 { margin: 0; color: #fff; font-weight: 700; }
.fleet-panel .fp-live { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: #22c55e; font-weight: 600; }
.fleet-panel .fp-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 4px rgba(34,197,94,.18); }
.fleet-panel .fp-truck { padding: 14px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06); margin-bottom: 10px; }
.fleet-panel .fp-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.fleet-panel .fp-id { color: #fff; font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 8px; }
.fleet-panel .fp-id i { color: #F59E0B; font-size: 18px; }
.fleet-panel .fp-route { font-size: 12.5px; color: rgba(255,255,255,.55); margin: 6px 0 10px; }
.fleet-panel .fp-status { font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 50px; white-space: nowrap; }
.fp-status.driving { color: #22c55e; background: rgba(34,197,94,.12); }
.fp-status.onduty { color: #F59E0B; background: rgba(245,158,11,.12); }
.fp-status.rest { color: #818cf8; background: rgba(99,102,241,.15); }
.fleet-panel .fp-hos { display: flex; justify-content: space-between; font-size: 11.5px; color: rgba(255,255,255,.5); margin-bottom: 5px; }
.fleet-panel .fp-bar { height: 5px; border-radius: 5px; background: rgba(255,255,255,.08); overflow: hidden; }
.fleet-panel .fp-bar span { display: block; height: 100%; border-radius: 5px; background: linear-gradient(90deg, #F59E0B, #6366F1); }
.fleet-panel .fp-foot { display: flex; justify-content: space-between; gap: 10px; margin-top: 14px; font-size: 12px; color: rgba(255,255,255,.55); }
.fleet-panel .fp-foot i { color: #22c55e; margin-right: 4px; }

/* Text marquee spacing */
.tech-marquee .marquee-item { white-space: nowrap; }

/* About image */
.about-visual { position: relative; border-radius: 24px; overflow: hidden; border: 1px solid rgba(255,255,255,.08); }
.about-visual img { display: block; width: 100%; height: 100%; object-fit: cover; min-height: 320px; }
.about-visual .about-chip { position: absolute; left: 20px; bottom: 20px; right: 20px; padding: 16px 18px; border-radius: 16px; background: rgba(14,14,33,.75); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,.1); color: #fff; }

/* Process steps */
.step-num { font-size: 56px; font-weight: 900; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px rgba(245,158,11,.6); }

/* Contact list */
.contact-items a, .contact-items span { color: rgba(255,255,255,.75); text-decoration: none; }
.contact-items a:hover { color: #fff; }

/* Fix: template gradient uses invalid color-mix() syntax, so the button rendered transparent */
.btn.btn-purple-gradient { background: linear-gradient(to right, #6366f1, #8b5cf6, #6366f1); background-size: 250% auto; color: #fff; border: 0; }
.btn.btn-purple-gradient:hover { background-position: right center; color: #fff; }

/* Login page */
.auth-logo { height: 100px; width: auto; }
.auth-page { overflow: visible; overflow-x: clip; padding-top: 80px !important; padding-bottom: 40px !important; }
.auth-page > .container { width: 100%; }
.auth-back { position: fixed; top: 20px; left: 20px; z-index: 10; display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 50px; font-size: 14px; color: rgba(255,255,255,.75); text-decoration: none; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: all .3s ease; }
.auth-back:hover { color: #fff; background: rgba(255,255,255,.12); }
.auth-msg { padding: 12px 14px; border-radius: 12px; font-size: 14px; line-height: 1.5; }
.auth-msg.is-error { color: #fca5a5; background: rgba(239,68,68,.12); border: 1px solid rgba(239,68,68,.25); }
.auth-msg.is-info { color: #c7d2fe; background: rgba(99,102,241,.12); border: 1px solid rgba(99,102,241,.3); }
@media (max-width: 575.98px) { .auth-back { top: 14px; left: 14px; padding: 6px 14px; font-size: 13px; } .auth-logo { height: 80px; } }
