:root{
    --night:#05080A; --asphalt:#141A1C; --asphalt2:#1B2326; --line:#E8E4C9; --sky1:#0B1A16; --sky2:#05080A;
    --text:#F4F7F2; --soft:#C3CEC0; --muted:#8E9A8B; --green:#A6FF4D; --green-deep:#1E5A12; --green-ink:#07130A;
    --amber:#FFB54A; --red:#FF4D3A; --sign:#0E6B3A; --sign-border:#F5F7F0;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{margin:0;background:var(--night);color:var(--text);font-family:"Barlow",system-ui,sans-serif;line-height:1.5;overflow-x:hidden}
  a{color:inherit}
  h1,h2,h3,.display{font-family:"Barlow Condensed","Barlow",sans-serif;letter-spacing:.01em;text-transform:none}
  .wrap{max-width:1140px;margin:0 auto;padding:0 20px}
  :focus-visible{outline:3px solid var(--green);outline-offset:3px;border-radius:6px}

  /* ---------- top bar ---------- */
  .top{position:fixed;inset:0 0 auto 0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:14px 20px;
       background:linear-gradient(180deg,rgba(5,8,10,.85),rgba(5,8,10,0));pointer-events:none}
  .top{transition:background .25s ease,box-shadow .25s ease}
  .top.solid{background:rgba(5,8,10,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 1px 0 #16231A}
  .top>*{pointer-events:auto}
  .brand{font-family:"Barlow Condensed";font-weight:900;font-size:30px;text-decoration:none;line-height:1;display:flex;align-items:center;gap:8px}
  .brand b{color:var(--green)}
  .brand i{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--green);box-shadow:0 0 12px var(--green),0 0 30px var(--green)}
  .top nav{display:flex;gap:10px}
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 22px;border-radius:12px;
       font-family:"Barlow Condensed";font-weight:800;font-size:20px;letter-spacing:.02em;text-decoration:none;cursor:pointer;
       border:2px solid var(--green);background:var(--green);color:var(--green-ink);transition:transform .15s ease,box-shadow .15s ease}
  .btn:hover{transform:translateY(-1px);box-shadow:0 0 0 4px rgba(166,255,77,.18),0 10px 30px rgba(166,255,77,.25)}
  .btn.ghost{background:rgba(5,8,10,.55);color:var(--green);backdrop-filter:blur(6px)}
  .btn.small{min-height:42px;padding:0 16px;font-size:17px}

  /* ---------- hero: night highway ---------- */
  .hero{position:relative;min-height:100svh;display:grid;grid-template-rows:1fr auto;overflow:hidden;
        background:radial-gradient(120% 60% at 50% 100%,#0E2A1A 0%,var(--sky1) 35%,var(--sky2) 70%)}
  .stars{position:absolute;inset:0;background-image:
      radial-gradient(1px 1px at 12% 18%,#fff8 0,transparent 100%),radial-gradient(1px 1px at 28% 9%,#fff6 0,transparent 100%),
      radial-gradient(1.5px 1.5px at 41% 22%,#fff7 0,transparent 100%),radial-gradient(1px 1px at 57% 12%,#fff5 0,transparent 100%),
      radial-gradient(1px 1px at 66% 27%,#fff6 0,transparent 100%),radial-gradient(1.5px 1.5px at 78% 8%,#fff8 0,transparent 100%),
      radial-gradient(1px 1px at 88% 20%,#fff6 0,transparent 100%),radial-gradient(1px 1px at 93% 33%,#fff4 0,transparent 100%),
      radial-gradient(1px 1px at 6% 36%,#fff5 0,transparent 100%),radial-gradient(1px 1px at 48% 34%,#fff4 0,transparent 100%);
      animation:twinkle 6s ease-in-out infinite alternate}
  @keyframes twinkle{from{opacity:.6}to{opacity:1}}
  .city{position:absolute;left:0;right:0;bottom:38%;height:14vh;min-height:70px;opacity:.9}
  .city svg{width:100%;height:100%;display:block}
  .haze{position:absolute;left:0;right:0;bottom:36%;height:22vh;background:linear-gradient(180deg,transparent,rgba(166,255,77,.08) 60%,rgba(166,255,77,.14));filter:blur(14px)}

  .copy{position:relative;z-index:3;align-self:center;padding:96px 20px 16px;max-width:1140px;margin:0 auto;width:100%}
  .copy h1{font-size:clamp(50px,8.6vw,112px);font-weight:900;line-height:.9;margin:0;letter-spacing:-.01em;text-wrap:balance;
           text-shadow:0 2px 0 #000,0 20px 60px rgba(0,0,0,.6)}
  .copy h1 span{display:block;color:var(--green);text-shadow:0 0 24px rgba(166,255,77,.35),0 2px 0 #000}
  .copy p{font-size:clamp(17px,2vw,21px);color:var(--soft);max-width:34em;margin:22px 0 0;text-shadow:0 1px 0 #000}
  .copy .actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
  .copy .btn{min-height:58px;padding:0 28px;font-size:23px}
  .pulse[hidden]{display:none}
  .pulse{display:inline-flex;align-items:center;gap:10px;font-weight:700;color:var(--soft);margin-top:18px;font-size:16px}
  .pulse b{font-family:"Barlow Condensed";font-size:30px;color:var(--green);line-height:1}
  .pulse i{width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:0 0 0 0 rgba(166,255,77,.7);animation:ping 1.8s ease-out infinite}
  @keyframes ping{0%{box-shadow:0 0 0 0 rgba(166,255,77,.7)}100%{box-shadow:0 0 0 14px rgba(166,255,77,0)}}

  /* road */
  .road{position:relative;height:38vh;min-height:300px;background:linear-gradient(180deg,var(--asphalt2),var(--asphalt) 30%,#0D1214);
        border-top:3px solid #262E31;box-shadow:0 -30px 60px rgba(0,0,0,.6) inset}
  .road::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--line);opacity:.75}
  .lane{position:absolute;left:0;right:0;height:0;border-top:4px dashed var(--line);opacity:.55;background-size:0}
  .lane.l1{top:33%;}
  .lane.l2{top:66%;}
  .lane{--dash:60px;border:none;height:4px;background:repeating-linear-gradient(90deg,var(--line) 0 var(--dash),transparent var(--dash) calc(var(--dash)*2.2));
        animation:dash linear infinite}
  .lane.l1{animation-duration:1.1s}
  .lane.l2{animation-duration:.8s}
  @keyframes dash{from{background-position:0 0}to{background-position:calc(var(--dash)*-2.2) 0}}
  .shoulder{position:absolute;left:0;right:0;bottom:0;height:16px;background:repeating-linear-gradient(90deg,#fff 0 28px,#C40F0F 28px 56px);opacity:.25}

  /* trucks */
  .truck{position:absolute;bottom:var(--y);left:0;width:var(--w);height:auto;transform:translateX(110vw);
         animation:drive var(--t) linear infinite;animation-delay:var(--d);will-change:transform;filter:drop-shadow(0 10px 18px rgba(0,0,0,.6))}
  .truck.back{opacity:.55;filter:blur(.6px) drop-shadow(0 6px 12px rgba(0,0,0,.6))}
  @keyframes drive{from{transform:translateX(110vw)}to{transform:translateX(-120%)}}
  .truck svg{width:100%;height:auto;display:block;overflow:visible}
  .wheel{transform-origin:center;animation:spin .5s linear infinite}
  .truck.back .wheel{animation-duration:.8s}
  @keyframes spin{to{transform:rotate(-360deg)}}
  .truck::before{content:"";position:absolute;right:97%;bottom:8%;width:70%;height:42%;
      background:linear-gradient(270deg,rgba(255,244,194,.55),rgba(255,244,194,0));clip-path:polygon(100% 28%,0 0,0 100%,100% 72%);
      mix-blend-mode:screen;pointer-events:none}
  .truck.back::before{opacity:.5}

  @media (prefers-reduced-motion:reduce){
    .lane,.wheel,.stars,.pulse i{animation:none}
    .truck{animation:none;transform:translateX(var(--rest,30vw))}
  }

  /* ---------- sections ---------- */
  section{padding:84px 0}
  section h2{font-size:clamp(38px,6vw,72px);font-weight:900;line-height:.95;margin:0 0 14px;letter-spacing:-.005em}
  section .lead{font-size:clamp(17px,2vw,21px);color:var(--soft);max-width:38em;margin:0 0 36px}

  /* route: how it works */
  .route{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:20px}
  .route::before{content:"";position:absolute;left:4%;right:4%;top:30px;height:6px;border-radius:3px;
      background:repeating-linear-gradient(90deg,var(--line) 0 26px,transparent 26px 44px);opacity:.5}
  .stop{position:relative;padding-top:78px}
  .stop::before{content:attr(data-km);position:absolute;top:0;left:0;height:62px;min-width:62px;padding:0 14px;border-radius:14px;
      display:flex;align-items:center;justify-content:center;background:var(--sign);border:3px solid var(--sign-border);
      font-family:"Barlow Condensed";font-weight:900;font-size:24px;color:#fff;box-shadow:0 10px 30px rgba(0,0,0,.5)}
  .stop h3{font-size:30px;margin:0 0 8px;line-height:1.05}
  .stop p{margin:0;color:var(--soft);font-size:17px}
  .stop.firm::before{background:#17315E}

  /* listings teaser */
  .teaser{background:linear-gradient(180deg,#07110B,#05080A);border-top:1px solid #16231A;border-bottom:1px solid #16231A}
  .board{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
  .sign{background:var(--sign);border:6px solid var(--sign-border);border-radius:22px;padding:28px 30px;color:#fff;
        box-shadow:0 30px 80px rgba(0,0,0,.6),inset 0 0 0 2px rgba(0,0,0,.25);position:relative;transform:rotate(-1.2deg)}
  .sign::after{content:"";position:absolute;left:50%;top:100%;width:16px;height:70px;background:linear-gradient(#56605A,#2A3230);transform:translateX(-50%)}
  .sign .row{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:12px 0;border-top:2px dashed rgba(255,255,255,.25);font-family:"Barlow Condensed";font-weight:800}
  .sign .row:first-of-type{border-top:0}
  .sign .row .who{font-size:clamp(22px,3vw,34px)}
  .sign .row .what{font-size:clamp(16px,2vw,22px);color:#DDF7C8;text-align:right}
  .sign .arrow{font-size:46px;line-height:1;color:var(--green)}
  .sign small{display:block;margin-top:14px;font-family:"Barlow";font-weight:500;color:#C9E8B6;font-size:14px}
  .board h2{margin-bottom:10px}
  .board ul{margin:0 0 26px;padding:0;list-style:none;display:grid;gap:10px}
  .board li{display:flex;gap:12px;align-items:flex-start;color:var(--soft);font-size:18px}
  .board li::before{content:"";flex:0 0 12px;height:12px;margin-top:8px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green)}

  /* app features as dashboard */
  .dash{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px}
  .gauge{position:relative;border-radius:18px;padding:22px 22px 20px;background:linear-gradient(180deg,#0D1412,#090E0D);border:1px solid #1C2A22;overflow:hidden}
  .gauge::before{content:"";position:absolute;inset:auto -20% -60% -20%;height:70%;background:radial-gradient(closest-side,rgba(166,255,77,.16),transparent);pointer-events:none}
  .gauge h3{font-size:26px;margin:14px 0 6px;line-height:1.05}
  .gauge p{margin:0;color:var(--muted);font-size:15.5px}
  .gauge svg{width:34px;height:34px;stroke:var(--green);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .gauge .val{position:absolute;right:18px;top:16px;font-family:"Barlow Condensed";font-weight:900;font-size:30px;color:var(--green);opacity:.9}

  /* spotlight: tahograf + rampă */
  .spot{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;margin:0 0 70px}
  .spot.rev .spot-txt{order:2}
  .kicker{display:inline-flex;align-items:center;gap:8px;font-family:"Barlow Condensed";font-weight:800;font-size:16px;letter-spacing:.12em;text-transform:uppercase;color:var(--green);margin-bottom:10px}
  .kicker::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green)}
  .spot h3{font-size:clamp(32px,4.4vw,52px);line-height:.98;margin:0 0 14px;font-weight:900}
  .spot p{color:var(--soft);font-size:18px;margin:0 0 18px}
  .ticks{list-style:none;margin:0;padding:0;display:grid;gap:9px}
  .ticks li{display:flex;gap:10px;color:var(--soft);font-size:16.5px}
  .ticks li::before{content:"✓";color:var(--green);font-weight:900;flex:0 0 auto}
  .note{font-size:14px;color:var(--muted);margin-top:14px}
  .phone{background:linear-gradient(180deg,#0D1412,#080C0B);border:1px solid #1C2A22;border-radius:26px;padding:22px;box-shadow:0 30px 80px rgba(0,0,0,.55)}
  .phone .lbl{font-family:"Barlow Condensed";font-weight:800;font-size:15px;letter-spacing:.1em;color:var(--green);display:flex;justify-content:space-between;align-items:center}
  .phone .lbl small{font-family:"Barlow";font-weight:500;letter-spacing:0;color:var(--muted);font-size:13px}
  .bt{display:inline-flex;gap:6px;align-items:center;padding:4px 10px;border-radius:999px;background:#13240F;border:1px solid #2B4A1E;color:var(--green);font-size:12px;font-weight:700}
  .ringrow{display:flex;gap:20px;align-items:center;margin:16px 0 18px}
  .ring{--p:62;width:140px;height:140px;flex:0 0 140px;border-radius:50%;display:grid;place-items:center;
        background:radial-gradient(closest-side,#0B110F 78%,transparent 79% 100%),conic-gradient(var(--green) calc(var(--p)*1%),#1D2A22 0)}
  .ring b{display:block;font-family:"Barlow Condensed";font-weight:900;font-size:38px;line-height:1;text-align:center}
  .ring span{display:block;font-size:12px;color:var(--muted);text-align:center}
  .act{font-family:"Barlow Condensed";font-weight:800;font-size:26px;line-height:1.05}
  .act small{display:block;font-family:"Barlow";font-weight:500;font-size:14px;color:var(--muted)}
  .grid4{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .grid4 div{background:#0B110F;border:1px solid #1A271F;border-radius:14px;padding:10px 12px}
  .grid4 b{display:block;font-family:"Barlow Condensed";font-weight:900;font-size:24px}
  .grid4 span{font-size:12.5px;color:var(--muted)}
  .alert{margin-top:12px;padding:10px 12px;border-radius:12px;background:#221A08;border:1px solid #5C4512;color:#FFB020;font-size:14px;font-weight:700}
  .chat{display:grid;gap:10px;margin-top:14px}
  .bub{max-width:88%;padding:11px 14px;border-radius:16px;font-size:15.5px;line-height:1.35}
  .bub small{display:block;font-size:12px;opacity:.75;margin-bottom:3px;font-weight:700;letter-spacing:.04em}
  .bub.me{justify-self:end;background:var(--green);color:var(--green-ink);border-bottom-right-radius:4px}
  .bub.me i{display:block;font-style:normal;font-size:13.5px;opacity:.75;margin-top:4px}
  .bub.him{background:#16201C;border:1px solid #22312A;border-bottom-left-radius:4px}
  .bub.him i{display:block;font-style:normal;color:var(--green);margin-top:4px}
  .langs{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
  .langs span{padding:4px 10px;border-radius:999px;border:1px solid #2B4A1E;color:var(--soft);font-size:13px;font-weight:700}
  .langs span.on{background:var(--green);color:var(--green-ink);border-color:var(--green)}
  .mic{display:flex;gap:10px;margin-top:14px}
  .mic div{flex:1;text-align:center;padding:12px;border-radius:14px;font-family:"Barlow Condensed";font-weight:800;font-size:18px;border:2px solid var(--green);color:var(--green)}
  .mic div.on{background:var(--green);color:var(--green-ink)}
  .subh{font-size:clamp(28px,3.6vw,40px);font-weight:900;margin:10px 0 18px;line-height:1}

  /* final exit sign */
  .exit{padding:60px 0 100px;text-align:center}
  .exit .bigsign{display:inline-block;background:var(--sign);border:6px solid var(--sign-border);border-radius:22px;padding:26px 34px;color:#fff;
       box-shadow:0 30px 80px rgba(0,0,0,.6);text-align:left;max-width:720px;width:100%}
  .exit .bigsign .t{font-family:"Barlow Condensed";font-weight:900;font-size:clamp(30px,5vw,54px);line-height:1;display:flex;justify-content:space-between;gap:16px;align-items:center}
  .exit .bigsign .t span{color:var(--green)}
  .exit .bigsign .s{font-size:18px;color:#DDF7C8;margin-top:10px}
  .exit .actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:26px}

  footer{border-top:1px solid #16231A;color:var(--muted);font-size:14px;padding:22px 0 34px}
  footer .wrap{display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between}

  @media (max-width:860px){
    .route{grid-template-columns:1fr;gap:34px}
    .route::before{left:30px;right:auto;top:0;bottom:0;width:6px;height:auto;background:repeating-linear-gradient(180deg,var(--line) 0 26px,transparent 26px 44px)}
    .stop{padding:0 0 0 100px}
    .board{grid-template-columns:1fr}
    .sign{transform:none}
    .sign::after{display:none}
    .top nav .hide-sm{display:none}
    .spot{grid-template-columns:1fr;gap:26px;margin-bottom:56px}
    .spot.rev .spot-txt{order:0}
  }
  @media (max-width:520px){
    .copy{padding-top:96px}
    .copy .btn{width:100%}
    .road{height:32vh;min-height:230px}
    .truck{width:calc(var(--w)*.58)}
    .ring{width:118px;height:118px;flex-basis:118px}
    .ring b{font-size:32px}
    .phone{padding:18px}
  }

  /* ---------- poarta: două alegeri ---------- */
  .choose{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:30px;max-width:900px}
  .choice{position:relative;display:flex;flex-direction:column;gap:6px;text-decoration:none;border-radius:22px;padding:24px 24px 22px;
          background:rgba(8,14,12,.82);border:2px solid #2B4A1E;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
          transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease}
  .choice:hover{transform:translateY(-2px);border-color:var(--green);box-shadow:0 0 0 4px rgba(166,255,77,.15),0 20px 50px rgba(0,0,0,.5)}
  .choice .who{font-family:"Barlow Condensed";font-weight:800;font-size:15px;letter-spacing:.12em;text-transform:uppercase;color:var(--green)}
  .choice .big{font-family:"Barlow Condensed";font-weight:900;font-size:clamp(34px,4.6vw,50px);line-height:.95}
  .choice .sub{color:var(--soft);font-size:16px}
  .choice .go{margin-top:12px;display:inline-flex;align-items:center;justify-content:center;min-height:54px;border-radius:14px;
              font-family:"Barlow Condensed";font-weight:800;font-size:22px;background:var(--green);color:var(--green-ink)}
  .choice.firm{border-color:#23406F}
  .choice.firm .who{color:#8FB8FF}
  .choice.firm .go{background:#8FB8FF;color:#071226}
  .choice.firm:hover{border-color:#8FB8FF;box-shadow:0 0 0 4px rgba(143,184,255,.15),0 20px 50px rgba(0,0,0,.5)}
  /* ---------- antet de pagină (șoferi / firme) ---------- */
  .pagehead{position:relative;padding:130px 0 40px;background:radial-gradient(120% 90% at 50% 0%,#0E2A1A 0%,var(--sky1) 40%,var(--night) 80%)}
  .pagehead.firm{background:radial-gradient(120% 90% at 50% 0%,#0F2140 0%,#0A1424 40%,var(--night) 80%)}
  .pagehead h1{font-size:clamp(46px,7.4vw,92px);font-weight:900;line-height:.92;margin:0;letter-spacing:-.01em}
  .pagehead h1 span{display:block;color:var(--green)}
  .pagehead.firm h1 span{color:#8FB8FF}
  .pagehead p{font-size:clamp(17px,2vw,21px);color:var(--soft);max-width:36em;margin:20px 0 0}
  .pagehead .actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
  .pagehead .btn{min-height:58px;padding:0 28px;font-size:22px}
  .btn.blue{background:#8FB8FF;border-color:#8FB8FF;color:#071226}
  .btn.ghost.blue{background:rgba(5,8,10,.55);color:#8FB8FF}
  .switch{display:block;margin-top:18px;color:var(--muted);font-size:15px}
  .switch a{color:var(--soft)}
  .feat{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px}
  .hero.gate .copy{padding-bottom:24px}
  @media (max-width:860px){ .choose{grid-template-columns:1fr} }
  @media (max-width:520px){ .pagehead{padding-top:108px} .pagehead .btn{width:100%} .choice{padding:20px} }