/* DroTraffic v5 — LED dark + amber (no brown) */
:root{
  --bg:#07070a; --panel:#0d0f12; --text:#eaeaf0; --muted:#a7a7b1;
  --amber:#FF7A1A; --amber2:#FF8C3A; --radius:16px; --shadow:0 10px 30px rgba(0,0,0,.55);
  --header-h:70px; --gap:16px;
}
*{box-sizing:border-box} html,body{height:100%} html{scroll-behavior:smooth}
body{margin:0; background:var(--bg); color:var(--text); font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Arial,Helvetica,sans-serif; line-height:1.6; overflow-x:hidden; padding-top:var(--header-h)}
a{color:var(--amber); text-decoration:none}
#bgfx{position:fixed; inset:0; z-index:-1; pointer-events:none; background: radial-gradient(900px 500px at 70% -10%, rgba(255,122,26,.06), transparent 55%), url('../assets/hero-bg.png') center/cover no-repeat fixed, var(--bg); filter:saturate(1.02)}

/* Header */
.header{position:fixed; top:0; left:0; right:0; z-index:100; backdrop-filter:saturate(160%) blur(10px); background:linear-gradient(to bottom, rgba(7,7,10,.92), rgba(7,7,10,.5)); border-bottom:1px solid rgba(255,255,255,.06); height:var(--header-h)}
.nav{height:100%; display:flex; align-items:center; justify-content:space-between; gap:10px; width:min(1200px, 92vw); margin:0 auto}
.logo-link{display:flex; align-items:center; gap:10px}
.menu{display:flex; align-items:center; gap:8px}
.menu a{position:relative; padding:8px 10px; border-radius:10px; color:var(--text); opacity:.92; transition:opacity .2s, transform .2s}
.menu a:hover{opacity:1; transform:translateY(-1px)}
.menu a::after{content:""; position:absolute; left:8px; right:8px; bottom:5px; height:2px; background:linear-gradient(90deg,var(--amber),var(--amber2)); transform:scaleX(0); transform-origin:left; transition:transform .25s cubic-bezier(.22,1,.36,1)}
.menu a:hover::after, .menu a.active::after{transform:scaleX(1)}
.cta{display:inline-flex; align-items:center; gap:10px; background:linear-gradient(90deg,var(--amber),var(--amber2)); color:#111; border:none; padding:10px 16px; border-radius:12px; box-shadow:0 8px 30px rgba(255,122,26,.35); font-weight:800}
.cta:hover{filter:saturate(1.12)}
.burger{display:none; width:40px; height:40px; border:1px solid rgba(255,255,255,.12); border-radius:10px; background:rgba(255,255,255,.02); color:var(--text)}
.drawer{position:fixed; inset:0 0 0 auto; width:min(320px, 85vw); background:#0c0e12; border-left:1px solid rgba(255,255,255,.08); transform:translateX(100%); transition:transform .3s ease; z-index:110; padding:14px}
.drawer.open{transform:none}
.drawer a{display:block; padding:10px 6px; border-bottom:1px solid rgba(255,255,255,.06); color:var(--text)}
.drawer .cta{width:100%; justify-content:center; margin-top:10px}
@media (max-width:980px){ .menu{display:none} .burger{display:inline-flex; align-items:center; justify-content:center} }

/* Layout */
.container{width:min(1200px, 92vw); margin:0 auto} .section{padding:24px 0}
.vh{min-height:calc(100vh - var(--header-h)); display:flex; align-items:center}
.half{min-height:calc(50vh - var(--header-h)/2); display:flex; align-items:center}
.section .inner{width:100%}
.head{display:flex; align-items:end; justify-content:space-between; margin-bottom:14px}
.head h2{margin:3px; font-size:clamp(24px,2.6vw,36px)}
.lead{color:var(--muted); max-width:820px}

/* Hero */
.hero-grid{display:grid; grid-template-columns: 1.1fr .9fr; gap:24px; align-items:center}
.badges{display:flex; gap:10px; flex-wrap:wrap}
.badge{display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border:1px solid rgba(255,255,255,.12); border-radius:999px; background:rgba(255,255,255,.02)}
.mock{border-radius:20px; overflow:hidden; border:1px solid rgba(255,255,255,.08); box-shadow:0 20px 60px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.04) inset}
.center-down{position:absolute; left:50%; transform:translateX(-50%); bottom:22px; opacity:.65; transition:opacity .2s}
.center-down:hover{opacity:1}
.center-down svg{filter:drop-shadow(0 6px 16px rgba(0,0,0,.5))}

/* Grids & cards */
.grid-3{display:grid; grid-template-columns: repeat(3,1fr); gap:var(--gap)}
.grid-2{display:grid; grid-template-columns: 1fr 1fr; gap:var(--gap)}
.card{background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.08)); border:1px solid rgba(255,255,255,.06); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow)}
.card h3{margin-top:8px}

/* Icon tiles */
.icon-tiles{display:grid; grid-template-columns: repeat(6, 1fr); gap:12px}
.icon-tiles .tile{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:14px; background:rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.06); border-radius:14px; text-align:center}
.icon-tiles img{width:84px; height:84px; border-radius:50%; object-fit:contain}

/* Gallery */
.multi{position:relative; overflow:hidden; border-radius:16px; border:1px solid rgba(255,255,255,.06); background:rgba(255,255,255,.02)}
.multi .track{display:flex; gap:var(--gap); padding:10px; transition: transform .6s cubic-bezier(.22,1,.36,1)}
.multi .item{flex:0 0 25%}
.multi .item img{width:100%; height:auto; border-radius:12px; border:1px solid rgba(255,255,255,.06)}
.multi .nav{position:absolute; inset:auto 12px 12px 12px; display:flex; justify-content:space-between; pointer-events:none}
.multi button{pointer-events:auto; border:none; border-radius:12px; padding:10px 14px; font-weight:800; background:linear-gradient(90deg,var(--amber),var(--amber2)); color:#111; box-shadow:0 10px 24px rgba(255,122,26,.35)}
@media (max-width:1200px){ .multi .item{flex:0 0 33.333%} } @media (max-width:800px){ .multi .item{flex:0 0 50%} }

/* Accordion */
.accordion{display:grid; gap:10px}
.accordion details{border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:12px 14px; background:rgba(255,255,255,.02)}
.accordion summary{cursor:pointer; font-weight:700; list-style:none}
.accordion details[open]{border-color: rgba(255,122,26,.35)}

/* FABs */
.fab{position:fixed; width:48px; height:48px; border-radius:999px; display:flex; align-items:center; justify-content:center; background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.08)); border:1px solid rgba(255,255,255,.08); color:#fff; box-shadow:0 12px 32px rgba(0,0,0,.35); z-index:90; opacity:0; transform:scale(.9); pointer-events:none; transition:opacity .25s, transform .25s}
.fab.show{opacity:1; transform:scale(1); pointer-events:auto}
.fab.top{left:18px; bottom:18px} .fab.help{right:18px; bottom:18px}

/* Scroll FX */
[data-fx]{will-change: transform, opacity; opacity:0; transform: translateY(12px)} [data-fx].in{opacity:1; transform:none}
[data-fx="fade"].in{animation: fadeIn .7s both} [data-fx="slide-left"].in{animation: slideLeft .7s both} [data-fx="slide-right"].in{animation: slideRight .7s both} [data-fx="zoom"].in{animation: zoomIn .7s both}
@keyframes fadeIn{from{opacity:0}to{opacity:1}} @keyframes slideLeft{from{opacity:0; transform: translateX(20px)}to{opacity:1; transform:none}} @keyframes slideRight{from{opacity:0; transform: translateX(-20px)}to{opacity:1; transform:none}} @keyframes zoomIn{from{opacity:0; transform: scale(.96)}to{opacity:1; transform: scale(1)}}

.footer{padding:24px 0; border-top:1px solid rgba(255,255,255,.06); color:var(--muted); font-size:14px}
@media (max-width:980px){ .hero-grid{grid-template-columns:1fr} .grid-3{grid-template-columns:1fr} .grid-2{grid-template-columns:1fr} .icon-tiles{grid-template-columns:repeat(3,1fr)} }




h2, h3 {
   margin-right: 15px !important;
 
  }
}