:root{
  --green:#B7F34D;
  --green-hover:#A8E83E;
  --blue:#3BA7FF;
  --amber:#FFB020;
  --red:#FF4D4F;
  --bg:#08090B;
  --card:#111317;
  --muted:rgba(255,255,255,.65);
  --soft:rgba(255,255,255,.10);
}

*{box-sizing:border-box;margin:0;padding:0}

html{scroll-behavior:smooth}

body{
  min-height:100vh;
  background:var(--bg);
  color:#fff;
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

a{color:inherit;text-decoration:none}

.page{
  min-height:100vh;
  overflow:hidden;
  background:#08090B;
}

.container{
  width:min(100%,1280px);
  margin:0 auto;
}

.hero-section{
  position:relative;
  padding:24px 48px 0;
}

.hero-glow{
  position:absolute;
  pointer-events:none;
  border-radius:999px;
  opacity:.4;
  filter:blur(120px);
}

.hero-glow-green{
  left:50%;
  top:0;
  width:520px;
  height:520px;
  transform:translateX(-50%);
  background:rgba(183,243,77,.2);
}

.hero-glow-blue{
  right:0;
  top:160px;
  width:360px;
  height:360px;
  background:rgba(59,167,255,.1);
}

.navbar{
  position:relative;
  z-index:10;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 20px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:24px;
  background:rgba(255,255,255,.03);
  backdrop-filter:blur(18px);
}

.brand-logo{
  height:56px;
  width:auto;
  object-fit:contain;
  display:block;
}

.nav-links{
  display:flex;
  align-items:center;
  gap:32px;
  color:rgba(255,255,255,.70);
  font-size:14px;
}

.nav-links a{transition:.2s ease}
.nav-links a:hover{color:var(--green)}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border-radius:16px;
  padding:12px 24px;
  font-size:14px;
  font-weight:700;
  line-height:1;
  transition:.2s ease;
  border:0;
  cursor:pointer;
}

.btn:hover{transform:translateY(-2px)}

.btn-primary{
  color:#000;
  background:var(--green);
  box-shadow:0 0 30px rgba(183,243,77,.25);
}

.btn-primary:hover{background:var(--green-hover)}

.btn-secondary{
  color:#fff;
  border:1px solid rgba(255,255,255,.15);
  background:rgba(255,255,255,.03);
}

.btn-secondary:hover{background:rgba(255,255,255,.10)}

.hero-grid{
  position:relative;
  z-index:10;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  align-items:center;
  gap:48px;
  padding:80px 0 112px;
}

.hero-logo-wrap{
  display:flex;
  align-items:center;
  gap:16px;
  margin-bottom:32px;
}

.hero-logo{
  height:80px;
  width:auto;
  object-fit:contain;
  filter:drop-shadow(0 0 30px rgba(183,243,77,.25));
}

.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:24px;
  padding:8px 16px;
  border:1px solid rgba(183,243,77,.30);
  border-radius:999px;
  background:rgba(183,243,77,.10);
  color:#D8FF92;
  font-size:14px;
}

h1{
  max-width:900px;
  color:#fff;
  font-size:clamp(48px,6vw,72px);
  line-height:1;
  letter-spacing:-.055em;
  font-weight:650;
}

.hero-text{
  max-width:680px;
  margin-top:24px;
  color:rgba(255,255,255,.65);
  font-size:18px;
  line-height:1.75;
}

.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  margin-top:36px;
}

.metrics{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  max-width:576px;
  margin-top:48px;
}

.metric-card{
  padding:16px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:16px;
  background:rgba(255,255,255,.04);
}

.metric-card strong{
  display:block;
  color:var(--green);
  font-size:24px;
  font-weight:650;
}

.metric-card span{
  display:block;
  margin-top:4px;
  color:rgba(255,255,255,.50);
  font-size:12px;
  line-height:1.55;
}

.dashboard-wrap{
  position:relative;
}

.dashboard-glow{
  position:absolute;
  inset:-24px;
  border-radius:32px;
  background:rgba(183,243,77,.10);
  filter:blur(48px);
}

.dashboard-card{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  border-radius:32px;
  background:rgba(17,19,23,.90);
  box-shadow:0 25px 60px rgba(0,0,0,.55);
  backdrop-filter:blur(18px);
}

.dashboard-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 20px;
  border-bottom:1px solid rgba(255,255,255,.10);
}

.dashboard-title{
  font-size:14px;
  font-weight:600;
  color:#fff;
}

.dashboard-subtitle{
  margin-top:4px;
  font-size:12px;
  color:rgba(255,255,255,.45);
}

.online-pill{
  padding:4px 12px;
  border-radius:999px;
  background:rgba(183,243,77,.15);
  color:var(--green);
  font-size:12px;
}

.map-panel{
  position:relative;
  height:440px;
  padding:20px;
  background:#0B0D10;
}

.map-grid{
  position:absolute;
  inset:0;
  opacity:.30;
  background-image:
    linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size:36px 36px;
}

.map-inner{
  position:relative;
  height:100%;
  padding:20px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  border-radius:24px;
  background:rgba(0,0,0,.20);
}

.pin{
  position:absolute;
  width:12px;
  height:12px;
  border-radius:999px;
  z-index:2;
}

.pin-green{left:48px;top:64px;background:var(--green);box-shadow:0 0 25px var(--green)}
.pin-amber{right:80px;top:96px;background:var(--amber);box-shadow:0 0 25px var(--amber)}
.pin-blue{left:112px;bottom:96px;background:var(--blue);box-shadow:0 0 25px var(--blue)}
.pin-red{right:56px;bottom:64px;background:var(--red);box-shadow:0 0 25px var(--red)}

.route-lines{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}

.route-main{
  stroke:var(--green);
  stroke-width:3;
  stroke-dasharray:8 10;
  opacity:.75;
}

.route-alt{
  stroke:var(--blue);
  stroke-width:2;
  stroke-dasharray:6 10;
  opacity:.45;
}

.floating-card{
  position:absolute;
  z-index:3;
  border:1px solid rgba(255,255,255,.10);
  border-radius:16px;
  background:rgba(17,19,23,.90);
  backdrop-filter:blur(12px);
  padding:16px;
}

.fleet-card{
  left:24px;
  top:24px;
}

.floating-row{
  display:flex;
  gap:12px;
  align-items:center;
}

.floating-row p{
  font-size:14px;
  font-weight:500;
}

.floating-row strong{
  display:block;
  margin-top:2px;
  font-size:24px;
  font-weight:650;
}

.events-card{
  right:24px;
  bottom:24px;
  width:256px;
}

.events-title{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:12px;
  color:#fff;
  font-size:14px;
  font-weight:600;
}

.event-list{
  display:grid;
  gap:12px;
}

.event-list p{
  padding:12px;
  border-radius:12px;
  background:rgba(255,255,255,.04);
  color:rgba(255,255,255,.60);
  font-size:12px;
}

.section{
  padding:80px 48px;
}

.section-copy{
  max-width:768px;
}

.eyebrow{
  color:var(--green);
  font-size:14px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.25em;
}

.section h2,
.products-header h2,
.operation-card h2,
.cta-card h2{
  margin-top:16px;
  color:#fff;
  font-size:clamp(38px,4vw,52px);
  line-height:1.08;
  letter-spacing:-.045em;
  font-weight:650;
}

.section-copy > p:last-child,
.products-header > p,
.operation-card > div:first-child p,
.cta-card p{
  margin-top:20px;
  color:rgba(255,255,255,.60);
  font-size:18px;
  line-height:1.75;
}

.feature-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  margin-top:48px;
}

.feature-item{
  display:flex;
  gap:12px;
  padding:20px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:16px;
  background:rgba(255,255,255,.03);
}

.feature-item span{
  color:rgba(255,255,255,.75);
  line-height:1.6;
}

.products-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:24px;
  margin-bottom:48px;
}

.products-header > p{
  max-width:576px;
  font-size:16px;
}

.product-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:20px;
}

.product-card{
  padding:24px;
  min-height:268px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:24px;
  background:rgba(255,255,255,.03);
  transition:.25s ease;
}

.product-card:hover{
  transform:translateY(-4px);
  background:rgba(255,255,255,.06);
}

.product-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:48px;
  height:48px;
  margin-bottom:24px;
  border-radius:16px;
  color:var(--green);
  background:rgba(183,243,77,.12);
  transition:.25s ease;
}

.product-card:hover .product-icon{
  background:var(--green);
  color:#000;
}

.product-card h3{
  color:#fff;
  font-size:20px;
  font-weight:650;
}

.product-card p{
  margin-top:12px;
  color:rgba(255,255,255,.55);
  font-size:14px;
  line-height:1.65;
}

.operation-card{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:32px;
  padding:48px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:32px;
  background:#111317;
}

.audience-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:16px;
}

.audience-card{
  padding:24px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:16px;
  background:rgba(0,0,0,.20);
}

.audience-card h3{
  color:#fff;
  font-size:18px;
  font-weight:650;
}

.audience-card p{
  margin-top:8px;
  color:rgba(255,255,255,.50);
  font-size:14px;
  line-height:1.6;
}

.cta-card{
  max-width:1024px;
  margin:0 auto;
  padding:56px;
  text-align:center;
  border:1px solid rgba(183,243,77,.20);
  border-radius:32px;
  background:rgba(183,243,77,.10);
}

.cta-card p{
  max-width:672px;
  margin-left:auto;
  margin-right:auto;
}

.cta-actions{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:16px;
  margin-top:32px;
}

.icon{
  width:24px;
  height:24px;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.icon-sm{
  width:16px;
  height:16px;
}

.icon-green{color:var(--green)}
.icon-amber{color:var(--amber)}

.fade-in{
  animation:fadeIn .7s ease-out both;
}

.fade-in-delayed{
  animation:fadeIn .9s ease-out .1s both;
}

@keyframes fadeIn{
  from{opacity:0;transform:translateY(24px)}
  to{opacity:1;transform:translateY(0)}
}

@media(max-width:1180px){
  .hero-grid,
  .operation-card{
    grid-template-columns:1fr;
  }

  .product-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .feature-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .products-header{
    align-items:flex-start;
    flex-direction:column;
  }
}

@media(max-width:768px){
  .hero-section,
  .section{
    padding-left:24px;
    padding-right:24px;
  }

  .nav-links{
    display:none;
  }

  .brand-logo{
    height:42px;
  }

  .navbar .btn{
    padding:10px 14px;
    font-size:12px;
  }

  .hero-grid{
    padding-top:56px;
    padding-bottom:64px;
  }

  .hero-logo{
    height:64px;
  }

  .metrics,
  .product-grid,
  .feature-grid,
  .audience-grid{
    grid-template-columns:1fr;
  }

  .dashboard-card{
    border-radius:24px;
  }

  .map-panel{
    height:500px;
  }

  .events-card{
    left:20px;
    right:20px;
    width:auto;
  }

  .operation-card,
  .cta-card{
    padding:28px;
  }
}