/* =========================================================
   BD BUS SIM — PREMIUM "NIGHT ROUTE / MOTION EDITION"
   Lightweight CSS-only visual system. No heavy 3D library.
   ========================================================= */
:root{
  --p-bg:#07090b;
  --p-ink:#f4f7f6;
  --p-muted:#8e9997;
  --p-line:rgba(244,247,246,.10);
  --p-accent:#72f6df;
  --p-accent-2:#b6ffef;
  --p-warm:#ffb66d;
  --p-panel:rgba(15,19,20,.78);
  --p-ease:cubic-bezier(.16,1,.3,1);
}
html{background:var(--p-bg)}
body{
  background:
    radial-gradient(circle at 72% 12%,rgba(114,246,223,.07),transparent 30rem),
    radial-gradient(circle at 12% 78%,rgba(255,182,109,.045),transparent 24rem),
    var(--p-bg) !important;
  color:var(--p-ink);
}
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.42;
  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:48px 48px;
  mask-image:linear-gradient(to bottom,black,transparent 82%);
}
::selection{background:var(--p-accent);color:#06100e}
::-webkit-scrollbar{width:7px}
::-webkit-scrollbar-track{background:#07090b}
::-webkit-scrollbar-thumb{background:linear-gradient(var(--p-accent),#315f59);border-radius:20px}

/* Hide the old ambient layer visually; the new system is cheaper and cleaner. */
#ambient-canvas{opacity:.12!important}

/* Custom cursor fully removed — system cursor only */

/* Navigation — floating control bar instead of generic full-width AI navbar */
#navbar{
  top:14px!important;left:14px!important;right:14px!important;
  width:auto!important;border:0!important;background:transparent!important;
  box-shadow:none!important;pointer-events:none;
}
#navbar nav{
  max-width:1180px!important;height:62px!important;margin:auto;
  padding:8px 10px 8px 14px!important;
  border:1px solid rgba(255,255,255,.11);
  border-radius:18px;
  background:rgba(7,9,11,.72)!important;
  backdrop-filter:blur(22px) saturate(1.25);
  box-shadow:0 16px 50px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.07);
  pointer-events:auto;
}
#navbar nav>a:first-child{
  padding:7px 11px;border-radius:12px;
  background:rgba(255,255,255,.045);
}
#navbar nav>a:first-child img{
  width:34px;height:34px;border-radius:9px;
  box-shadow:0 0 0 1px rgba(114,246,223,.35),0 0 20px rgba(114,246,223,.08);
}
#navbar nav>a:first-child span{
  letter-spacing:.14em!important;font-size:11px!important;
}
#navbar nav>div.hidden.lg\:flex{
  gap:2px!important;padding:3px;border:1px solid rgba(255,255,255,.06);
  border-radius:13px;background:rgba(255,255,255,.025);
}
#navbar nav>div.hidden.lg\:flex>a{
  padding:9px 11px!important;border-radius:10px;color:#7f8988!important;
  transition:color .25s,background .25s,transform .25s var(--p-ease);
}
#navbar nav>div.hidden.lg\:flex>a:hover,
#navbar nav>div.hidden.lg\:flex>a.text-white{
  color:#fff!important;background:rgba(114,246,223,.08);transform:translateY(-1px);
}
#navbar nav>div.hidden.lg\:flex>a span{
  display:none;
}
#navbar .btn-discord{
  border-radius:9999px!important;padding:8px 14px!important;
  font-size:0.8rem!important;
  /* keep gradient from .btn-discord — no forced cyan */
}
.theme-toggle{
  width:38px!important;height:38px!important;border-radius:11px!important;
  border:1px solid rgba(255,255,255,.1)!important;background:rgba(255,255,255,.04)!important;
  color:#b8c3c1!important;display:flex!important;align-items:center;justify-content:center;
}
#mobile-menu{
  top:88px!important;border:1px solid rgba(255,255,255,.1)!important;
  border-radius:18px;background:rgba(7,9,11,.95)!important;backdrop-filter:blur(22px);
}
@media(max-width:1023px){
  #navbar{top:8px!important;left:8px!important;right:8px!important}
  #navbar nav{height:56px!important;border-radius:15px}
}

/* Preloader — polished brand boot (styles live in header.php) */
#bdbs-preloader::before{
  content:"BDBS // ROUTE CONTROL";position:absolute;top:28px;left:28px;
  font:600 10px/1 'Space Grotesk',sans-serif;letter-spacing:.2em;color:#475569;
}
#bdbs-preloader::after{
  content:"SYSTEM ONLINE  ·  BUILD 2026.09";position:absolute;bottom:28px;right:28px;
  font:600 9px/1 'Space Grotesk',sans-serif;letter-spacing:.16em;color:#334155;
}

/* Global section language */
main section,main>div{position:relative}
main h1,main h2,main h3{letter-spacing:-.045em!important}
main .text-cyan-400,main .text-cyan-300,main .text-cyan-400\/80{color:var(--p-accent)!important}
main .bg-cyan-400{background:var(--p-accent)!important}
main .border-cyan-500\/25,main .border-cyan-500\/20,main .border-white\/10{
  border-color:var(--p-line)!important;
}
main .malva-card,main .pro-card,main .card-soft,main .surface-soft{
  background:linear-gradient(145deg,rgba(18,23,24,.82),rgba(10,13,14,.92))!important;
  border-color:var(--p-line)!important;border-radius:17px!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 18px 50px rgba(0,0,0,.14)!important;
}
main .malva-card:hover,main .pro-card:hover,main .card-soft:hover{
  border-color:rgba(114,246,223,.35)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 25px 70px rgba(0,0,0,.28),0 0 30px rgba(114,246,223,.055)!important;
}
main .text-slate-500,main .text-slate-400{color:var(--p-muted)!important}
main .text-white{color:#f2f6f5!important}
main .bg-\[\#050b16\],main .bg-\[\#080f1a\],main .bg-\[\#0a1220\]{
  background:transparent!important;
}
main .border-b,main .border-y,main .border-t{border-color:rgba(255,255,255,.07)!important}

/* Hero */
.bdbs-hero{
  min-height:820px!important;padding:138px 0 70px!important;overflow:hidden;
  display:flex;align-items:center;
  background:
    radial-gradient(circle at 78% 45%,rgba(114,246,223,.075),transparent 27rem),
    linear-gradient(180deg,rgba(7,9,11,.3),#07090b 94%);
}
.bdbs-hero-grid{
  width:min(1180px,calc(100% - 40px));margin:auto;
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(420px,1.15fr);
  gap:42px;align-items:center;
}
.hero-kicker{
  display:inline-flex;align-items:center;gap:9px;padding:8px 11px;
  border:1px solid rgba(114,246,223,.18);background:rgba(114,246,223,.045);
  color:#91a19e;border-radius:8px;font:600 9px/1 'Space Grotesk',sans-serif;
  letter-spacing:.18em;text-transform:uppercase;
}
.hero-kicker b{color:var(--p-accent);font-weight:700}
.hero-title{
  margin:20px 0 13px;font:800 clamp(58px,8vw,116px)/.84 'Space Grotesk',sans-serif!important;
  letter-spacing:-.075em!important;color:#f2f6f5!important;
}
.hero-title em{
  display:block;font-family:'Instrument Serif',Georgia,serif;font-weight:400;font-style:italic;
  letter-spacing:-.055em;color:var(--p-accent);
}
.hero-sub{
  max-width:510px;color:#929d9a;font:400 15px/1.8 'DM Sans',sans-serif;
}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}
.hero-cta{
  display:inline-flex;align-items:center;gap:9px;padding:13px 17px;border-radius:10px;
  background:var(--p-accent);color:#06100e!important;font-weight:800;font-size:12px;
  box-shadow:0 12px 35px rgba(114,246,223,.12);transition:transform .3s var(--p-ease),box-shadow .3s;
}
.hero-cta:hover{transform:translateY(-3px);box-shadow:0 18px 45px rgba(114,246,223,.2)}
.hero-ghost{
  display:inline-flex;align-items:center;gap:9px;padding:13px 17px;border-radius:10px;
  border:1px solid rgba(255,255,255,.11);background:rgba(255,255,255,.035);color:#e7edeb!important;
  font-weight:700;font-size:12px;transition:.3s var(--p-ease);
}
.hero-ghost:hover{background:rgba(255,255,255,.07);transform:translateY(-3px);border-color:rgba(255,255,255,.18)}
.hero-meta{display:flex;gap:24px;margin-top:30px;padding-top:19px;border-top:1px solid rgba(255,255,255,.08)}
.hero-meta strong{display:block;color:#eaf1ef;font:700 17px/1.1 'Space Grotesk',sans-serif}
.hero-meta span{display:block;margin-top:5px;color:#626d6b;font-size:9px;letter-spacing:.12em;text-transform:uppercase}

/* Bus stage */
.bus-stage{
  position:relative;height:min(610px,62vw);min-height:440px;perspective:1400px;
  transform-style:preserve-3d;
}
.bus-stage::before{
  content:"";position:absolute;inset:7% 4% 7% 3%;border:1px solid rgba(255,255,255,.08);
  clip-path:polygon(9% 0,100% 0,91% 100%,0 100%);transform:rotate(-3deg);
}
.bus-stage::after{
  content:"LIVE ROUTE  /  NIGHT HIGHWAY";position:absolute;top:7%;right:5%;
  color:#65716f;font:600 9px 'Space Grotesk',sans-serif;letter-spacing:.16em;
}
.bus-horizon{
  position:absolute;left:5%;right:2%;bottom:15%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(114,246,223,.65),transparent);
  box-shadow:0 0 30px rgba(114,246,223,.3);
}
.bus-image-shell{
  position:absolute;inset:9% 0 10% 6%;overflow:hidden;
  clip-path:polygon(7% 0,100% 0,94% 100%,0 100%);
  border:1px solid rgba(255,255,255,.13);
  transform:rotateY(-9deg) rotateX(2deg) rotateZ(-2deg);
  box-shadow:-30px 30px 80px rgba(0,0,0,.48),0 0 80px rgba(114,246,223,.06);
  animation:busFloat 8s ease-in-out infinite;
  transform-style:preserve-3d;
}
.bus-image-shell img{width:100%;height:100%;object-fit:cover;filter:saturate(.85) contrast(1.08);transform:scale(1.08);animation:busPan 11s ease-in-out infinite alternate}
.bus-image-shell::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(115deg,rgba(114,246,223,.10),transparent 30%,rgba(0,0,0,.2) 70%,rgba(255,182,109,.08));
  mix-blend-mode:screen;
}
.bus-scanlines{
  position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.18;
  background:repeating-linear-gradient(0deg,transparent 0 5px,rgba(255,255,255,.06) 6px,transparent 7px);
  animation:scanMove 7s linear infinite;
}
.route-orbit{
  position:absolute;right:-2%;bottom:7%;width:170px;height:170px;border:1px dashed rgba(114,246,223,.22);
  border-radius:50%;animation:orbitSpin 18s linear infinite;
}
.route-orbit::before,.route-orbit::after{content:"";position:absolute;border-radius:50%;background:var(--p-accent)}
.route-orbit::before{width:7px;height:7px;left:10%;top:25%;box-shadow:0 0 20px var(--p-accent)}
.route-orbit::after{width:4px;height:4px;right:20%;bottom:14%}
.stage-card{
  position:absolute;z-index:5;left:0;bottom:4%;padding:15px 17px;min-width:190px;
  background:rgba(8,11,12,.84);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(16px);
  box-shadow:0 18px 55px rgba(0,0,0,.42);transform:translateZ(70px);
}
.stage-card small{display:block;color:#687572;font:600 8px 'Space Grotesk';letter-spacing:.17em;text-transform:uppercase}
.stage-card strong{display:block;margin-top:7px;color:#e9f0ee;font:700 17px 'Space Grotesk'}
.stage-card span{display:block;margin-top:4px;color:#6f7c79;font-size:10px}
.stage-card .live-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#ff6e5e;box-shadow:0 0 12px #ff6e5e;margin-right:6px}
.stage-index{position:absolute;right:4%;top:19%;z-index:5;color:rgba(255,255,255,.28);font:700 9px 'Space Grotesk';letter-spacing:.18em;writing-mode:vertical-rl}
@keyframes busFloat{0%,100%{transform:rotateY(-9deg) rotateX(2deg) rotateZ(-2deg) translate3d(0,0,0)}50%{transform:rotateY(-6deg) rotateX(3deg) rotateZ(-1deg) translate3d(0,-10px,12px)}}
@keyframes busPan{0%{transform:scale(1.08) translate3d(-1%,0,0)}100%{transform:scale(1.12) translate3d(1%,-1%,0)}}
@keyframes scanMove{from{transform:translateY(-10%)}to{transform:translateY(10%)}}
@keyframes orbitSpin{to{transform:rotate(360deg)}}

/* Existing marquee / stats become editorial data rail */
.outline-word{font-family:'Space Grotesk',sans-serif!important;font-size:clamp(30px,5vw,64px)!important;letter-spacing:-.07em!important;color:transparent!important;-webkit-text-stroke:1px rgba(255,255,255,.18)}
.route-marquee{border-top:1px solid rgba(255,255,255,.07);border-bottom:0!important}
.route-chip{color:#64716e!important;font-size:9px!important;letter-spacing:.12em;text-transform:uppercase}

/* Feature cards: staggered depth */
main .card-3d{transform-style:preserve-3d}
main .card-3d:hover{transform:translateY(-8px) rotateX(2deg) rotateY(-2deg)!important}

/* Image treatments */
main img{transition:transform .7s var(--p-ease),filter .7s}
main .bus-card:hover img,main .img-frame:hover img{transform:scale(1.045)!important;filter:saturate(1.08) contrast(1.03)}

/* Scroll-to-top */
#scroll-top{
  width:42px!important;height:42px!important;border-radius:11px!important;
  background:rgba(9,13,14,.86)!important;border:1px solid rgba(255,255,255,.12)!important;
  color:var(--p-accent)!important;backdrop-filter:blur(14px);
}

/* Footer */
footer{
  background:linear-gradient(180deg,rgba(7,9,11,0),rgba(7,9,11,.98))!important;
  border-color:rgba(255,255,255,.07)!important;
}

/* Generic page header gives inner pages the same identity */
main>div.pt-24,main>div.pt-20,main>div.pt-28{
  padding-top:140px!important;
}
main>div.pt-24 h1,main>div.pt-20 h1,main>div.pt-28 h1{
  font-size:clamp(42px,7vw,76px)!important;
}

/* Reduce expensive blur/particles on smaller screens */
@media(max-width:800px){
  .bdbs-hero{min-height:auto!important;padding:115px 0 55px!important}
  .bdbs-hero-grid{grid-template-columns:1fr;width:min(100% - 28px,650px);gap:34px}
  .hero-title{font-size:clamp(54px,18vw,92px)!important}
  .hero-sub{font-size:14px}
  .bus-stage{height:440px;min-height:0}
  .bus-image-shell{inset:5% 0 8% 0;transform:rotateY(-4deg) rotateZ(-1deg)}
  .stage-card{left:3%;bottom:0}
  .route-orbit{width:115px;height:115px}
}
/* prefers-reduced-motion ignored — bus/route animations always run */

/* Custom cursor removed — system cursor only */

/* =========================================================
   Apple-style motion polish
   ========================================================= */
:root {
  --apple-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --apple-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Reveal — soft fade + lift (Apple product pages) */
.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition:
    opacity 0.9s var(--apple-ease),
    transform 0.9s var(--apple-ease);
  will-change: opacity, transform;
}
.reveal.is-visible,
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-left {
  opacity: 0;
  transform: translate3d(-40px, 12px, 0);
  transition:
    opacity 0.95s var(--apple-ease),
    transform 0.95s var(--apple-ease);
  will-change: opacity, transform;
}
.reveal-left.is-visible,
.reveal-left.visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.reveal-right {
  opacity: 0;
  transform: translate3d(40px, 12px, 0);
  transition:
    opacity 0.95s var(--apple-ease),
    transform 0.95s var(--apple-ease);
  will-change: opacity, transform;
}
.reveal-right.is-visible,
.reveal-right.visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.reveal-scale {
  opacity: 0;
  transform: scale(0.94) translateY(20px);
  transition:
    opacity 0.9s var(--apple-ease),
    transform 0.9s var(--apple-ease);
  will-change: opacity, transform;
}
.reveal-scale.is-visible,
.reveal-scale.visible {
  opacity: 1;
  transform: scale(1) translateY(0);
}

/* Navbar glass intensifies after scroll */
#navbar.nav-scrolled nav,
#navbar.nav-scrolled .nav-glass {
  backdrop-filter: saturate(180%) blur(20px) !important;
  -webkit-backdrop-filter: saturate(180%) blur(20px) !important;
  background: rgba(7, 9, 11, 0.72) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  transition: background 0.4s var(--apple-ease), backdrop-filter 0.4s ease, border-color 0.4s ease;
}

/* Buttons — subtle press */
a.hero-cta,
a.btn-discord,
button,
.inline-flex.rounded-full {
  transition: transform 0.35s var(--apple-ease), box-shadow 0.35s var(--apple-ease), background 0.25s ease !important;
}
a.hero-cta:hover,
a.btn-discord:hover,
.inline-flex.rounded-full:hover {
  transform: scale(1.03);
}
a.hero-cta:active,
a.btn-discord:active,
.inline-flex.rounded-full:active {
  transform: scale(0.97);
}

/* Images soft appear */
img {
  transition: opacity 0.6s var(--apple-ease), transform 0.7s var(--apple-ease);
}

/* Team / feature cards lift */
.team-person,
.team-person-founder {
  transition: transform 0.5s var(--apple-ease), box-shadow 0.5s var(--apple-ease), border-color 0.35s ease;
}
.team-person:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px -12px rgba(34, 211, 238, 0.15);
}

/* Preloader — softer exit */
#bdbs-preloader {
  transition: opacity 0.65s var(--apple-ease), visibility 0.65s ease;
}
#bdbs-preloader.hide {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Smooth page scroll */
html {
  scroll-behavior: smooth;
}

/* FAQ open animation feel */
details.faq-item summary,
details summary {
  transition: color 0.3s ease;
}
details[open] summary + * {
  animation: appleFadeIn 0.45s var(--apple-ease);
}
@keyframes appleFadeIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Hero title subtle entrance on load */
.hero-cta,
.hero-ghost {
  animation: appleRise 0.9s var(--apple-ease) both;
}
.hero-ghost { animation-delay: 0.08s; }
@keyframes appleRise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}