/* ============ DelivCore — shared site system ============ */
:root{
  --void:#070B12; --panel:#0F1826; --panel2:#0c1420;
  --line:rgba(143,197,62,.16); --hair:rgba(255,255,255,.07); --hair-2:rgba(255,255,255,.12);
  --cyan:#8FC53E; --glow:#C2EE74; --signal:#F5A623;
  --mist:#E8F1F8; --muted:rgba(232,241,248,.62);
  --surface:linear-gradient(180deg,rgba(24,35,53,.62),rgba(11,19,31,.62));
  --disp:'Alata',system-ui,sans-serif;
  --body:'Onest',system-ui,sans-serif; --mono:'Onest',system-ui,sans-serif;
  --maxw:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;color:var(--mist);font-family:var(--body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip;
  background:radial-gradient(1100px 620px at 50% -8%,rgba(143,197,62,.06),transparent 62%),linear-gradient(180deg,#080d16,#070b12 42%,#05080f);
  background-attachment:fixed;min-height:100vh}
a{color:inherit;text-decoration:none}
::selection{background:rgba(143,197,62,.30);color:#fff}
h1,h2,h3,h4{font-family:var(--disp);font-weight:500;letter-spacing:-.02em;line-height:1.06;margin:0}
.mono{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--muted)}
.muted{color:var(--muted)} .cyan{color:var(--cyan)}
.wrap{width:min(var(--maxw),92vw);margin:0 auto}
.section{position:relative;z-index:1;padding:clamp(56px,8vw,104px) 0}
.eyebrow{display:inline-flex;align-items:center;gap:12px;font-family:'Onest',system-ui,sans-serif;font-style:normal;font-weight:500;font-size:15px;letter-spacing:.02em;color:var(--cyan)}
.eyebrow::before{content:"";width:24px;height:1px;background:linear-gradient(90deg,var(--cyan),transparent);opacity:.9;flex:none}

/* ambient bg layers */
.grid-bg{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.4;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:64px 64px;mask-image:radial-gradient(circle at 50% 20%,#000 0%,transparent 72%)}
.aurora{position:fixed;inset:-25%;z-index:0;pointer-events:none;
  background:radial-gradient(38% 32% at 18% 12%,rgba(143,197,62,.12),transparent 70%),
             radial-gradient(34% 30% at 85% 78%,rgba(194,238,116,.09),transparent 70%);
  animation:aurora 24s ease-in-out infinite alternate}
@keyframes aurora{0%{transform:translate(0,0) scale(1)}100%{transform:translate(-2%,2.5%) scale(1.05)}}

/* nav */
header.nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(12px);background:rgba(7,11,18,.55);border-bottom:1px solid var(--hair);transition:background .3s,box-shadow .3s}
header.nav.scrolled{background:rgba(7,11,18,.82);box-shadow:0 8px 28px rgba(0,0,0,.4)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--disp);font-weight:600;font-size:20px;letter-spacing:-.01em}
.brand svg{display:block}
.nav-links{display:flex;gap:22px;align-items:center}
.nav-links a:not(.btn){font-size:13.5px;color:var(--muted);transition:color .2s;position:relative}
.nav-links a:not(.btn):hover{color:var(--mist)}
.nav-links a:not(.btn)::after{content:"";position:absolute;left:0;right:100%;bottom:-7px;height:1px;background:linear-gradient(90deg,var(--cyan),var(--glow));transition:right .3s cubic-bezier(.2,.7,.2,1)}
.nav-links a:not(.btn):hover::after{right:0}
.lang-toggle{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;color:var(--muted);background:rgba(255,255,255,.04);border:1px solid var(--hair);border-radius:999px;padding:6px 11px;cursor:pointer;transition:.2s;line-height:1}
.lang-toggle:hover{color:var(--mist);border-color:rgba(143,197,62,.4);background:rgba(143,197,62,.08)}
@media(max-width:860px){.nav-links a:not(.btn),.lang-toggle{display:none}
  /* The theme switch stays in the bar on phones. It was only reachable two taps
     deep in the burger drawer, and it is the one control people hunt for.
     An ID selector, so it also beats the identical `.lang-toggle{display:none}`
     that site.css declares at 860px, whichever sheet applies last. */
  #siteTheme{display:inline-flex;align-items:center;justify-content:center;
    width:42px;height:42px;padding:0;font-size:16px;line-height:1;border-radius:11px}
}
/* mobile nav drawer (hamburger) */
.nav-burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:42px;height:42px;border:1px solid var(--hair);border-radius:11px;background:rgba(255,255,255,.03);cursor:pointer;padding:0}
.nav-burger span{display:block;width:18px;height:2px;margin:0 auto;background:var(--mist);border-radius:2px;transition:transform .25s ease,opacity .2s ease}
header.nav.open .nav-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
header.nav.open .nav-burger span:nth-child(2){opacity:0}
header.nav.open .nav-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(max-width:860px){
 .nav-links{display:none}
 .nav-burger{display:flex}
 header.nav.open .nav-links{display:flex;flex-direction:column;align-items:stretch;gap:4px;position:absolute;top:64px;left:0;right:0;padding:14px 20px 20px;background:rgba(7,11,18,.97);backdrop-filter:blur(14px);border-bottom:1px solid var(--hair);box-shadow:0 22px 50px rgba(0,0,0,.55)}
 header.nav.open .nav-links a:not(.btn),header.nav.open .nav-links .lang-toggle{display:block;padding:12px 4px;font-size:15.5px;color:var(--mist);border-bottom:1px solid rgba(255,255,255,.05)}
 header.nav.open .nav-links .lang-toggle{width:max-content;border:1px solid var(--hair);border-radius:8px;padding:7px 12px;margin-top:8px}
 header.nav.open .nav-links .btn-primary{margin-top:12px;justify-content:center;text-align:center}
}
@media(prefers-reduced-motion:reduce){.nav-burger span{transition:none}}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--body);font-weight:600;font-style:normal;font-size:15px;letter-spacing:-.01em;padding:11px 22px;border-radius:12px;cursor:pointer;border:1px solid transparent;transition:transform .15s,box-shadow .2s,background .2s}
.btn-primary{background:linear-gradient(180deg,var(--glow),var(--cyan));color:#04121e;box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 8px 26px rgba(143,197,62,.32),0 2px 5px rgba(0,0,0,.35)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.62),0 12px 34px rgba(143,197,62,.46)}
.btn-ghost{background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.025));border-color:var(--hair);color:var(--mist);box-shadow:inset 0 1px 0 var(--hair-2)}
.btn-ghost:hover{background:linear-gradient(180deg,rgba(255,255,255,.11),rgba(255,255,255,.05))}
.nav-links .btn-primary{padding:9px 18px;font-size:13.5px}

/* page header */
.page-head{position:relative;z-index:1;padding:clamp(56px,8vw,96px) 0 clamp(20px,3vw,36px)}
.page-head h1{font-size:clamp(38px,6vw,68px);letter-spacing:-.03em;margin:16px 0 0;font-weight:700;text-wrap:balance}
.page-head p.lead{font-size:clamp(17px,1.6vw,20px);color:var(--muted);max-width:58ch;margin:20px 0 0;text-wrap:pretty}
.sec-head{max-width:62ch}
.sec-head h2{font-size:clamp(28px,3.6vw,42px);margin-top:14px;letter-spacing:-.022em}
.sec-head p{color:var(--muted);margin-top:16px;font-size:17.5px;line-height:1.62;text-wrap:pretty}

/* generic card */
.card{background:var(--surface);border:1px solid var(--hair);border-radius:16px;padding:24px;
  box-shadow:inset 0 1px 0 var(--hair-2),0 1px 2px rgba(0,0,0,.3);
  transition:transform .28s cubic-bezier(.2,.7,.2,1),border-color .28s,box-shadow .28s}
.card:hover{transform:translateY(-4px);border-color:rgba(143,197,62,.5);box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 18px 44px rgba(0,0,0,.46),0 0 32px rgba(143,197,62,.12)}

/* footer */
.foot{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;margin-top:40px;padding:28px 0 88px;border-top:1px solid var(--hair)}
.foot-l{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.foot-cols{display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:32px;padding:48px 0 8px}
@media(max-width:980px){.foot-cols{grid-template-columns:1fr 1fr 1fr;gap:26px}}
@media(max-width:600px){.foot-cols{grid-template-columns:1fr 1fr;gap:24px}}
.foot-cols h5{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan);margin:0 0 14px}
.foot-cols a{display:block;font-size:14px;color:var(--muted);padding:5px 0;transition:color .2s}
.foot-cols a:hover{color:var(--mist)}
.foot-cols p{font-size:14px;color:var(--muted);margin:0;max-width:34ch}

/* reveal */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}.aurora{animation:none}}

/* ── Mobile performance (audit 2026-07): kill scroll jank ── */
html,body{overflow-x:clip}
.code{overflow-x:auto}
@media (max-width:860px){
  body{background-attachment:scroll!important}
  .aurora{display:none!important}
  .grid-bg{position:absolute!important;height:100%!important}
  header.nav{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:rgba(7,11,18,.96)!important}
  /* Decorative, infinitely-looping layers ONLY — never `*`. A blanket pause also froze the
     entry animation of every functional overlay (nav popover, revenue panel, AI chat), each of
     which then had to be patched one by one. Register new looping decor here. */
  .aurora,.spotlight,.dot,.bdot,.mft-heart,.mft-aurora,.mft-mq-track,.econ-arrow,.hero h1 .accent,.cap-col::before,.eco-grid::before{animation-play-state:paused!important}
  .showcase,.eco-grid,.dash{content-visibility:auto;contain-intrinsic-size:auto 520px}
}

/* keyboard polish */
:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;border-radius:4px}


/* ═══ DC-NAV2 — header redesign: mega-menu + popover mobil (port navigation-menu-4) ═══ */
.nav .wrap{gap:18px}
.nav-left{display:flex;align-items:center;gap:22px;min-width:0}
.nav-right{display:flex;align-items:center;gap:10px}
.nav-links{gap:2px}
.nav-links>a:not(.btn){padding:7px 10px;border-radius:9px;transition:color .2s,background .15s}
.nav-links>a:not(.btn):hover{background:rgba(255,255,255,.05)}
.nav-links a:not(.btn)::after{display:none}
.nav-sub-btn{display:inline-flex;align-items:center;gap:5px;background:transparent;border:0;cursor:pointer;font-family:var(--body);font-size:13.5px;color:var(--muted);padding:7px 10px;border-radius:9px;transition:color .2s,background .15s;line-height:1.45}
.nav-links .has-sub .nav-sub-btn::after{content:none}
.has-sub:hover .nav-sub-btn,.has-sub.open .nav-sub-btn,.nav-sub-btn:hover{color:var(--mist);background:rgba(255,255,255,.05)}
.nav-chev{flex:none;opacity:.7;transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.has-sub:hover .nav-chev,.has-sub.open .nav-chev,.has-sub:focus-within .nav-chev{transform:rotate(180deg)}
.has-sub{position:relative}
.mega{position:absolute;top:100%;left:50%;transform:translateX(-50%);padding-top:12px;display:none;z-index:60}
.has-sub:hover .mega,.has-sub:focus-within .mega,.has-sub.open .mega{display:block}
.mega-inner{width:min(680px,calc(100vw - 28px));display:grid;grid-template-columns:1fr 1fr;gap:2px 10px;background:rgba(7,11,18,.97);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.09);border-radius:16px;padding:12px 12px 10px;box-shadow:0 22px 50px rgba(0,0,0,.55);transform-origin:top center;animation:dcMegaIn .18s cubic-bezier(.2,.7,.2,1)}
@keyframes dcMegaIn{from{opacity:0;transform:translateY(6px) scale(.98)}to{opacity:1;transform:none}}
.mega-col{display:contents}
.mega-h{font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);padding:2px 10px 8px}
.mega-h-span{grid-column:1/-1;padding:2px 10px 8px}
.mega-foot{grid-column:1/-1;display:flex;justify-content:flex-end;margin-top:8px;padding:8px 10px 2px;border-top:1px solid var(--hair)}
.mega-foot a{font-size:13px;font-weight:500;color:var(--cyan)}
.mega-foot a:hover{color:var(--glow)}
.mm-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;transition:background .15s;min-width:0}
.mm-item:hover,.mm-item:focus-visible{background:rgba(255,255,255,.05)}
.mm-ic{flex:none;margin-top:0;color:var(--cyan);opacity:.85}
.mm-tx{display:block;min-width:0}
.mm-l{display:block;font-size:13.5px;font-weight:500;color:var(--mist);line-height:1.25}
.mm-d{display:block;font-size:12px;color:var(--muted);line-height:1.35;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mm-item:hover .mm-l{color:var(--glow)}
.nav-burger{position:relative}
.nav-burger span{position:absolute;left:50%;top:50%;width:18px;height:2px;margin:-1px 0 0 -9px;background:var(--mist);border-radius:2px;transition:transform .3s cubic-bezier(.5,.85,.25,1.1),opacity .2s ease}
.nav-burger span:nth-child(1){transform:translateY(-6px)}
.nav-burger span:nth-child(2){transition-timing-function:cubic-bezier(.5,.85,.25,1.8),ease}
.nav-burger span:nth-child(3){transform:translateY(6px)}
.nav-burger[aria-expanded="true"] span:nth-child(1){transform:rotate(315deg)}
.nav-burger[aria-expanded="true"] span:nth-child(2){transform:rotate(45deg)}
.nav-burger[aria-expanded="true"] span:nth-child(3){transform:rotate(135deg)}
.nav-pop{position:absolute;top:calc(100% + 8px);right:14px;width:min(300px,calc(100vw - 24px));max-height:calc(100dvh - 92px);overflow-y:auto;-webkit-overflow-scrolling:touch;background:rgba(7,11,18,.97);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.09);border-radius:14px;padding:6px;box-shadow:0 22px 50px rgba(0,0,0,.55);z-index:70;transform-origin:top right;animation:dcPopIn .18s cubic-bezier(.2,.7,.2,1)}
@keyframes dcPopIn{from{opacity:0;transform:translateY(-4px) scale(.97)}to{opacity:1;transform:none}}
.nav-pop[hidden]{display:none}
.npop-l{display:block;padding:9px 10px;border-radius:9px;font-size:14px;color:var(--mist);transition:background .15s}
.npop-l:hover{background:rgba(255,255,255,.05)}
.npop-g .npop-l{font-size:13.5px;padding:7px 10px}
.npop-h{font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);padding:9px 10px 4px}
.npop-sep{height:1px;background:var(--hair);margin:5px 4px}
.npop-tools{display:flex;gap:8px;padding:8px 4px 4px;margin-top:4px;border-top:1px solid var(--hair)}
.npop-t{flex:1;display:inline-flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--mist);background:rgba(255,255,255,.04);border:1px solid var(--hair);border-radius:9px;padding:9px 10px;cursor:pointer;line-height:1;text-align:center}
.npop-t:hover{border-color:rgba(143,197,62,.4);background:rgba(143,197,62,.08)}
.nav-right .btn-primary{padding:9px 18px;font-size:13.5px}
@media(max-width:1020px){.nav-left{gap:12px}.nav-links>a:not(.btn),.nav-sub-btn{padding:7px 7px;font-size:13px}.nav-right{gap:8px}.nav-right .btn-primary{padding:8px 13px;font-size:12.5px}}
@media(min-width:861px){.nav-burger{display:none}.nav-pop{display:none!important}}
@media(max-width:860px){.nav-links{display:none}.nav-burger{display:flex}.nav-right{gap:8px}.nav-right .btn-primary{padding:8px 14px;font-size:13px}.nav-pop{animation:none}body.dc-npop #hx-launch{opacity:0;pointer-events:none}}
@media(max-width:400px){.nav-right .btn-primary{padding:8px 11px;font-size:12px;letter-spacing:0}}
/* With the switch in the bar the row is logo + switch + CTA + burger. Measured
   at 375px with the Romanian CTA ("Programează un demo"): it overflowed and the
   switch sat 4px ON the logo. So the switch steps down to 36px and the CTA gives
   up padding; nowrap keeps it on one line, or the bar grows a second row.
   This has to come AFTER the 400px rule above, or that rule wins. */
@media(max-width:420px){
  #siteTheme{width:36px;height:36px;font-size:14.5px;border-radius:10px}
  .nav-right{gap:5px}
  .nav-right .btn-primary{padding:8px 8px;font-size:11.5px;letter-spacing:0;white-space:nowrap}
}
@media(prefers-reduced-motion:reduce){.mega-inner,.nav-pop{animation:none}.nav-burger span,.nav-chev{transition:none}}
/* ═══ /DC-NAV2 ═══ */