/* Layout: agency-style one-pager — split hero with stat block, numbered service cards, process split, work grid, counter strip, marquee, why-me, skill bars, CTA band, 4-column footer */
:root{
  --bg:#ffffff; --bg2:#f1f3f5; --card:#ffffff; --ink:#04000b; --muted:#5f6170; --line:#e4e4ea;
  --primary:#5138ee; --mint:#02ebad; --on-primary:#ffffff; --dark:#16131f; --on-dark:#ffffff;
  --grad:linear-gradient(45deg,#02ebad 0%,#5a57fb 55%);
  --shadow:0 2px 14px rgba(20,16,50,.08);
  --font:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  --arab:"Noto Kufi Arabic","Manrope",system-ui,sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0e0c16; --bg2:#15121f; --card:#1b1828; --ink:#f3f2f8; --muted:#a9a7b8; --line:#2a2638;
  --primary:#7d6bff; --mint:#2ff0bd; --dark:#1f1b30; --shadow:0 2px 14px rgba(0,0,0,.35); color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0e0c16; --bg2:#15121f; --card:#1b1828; --ink:#f3f2f8; --muted:#a9a7b8; --line:#2a2638;
  --primary:#7d6bff; --mint:#2ff0bd; --dark:#1f1b30; --shadow:0 2px 14px rgba(0,0,0,.35); color-scheme:dark}

html{scroll-behavior:smooth; scroll-padding-top:84px}
*,*::before,*::after{box-sizing:border-box; min-width:0}
body{margin:0; background:var(--bg); color:var(--ink); font:500 16px/1.8 var(--font); overflow-x:clip; overflow-wrap:break-word}
[dir="rtl"] body{font-family:var(--arab); font-size:15px}
img{max-width:100%; display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--mint); outline-offset:3px}
h1,h2,h3{text-wrap:balance; margin:0; line-height:1.15; font-weight:800}
.wrap{max-width:1200px; margin:0 auto; padding-inline:20px}
section{padding-block:100px}
@media (max-width:700px){section{padding-block:64px}}
.sub{display:inline-block; font-size:14px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; margin:0 0 10px}
.title{font-size:clamp(32px,4.6vw,50px); letter-spacing:-.02em}
.head{max-width:640px; margin-bottom:48px}
.head.center{margin-inline:auto; text-align:center}
.head p{color:var(--muted); margin:14px 0 0}

/* buttons */
.btn{position:relative; overflow:hidden; display:inline-flex; align-items:center; gap:10px; font:inherit; font-weight:800; font-size:15px; padding:14px 30px; border-radius:8px; border:0; background:var(--primary); color:var(--on-primary); text-decoration:none; cursor:pointer; z-index:0; isolation:isolate}
.btn::after{content:""; position:absolute; inset:0 -20%; background:var(--dark); transform:skew(25deg) scaleX(0); transition:transform .35s ease; z-index:-1}
.btn:hover::after{transform:skew(25deg) scaleX(1.2)}
.btn.light{background:var(--bg2); color:var(--ink)}
.btn.light:hover{color:var(--on-dark)}

/* header */
header{position:sticky; top:env(safe-area-inset-top,0px); z-index:30; background:color-mix(in srgb,var(--bg) 88%,transparent); backdrop-filter:blur(12px); border-bottom:1px solid var(--line)}
.nav{display:flex; align-items:center; justify-content:space-between; gap:18px; height:76px}
.logo{font-weight:800; font-size:24px; text-decoration:none; letter-spacing:-.02em; display:flex; align-items:center; gap:8px}
.logo i{width:30px; height:30px; border-radius:9px; background:var(--grad); display:grid; place-items:center; color:#fff; font-style:normal; font-size:16px}
.links{display:flex; align-items:center; gap:28px}
.links a{text-decoration:none; font-weight:700; font-size:15px}
.links a:hover{color:var(--primary)}
.tools{display:flex; align-items:center; gap:10px}
.lang{display:flex; gap:4px}
.lang button{font:inherit; font-size:13px; font-weight:700; border:1px solid var(--line); background:none; color:var(--ink); padding:3px 9px; border-radius:6px; cursor:pointer; line-height:1.6}
.lang button[aria-pressed="true"]{background:var(--primary); border-color:var(--primary); color:var(--on-primary)}
.iconbtn{width:44px; height:44px; border-radius:10px; border:0; background:var(--bg2); color:var(--ink); cursor:pointer; display:grid; place-items:center}
.iconbtn svg{width:20px; height:20px}
.burger{display:none}
@media (max-width:900px){
  .burger{display:grid}
  .links{position:absolute; inset:76px 0 auto 0; flex-direction:column; align-items:flex-start; gap:14px; background:var(--bg); border-bottom:1px solid var(--line); padding:20px; display:none}
  .links.open{display:flex}
}
@media (max-width:420px){.panelbtn{display:none}}

/* side panel */
.panel{position:fixed; inset-block:0; inset-inline-end:0; width:min(400px,100%); background:var(--dark); color:var(--on-dark); z-index:50; padding:calc(40px + env(safe-area-inset-top,0px)) 36px 40px; transform:translateX(105%); transition:transform .4s ease; overflow-y:auto}
[dir="rtl"] .panel{transform:translateX(-105%)}
.panel.open{transform:none!important}
.panel .close{position:absolute; top:calc(20px + env(safe-area-inset-top,0px)); inset-inline-end:20px; background:rgba(255,255,255,.1); color:#fff}
.panel p{color:rgba(255,255,255,.72)}
.panel h4{margin:28px 0 6px; font-size:13px; text-transform:uppercase; letter-spacing:.08em; color:var(--mint)}
.panel .logo{color:#fff}
.shade{position:fixed; inset:0; background:rgba(8,6,20,.55); z-index:40; opacity:0; pointer-events:none; transition:opacity .3s}
.shade.open{opacity:1; pointer-events:auto}

/* hero */
.hero{position:relative; padding-block:80px 90px; overflow:hidden}
.hero-grid{display:grid; grid-template-columns:1.35fr 1fr; gap:48px; align-items:end}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr}}
.hello{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 18px; list-style:none; padding:0}
.hello li{font-weight:800; font-size:14px; padding:4px 12px; border-radius:99px; background:var(--bg2)}
.hello li:last-child{font-family:var(--arab)}
.hero h1{font-size:clamp(44px,7.4vw,92px); letter-spacing:-.035em; line-height:1.02}
.hero h1 strong{position:relative; display:inline-block; font-weight:800; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.hero h1 strong svg{position:absolute; inset-inline:0; bottom:-.12em; width:100%; height:.28em}
.stat{background:var(--card); border:1px solid var(--line); box-shadow:var(--shadow); border-radius:22px; padding:34px}
.stat .big{font-size:64px; font-weight:800; line-height:1; letter-spacing:-.03em; display:flex; align-items:flex-start; gap:4px}
.stat .big sup{font-size:28px; color:var(--primary)}
.stat .lbl{font-weight:800; margin:6px 0 14px}
.stat p{color:var(--muted); margin:0 0 22px}
.blob{position:absolute; z-index:-1; border-radius:42% 58% 63% 37% / 41% 44% 56% 59%; filter:blur(2px); opacity:.18; animation:morph 14s ease-in-out infinite}
.blob.a{width:420px; height:420px; background:var(--primary); top:-140px; inset-inline-end:-120px}
.blob.b{width:260px; height:260px; background:var(--mint); bottom:-100px; inset-inline-start:-80px; animation-delay:-5s}
@keyframes morph{0%,100%{border-radius:42% 58% 63% 37% / 41% 44% 56% 59%; transform:rotate(0)}50%{border-radius:63% 37% 38% 62% / 55% 38% 62% 45%; transform:rotate(40deg)}}

/* services */
.svc-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:24px}
@media (max-width:1050px){.svc-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.svc-grid{grid-template-columns:1fr}}
.svc{position:relative; background:var(--card); border:1px solid var(--line); border-radius:18px; padding:34px 28px; transition:transform .3s, box-shadow .3s; overflow:hidden}
.svc:hover{transform:translateY(-6px); box-shadow:var(--shadow)}
.svc .ic{width:58px; height:58px; border-radius:14px; background:var(--bg2); display:grid; place-items:center; color:var(--primary); margin-bottom:22px}
.svc .ic svg{width:28px; height:28px}
.svc h3{font-size:20px; margin-bottom:10px}
.svc p{color:var(--muted); margin:0; font-size:15px}
.svc .n{position:absolute; top:18px; inset-inline-end:22px; font-size:44px; font-weight:800; line-height:1; color:transparent; -webkit-text-stroke:1px var(--line)}

/* process */
.bg2{background:var(--bg2)}
.split{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center}
@media (max-width:900px){.split{grid-template-columns:1fr; gap:40px}}
.shotbox{position:relative; border-radius:22px; overflow:hidden; box-shadow:var(--shadow); background:var(--card)}
.shotbox img{width:100%; aspect-ratio:4/3.2; object-fit:cover; object-position:top}
.badge{position:absolute; inset-inline-start:22px; bottom:22px; background:var(--primary); color:var(--on-primary); border-radius:16px; padding:16px 22px; line-height:1.2}
.badge b{display:block; font-size:34px}
.checks{list-style:none; padding:0; margin:26px 0 30px; display:grid; gap:18px}
.checks li{display:grid; grid-template-columns:auto 1fr; gap:14px}
.checks .k{width:34px; height:34px; border-radius:50%; background:var(--grad); color:#fff; display:grid; place-items:center; font-weight:800; font-size:14px}
.checks b{display:block}
.checks span{color:var(--muted); font-size:15px}
.more{font-weight:800; text-decoration:none; color:var(--primary)}

/* works */
.works{display:grid; grid-template-columns:repeat(2,1fr); gap:28px}
@media (max-width:760px){.works{grid-template-columns:1fr}}
.work{background:var(--card); border:1px solid var(--line); border-radius:20px; overflow:hidden; display:flex; flex-direction:column}
.work .img{background:var(--bg2); padding:22px 22px 0; overflow:hidden}
.work .img img{border-radius:10px 10px 0 0; width:100%; aspect-ratio:16/10; object-fit:cover; object-position:top; transition:transform .5s}
.work.phone .img img{width:46%; margin:0 auto; aspect-ratio:9/16; border-radius:18px 18px 0 0}
.work:hover .img img{transform:scale(1.03)}
.work .txt{padding:24px 26px 28px; display:grid; grid-template-columns:1fr auto; gap:6px 16px; align-items:center; flex:1}
.work .tag{grid-column:1/-1; justify-self:start; font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--primary); background:color-mix(in srgb,var(--primary) 12%,transparent); padding:2px 10px; border-radius:99px}
.work h3{font-size:22px}
.work p{grid-column:1/2; color:var(--muted); margin:0; font-size:15px}
.work .arrow{grid-column:2; grid-row:2/4; width:52px; height:52px; border-radius:50%; background:var(--bg2); display:grid; place-items:center; text-decoration:none; font-size:20px; font-weight:800; transition:background .3s,color .3s}
.work .arrow:hover{background:var(--primary); color:var(--on-primary)}
[dir="rtl"] .work .arrow span{transform:scaleX(-1); display:inline-block}
.tech{grid-column:1/-1; display:flex; flex-wrap:wrap; gap:6px; list-style:none; padding:0; margin:8px 0 0}
.tech li{font-size:12px; border:1px solid var(--line); border-radius:6px; padding:0 8px; color:var(--muted)}

/* counters */
.counters{background:var(--dark); color:var(--on-dark); padding-block:70px}
.cgrid{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; text-align:center}
@media (max-width:760px){.cgrid{grid-template-columns:repeat(2,1fr)}}
.cnum{font-size:clamp(40px,5vw,60px); font-weight:800; line-height:1; font-variant-numeric:tabular-nums; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.clbl{color:rgba(255,255,255,.72); font-weight:700; margin-top:8px}

/* marquee */
.marquee{overflow:hidden; padding-block:40px; border-bottom:1px solid var(--line)}
.track{display:flex; width:max-content; animation:slide 28s linear infinite}
[dir="rtl"] .track{animation-direction:reverse}
.track span{font-size:clamp(36px,6vw,72px); font-weight:800; letter-spacing:-.03em; padding-inline:28px; white-space:nowrap; direction:ltr}
.track span:nth-child(even){color:transparent; -webkit-text-stroke:1.5px var(--ink)}
@keyframes slide{to{transform:translateX(-50%)}}

/* why */
.whybox{background:var(--grad); border-radius:24px; padding:44px; color:#0b0820; display:flex; flex-direction:column; gap:10px; justify-content:center; min-height:100%}
.whybox .g{font-size:clamp(38px,5vw,62px); font-weight:800; line-height:1.05; letter-spacing:-.03em}
.whybox .g:last-child{font-family:var(--arab)}
.acc{display:grid; gap:14px; margin-top:28px}
.acc details{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:4px 22px}
.acc summary{cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:14px; font-weight:800; font-size:18px; padding-block:14px}
.acc summary::-webkit-details-marker{display:none}
.acc summary span{font-size:15px; color:var(--primary)}
.acc details[open] summary span{color:var(--muted)}
.acc details p{color:var(--muted); margin:0 0 16px; font-size:15px}

/* skills */
.bars{display:grid; gap:26px}
.bar .row{display:flex; justify-content:space-between; font-weight:800; margin-bottom:8px}
.bar .row span{direction:ltr}
.bar .trk{height:8px; border-radius:99px; background:var(--line); overflow:hidden}
.bar .fill{height:100%; border-radius:99px; background:var(--grad); width:var(--w); transition:width 1.2s ease}
.chips{display:flex; flex-wrap:wrap; gap:10px; list-style:none; padding:0; margin:26px 0 0}
.chips li{background:var(--card); border:1px solid var(--line); border-radius:10px; padding:4px 14px; font-weight:700; font-size:14px}

/* cta + contact form */
.cta{background:var(--dark); color:var(--on-dark); border-radius:28px; padding:56px clamp(22px,5vw,64px); display:grid; grid-template-columns:1fr 1.1fr; gap:48px; align-items:center; position:relative; overflow:hidden}
@media (max-width:900px){.cta{grid-template-columns:1fr; gap:32px}}
.cta::before{content:""; position:absolute; width:320px; height:320px; border-radius:50%; background:var(--grad); opacity:.35; filter:blur(60px); top:-120px; inset-inline-start:-80px}
.cta > *{position:relative}
.cta h2{font-size:clamp(28px,4vw,44px)}
.cta-text p{color:rgba(255,255,255,.72); margin:12px 0 0; max-width:42ch}
.cta-mail{font-size:14px}
.cta-mail .m{color:#fff; font-weight:700; user-select:all; overflow-wrap:anywhere}
.cform{background:var(--card); color:var(--ink); border-radius:20px; padding:clamp(22px,4vw,34px); display:grid; gap:18px; box-shadow:0 20px 50px rgba(0,0,0,.25)}
.field{display:grid; gap:6px}
.field label{font-size:13px; font-weight:800; letter-spacing:.02em}
.field label b{color:var(--primary)}
.field label i{font-style:normal; font-weight:600; color:var(--muted)}
.field input,.field textarea{font:inherit; font-weight:500; color:var(--ink); background:transparent; border:0; border-bottom:2px solid var(--line); border-radius:0; padding:8px 2px 10px; width:100%; transition:border-color .2s}
.field textarea{resize:vertical; min-height:56px}
.field input:focus,.field textarea:focus{outline:none; border-bottom-color:var(--primary)}
.field input:focus-visible,.field textarea:focus-visible{outline:none}
.field.bad input{border-bottom-color:#e5484d}
.ferr{color:#e5484d; font-size:13px; font-weight:600; min-height:0}
.ferr:empty{display:none}
.hp{position:absolute; inset-inline-start:-9999px; width:1px; height:1px; opacity:0}
.send{justify-content:center; width:100%; padding-block:16px}
.send svg{width:18px; height:18px}
[dir="rtl"] .send svg{transform:scaleX(-1)}
.send[disabled]{opacity:.65; cursor:progress}
.fstatus{margin:0; font-size:14px; font-weight:600; min-height:0}
.fstatus:empty{display:none}
.fstatus.ok{color:#0e9f6e}
.fstatus.err{color:#e5484d}
.fstatus .m{user-select:all}

/* footer */
footer{padding-block:80px 0; border-top:1px solid var(--line); margin-top:100px}
.fgrid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:36px}
@media (max-width:900px){.fgrid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.fgrid{grid-template-columns:1fr}}
footer h4{margin:0 0 14px; font-size:17px}
footer ul{list-style:none; padding:0; margin:0; display:grid; gap:6px}
footer a{text-decoration:none; color:var(--muted)}
footer a:hover{color:var(--primary)}
footer p, footer li{color:var(--muted); font-size:15px}
.copy{margin-top:60px; padding-block:22px; border-top:1px solid var(--line); color:var(--muted); font-size:14px}

.top{position:fixed; bottom:calc(20px + env(safe-area-inset-bottom,0px)); inset-inline-end:20px; width:48px; height:48px; border-radius:12px; border:0; background:var(--primary); color:#fff; font-size:20px; cursor:pointer; opacity:0; pointer-events:none; transition:opacity .2s; z-index:20}
.top.show{opacity:1; pointer-events:auto}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important; transition:none!important}
}

/* hero: due pulsanti nel riquadro */
.stat-btns{display:flex; flex-wrap:wrap; gap:10px}
.stat-btns .btn{flex:1 1 auto; justify-content:center; padding-inline:22px}

/* servizi online */
.online{background:var(--dark); color:var(--on-dark); position:relative; overflow:hidden}
.online::before{content:""; position:absolute; width:420px; height:420px; border-radius:50%; background:var(--grad); opacity:.22; filter:blur(80px); top:-160px; inset-inline-end:-120px; pointer-events:none}
.online .wrap{position:relative}
.online .head p{color:rgba(255,255,255,.72)}
.ol-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr)); gap:24px}
.ol{background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:20px; padding:30px 28px; display:flex; flex-direction:column; gap:12px}
.ol-top{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:6px}
.ol .ic{width:56px; height:56px; border-radius:14px; background:var(--grad); color:#0b0820; display:grid; place-items:center}
.ol .ic svg{width:28px; height:28px}
.ol-state{font-size:13px; font-weight:800; padding:3px 12px; border-radius:99px; background:color-mix(in srgb,var(--mint) 18%,transparent); color:var(--mint)}
.ol h3{font-size:24px}
.ol p{margin:0; color:rgba(255,255,255,.72); font-size:15px; flex:1}
.ol .tech{margin:0 0 6px}
.ol .tech li{border-color:rgba(255,255,255,.18); color:rgba(255,255,255,.72)}
.ol .btn{align-self:flex-start}
.ol .btn::after{background:var(--mint)}
.ol .btn:hover{color:#0b0820}
.ol.soon{border-style:dashed; background:transparent}
.ol.soon .ic{background:rgba(255,255,255,.1); color:rgba(255,255,255,.8)}
.ol.soon .ol-state{background:rgba(255,255,255,.1); color:rgba(255,255,255,.75)}
.ol-soon{align-self:flex-start; font-weight:800; font-size:15px; padding:14px 0; color:rgba(255,255,255,.55)}

/* schede progetto larghe (Meccanica Ferraroni, pannello admin) */
.work.wide{grid-column:1/-1; flex-direction:row}
.work.wide .img{flex:1.2; padding:22px 0 22px 22px}
.work.wide .img img{height:100%; aspect-ratio:auto; border-radius:10px}
.work.wide .txt{flex:1; align-content:center}
[dir="rtl"] .work.wide .img{padding:22px 22px 22px 0}
@media (max-width:760px){
  .work.wide{flex-direction:column}
  .work.wide .img{padding:22px 22px 0}
  .work.wide .img img{aspect-ratio:16/10; border-radius:10px 10px 0 0}
}

/* frase sotto il titolo grande */
.hero-tag{margin:22px 0 0; font-size:clamp(18px,2.2vw,24px); font-weight:700; color:var(--muted); letter-spacing:-.01em}

/* logo: versione chiara o scura secondo il tema (nel pannello scuro sempre la versione scura) */
.logo img{height:40px; width:auto; display:block}
.logo .lg-dark{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .logo .lg-light{display:none} :root:not([data-theme="light"]) .logo .lg-dark{display:block}}
:root[data-theme="dark"] .logo .lg-light{display:none}
:root[data-theme="dark"] .logo .lg-dark{display:block}
@media (max-width:480px){.logo img{height:34px}}

/* ============ barra in alto: sfumatura scura con i colori del logo ============ */
header{
  background:
    radial-gradient(620px 130px at 10% -40%, rgba(25,212,255,.30), transparent 70%),
    radial-gradient(520px 150px at 92% 140%, rgba(255,79,216,.24), transparent 70%),
    linear-gradient(100deg,#0b0a24 0%,#19144d 48%,#2b166c 100%);
  border-bottom:0; color:#fff; backdrop-filter:none;
}
header::after{content:""; position:absolute; inset:auto 0 -2px 0; height:2px; background:linear-gradient(90deg,#19d4ff,#6d5cff 50%,#ff4fd8); opacity:.9; pointer-events:none}
header .logo .lg-light{display:none}
header .logo .lg-dark{display:block}
.links > a,.ddtop{position:relative; color:#e6e4ff}
.links > a:hover,.ddtop:hover,.dd:hover .ddtop{color:#fff}
.links > a::after,.ddtop::after{content:""; position:absolute; inset:auto 0 -6px 0; height:2px; border-radius:2px; background:linear-gradient(90deg,#19d4ff,#ff4fd8); transform:scaleX(0); transform-origin:left; transition:transform .25s}
[dir="rtl"] .links > a::after,[dir="rtl"] .ddtop::after{transform-origin:right}
.links > a:hover::after,.ddtop:hover::after,.dd:hover .ddtop::after{transform:scaleX(1)}
header .lang button{border-color:rgba(255,255,255,.28); color:#fff}
header .lang button[aria-pressed="true"]{background:#fff; border-color:#fff; color:#19144d}
header .iconbtn{background:rgba(255,255,255,.1); color:#fff}
header .iconbtn:hover{background:rgba(255,255,255,.2)}

/* ============ sottomenu: si aprono al passaggio del mouse ============ */
.dd{position:relative; display:flex; align-items:center; gap:2px}
.ddbtn{width:24px; height:24px; padding:0; border:0; border-radius:6px; background:none; color:#e6e4ff; display:grid; place-items:center; cursor:pointer}
.ddbtn svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; transition:transform .2s}
.ddmenu{position:absolute; top:100%; inset-inline-start:-18px; margin-top:16px; width:min(360px,90vw); z-index:40;
  background:var(--card); color:var(--ink); border:1px solid var(--line); border-radius:16px; padding:8px;
  box-shadow:0 26px 60px -18px rgba(10,8,40,.5); display:grid; gap:2px;
  opacity:0; visibility:hidden; transform:translateY(8px); transition:opacity .18s,transform .18s,visibility 0s .18s}
.ddmenu::before{content:""; position:absolute; inset:-18px 0 auto 0; height:18px}           /* ponte: il mouse arriva al menu senza chiuderlo */
.dd.open .ddmenu,.dd:has(:focus-visible) .ddmenu{opacity:1; visibility:visible; transform:none; transition:opacity .18s,transform .18s,visibility 0s}
.dd.open .ddbtn svg{transform:rotate(180deg)}
@media (hover:hover) and (min-width:901px){
  .dd:hover .ddmenu{opacity:1; visibility:visible; transform:none; transition:opacity .18s,transform .18s,visibility 0s}
  .dd:hover .ddbtn svg{transform:rotate(180deg)}
}
.ddi{display:flex; align-items:center; gap:12px; padding:9px 10px; border-radius:12px; text-decoration:none; color:var(--ink); line-height:1.3}
.links .ddi:hover,.ddi:focus-visible{background:var(--bg2); color:var(--ink)}
.ddic{width:38px; height:38px; flex:none; border-radius:10px; background:var(--grad); color:#fff; display:grid; place-items:center}
.ddic svg{width:20px; height:20px}
.ddimg{width:54px; height:38px; flex:none; object-fit:cover; border-radius:8px; background:var(--bg2)}
.ddtx{display:flex; flex-direction:column; min-width:0}
.ddtx b{font-size:14.5px; font-weight:800}
.ddtx small{font-size:12.5px; font-weight:500; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.links .ddall{display:block; margin-top:4px; padding:10px 12px 6px; border-top:1px solid var(--line); font-size:14px; font-weight:800; color:var(--primary); text-decoration:none}
[dir="rtl"] .ddall span{display:inline-block; transform:scaleX(-1)}

/* telefono e tablet: menu a tendina scuro, i sottomenu si aprono con la freccia */
@media (max-width:900px){
  .links{background:#120f36; border-bottom:1px solid rgba(255,255,255,.1); max-height:calc(100dvh - 76px); overflow-y:auto; color:#fff}
  .dd{flex-wrap:wrap; width:100%}
  .ddbtn{width:36px; height:36px; margin-inline-start:auto; background:rgba(255,255,255,.08)}
  .ddmenu{position:static; width:100%; margin:8px 0 0; display:none; opacity:1; visibility:visible; transform:none; transition:none;
    background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.12); box-shadow:none}
  .ddmenu::before{display:none}
  .dd.open .ddmenu{display:grid}
  .ddi{color:#fff}
  .links .ddi:hover{background:rgba(255,255,255,.08); color:#fff}
  .ddtx small{color:rgba(255,255,255,.62)}
  .links .ddall{color:#7cf0cf; border-top-color:rgba(255,255,255,.12)}
}