:root {
  --bg:#0f1115;
  --panel:#171a21;
  --text:#e5e7eb;
  --muted:#9aa0a6;
  --accent:#0ea5e9;
}

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,Segoe UI,Roboto,Arial}
a{color:var(--accent);text-decoration:none}
.wrap{max-width:1100px;margin:0 auto;padding:20px}

/* Header / Nav */
header{position:sticky;top:0;background:rgba(15,17,21,.85);backdrop-filter:saturate(120%) blur(6px);border-bottom:1px solid #222}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0}
.brand{font-weight:800;letter-spacing:.3px}
.menu{display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.menu a{padding:8px 10px;border-radius:10px}
.menu a:hover{background:#0b0d12}

.btn{display:inline-block;background:var(--accent);color:#fff;padding:10px 14px;border-radius:12px;font-weight:700}
.btn:hover{opacity:.92}
.pill{background:#0b0d12;color:var(--muted);padding:6px 10px;border-radius:999px;font-size:14px}

/* Content */
.hero{padding:56px 0}
.hero h1{font-size:36px;margin:0 0 8px}
.hero p{color:var(--muted);margin:0 0 18px}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.card{background:var(--panel);border-radius:16px;padding:18px;box-shadow:0 6px 28px rgba(0,0,0,.28)}
.card h3{margin:0 0 6px;font-size:18px}
.small{color:var(--muted);font-size:14px}
.section-gap{margin-top:22px}

/* Footer */
footer{padding:28px 0;color:var(--muted);text-align:center}

/* --------------------------------------------------
   Page depth: glows + subtle grid
-------------------------------------------------- */
body{position:relative;overflow-x:hidden}
body::before{
  content:"";
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(1000px 600px at 15% -10%, rgba(255,120,0,.12) 0%, transparent 60%),
    radial-gradient(800px 500px at 85% 0%,   rgba(0,180,255,.12) 0%, transparent 65%),
    radial-gradient(900px 500px at 50% 110%, rgba(255,255,255,.04) 0%, transparent 65%);
  filter:saturate(.9);
}
body::after{
  content:"";
  position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.35;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.02) 0 1px, transparent 1px 80px),
    repeating-linear-gradient(0deg,  rgba(255,255,255,.02) 0 1px, transparent 1px 80px);
}
header, main, footer{position:relative; z-index:1}

/* thin accent line under sticky header */
header::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:linear-gradient(90deg, transparent, rgba(14,165,233,.45), transparent);
}

/* --------------------------------------------------
   Hero panel + truck image (with seamless blend)
-------------------------------------------------- */
/* ===== HERO — seamless blend + longer truck + subtle entrance ===== */
.hero{
  position: relative;
  padding: 72px 32px;
  border-radius: 22px;
  background: rgba(15,17,21,0.72);          /* translucent: blends with page bg */
  backdrop-filter: blur(6px) saturate(130%); /* “glassy” panel */
  border: 1px solid rgba(255,255,255,0.05);
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
  overflow: hidden;
}

/* LONG truck image on the right, feathered into the panel */
/* Bigger, more centered truck */
.hero::before{
  --truck-opacity: .22;                       /* .18–.28 */
  content:"";
  position:absolute;
  right:125px;                                 /* move LEFT by increasing this */
  bottom:-24px;
  width:clamp(780px, 70vw, 1300px);            /* longer */
  height:clamp(240px, 32vw, 360px);
  background:url("/info/assets/truck_logo.png") no-repeat 100% 100%;
  background-size:contain;
  opacity:var(--truck-opacity);
 
  filter:brightness(1.05) saturate(1.05)
         drop-shadow(0 0 28px rgba(255,140,0,.20));
  pointer-events:none;
  z-index:0;

  /* feather edges to avoid any box outline */
  -webkit-mask-image: linear-gradient(90deg,
      transparent 0%, rgba(0,0,0,.55) 6%,
      black 52%, black 96%, transparent 100%);
          mask-image: linear-gradient(90deg,
      transparent 0%, rgba(0,0,0,.55) 6%,
      black 52%, black 96%, transparent 100%);
}

/* Lighter overlay so the truck shows through more */
.hero::after {
  content: none !important;
}

/* ensure hero text sits above the art */
.hero > *{ position:relative; z-index:1 }

/* ensure text sits above art */
.hero > *{ position: relative; z-index: 1; }

/* entrance animation */
@keyframes truckIn{
  0%   { opacity: 0; transform: translateX(48px); }
  100% { opacity: var(--truck-opacity); transform: translateX(0); }
}




.hero > * { position: relative; z-index: 1; }

/* Cards: polish */
.card{
  border:1px solid rgba(255,255,255,.04);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover{
  transform:translateY(-2px);
  border-color:rgba(255,255,255,.08);
  box-shadow:0 10px 36px rgba(0,0,0,.36);
}

/* Hero title gradient text */
.hero h1{
  letter-spacing:.2px;
  background:linear-gradient(180deg,#e5e7eb 0%,#cfd4db 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* Responsive: hide image on small screens so text has room */
@media (max-width: 760px){
  .hero::before{ display:none; }
  .hero::after{
    background:linear-gradient(90deg, rgba(15,17,21,.95), rgba(15,17,21,.95));
  }
}