:root {
      --green: #7ed321;
      --green-2: #c6f08a;
      --green-dark: #5f9f19;
      --black: #111111;
      --ink: #111111;
      --muted: #89928d;
      --white: #f7faf6;
      --glass: rgba(255,255,255,.065);
      --line: rgba(255,255,255,.10);
      --radius: 28px;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      background: var(--black);
      color: var(--white);
      font-family: "Manrope", sans-serif;
      overflow-x: hidden;
    }

    ::selection { background: var(--green); color: var(--ink); }

    .noise {
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 100;
      opacity: .035;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
    }

    .cursor-glow {
      position: fixed;
      width: 420px;
      height: 420px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(126,211,33,.13), transparent 68%);
      pointer-events: none;
      transform: translate(-50%, -50%);
      z-index: 0;
      filter: blur(8px);
    }

    .navbar {
      background: rgba(8,10,9,.58);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border-bottom: 1px solid rgba(255,255,255,.06);
    }

    .brand img {
      width: min(200px, 46vw);
      height: 52px;
      object-fit: contain;
      object-position: left center;
    }

    .nav-link {
      color: rgba(255,255,255,.68) !important;
      font-weight: 600;
      font-size: .9rem;
      transition: .25s ease;
    }
    .nav-link:hover { color: #fff !important; }

    .btn-movi {
      color: var(--ink);
      background: var(--green);
      border: 0;
      font-weight: 800;
      border-radius: 999px;
      padding: .8rem 1.2rem;
      box-shadow: 0 0 0 rgba(126,211,33,0);
      transition: .3s ease;
    }
    .btn-movi:hover {
      background: var(--green-2);
      color: var(--ink);
      transform: translateY(-2px);
      box-shadow: 0 12px 40px rgba(126,211,33,.22);
    }

    .hero {
      min-height: 100vh;
      position: relative;
      display: flex;
      align-items: center;
      isolation: isolate;
      overflow: hidden;
      background:
        radial-gradient(circle at 75% 38%, rgba(126,211,33,.14), transparent 26%),
        radial-gradient(circle at 15% 70%, rgba(126,211,33,.08), transparent 24%),
        linear-gradient(115deg, #070908 0%, #0b100d 48%, #080a09 100%);
    }

    .hero-grid {
      position: absolute;
      inset: 0;
      opacity: .34;
      background-image:
        linear-gradient(rgba(126,211,33,.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(126,211,33,.07) 1px, transparent 1px);
      background-size: 70px 70px;
      mask-image: linear-gradient(to bottom, #000, transparent 90%);
      transform: perspective(900px) rotateX(60deg) translateY(25%);
      transform-origin: center bottom;
    }

    .orb {
      position: absolute;
      border-radius: 50%;
      filter: blur(1px);
      pointer-events: none;
    }
    .orb-a {
      width: 420px; height: 420px;
      right: -120px; top: 12%;
      background: radial-gradient(circle at 35% 35%, rgba(126,211,33,.28), rgba(126,211,33,0) 68%);
    }
    .orb-b {
      width: 300px; height: 300px;
      left: -140px; bottom: 4%;
      background: radial-gradient(circle, rgba(126,211,33,.12), transparent 68%);
    }

    .eyebrow {
      display: inline-flex;
      gap: .55rem;
      align-items: center;
      border: 1px solid rgba(126,211,33,.22);
      color: #baf77b;
      background: rgba(126,211,33,.07);
      border-radius: 999px;
      padding: .55rem .85rem;
      font-size: .74rem;
      font-weight: 800;
      letter-spacing: .13em;
      text-transform: uppercase;
    }
    .eyebrow i {
      width: 7px; height: 7px; border-radius: 50%;
      background: var(--green);
      box-shadow: 0 0 16px var(--green);
    }

    .hero h1 {
      font-family: "Space Grotesk", sans-serif;
      font-size: clamp(3.3rem, 7vw, 7rem);
      line-height: .92;
      letter-spacing: -.065em;
      font-weight: 700;
      margin: 1.35rem 0 1.3rem;
      max-width: 850px;
    }
    .hero h1 .green { color: var(--green); }
    .hero-copy {
      color: rgba(255,255,255,.62);
      max-width: 650px;
      font-size: 1.08rem;
      line-height: 1.8;
    }

    .hero-actions { display:flex; flex-wrap:wrap; gap:.75rem; margin-top:2rem; }
    .btn-outline-movi {
      color:#fff; border:1px solid rgba(255,255,255,.16);
      background:rgba(255,255,255,.045);
      border-radius:999px; padding:.8rem 1.2rem; font-weight:700;
      transition:.3s;
    }
    .btn-outline-movi:hover {
      color:#fff; background:rgba(255,255,255,.09); border-color:rgba(126,211,33,.35);
      transform:translateY(-2px);
    }

    .hero-visual {
      position: relative;
      min-height: 610px;
      display:flex;
      align-items:center;
      justify-content:center;
    }

    .visual-ring {
      width: min(500px, 88vw);
      aspect-ratio: 1;
      border: 1px solid rgba(126,211,33,.25);
      border-radius:50%;
      position:relative;
      box-shadow: 0 0 100px rgba(126,211,33,.09), inset 0 0 80px rgba(126,211,33,.05);
      animation: float 6s ease-in-out infinite;
    }
    .visual-ring::before,
    .visual-ring::after {
      content:"";
      position:absolute;
      inset:9%;
      border:1px dashed rgba(255,255,255,.12);
      border-radius:50%;
    }
    .visual-ring::after { inset:20%; border-style:solid; border-color:rgba(126,211,33,.14); }

    .route {
      position:absolute;
      width:68%;
      height:38%;
      left:16%;
      bottom:13%;
      border: 9px solid var(--green);
      border-top:0;
      border-left-color:transparent;
      border-radius:0 0 70% 70%;
      transform: rotate(-20deg);
      filter: drop-shadow(0 0 15px rgba(126,211,33,.35));
    }

    .pin {
      position:absolute;
      width:78px; height:78px;
      border-radius:50% 50% 50% 5px;
      background:var(--green);
      transform:rotate(-45deg);
      top:19%; right:17%;
      box-shadow: 0 0 50px rgba(126,211,33,.3);
    }
    .pin::after {
      content:""; position:absolute; inset:23px;
      border-radius:50%; background:#0a0d0b;
    }

    .truck-card {
      position:absolute;
      width:min(360px, 78vw);
      left:50%; top:50%;
      transform:translate(-50%,-42%) rotate(-2deg);
      border-radius:28px;
      padding:1.2rem;
      background:linear-gradient(145deg, rgba(255,255,255,.11), rgba(255,255,255,.035));
      border:1px solid rgba(255,255,255,.14);
      backdrop-filter:blur(14px);
      box-shadow:0 30px 90px rgba(0,0,0,.45);
      overflow:hidden;
    }
    .truck-photo {
      height:210px;
      border-radius:20px;
      background:
        linear-gradient(135deg, rgba(126,211,33,.18), rgba(0,0,0,.28)),
        url("/images/splash.png") center 30% / cover;
      position:relative;
    }
    .truck-photo::after {
      content:"";
      position:absolute; inset:0;
      background:linear-gradient(to top, rgba(0,0,0,.48), transparent 60%);
    }
    .truck-meta {
      display:flex; justify-content:space-between; align-items:end;
      padding:.95rem .2rem .15rem;
    }
    .truck-meta strong { font-family:"Space Grotesk"; font-size:1.1rem; }
    .live { color:#baf77b; font-size:.72rem; font-weight:800; letter-spacing:.08em; }
    .live::before { content:""; display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--green); margin-right:6px; box-shadow:0 0 12px var(--green); }

    .floating-chip {
      position:absolute;
      border:1px solid rgba(255,255,255,.13);
      background:rgba(8,10,9,.75);
      backdrop-filter:blur(16px);
      padding:.75rem .9rem;
      border-radius:16px;
      font-size:.75rem;
      font-weight:700;
      box-shadow:0 18px 50px rgba(0,0,0,.35);
    }
    .chip-1 { left:2%; top:20%; }
    .chip-2 { right:0; bottom:19%; }
    .chip-3 { left:5%; bottom:9%; }

    .ticker {
      border-top:1px solid rgba(255,255,255,.07);
      border-bottom:1px solid rgba(255,255,255,.07);
      background:#0b0e0c;
      overflow:hidden;
      white-space:nowrap;
    }
    .ticker-track {
      display:inline-flex;
      gap:2.5rem;
      padding:1rem 0;
      animation:marquee 24s linear infinite;
    }
    .ticker span { color:rgba(255,255,255,.5); font-weight:700; font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; }
    .ticker b { color:var(--green); }

    section { position:relative; }
    .section-pad { padding:120px 0; }
    .section-kicker { color:var(--green); font-size:.74rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; }
    .section-title {
      font-family:"Space Grotesk";
      font-size:clamp(2.2rem, 4vw, 4.2rem);
      letter-spacing:-.055em;
      line-height:1;
      margin:.75rem 0 1rem;
    }
    .section-desc { color:var(--muted); max-width:650px; line-height:1.8; }

    .service-card {
      min-height:360px;
      border:1px solid rgba(255,255,255,.08);
      background:linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.018));
      border-radius:var(--radius);
      padding:2rem;
      position:relative;
      overflow:hidden;
      transition:.4s ease;
      transform-style:preserve-3d;
    }
    .service-card:hover {
      border-color:rgba(126,211,33,.3);
      transform:translateY(-8px);
      box-shadow:0 30px 80px rgba(0,0,0,.28);
    }
    .service-icon {
      width:58px; height:58px; display:grid; place-items:center;
      border-radius:18px;
      color:var(--green);
      background:rgba(126,211,33,.09);
      border:1px solid rgba(126,211,33,.18);
      font-size:1.35rem;
    }
    .service-card h3 { font-family:"Space Grotesk"; margin-top:2.4rem; font-size:1.5rem; }
    .service-card p { color:var(--muted); line-height:1.75; }
    .service-number { position:absolute; right:1.4rem; top:1.2rem; color:rgba(255,255,255,.08); font-family:"Space Grotesk"; font-size:4rem; font-weight:700; }

    .split-visual {
      border-radius:34px;
      min-height:610px;
      position:relative;
      overflow:hidden;
      background:
        linear-gradient(135deg, rgba(126,211,33,.2), rgba(0,0,0,.55)),
        url("/images/splash.png") center / cover;
      border:1px solid rgba(255,255,255,.08);
    }
    .split-visual::after {
      content:""; position:absolute; inset:0;
      background:linear-gradient(180deg, transparent 40%, rgba(0,0,0,.8));
    }
    .route-panel {
      position:absolute; z-index:2; left:24px; right:24px; bottom:24px;
      padding:1.25rem; border-radius:22px;
      background:rgba(8,10,9,.72); backdrop-filter:blur(18px);
      border:1px solid rgba(255,255,255,.1);
    }
    .route-line {
      height:4px; border-radius:99px; margin-top:1rem;
      background:linear-gradient(90deg, var(--green) 0 72%, rgba(255,255,255,.12) 72%);
      box-shadow:0 0 18px rgba(126,211,33,.25);
    }

    .stats { padding:45px 0; border-top:1px solid rgba(255,255,255,.07); border-bottom:1px solid rgba(255,255,255,.07); }
    .stat strong { display:block; font-family:"Space Grotesk"; font-size:2.5rem; }
    .stat span { color:var(--muted); font-size:.8rem; text-transform:uppercase; letter-spacing:.1em; }

    .app-panel {
      border-radius:36px;
      padding:70px;
      overflow:hidden;
      position:relative;
      background:
        radial-gradient(circle at 90% 20%, rgba(126,211,33,.22), transparent 25%),
        linear-gradient(135deg, #111713, #0a0d0b);
      border:1px solid rgba(255,255,255,.08);
    }
    .phone {
      width:250px; height:500px; margin:auto;
      border:8px solid #1b201c; border-radius:40px;
      background:#090c0a;
      box-shadow:0 30px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.1);
      padding:12px; transform:rotate(5deg);
    }
    .phone-screen {
      height:100%; border-radius:30px; overflow:hidden;
      background:
        linear-gradient(rgba(8,10,9,.15), rgba(8,10,9,.55)),
        url("/images/splash.png") center top / cover;
      position:relative;
    }
    .phone-screen::after { content:""; position:absolute; inset:0; background:linear-gradient(to top, #0a0d0b, transparent 65%); }
    .phone-ui { position:absolute; z-index:2; left:14px; right:14px; bottom:16px; padding:14px; border-radius:18px; background:rgba(8,10,9,.76); backdrop-filter:blur(12px); }
    .phone-ui .small { color:var(--green); font-weight:800; font-size:.68rem; }
    .phone-ui strong { display:block; margin-top:3px; }

    .footer { border-top:1px solid rgba(255,255,255,.07); padding:45px 0; color:var(--muted); }
    .footer img { width: 170px; height: 48px; object-fit: contain; object-position: left center; }
    .footer a { color:rgba(255,255,255,.55); text-decoration:none; margin-left:1rem; }
    .footer a:hover { color:var(--green); }

    .reveal { opacity:0; transform:translateY(24px); }
    .loaded .reveal { opacity:1; transform:none; transition:opacity .8s ease, transform .8s ease; }

    @keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
    @keyframes marquee { to { transform:translateX(-50%); } }

    @media (max-width: 991px) {
      .hero { padding-top:110px; }
      .hero-visual { min-height:540px; margin-top:20px; }
      .chip-1 { left:0; }
      .app-panel { padding:45px 28px; }
    }
    @media (max-width: 575px) {
      .hero h1 { font-size:3.2rem; }
      .hero-visual { min-height:460px; }
      .truck-card { width:320px; }
      .truck-photo { height:180px; }
      .visual-ring { width:390px; }
      .floating-chip { font-size:.66rem; }
      .section-pad { padding:85px 0; }
    }