/* SkyBridge Freight — design tokens & components */
:root{
  --sky:#2196F3;
  --sky-600:#1976d2;
  --navy:#0A2540;
  --navy-700:#0d2e4f;
  --ink:#0b1b2b;
  --muted:#5b6b7c;
  --line:#e6ecf2;
  --bg:#f6f9fc;
  --card:#ffffff;
  --success:#1aa260;
  --warn:#f08c00;
  --danger:#e03131;
  --radius:14px;
  --shadow:0 10px 30px -12px rgba(10,37,64,.18);
  --shadow-sm:0 4px 14px -8px rgba(10,37,64,.25);
}
[data-theme="dark"]{
  --navy:#0a1622;
  --ink:#e9f1f8;
  --muted:#9fb0c0;
  --line:#1d2f42;
  --bg:#0a141f;
  --card:#0f1f30;
  --shadow:0 12px 30px -14px rgba(0,0,0,.6);
}

*{box-sizing:border-box}
body{
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);
  color:var(--ink);
  margin:0;
}
a{color:var(--sky-600);text-decoration:none}
a:hover{text-decoration:underline}
.display-face{font-family:"Sora","Inter",sans-serif;letter-spacing:-.02em}

/* Navbar */
.sb-nav{background:var(--navy);}
.sb-nav .navbar-brand{font-weight:800;letter-spacing:-.02em;color:#fff;font-family:"Sora",sans-serif}
.sb-nav .nav-link{color:#cdd9e6 !important;font-weight:500}
.sb-nav .nav-link:hover{color:#fff !important}
.brand-dot{display:inline-block;width:.55rem;height:.55rem;border-radius:50%;background:var(--sky);margin-right:.5rem;vertical-align:middle;box-shadow:0 0 0 4px rgba(33,150,243,.25)}

/* Buttons */
.btn-sky{background:var(--sky);border-color:var(--sky);color:#fff;font-weight:600}
.btn-sky:hover{background:var(--sky-600);border-color:var(--sky-600);color:#fff}
.btn-outline-sky{border-color:var(--sky);color:var(--sky);font-weight:600}
.btn-outline-sky:hover{background:var(--sky);color:#fff}

/* Cards */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm)}
.stat-card{border:1px solid var(--line);border-radius:var(--radius);background:var(--card);padding:1.25rem 1.4rem}
.stat-card .num{font-size:1.9rem;font-weight:800;font-family:"Sora",sans-serif;line-height:1}
.stat-card .lbl{color:var(--muted);font-size:.82rem;text-transform:uppercase;letter-spacing:.06em}
.stat-card .ico{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;font-size:1.25rem}

/* Hero */
.hero{background:
   radial-gradient(1200px 500px at 80% -10%, rgba(33,150,243,.35), transparent 60%),
   linear-gradient(160deg,var(--navy) 0%, var(--navy-700) 55%, #06192c 100%);
  color:#fff;position:relative;overflow:hidden}
.hero h1{font-family:"Sora",sans-serif;font-weight:800;letter-spacing:-.03em;line-height:1.02}
.hero .lead{color:#c7d6e6}
.hero-track{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:16px;backdrop-filter:blur(8px);padding:.5rem}
.hero-track input{background:transparent;border:none;color:#fff;box-shadow:none}
.hero-track input::placeholder{color:#9db4ca}
.hero-track input:focus{outline:none;box-shadow:none;background:transparent;color:#fff}

/* Timeline */
.timeline{position:relative;margin:0;padding-left:0;list-style:none}
.timeline li{position:relative;padding:0 0 1.4rem 2.2rem}
.timeline li::before{content:"";position:absolute;left:.55rem;top:.35rem;bottom:-.2rem;width:2px;background:var(--line)}
.timeline li:last-child::before{display:none}
.timeline .dot{position:absolute;left:0;top:.2rem;width:1.15rem;height:1.15rem;border-radius:50%;background:var(--sky);box-shadow:0 0 0 4px rgba(33,150,243,.18)}
.timeline li.is-current .dot{background:var(--success);box-shadow:0 0 0 5px rgba(26,162,96,.2)}
.timeline .t-status{font-weight:700}
.timeline .t-meta{color:var(--muted);font-size:.85rem}

/* Dashboard sidebar */
.app-shell{display:flex;min-height:100vh}
.sidebar{width:248px;background:var(--navy);color:#cdd9e6;flex-shrink:0;padding:1.25rem 0}
.sidebar a{display:flex;gap:.7rem;align-items:center;color:#cdd9e6;padding:.7rem 1.4rem;font-weight:500;border-left:3px solid transparent}
.sidebar a:hover,.sidebar a.active{color:#fff;background:rgba(255,255,255,.06);border-left-color:var(--sky);text-decoration:none}
.app-main{flex:1;min-width:0;background:var(--bg)}
@media (max-width:860px){.sidebar{display:none}}

.section{padding:4.5rem 0}
.eyebrow{color:var(--sky);font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:.78rem}
.footer{background:var(--navy);color:#aebfce}
.footer a{color:#cdd9e6}

/* ---- Preloader ---- */
#preloader{
  position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;
  background:var(--bg);
  transition:opacity .45s ease,visibility .45s ease;
  /* Fallback: fade out even if JS is disabled */
  animation:preloaderFallback 0s linear 2.5s forwards;
}
#preloader.loaded{opacity:0;visibility:hidden;pointer-events:none}
@keyframes preloaderFallback{to{opacity:0;visibility:hidden;pointer-events:none}}
.preloader-mark{position:relative;width:96px;height:96px;display:grid;place-items:center}
.preloader-mark svg{filter:drop-shadow(0 8px 20px rgba(33,150,243,.35));animation:preloaderPop 1.2s ease-in-out infinite}
.preloader-spin{
  position:absolute;inset:-14px;border-radius:50%;
  border:3px solid rgba(33,150,243,.18);border-top-color:var(--sky);
  animation:preloaderSpin .8s linear infinite;
}
@keyframes preloaderSpin{to{transform:rotate(360deg)}}
@keyframes preloaderPop{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

/* ---- Floating WhatsApp button ---- */
.wa-float{
  position:fixed;right:22px;bottom:22px;z-index:1050;
  width:58px;height:58px;border-radius:50%;
  background:#25D366;color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:1.9rem;text-decoration:none;
  box-shadow:0 10px 26px -8px rgba(37,211,102,.7);
  transition:transform .2s ease,box-shadow .2s ease;
}
.wa-float:hover{color:#fff;transform:scale(1.08);box-shadow:0 14px 30px -8px rgba(37,211,102,.85)}
.wa-float::before{
  content:"";position:absolute;inset:0;border-radius:50%;background:#25D366;z-index:-1;
  animation:waPulse 2s ease-out infinite;
}
@keyframes waPulse{0%{transform:scale(1);opacity:.55}100%{transform:scale(1.9);opacity:0}}
.wa-tip{
  position:absolute;right:70px;white-space:nowrap;background:#0A2540;color:#fff;
  padding:6px 12px;border-radius:8px;font-size:.82rem;font-weight:500;
  opacity:0;transform:translateX(6px);pointer-events:none;transition:opacity .2s,transform .2s;
  box-shadow:var(--shadow-sm);
}
.wa-float:hover .wa-tip{opacity:1;transform:translateX(0)}
@media (max-width:576px){.wa-float{right:16px;bottom:16px;width:52px;height:52px;font-size:1.7rem}.wa-tip{display:none}}