/* ==========================================================================
   Rayu Logistic — Dark Neon Theme
   Loaded AFTER style.css + responsive.css so it overrides the base look.
   Palette: deep navy/black surfaces, neon cyan + magenta accents.
   ========================================================================== */
:root {
    --red:       #ff2bd6;   /* primary accent → neon magenta (keeps btn-red etc. working) */
    --red-2:     #29e1ff;   /* secondary accent → neon cyan */
    --red-dark:  #d81fb8;
    --neon-cyan: #29e1ff;
    --neon-pink: #ff2bd6;
    --neon-purple:#a24bff;
    --black:     #0a0a16;   /* dark surface */
    --black-2:   #10101f;
    --ink:       #05050d;   /* page background */
    --panel:     #10101f;
    --panel-2:   #14142a;
    --line:      rgba(130,150,240,.16);
    --text:      #e9ecf8;
    --text-dim:  #9aa3c8;
    --gray:      #9aa3c8;
    --gray-light:#0d0d1c;
    --gray-border: rgba(130,150,240,.16);
    --white:     #05050d;
    --grad: linear-gradient(90deg, var(--neon-cyan), var(--neon-pink));
    --grad-135: linear-gradient(135deg, var(--neon-cyan), var(--neon-pink));
    --glow-cyan: 0 0 22px rgba(41,225,255,.45);
    --glow-pink: 0 0 22px rgba(255,43,214,.45);
    --shadow-sm: 0 6px 22px rgba(0,0,0,.5);
    --shadow-md: 0 14px 40px rgba(0,0,0,.55);
    --shadow-lg: 0 26px 70px rgba(0,0,0,.6);
}

/* ---------- Base ---------- */
body { background: var(--ink); color: var(--text); }
h1,h2,h3,h4,h5,.heading,.section-title { color: var(--text); }
p { color: inherit; }
.text-muted { color: var(--text-dim) !important; }
a { color: var(--neon-cyan); }
a:hover { color: var(--neon-pink); }

.bg-light-gray { background: #0a0a18; }
.section-intro { color: var(--text-dim); }
.section-label { color: var(--neon-cyan); text-shadow: 0 0 14px rgba(41,225,255,.5); }
.accent-line { background: var(--grad); box-shadow: var(--glow-cyan); }

/* Neon dotted page ambience */
body::before {
    content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
    background:
      radial-gradient(circle at 15% 12%, rgba(41,225,255,.10), transparent 32%),
      radial-gradient(circle at 85% 85%, rgba(255,43,214,.10), transparent 34%),
      radial-gradient(circle at 60% 30%, rgba(162,75,255,.07), transparent 40%);
}

/* ---------- Buttons ---------- */
.btn-red, .btn-quote {
    background: var(--grad); border: none; color: #05050d !important; font-weight: 700;
    box-shadow: 0 8px 26px rgba(255,43,214,.35);
}
.btn-red:hover, .btn-quote:hover { filter: brightness(1.08); box-shadow: 0 12px 34px rgba(41,225,255,.5); color:#05050d !important; }
.btn-outline-red {
    background: transparent; color: var(--neon-cyan) !important; border: 2px solid var(--neon-cyan);
    box-shadow: inset 0 0 12px rgba(41,225,255,.12), 0 0 14px rgba(41,225,255,.18);
}
.btn-outline-red:hover { background: var(--neon-cyan); color: #05050d !important; box-shadow: var(--glow-cyan); }
.btn-outline-white { border-color: rgba(255,255,255,.5); color:#fff !important; }
.btn-light-cta { background: #fff; color: #0a0a16 !important; }
.read-more { color: var(--neon-cyan); }
.read-more:hover { color: var(--neon-pink); }

/* ---------- Topbar ---------- */
.topbar { background: linear-gradient(90deg, #12002a, #001a2e); border-bottom: 1px solid rgba(41,225,255,.2); }
.topbar-call { background: var(--grad); color: #05050d; }
.topbar-call:hover { filter: brightness(1.1); color:#05050d; }

/* ---------- Header / Nav ---------- */
.site-header { background: rgba(8,8,20,.9); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); box-shadow: 0 2px 24px rgba(0,0,0,.5); }
.site-header.scrolled { box-shadow: 0 6px 30px rgba(41,225,255,.10); }
.navbar-nav .nav-link { color: var(--text); }
.navbar-nav .nav-link:hover, .navbar-nav .nav-link.active { color: var(--neon-cyan); }
.navbar-nav .nav-link::after { background: var(--grad); box-shadow: var(--glow-cyan); }
.brand-primary { color: var(--neon-cyan); text-shadow: 0 0 16px rgba(41,225,255,.55); }
.brand-secondary { color: var(--neon-pink); text-shadow: 0 0 14px rgba(255,43,214,.5); }
.navbar-toggler { color: var(--neon-cyan); }
.navbar-toggler-icon { filter: invert(1) hue-rotate(150deg); }
@media (max-width: 991.98px){ .navbar-collapse { background: var(--panel); border: 1px solid var(--line); } .navbar-nav .nav-item { border-color: var(--line); } }

/* ---------- Hero ---------- */
.hero {
    background:
      radial-gradient(circle at 78% 40%, rgba(255,43,214,.16), transparent 46%),
      radial-gradient(circle at 20% 30%, rgba(41,225,255,.14), transparent 44%),
      linear-gradient(135deg, #060616 0%, #08081a 55%, #0a0420 100%);
    background-color: #07071a;
}
.hero h1 { color: #fff; text-shadow: 0 0 30px rgba(41,225,255,.25); }
.hero h1 .red { color: var(--neon-cyan); text-shadow: 0 0 24px rgba(41,225,255,.5); background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hero-desc { color: var(--text-dim); }
.hero-visual img { filter: drop-shadow(0 20px 50px rgba(255,43,214,.35)); }
.hero::before { background: radial-gradient(circle at 30% 30%, rgba(41,225,255,.18), transparent 70%); }
.hero::after  { background: radial-gradient(circle at 50% 50%, rgba(255,43,214,.14), transparent 70%); }

/* ---------- Trust bar ---------- */
.trust-bar { background: rgba(10,10,26,.85); border: 1px solid rgba(41,225,255,.18); box-shadow: 0 0 40px rgba(41,225,255,.08), var(--shadow-lg); }
.trust-item { border-color: rgba(130,150,240,.12); }
.trust-icon { color: var(--neon-cyan); text-shadow: var(--glow-cyan); }
.trust-item h4 { color:#fff; }

/* ---------- Panels (service / fleet / blog / why / form / side) ---------- */
.service-card, .fleet-card, .blog-card, .form-card, .side-card, .contact-info-card, .quote-form-card {
    background: var(--panel); border: 1px solid var(--line); color: var(--text);
}
.service-card { box-shadow: var(--shadow-sm); }
.service-card:hover, .fleet-card:hover, .blog-card:hover {
    border-color: rgba(41,225,255,.5);
    box-shadow: 0 0 0 1px rgba(41,225,255,.3), 0 18px 50px rgba(41,225,255,.12);
}
.service-card h4, .fleet-body h4, .why-card h4, .side-card h4 { color: var(--text); }
.service-card p, .fleet-body p, .why-card p, .blog-body p { color: var(--text-dim); }
.service-icon { background: rgba(41,225,255,.10); color: var(--neon-cyan); box-shadow: inset 0 0 14px rgba(41,225,255,.18); }
.service-card:hover .service-icon { background: var(--grad); color:#05050d; }

/* Why choose icons */
.why-icon { background: var(--grad-135); box-shadow: 0 10px 28px rgba(255,43,214,.35); }

/* Fleet: keep photo strip light so white-cutout trucks read; neon banner shots override inline */
.fleet-img { background: #0c0c1c; border-bottom: 1px solid var(--line); }
.fleet-cap-tag { background: var(--grad); color:#05050d; font-weight:700; }

/* Blog */
.blog-body h4 a { color: var(--text); }
.blog-body h4 a:hover { color: var(--neon-cyan); }
.blog-cat { background: var(--grad); color:#05050d; font-weight:700; }
.blog-date { color: var(--text-dim); }
.blog-img { background: linear-gradient(135deg, #12122a, #05050d); color: rgba(41,225,255,.4); }

/* ---------- Tracking ---------- */
.track-section { background: linear-gradient(135deg, #0a0420, #06101f); }
.track-form { background: var(--panel-2); border: 1px solid rgba(41,225,255,.25); }
.track-form input { background: transparent; color: var(--text); }
.track-form input::placeholder { color: var(--text-dim); }
.track-result { background: var(--panel); color: var(--text); border: 1px solid var(--line); }
.track-result h3 { color:#fff; }
.track-grid .item { border-color: var(--line); }
.track-grid .item span { color: var(--text-dim); }
.track-grid .item strong { color: var(--text); }
.track-progress { background: rgba(255,255,255,.08); }
.track-progress-bar { background: var(--grad); box-shadow: var(--glow-cyan); }
.track-error { background: var(--panel); color: var(--text); border-left-color: var(--neon-pink); }

/* ---------- About ---------- */
.exp-badge { background: var(--grad-135); box-shadow: 0 16px 40px rgba(255,43,214,.4); }
.check-list li { color: var(--text); }
.check-list li i { color: var(--neon-cyan); }

/* ---------- Stats ---------- */
.stats-section { background: linear-gradient(120deg, #0a0420 0%, #0a0a1e 50%, #06101f 100%); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.stat-num { color:#fff; text-shadow: 0 0 26px rgba(41,225,255,.3); }
.stat-num .plus { color: var(--neon-pink); }
.stat-num .pct { color: var(--neon-cyan); }
.stat-label { color: var(--text-dim); }

/* ---------- CTA banner ---------- */
.cta-banner { background: linear-gradient(100deg, #12002e, #001a2e); border-top:1px solid rgba(41,225,255,.25); border-bottom:1px solid rgba(255,43,214,.25); }
.cta-icon { background: var(--grad); color:#05050d; }
.cta-text h2 { color:#fff; }

/* ---------- Capabilities photo tiles ---------- */
.feature-photo { border: 1px solid var(--line); box-shadow: 0 0 0 1px rgba(41,225,255,.0); }
.feature-photo:hover { box-shadow: 0 0 0 1px rgba(41,225,255,.4), 0 16px 44px rgba(41,225,255,.14); }
.feature-photo .fp-caption .fp-bar { background: var(--grad); }

/* ---------- Forms ---------- */
.form-control, .form-select { background: var(--panel-2); border: 1.5px solid var(--line); color: var(--text); }
.form-control::placeholder { color: var(--text-dim); }
.form-control:focus, .form-select:focus { background: var(--panel-2); border-color: var(--neon-cyan); box-shadow: 0 0 0 3px rgba(41,225,255,.18); color:#fff; }
.form-label { color: var(--text); }
.contact-info-card { background: linear-gradient(160deg,#0c0c20,#0a0418); }
.contact-info-item .ci-icon { background: var(--grad); color:#05050d; }
.contact-info-item span { color: var(--text-dim); }
.contact-info-item a, .contact-info-item strong { color: var(--text); }
.quote-form-body .form-control { background: var(--panel-2); }
.alert-success-custom { background: rgba(41,225,255,.10); color:#8ff0ff; border-left-color: var(--neon-cyan); }
.alert-error-custom { background: rgba(255,43,214,.10); color:#ffb3ee; border-left-color: var(--neon-pink); }

/* ---------- Quote section ---------- */
.quote-section { background: radial-gradient(circle at 12% 20%, rgba(41,225,255,.08), transparent 42%), radial-gradient(circle at 88% 80%, rgba(255,43,214,.08), transparent 44%), #08081a; }
.quote-section::before { background: radial-gradient(circle, rgba(41,225,255,.14), transparent 70%); }
.quote-form-card { box-shadow: 0 0 0 1px rgba(41,225,255,.2), var(--shadow-lg); }
.quote-form-head { background: var(--grad-135); color:#05050d; }
.quote-form-head h3, .quote-form-head p { color:#05050d; }
.quote-form-head .qh-icon { background: rgba(5,5,13,.15); }
.quote-info .quote-points .qp-icon { background: var(--grad); color:#05050d; box-shadow: var(--glow-pink); }
.quote-info .quote-points h5 { color: var(--text); }
.quote-info .quote-points p { color: var(--text-dim); }

/* ---------- City / content pages ---------- */
.content-block { color: var(--text-dim); }
.content-block h2, .content-block h3 { color: var(--text); }
.content-block ul li { color: var(--text); }
.content-block ul li::before { color: var(--neon-cyan); }
.route-tag { background: var(--panel-2); border: 1px solid var(--line); color: var(--text); }
.route-tag i { color: var(--neon-pink); }
.side-list a { color: var(--text-dim); }
.side-list a:hover { color: var(--neon-cyan); }
.article-body { color: var(--text-dim); }
.article-body h3 { color: var(--text); }
.article-meta { color: var(--text-dim); }
.accordion-button { background: var(--panel-2) !important; color: var(--text) !important; box-shadow:none !important; }
.accordion-button:not(.collapsed) { color: var(--neon-cyan) !important; }
.accordion-body { background: var(--panel); color: var(--text-dim); }
.accordion-item { background: var(--panel) !important; border-color: var(--line) !important; }

/* ---------- Page hero (inner) ---------- */
.page-hero { background: radial-gradient(circle at 80% 40%, rgba(255,43,214,.16), transparent 46%), linear-gradient(135deg, #0a0420, #06101f); }
.breadcrumb-nav { color: var(--text-dim); }
.breadcrumb-nav a { color:#fff; }
.breadcrumb-nav span { color: var(--neon-cyan); }

/* ---------- City chips ---------- */
.city-chip { background: var(--panel); border: 1px solid var(--line); color: var(--text); }
.city-chip i { color: var(--neon-cyan); }
.city-chip:hover { background: var(--grad); border-color: transparent; color:#05050d; box-shadow: var(--glow-pink); }
.city-chip:hover i { color:#05050d; }

/* ---------- Footer ---------- */
.site-footer { background: #06060f; border-top: 1px solid var(--line); }
.footer-title::after { background: var(--grad); }
.footer-social a { background: rgba(41,225,255,.08); }
.footer-social a:hover { background: var(--grad); box-shadow: var(--glow-cyan); }
.footer-links a:hover { color: var(--neon-cyan); }
.footer-contact i { color: var(--neon-cyan); }

/* ---------- Back to top + FABs ---------- */
.back-to-top { background: var(--grad); box-shadow: 0 8px 22px rgba(255,43,214,.45); }
.fab-call { background: var(--grad); }

/* ---------- Service photo cards (services page) ---------- */
.service-photo-card .sp-body h4 { color: var(--text); }
.service-photo-card .sp-body p { color: var(--text-dim); }

/* Divider lines */
hr { border-color: var(--line); }
.text-white, .section-title.text-white { color:#fff !important; }