/* ─────────────────────────────────────────────
   DaProd — tech scuro + lucido Y2K / Aero
   pioggia matrix, vetro scuro, bottoni aqua, font mono
   ───────────────────────────────────────────── */

:root {
  --bg:    #020806;
  --txt:   #cfe3dd;
  --txt2:  #86a59c;
  --head:  #f2fffb;
  --g:     #00ff41;
  --g2:    #3dff8a;
  --cy:    #3ddbff;
  --glass: rgba(8,22,20,.62);
  --glass-b: rgba(120,255,200,.16);
  --shadow: 0 18px 44px rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.4);
  --r: 20px;
  --nh: 64px;
  --round: 'M PLUS Rounded 1c', 'Nunito', system-ui, sans-serif;
  --body:  'Nunito', system-ui, sans-serif;
  --mono:  'Space Mono', ui-monospace, monospace;
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; scroll-padding-top:calc(var(--nh) + 16px); }
body {
  font-family:var(--body); color:var(--txt); line-height:1.65; font-size:17px;
  background:var(--bg); overflow-x:hidden;
}
body::after { /* scanline */
  content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.16) 0 1px,transparent 1px 3px);
}
img { display:block; max-width:100%; height:auto; }
[hidden] { display:none !important; }
a { color:var(--g2); text-decoration:none; }
b, strong { font-weight:800; color:var(--head); }
.wrap { max-width:1160px; margin:0 auto; padding:0 20px; }

/* ── SFONDO: aurora + nastri + matrix + bolle ── */
.sky { position:fixed; inset:0; z-index:-3; pointer-events:none; overflow:hidden; }
.aura { position:absolute; border-radius:50%; filter:blur(70px); opacity:.55; }
.a1 { width:720px; height:520px; top:-220px; right:-160px; background:radial-gradient(circle,rgba(61,219,255,.55),transparent 65%); }
.a2 { width:760px; height:560px; bottom:-260px; left:-200px; background:radial-gradient(circle,rgba(0,255,65,.35),transparent 65%); }
.a3 { width:520px; height:420px; top:40%; left:45%; background:radial-gradient(circle,rgba(124,92,255,.22),transparent 65%); }
.swoosh { position:absolute; left:0; right:0; bottom:0; width:100%; height:70vh; opacity:.9; }
#mx { position:fixed; inset:0; z-index:-2; opacity:.16; pointer-events:none; }
#bubbles { position:fixed; inset:0; z-index:-1; pointer-events:none; }

/* ── VETRO SCURO ── */
.glass {
  position:relative; background:var(--glass);
  -webkit-backdrop-filter:blur(14px) saturate(1.4); backdrop-filter:blur(14px) saturate(1.4);
  border:1px solid var(--glass-b); border-radius:var(--r);
  box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.14);
  isolation:isolate;
}
.glass::before { /* riflesso in alto */
  content:''; position:absolute; inset:1px 1px 58% 1px;
  border-radius:calc(var(--r) - 1px) calc(var(--r) - 1px) 50% 50% / calc(var(--r) - 1px) calc(var(--r) - 1px) 16px 16px;
  background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,0));
  pointer-events:none; z-index:-1;
}

/* ── BOTTONI AQUA ── */
.aqua {
  --a1:#b4f4ff; --a2:#1fb8ee; --a3:#0873c4;
  position:relative; display:inline-flex; align-items:center; gap:.55em;
  padding:.72em 1.4em; border-radius:999px; border:1px solid rgba(0,0,0,.5);
  font:800 .98rem/1 var(--round); color:#fff; letter-spacing:.01em; cursor:pointer;
  text-shadow:0 1px 1px rgba(0,30,60,.55);
  background:linear-gradient(180deg,var(--a1) 0%,var(--a2) 50%,var(--a3) 51%,var(--a2) 100%);
  box-shadow:0 0 18px color-mix(in srgb,var(--a2) 40%,transparent), 0 6px 14px rgba(0,0,0,.45), inset 0 -3px 6px rgba(255,255,255,.3), inset 0 1px 0 rgba(255,255,255,.9);
  transition:transform .15s, box-shadow .2s, filter .2s; overflow:hidden; white-space:nowrap; isolation:isolate;
}
.aqua::before { /* gloss */
  content:''; position:absolute; left:8%; right:8%; top:2px; height:46%; border-radius:999px;
  background:linear-gradient(180deg,rgba(255,255,255,.75),rgba(255,255,255,.06));
  pointer-events:none; z-index:-1;
}
.aqua:hover { filter:brightness(1.1) saturate(1.1); transform:translateY(-2px); box-shadow:0 0 28px color-mix(in srgb,var(--a2) 60%,transparent), 0 10px 22px rgba(0,0,0,.5), inset 0 -3px 6px rgba(255,255,255,.35), inset 0 1px 0 #fff; }
.aqua:active { transform:translateY(1px); }
.aqua:focus-visible, .topic:focus-visible, .tile:focus-visible, .g-row:focus-visible, .div-card:focus-visible, .id-flip:focus-visible { outline:2px solid var(--g); outline-offset:3px; }
.aqua.green  { --a1:#caffc4; --a2:#19d64a; --a3:#0a8a26; text-shadow:0 1px 1px rgba(0,50,10,.6); }
.aqua.orange { --a1:#ffe29a; --a2:#ffa12b; --a3:#d4600a; text-shadow:0 1px 1px rgba(90,30,0,.6); }
.aqua.red    { --a1:#ffb0b0; --a2:#f23b3b; --a3:#b30d0d; text-shadow:0 1px 1px rgba(80,0,0,.6); }
.aqua.ghost  {
  --a2:transparent; color:var(--txt); text-shadow:none; border-color:rgba(120,255,200,.25);
  background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.04) 50%,rgba(0,0,0,.2) 51%,rgba(255,255,255,.05));
  box-shadow:0 6px 14px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.2);
}
.aqua.ghost::before { background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,0)); }
.aqua.ghost:hover { color:#fff; border-color:var(--g); box-shadow:0 0 18px rgba(0,255,65,.25), inset 0 1px 0 rgba(255,255,255,.25); }
.aqua.sm { padding:.6em 1.1em; font-size:.88rem; }

/* ── ICONE APP LUCIDE ── */
.ico {
  --i1:#8fe3ff; --i2:#0a8fe0;
  position:relative; display:inline-grid; place-items:center; flex:none;
  width:64px; height:64px; border-radius:18px; color:#fff; font-size:1.7rem;
  background:linear-gradient(160deg,var(--i1),var(--i2));
  box-shadow:0 0 20px color-mix(in srgb,var(--i2) 35%,transparent), 0 8px 16px rgba(0,0,0,.45), inset 0 -4px 8px rgba(0,0,0,.18), inset 0 0 0 1px rgba(255,255,255,.3);
  text-shadow:0 2px 3px rgba(0,0,0,.3); overflow:hidden;
}
.ico::before {
  content:''; position:absolute; left:-10%; right:-10%; top:-30%; height:78%; border-radius:0 0 50% 50%;
  background:linear-gradient(180deg,rgba(255,255,255,.7),rgba(255,255,255,.08));
}
.ico i { position:relative; }
.ico.sm { width:42px; height:42px; border-radius:12px; font-size:1.1rem; }
.i-suite { --i2:#7c5cff; background:linear-gradient(135deg,#ffb347,#ff5c8a 40%,#7c5cff 75%,#3ddbff); }
.i-fin   { --i1:#7ff5e2; --i2:#0f9fb5; }
.i-dozer { --i1:#fff08a; --i2:#e59a00; }
.i-claw  { --i1:#ffc2e6; --i2:#e8408f; }
.i-ltx   { --i1:#d4b8ff; --i2:#6b3fd6; }
.i-inf   { --i1:#ffb199; --i2:#d6341c; }
.i-zen   { --i1:#c6ffd9; --i2:#2bb673; }
.i-shoe  { --i1:#f3d7b5; --i2:#9a5a2a; }
.i-diana { --i1:#d9ff9c; --i2:#48b01e; }
.i-pino  { --i1:#b9d3ff; --i2:#2a4fd6; }
.i-3d    { --i1:#a9f0ff; --i2:#0f86c9; }
.i-ai    { --i1:#e2c4ff; --i2:#8a3fe0; }
.i-web   { --i1:#b3ffc9; --i2:#10a63a; }
.i-music { --i1:#ffc2d4; --i2:#e0335f; }
.i-video { --i1:#fff08a; --i2:#ff3df2; background:linear-gradient(150deg,#ffe066,#ff8a3d 45%,#ff3df2); }
.i-neon  { --i1:#ff9cf6; --i2:#7c1fd6; background:linear-gradient(150deg,#ffd54a,#ff3df2 50%,#5b1fd6); }
.i-ops   { --i1:#b8ffd0; --i2:#0a8a26; }
.i-self  { --i1:#1b3a33; --i2:#04120c; }
.i-self img { position:relative; }

/* ── NAV ── */
#nav { position:fixed; top:10px; left:0; right:0; z-index:100; pointer-events:none; }
.nav-in {
  pointer-events:auto; height:var(--nh); display:flex; align-items:center; justify-content:space-between; gap:16px;
  background:rgba(4,14,12,.62); -webkit-backdrop-filter:blur(18px) saturate(1.5); backdrop-filter:blur(18px) saturate(1.5);
  border:1px solid var(--glass-b); border-radius:999px; padding:0 10px 0 14px;
  box-shadow:0 10px 30px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.14);
  max-width:1120px; margin:0 auto; width:calc(100% - 24px);
  transition:background .3s, box-shadow .3s;
}
#nav.scrolled .nav-in { background:rgba(4,14,12,.85); box-shadow:0 10px 30px rgba(0,0,0,.6), 0 0 22px rgba(0,255,65,.08), inset 0 1px 0 rgba(255,255,255,.14); }
.brand { display:flex; align-items:center; gap:10px; font:800 1.25rem/1 var(--round); color:var(--head); }
.brand img { width:34px; height:34px; filter:drop-shadow(0 0 8px rgba(61,219,255,.45)); }
#links { display:flex; list-style:none; gap:4px; align-items:center; }
#links a:not(.aqua) {
  display:block; padding:.6em .9em; border-radius:999px; color:var(--txt2); font:700 .82rem/1 var(--mono);
  transition:background .2s, color .2s;
}
#links a:not(.aqua):hover, #links a.act { color:var(--g); background:rgba(0,255,65,.08); box-shadow:inset 0 0 0 1px rgba(0,255,65,.25); }
#links li:last-child { margin-left:6px; }
#menu { display:none; width:44px; height:44px; border-radius:50%; border:1px solid var(--glass-b); background:linear-gradient(rgba(255,255,255,.12),rgba(255,255,255,.02)); cursor:pointer; flex-direction:column; justify-content:center; align-items:center; gap:4px; }
#menu span { display:block; width:18px; height:2px; border-radius:2px; background:var(--g); transition:transform .25s, opacity .25s; }
#menu.on span:nth-child(1) { transform:translateY(6px) rotate(45deg); }
#menu.on span:nth-child(2) { opacity:0; }
#menu.on span:nth-child(3) { transform:translateY(-6px) rotate(-45deg); }

/* ── HERO ── */
.hero { position:relative; min-height:100vh; min-height:100svh; display:flex; align-items:center; padding:calc(var(--nh) + 60px) 0 110px; }
.hero-in { display:grid; grid-template-columns:1.25fr .9fr; gap:48px; align-items:center; width:100%; }
.hello {
  display:inline-flex; align-items:center; gap:10px; padding:.5em 1em; border-radius:999px;
  background:rgba(0,255,65,.06); border:1px solid rgba(0,255,65,.25); font:700 .8rem/1.2 var(--mono); color:var(--g);
}
.dot { width:9px; height:9px; border-radius:50%; background:radial-gradient(circle at 35% 30%,#eaffc9,#00ff41); box-shadow:0 0 0 3px rgba(0,255,65,.2); animation:pulse 2s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow:0 0 0 7px rgba(0,255,65,0); } }
.chrome {
  margin:20px 0 16px; font:800 clamp(3.2rem,9vw,6.4rem)/.95 var(--round); letter-spacing:-.02em;
}
.chrome span { display:block; color:transparent; -webkit-background-clip:text; background-clip:text; }
.chrome .c-top {
  background:linear-gradient(180deg,#ffffff 0%,#d4f6ff 38%,#6fd6ff 50%,#1b7fc4 58%,#8fe6ff 100%);
  -webkit-background-clip:text; background-clip:text;
  filter:drop-shadow(0 0 18px rgba(61,219,255,.35));
}
.chrome .c-bot {
  font:700 .3em/1.2 var(--mono); letter-spacing:.32em; text-transform:uppercase; margin-top:.5em;
  background:linear-gradient(180deg,#eaffea,#00ff41 60%,#0a9a2a); -webkit-background-clip:text; background-clip:text;
  filter:drop-shadow(0 0 10px rgba(0,255,65,.45));
}
.hero-line { font:700 clamp(1.05rem,2.4vw,1.35rem)/1.4 var(--mono); color:var(--txt); min-height:1.5em; }
.hero-line .pr { color:var(--g); }
.tw { color:var(--cy); }
.caret { display:inline-block; width:.6em; height:1.1em; margin-left:2px; vertical-align:-.2em; background:var(--g); box-shadow:0 0 8px var(--g); animation:blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity:0; } }
.hero-sub { max-width:34em; margin:16px 0 28px; color:var(--txt2); font-size:1.08rem; }
.hero-btns { display:flex; flex-wrap:wrap; gap:14px; }

.gadget { padding:10px; border-radius:24px; max-width:380px; justify-self:end; width:100%; }
.gadget-bar { display:flex; align-items:center; gap:8px; padding:8px 12px 12px; font:700 .72rem/1 var(--mono); text-transform:uppercase; letter-spacing:.14em; color:var(--txt2); }
.gadget-bar i { width:8px; height:8px; border-radius:50%; background:var(--g); box-shadow:0 0 8px var(--g); }
.g-row {
  display:flex; align-items:center; gap:12px; padding:10px; border-radius:14px; color:var(--txt);
  transition:background .2s, transform .2s;
}
.g-row + .g-row { margin-top:4px; }
.g-row:hover { background:rgba(255,255,255,.06); transform:translateX(4px); }
.g-row b { display:block; font:800 1rem/1.2 var(--round); }
.g-row small { display:block; font:400 .74rem/1.4 var(--mono); color:var(--txt2); }
.g-row > span:nth-child(2) { flex:1; }
.led { width:9px; height:9px; border-radius:50%; background:var(--g); box-shadow:0 0 8px var(--g), 0 0 2px #fff inset; }
.led.new { background:#ffd54a; box-shadow:0 0 8px #ffd54a, 0 0 2px #fff inset; animation:blink 1.2s steps(1) infinite; }

/* ── TICKER ── */
.ticker {
  overflow:hidden; color:var(--g); position:relative;
  background:linear-gradient(180deg,rgba(0,255,65,.1),rgba(0,255,65,.03) 50%,rgba(0,0,0,.3) 51%,rgba(0,255,65,.05));
  border-block:1px solid rgba(0,255,65,.28);
  box-shadow:0 0 30px rgba(0,255,65,.08), inset 0 1px 0 rgba(255,255,255,.1);
  font:700 .82rem/1 var(--mono); text-shadow:0 0 8px rgba(0,255,65,.6);
}
.ticker-in { display:flex; width:max-content; animation:ticker 40s linear infinite; }
.ticker span { padding:14px 22px; white-space:nowrap; }
@keyframes ticker { to { transform:translateX(-50%); } }

/* ── SEZIONI ── */
.sec { padding:100px 0 20px; }
.head { max-width:660px; margin-bottom:36px; }
.kicker { font:700 .8rem/1 var(--mono); letter-spacing:.06em; color:var(--g); margin-bottom:12px; }
.head h2, .about h2, .contact h2 { font:800 clamp(2rem,4.5vw,2.8rem)/1.1 var(--round); letter-spacing:-.01em; color:var(--head); }
.head p:not(.kicker) { margin-top:12px; color:var(--txt2); font-size:1.08rem; }
.sub-kicker { margin:34px 0 14px; font:700 .78rem/1 var(--mono); color:var(--txt2); }

.chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.chips span {
  padding:.35em .75em; border-radius:999px; font:400 .72rem/1.2 var(--mono); color:var(--cy);
  background:rgba(61,219,255,.07); border:1px solid rgba(61,219,255,.22);
}
.chips.big span { font-size:.8rem; padding:.45em .9em; color:var(--g); background:rgba(0,255,65,.06); border-color:rgba(0,255,65,.22); }
.note { margin-top:10px; font:400 .8rem/1.5 var(--mono); color:var(--txt2); }
.note i { color:var(--g); margin-right:6px; }
.btns { display:flex; flex-wrap:wrap; gap:10px; margin-top:auto; padding-top:20px; }

/* progetto in evidenza */
.feat { display:grid; grid-template-columns:1fr 1.05fr; gap:34px; padding:34px; align-items:center; margin-bottom:26px; }
.feat-txt { display:flex; flex-direction:column; }
.feat-top { display:flex; align-items:center; gap:16px; margin-bottom:16px; }
.feat h3 { font:800 2rem/1.1 var(--round); color:var(--head); }
.feat-txt > p { margin-bottom:12px; }
.apps { display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:6px 0 4px; }
.apps li { display:flex; align-items:center; gap:7px; padding:.4em .8em .4em .55em; border-radius:999px; background:rgba(255,255,255,.05); font:400 .75rem/1 var(--mono); border:1px solid rgba(255,255,255,.1); }
.apps i { width:8px; height:8px; border-radius:50%; background:var(--c); box-shadow:0 0 8px var(--c); }

.win {
  border-radius:10px; overflow:hidden; background:#10141c;
  border:1px solid rgba(255,255,255,.18); box-shadow:0 26px 50px rgba(0,0,0,.6), 0 0 40px rgba(61,219,255,.12);
  transform:perspective(1200px) rotateY(-6deg) rotateX(2deg); transition:transform .5s;
}
.feat:hover .win { transform:perspective(1200px) rotateY(0) rotateX(0); }
.win-bar { /* barra vetro stile Vista, versione scura */
  display:flex; align-items:center; gap:5px; padding:7px 8px 7px 14px;
  background:linear-gradient(180deg,rgba(120,150,170,.55),rgba(40,60,75,.75) 50%,rgba(15,25,32,.85) 51%,rgba(35,55,70,.8));
  font:400 .74rem/1 var(--mono); color:#dff6ff; text-shadow:0 0 6px rgba(61,219,255,.6);
}
.win-bar span { flex:1; }
.win-b { width:26px; height:17px; border-radius:4px; background:linear-gradient(rgba(255,255,255,.35),rgba(255,255,255,.12) 50%,rgba(0,0,0,.2) 51%,rgba(255,255,255,.1)); border:1px solid rgba(0,0,0,.6); }
.win-b.x { width:40px; background:linear-gradient(#ffb3a3,#e9573d 50%,#b3200a 51%,#e8765c); }

/* griglie */
.grid3 { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.grid4 { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.card { display:flex; flex-direction:column; padding:26px; transition:transform .25s, box-shadow .25s, border-color .25s; }
.card:hover, .svc:hover, .feat:hover { border-color:rgba(0,255,65,.4); box-shadow:var(--shadow), 0 0 32px rgba(0,255,65,.1), inset 0 1px 0 rgba(255,255,255,.16); }
.card:hover, .svc:hover { transform:translateY(-6px); }
.card h3, .svc h3 { font:800 1.4rem/1.2 var(--round); margin-top:16px; color:var(--head); }
.card > p:not(.chips):not(.note) { margin-top:12px; font-size:.97rem; }

.tiles { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.tile { display:flex; align-items:center; gap:14px; padding:16px; color:var(--txt); border-radius:16px; transition:transform .2s, border-color .2s; }
.tile:hover { transform:translateY(-3px); border-color:rgba(0,255,65,.4); }
.tile-t { flex:1; min-width:0; }
.tile-t b { display:block; font:800 1.02rem/1.25 var(--round); }
.tile-t small { display:block; font-size:.88rem; color:var(--txt2); line-height:1.4; margin-top:2px; }
.go { color:var(--txt2); opacity:.6; transition:opacity .2s, transform .2s; }
.tile:hover .go { opacity:1; transform:translate(2px,-2px); color:var(--g); }

.svc { padding:24px; transition:transform .25s, box-shadow .25s, border-color .25s; }
.svc p { margin-top:10px; font-size:.95rem; }

/* ── SALA SLOT ── */
.grid2 { display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }
.teaser { color:var(--txt); overflow:hidden; }
.teaser-shot { margin-top:18px; border-radius:12px; border:1px solid rgba(255,213,74,.3); aspect-ratio:16/7; object-fit:cover; object-position:center 42%; width:100%; transition:transform .5s; }
.teaser:hover .teaser-shot { transform:scale(1.03); }
.teaser-go { margin-top:16px; font:700 .85rem/1 var(--mono); color:#ffd54a; }
.teaser:hover { border-color:rgba(255,213,74,.5); box-shadow:var(--shadow), 0 0 32px rgba(255,213,74,.14); }

.slot-sign {
  position:relative; text-align:center; margin:0 auto 46px; max-width:640px; padding:26px 20px 22px;
  border-radius:24px; background:linear-gradient(180deg,#140818,#07030a);
  border:2px solid rgba(255,79,163,.55);
  box-shadow:0 0 0 6px rgba(255,79,163,.07), 0 0 50px rgba(255,79,163,.22), inset 0 0 40px rgba(200,107,255,.15), inset 0 1px 0 rgba(255,255,255,.18);
}
.bulbs { /* lampadine che si rincorrono */
  display:block; height:10px; margin:0 6px;
  background:radial-gradient(circle,#fff6c9 0 2px,#ffd54a 3px,rgba(255,213,74,0) 5px) 0 50%/22px 10px repeat-x;
  filter:drop-shadow(0 0 4px #ffd54a); animation:bulbs 1s steps(2) infinite;
}
@keyframes bulbs { to { background-position:22px 50%; } }
.neon { margin:14px 0 6px; font:800 clamp(2.6rem,8vw,4.4rem)/1 var(--round); letter-spacing:.06em; }
.n1 { color:#ffe9f5; text-shadow:0 0 4px #fff, 0 0 12px #ff4fa3, 0 0 28px #ff4fa3, 0 0 52px #ff4fa3; animation:flicker 5s infinite; }
.n2 { color:#e9fbff; text-shadow:0 0 4px #fff, 0 0 12px #3ddbff, 0 0 28px #3ddbff, 0 0 52px #3ddbff; }
@keyframes flicker { 0%,19%,22%,62%,64%,100% { opacity:1; } 20%,21%,63% { opacity:.35; } }
.neon-sub { font:700 .78rem/1.4 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:#ffd54a; text-shadow:0 0 8px rgba(255,213,74,.6); margin-bottom:14px; }

.cab {
  display:grid; grid-template-columns:1.25fr 1fr; gap:34px; padding:30px; align-items:center; margin-bottom:28px;
  border-color:color-mix(in srgb,var(--neon) 35%,transparent);
  box-shadow:var(--shadow), 0 0 40px color-mix(in srgb,var(--neon) 12%,transparent), inset 0 1px 0 rgba(255,255,255,.14);
}
.cab::after { /* bordo al neon in alto */
  content:''; position:absolute; left:24px; right:24px; top:-1px; height:2px; border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--neon),var(--neon2),transparent); box-shadow:0 0 14px var(--neon);
}
.cab.flip .cab-screen, .site.flip .show, .prod.flip .show { order:2; }
.cab-screen { position:relative; }
.screen {
  position:relative; display:block; border-radius:14px; overflow:hidden; aspect-ratio:16/10; background:#000;
  border:1px solid color-mix(in srgb,var(--neon) 45%,transparent);
  box-shadow:0 0 0 5px rgba(0,0,0,.55), 0 0 0 6px color-mix(in srgb,var(--neon) 25%,transparent), 0 20px 44px rgba(0,0,0,.6), 0 0 36px color-mix(in srgb,var(--neon) 18%,transparent);
}
.screen .shot { width:100%; height:100%; object-fit:cover; transition:transform .6s, opacity .25s; }
.screen::before { /* scanline + riflesso del vetro */
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(160deg,rgba(255,255,255,.14),transparent 38%), repeating-linear-gradient(0deg,rgba(0,0,0,.14) 0 1px,transparent 1px 3px);
}
.screen:hover .shot { transform:scale(1.04); }
.play-over {
  position:absolute; left:50%; bottom:18px; z-index:2; transform:translate(-50%,10px); opacity:0;
  padding:.7em 1.4em; border-radius:999px; font:800 .95rem/1 var(--round); letter-spacing:.08em; color:#fff;
  background:linear-gradient(180deg,#caffc4,#19d64a 50%,#0a8a26 51%,#19d64a); border:1px solid rgba(0,0,0,.5);
  box-shadow:0 0 22px rgba(0,255,65,.45); text-shadow:0 1px 1px rgba(0,50,10,.6); transition:opacity .25s, transform .25s;
}
.screen:hover .play-over, .screen:focus-visible .play-over { opacity:1; transform:translate(-50%,0); }
.screen:focus-visible { outline:2px solid var(--g); outline-offset:4px; }
.thumbs { display:flex; gap:10px; margin-top:14px; }
.thumb {
  width:96px; aspect-ratio:16/10; border-radius:8px; overflow:hidden; padding:0; cursor:pointer; background:#000;
  border:1px solid rgba(255,255,255,.15); opacity:.55; transition:opacity .2s, border-color .2s, box-shadow .2s;
}
.thumb img { width:100%; height:100%; object-fit:cover; }
.thumb:hover { opacity:.85; }
.thumb.on { opacity:1; border-color:var(--neon); box-shadow:0 0 12px color-mix(in srgb,var(--neon) 50%,transparent); }
.thumb:focus-visible { outline:2px solid var(--g); outline-offset:2px; }
.phone {
  position:absolute; right:-18px; bottom:-26px; width:24%; min-width:92px; border-radius:18px; overflow:hidden; z-index:3;
  border:3px solid #1a1a22; box-shadow:0 0 0 1px rgba(255,255,255,.2), 0 18px 36px rgba(0,0,0,.7), 0 0 26px color-mix(in srgb,var(--neon) 25%,transparent);
  transform:rotate(4deg);
}
.cab-tag { font:700 .74rem/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--neon); text-shadow:0 0 8px color-mix(in srgb,var(--neon) 60%,transparent); }
.cab h3 { font:800 clamp(1.9rem,3.6vw,2.4rem)/1.1 var(--round); color:var(--head); margin:8px 0 6px; }
.cab-info > p:not(.chips):not(.cab-tag) { margin-top:14px; }
.feats { list-style:none; margin-top:14px; display:grid; gap:10px; }
.feats li { display:flex; gap:12px; align-items:flex-start; font-size:.95rem; }
.feats i { flex:none; width:28px; height:28px; border-radius:8px; display:grid; place-items:center; font-size:.8rem; color:var(--neon); background:color-mix(in srgb,var(--neon) 12%,transparent); border:1px solid color-mix(in srgb,var(--neon) 30%,transparent); margin-top:1px; }
.coin-row { display:flex; flex-wrap:wrap; gap:6px; margin-top:18px; }
.coin {
  --c1:#f4f6fa; --c2:#9aa3b2; width:36px; height:36px; border-radius:50%; display:grid; place-items:center;
  font:700 .62rem/1 var(--mono); color:#1c1f26; text-shadow:0 1px 0 rgba(255,255,255,.5);
  background:radial-gradient(circle at 35% 28%,#fff 0 8%,var(--c1) 30%,var(--c2) 100%);
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.18), inset 0 0 0 4px rgba(255,255,255,.35), 0 3px 8px rgba(0,0,0,.5);
}
.c-bi { --c1:#ffe8a6; --c2:#9aa3b2; }
.c-au { --c1:#ffe27a; --c2:#c48a00; }
.c-em { --c1:#9dffc9; --c2:#0d8a4a; }
.c-sa { --c1:#9cc4ff; --c2:#1f4fc4; color:#fff; text-shadow:0 1px 1px rgba(0,0,0,.4); }
.c-ru { --c1:#ff9db0; --c2:#b3102f; color:#fff; text-shadow:0 1px 1px rgba(0,0,0,.4); }
.c-di { --c1:#ffffff; --c2:#8fe6ff; box-shadow:inset 0 0 0 2px rgba(0,0,0,.18), 0 0 12px rgba(143,230,255,.8), 0 3px 8px rgba(0,0,0,.5); }

.mini { display:flex; flex-direction:column; padding:18px; border-color:color-mix(in srgb,var(--neon) 30%,transparent); }
.mini:hover { border-color:color-mix(in srgb,var(--neon) 55%,transparent); box-shadow:var(--shadow), 0 0 30px color-mix(in srgb,var(--neon) 14%,transparent); }
.screen.sm { border-radius:12px; box-shadow:0 0 0 4px rgba(0,0,0,.5), 0 14px 30px rgba(0,0,0,.55); }
.mini-info { display:flex; flex-direction:column; flex:1; padding:18px 6px 4px; }
.mini h3 { font:800 1.4rem/1.2 var(--round); color:var(--head); }
.mini-info > p:not(.chips) { margin-top:12px; font-size:.95rem; }
@media (hover:none) { .play-over { opacity:1; transform:translate(-50%,0); } }

/* ── MUSICA ── */
.vgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.loading { grid-column:1/-1; text-align:center; color:var(--txt2); padding:40px; font:400 .9rem var(--mono); }
.vid {
  position:relative; display:block; border-radius:16px; overflow:hidden; aspect-ratio:16/9;
  border:1px solid var(--glass-b); box-shadow:var(--shadow); background:#07130f;
  transition:border-color .25s, box-shadow .25s;
}
.vid img { width:100%; height:100%; object-fit:cover; transition:transform .5s, filter .3s; filter:saturate(.85) brightness(.85); }
.vid::after { content:''; position:absolute; inset:0 0 55% 0; background:linear-gradient(rgba(255,255,255,.16),transparent); pointer-events:none; }
.vid:hover { border-color:rgba(0,255,65,.45); box-shadow:var(--shadow), 0 0 26px rgba(0,255,65,.14); }
.vid:hover img { transform:scale(1.06); filter:none; }
.play {
  position:absolute; left:50%; top:50%; width:64px; height:64px; margin:-32px 0 0 -32px; border-radius:50%;
  display:grid; place-items:center; color:#fff; font-size:1.3rem; padding-left:4px; z-index:1;
  background:radial-gradient(circle at 50% 28%,#ffb0b0,#f23b3b 55%,#a00c0c);
  border:1px solid rgba(255,255,255,.7); box-shadow:0 0 22px rgba(242,59,59,.45), inset 0 -4px 8px rgba(0,0,0,.25);
  transition:transform .25s;
}
.vid:hover .play { transform:scale(1.12); }
.center { text-align:center; margin-top:30px; }

/* ── CONTATTI ── */
.contact { padding:44px 30px; text-align:center; max-width:780px; margin:0 auto; }
.contact > p:not(.kicker):not(.phone-n):not(.note) { margin-top:10px; color:var(--txt2); }
.topics { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin:18px 0 26px; }
.topic {
  padding:.6em 1.1em; border-radius:999px; cursor:pointer; font:400 .8rem/1 var(--mono); color:var(--txt2);
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.14); transition:all .2s;
}
.topic:hover { border-color:var(--g); color:var(--g); }
.topic.on { color:#fff; text-shadow:0 1px 1px rgba(0,50,10,.6); background:linear-gradient(180deg,#caffc4,#19d64a 50%,#0a8a26 51%,#19d64a); border-color:rgba(0,0,0,.5); font-weight:700; box-shadow:0 0 16px rgba(0,255,65,.3); }
.c-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; }
.phone-n { margin-top:18px; font:700 1.4rem/1 var(--mono); color:var(--g); text-shadow:0 0 12px rgba(0,255,65,.5); }
.contact .note { margin-top:12px; }
.contact .note i { color:#25d366; }

/* ── FOOTER ── */
footer { margin-top:100px; padding:28px 0 34px; background:rgba(0,0,0,.5); border-top:1px solid rgba(0,255,65,.18); }
.foot { display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; color:var(--txt2); font:400 .8rem/1.5 var(--mono); }
.soc { display:flex; gap:10px; }
.soc a, .orb-btn {
  width:42px; height:42px; border-radius:50%; display:grid; place-items:center; color:#fff; font-size:1.05rem;
  background:radial-gradient(circle at 50% 26%,#c9ffd0,#19d64a 50%,#0a7a22); border:1px solid rgba(0,0,0,.5);
  box-shadow:0 0 16px rgba(0,255,65,.25), inset 0 -3px 5px rgba(0,0,0,.2); transition:transform .2s;
  text-shadow:0 1px 1px rgba(0,40,10,.5);
}
.soc a:hover { transform:translateY(-3px) scale(1.06); }
.orb-btn { position:fixed; right:18px; bottom:18px; width:50px; height:50px; z-index:90; cursor:pointer; opacity:0; pointer-events:none; transform:translateY(12px); transition:opacity .3s, transform .3s; }
.orb-btn.on { opacity:1; pointer-events:auto; transform:none; }

/* ── L'AZIENDA: tesserini ── */
.team { display:grid; grid-template-columns:1fr 1fr; gap:26px; }
.idcard { perspective:1400px; }
.id-in { position:relative; display:grid; transition:transform .8s cubic-bezier(.2,.8,.2,1); transform-style:preserve-3d; }
.idcard.girata .id-in { transform:rotateY(180deg); }
.id-face {
  grid-area:1/1; display:flex; flex-direction:column; padding:22px 24px 18px; border-radius:24px;
  -webkit-backface-visibility:hidden; backface-visibility:hidden;
  border-color:color-mix(in srgb,var(--c1) 40%,transparent);
  box-shadow:var(--shadow), 0 0 40px color-mix(in srgb,var(--c1) 12%,transparent), inset 0 1px 0 rgba(255,255,255,.16);
}
.id-face::after { /* striscia olografica */
  content:''; position:absolute; left:0; right:0; top:0; height:5px; border-radius:24px 24px 0 0;
  background:linear-gradient(90deg,var(--c1),var(--c2),#ff5c8a,#ffd54a,var(--c1)); background-size:200% 100%;
  animation:olo 6s linear infinite;
}
@keyframes olo { to { background-position:200% 0; } }
.id-back { transform:rotateY(180deg); }
.id-top { display:flex; align-items:center; gap:10px; font:700 .72rem/1 var(--mono); color:var(--txt2); letter-spacing:.08em; text-transform:uppercase; }
.id-hole { width:44px; height:9px; border-radius:9px; background:#010403; box-shadow:inset 0 2px 3px rgba(0,0,0,.8), 0 1px 0 rgba(255,255,255,.12); }
.id-org { display:flex; align-items:center; gap:6px; flex:1; }
.id-no { color:var(--c1); text-shadow:0 0 8px color-mix(in srgb,var(--c1) 60%,transparent); }
.id-body { display:flex; align-items:center; gap:20px; margin-top:20px; }
.id-pic {
  position:relative; flex:none; width:128px; height:128px; border-radius:22px; overflow:hidden;
  border:2px solid color-mix(in srgb,var(--c1) 60%,transparent);
  box-shadow:0 0 0 5px color-mix(in srgb,var(--c1) 8%,transparent), 0 0 30px color-mix(in srgb,var(--c1) 25%,transparent), 0 14px 30px rgba(0,0,0,.55);
}
.id-pic img { width:100%; height:100%; object-fit:cover; }
.id-pic::after { content:''; position:absolute; inset:0; background:linear-gradient(150deg,rgba(255,255,255,.3),transparent 40%); pointer-events:none; }
.id-pic.bot img { animation:galleggia 4s ease-in-out infinite; }
@keyframes galleggia { 50% { transform:translateY(-4px) scale(1.02); } }
.id-role { font:700 .74rem/1.3 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--c1); }
.id-txt h3 { font:800 2.3rem/1.05 var(--round); color:var(--head); margin:6px 0 4px; }
.id-meta { font:400 .8rem/1.4 var(--mono); color:var(--txt2); }
.id-bio { margin-top:16px; font-size:.96rem; }
.id-face .chips { margin-top:14px; }
.id-foot { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:auto; padding-top:18px; }
.barcode { width:132px; height:26px; opacity:.55; background:repeating-linear-gradient(90deg,var(--txt) 0 2px,transparent 2px 4px,var(--txt) 4px 5px,transparent 5px 8px,var(--txt) 8px 11px,transparent 11px 12px); }
.id-flip {
  display:inline-flex; align-items:center; gap:7px; padding:.55em 1em; border-radius:999px; cursor:pointer;
  font:700 .76rem/1 var(--mono); color:var(--c1); background:color-mix(in srgb,var(--c1) 8%,transparent);
  border:1px solid color-mix(in srgb,var(--c1) 35%,transparent); transition:background .2s, transform .2s;
}
.id-flip:hover { background:color-mix(in srgb,var(--c1) 18%,transparent); transform:translateY(-1px); }
.id-list { list-style:none; display:grid; gap:12px; margin-top:16px; }
.id-list li { display:flex; gap:12px; align-items:flex-start; font-size:.95rem; }
.id-list i { flex:none; width:30px; height:30px; border-radius:9px; display:grid; place-items:center; font-size:.8rem; color:var(--c1); background:color-mix(in srgb,var(--c1) 12%,transparent); border:1px solid color-mix(in srgb,var(--c1) 30%,transparent); }
.id-links { display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }

/* terminale di Cammo e Babbasone */
.duo { margin:26px auto 0; max-width:860px; padding:0; overflow:hidden; border-radius:14px; }
.duo .win-bar { border-radius:0; }
.duo-txt {
  padding:18px 20px 20px; min-height:9.5em; margin:0; white-space:pre-wrap; word-break:break-word;
  font:400 .86rem/1.75 var(--mono); color:var(--txt); background:rgba(1,6,4,.7);
}
.duo-txt .u { color:var(--g); font-weight:700; }
.duo-txt .b { color:var(--cy); font-weight:700; }
.duo-txt .cur { display:inline-block; width:.55em; height:1em; vertical-align:-.15em; background:var(--g); animation:blink 1s steps(1) infinite; }

/* organigramma */
.org { margin-top:56px; }
.org-root {
  display:flex; align-items:center; gap:14px; width:max-content; max-width:100%; margin:0 auto; padding:12px 22px 12px 14px;
  border-radius:999px; background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.02) 50%,rgba(0,0,0,.25) 51%,rgba(255,255,255,.04));
  border:1px solid rgba(0,255,65,.4); box-shadow:0 0 30px rgba(0,255,65,.15), 0 10px 26px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.2);
}
.org-root img { filter:drop-shadow(0 0 8px rgba(61,219,255,.5)); }
.org-root b { display:block; font:800 1.2rem/1.2 var(--round); }
.org-root small { display:block; font:400 .74rem/1.3 var(--mono); color:var(--txt2); }
.org-lines { /* i fili che scendono alle divisioni */
  --l:rgba(0,255,65,.4); position:relative; height:38px; margin:0 calc(100% / 12 - 1px);
  background:linear-gradient(90deg,var(--l) 0 2px,transparent 2px) 0 100% / 20% 50% repeat-x;
}
.org-lines::before { content:''; position:absolute; left:calc(50% - 1px); top:0; width:2px; height:50%; background:var(--l); }
.org-lines::after { content:''; position:absolute; left:0; right:0; top:50%; bottom:0; border:2px solid var(--l); border-bottom:0; border-radius:10px 10px 0 0; box-shadow:0 -4px 12px -6px rgba(0,255,65,.6); }
.divs { display:grid; grid-template-columns:repeat(6,1fr); gap:14px; }
.div-card {
  display:flex; flex-direction:column; gap:6px; padding:18px 16px; color:var(--txt); border-radius:18px;
  border-color:color-mix(in srgb,var(--dc) 30%,transparent); transition:transform .25s, border-color .25s, box-shadow .25s;
}
.div-card::after { content:''; position:absolute; left:16px; right:16px; top:-1px; height:2px; background:linear-gradient(90deg,transparent,var(--dc),transparent); box-shadow:0 0 12px var(--dc); }
.div-card:hover { transform:translateY(-6px); border-color:color-mix(in srgb,var(--dc) 60%,transparent); box-shadow:var(--shadow), 0 0 30px color-mix(in srgb,var(--dc) 18%,transparent); }
.div-card .ico { width:48px; height:48px; border-radius:14px; font-size:1.2rem; margin-bottom:6px; }
.div-n { font:700 .66rem/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--dc); }
.div-card b { font:800 1.08rem/1.2 var(--round); }
.div-card small { font-size:.84rem; line-height:1.45; color:var(--txt2); }
.div-p { margin-top:auto; padding-top:10px; font:400 .7rem/1.5 var(--mono); color:var(--txt); border-top:1px dashed rgba(255,255,255,.12); }

.stats { display:grid; grid-template-columns:repeat(5,1fr); gap:14px; margin-top:26px; }
.stats div { text-align:center; padding:16px 10px; border-radius:16px; background:rgba(0,255,65,.04); border:1px solid rgba(0,255,65,.16); }
.stats b { display:block; font:700 2.2rem/1 var(--mono); color:var(--g); text-shadow:0 0 14px rgba(0,255,65,.5); }
.stats small { display:block; margin-top:6px; font:400 .74rem/1.3 var(--mono); color:var(--txt2); }

/* ── SOFTWARE e SITI: schede con galleria ── */
.prod, .site {
  display:grid; grid-template-columns:1fr 1.15fr; gap:34px; padding:30px; align-items:center; margin-bottom:28px;
  border-color:color-mix(in srgb,var(--neon) 30%,transparent);
  box-shadow:var(--shadow), 0 0 40px color-mix(in srgb,var(--neon) 10%,transparent), inset 0 1px 0 rgba(255,255,255,.14);
}
.site { grid-template-columns:1.2fr 1fr; }
.prod::after, .site::after {
  content:''; position:absolute; left:24px; right:24px; top:-1px; height:2px; border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--neon),var(--neon2),transparent); box-shadow:0 0 14px var(--neon);
}
.prod-txt { display:flex; flex-direction:column; }
.prod-txt > p:not(.note) { margin-top:4px; }
.prod h3 { font:800 clamp(1.8rem,3.4vw,2.2rem)/1.1 var(--round); color:var(--head); margin:4px 0 2px; }
.site h3 { font:800 clamp(1.7rem,3.2vw,2.1rem)/1.1 var(--round); color:var(--head); margin:8px 0 6px; }
.site .cab-info > p:not(.chips):not(.cab-tag) { margin-top:14px; }
.show, .cab-screen, .cab-info, .prod-txt { position:relative; min-width:0; }
.show .win { transform:none; }
.show .shot { width:100%; aspect-ratio:16/10; object-fit:cover; object-position:top; transition:opacity .25s; }
.prod:hover .win { box-shadow:0 26px 50px rgba(0,0,0,.6), 0 0 40px color-mix(in srgb,var(--neon) 25%,transparent); }
.browser {
  border-radius:12px; overflow:hidden; background:#0b0d12;
  border:1px solid rgba(255,255,255,.16); box-shadow:0 26px 50px rgba(0,0,0,.6), 0 0 36px color-mix(in srgb,var(--neon) 16%,transparent);
}
.b-bar { display:flex; align-items:center; gap:6px; padding:9px 12px; background:linear-gradient(180deg,#2a2f3a,#161a22); border-bottom:1px solid rgba(0,0,0,.6); }
.b-bar > i { width:11px; height:11px; border-radius:50%; background:radial-gradient(circle at 35% 30%,#fff9,#ff5f57 45%,#b3261e); }
.b-bar > i:nth-child(2) { background:radial-gradient(circle at 35% 30%,#fff9,#febc2e 45%,#b37a00); }
.b-bar > i:nth-child(3) { background:radial-gradient(circle at 35% 30%,#fff9,#28c840 45%,#0f7a20); }
.b-url {
  flex:1; min-width:0; margin-left:8px; padding:5px 12px; border-radius:999px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font:400 .72rem/1.2 var(--mono); color:#c9d6e3; background:rgba(0,0,0,.45); border:1px solid rgba(255,255,255,.08);
}
.b-url i { color:var(--g); margin-right:6px; font-size:.65rem; }
.show .thumbs, .cab-screen .thumbs { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; padding-bottom:2px; }
.show:has(.phone) .thumbs, .cab-screen:has(.phone) .thumbs { padding-right:26%; }
.thumbs { gap:8px; }
.thumb { flex:none; width:84px; }
.show .phone { bottom:-18px; right:-14px; width:22%; }
.suite-apps { grid-column:1/-1; list-style:none; display:grid; grid-template-columns:repeat(7,1fr); gap:10px; }
.suite-apps li { position:relative; border-radius:12px; overflow:hidden; border:1px solid color-mix(in srgb,var(--c) 40%,transparent); box-shadow:0 0 16px color-mix(in srgb,var(--c) 16%,transparent); }
.suite-apps img { width:100%; aspect-ratio:8/3; object-fit:cover; transition:transform .4s; }
.suite-apps li:hover img { transform:scale(1.06); }
.suite-apps span {
  position:absolute; left:8px; bottom:6px; font:700 .7rem/1 var(--mono); color:#fff;
  text-shadow:0 1px 3px #000, 0 0 8px var(--c);
}
kbd {
  display:inline-block; min-width:1.6em; padding:.1em .4em; border-radius:5px; text-align:center;
  font:700 .8em/1.4 var(--mono); color:var(--head); background:linear-gradient(#2a3140,#141922);
  border:1px solid rgba(255,255,255,.2); box-shadow:0 2px 0 #000;
}
.grades { display:flex; flex-wrap:wrap; gap:5px; margin-top:16px; }
.grades span { padding:.35em .6em; border-radius:6px; font:700 .62rem/1 var(--mono); letter-spacing:.06em; color:#14101c; box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 2px 6px rgba(0,0,0,.4); }
.g1 { background:linear-gradient(#f3f4f7,#aab0bd); }
.g2 { background:linear-gradient(#ffd0a1,#b8692b); }
.g3 { background:linear-gradient(#ffffff,#9fb0c4); }
.g4 { background:linear-gradient(#fff3a6,#d9a300); }
.g5 { background:linear-gradient(120deg,#9dfff0,#ff9cf6,#fff39c); }
.g6 { background:linear-gradient(90deg,#ff6b6b,#ffd54a,#3dff8a,#3ddbff,#b36bff); }
.g7 { background:linear-gradient(#ffffff,#8fe6ff); box-shadow:0 0 10px rgba(143,230,255,.7); }
.g8 { background:radial-gradient(circle at 30% 30%,#ff9cf6,#5b1fd6 55%,#0b0530); color:#fff; box-shadow:0 0 10px rgba(179,107,255,.7); }
.tile.self { margin-top:6px; }

/* ── REVEAL ── */
.rv { opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
.rv.v { opacity:1; transform:none; }

/* ── RESPONSIVE ── */
@media (max-width:1020px) {
  .grid4 { grid-template-columns:repeat(2,1fr); }
  .feat, .cab, .prod, .site { grid-template-columns:1fr; }
  .cab.flip .cab-screen, .site.flip .show, .prod.flip .show { order:0; }
  .divs { grid-template-columns:repeat(2,1fr); }
  .org-lines { display:none; }
  .win { transform:none; }
  .phone { right:-6px; }
}
@media (max-width:1060px) {
  #menu { display:flex; }
  #nav nav { position:absolute; top:calc(var(--nh) + 10px); left:12px; right:12px; }
  #links {
    flex-direction:column; align-items:stretch; gap:2px; padding:10px; border-radius:22px;
    background:linear-gradient(180deg,#0b1d19,#050d0b); border:1px solid var(--glass-b); box-shadow:0 16px 40px rgba(0,0,0,.7);
    opacity:0; transform:translateY(-8px) scale(.98); pointer-events:none; transition:opacity .2s, transform .2s;
  }
  #links.on { opacity:1; transform:none; pointer-events:auto; }
  #links a:not(.aqua) { padding:1em; font-size:.95rem; }
  #links li:last-child { margin:6px 0 0; }
  #links .aqua { width:100%; justify-content:center; }
}
@media (max-width:900px) {
  .hero-in { grid-template-columns:1fr; gap:36px; }
  .gadget { justify-self:stretch; max-width:none; }
  .grid3, .tiles, .vgrid { grid-template-columns:1fr 1fr; }
  .grid2 { grid-template-columns:1fr; }
  .team { grid-template-columns:1fr; max-width:560px; margin-inline:auto; }
  .stats { grid-template-columns:repeat(3,1fr); }
}
@media (max-width:620px) {
  body { font-size:16px; }
  .wrap { padding:0 16px; }
  .hero { padding-bottom:80px; }
  .hero-line { min-height:3em; }
  .grid2, .grid3, .grid4, .tiles, .vgrid { grid-template-columns:1fr; }
  .cab { padding:18px; }
  .phone { width:30%; bottom:-14px; right:-4px; }
  .feat { padding:22px; }
  .feat h3 { font-size:1.6rem; }
  .card, .svc { padding:22px; }
  .sec { padding-top:76px; }
  .divs { grid-template-columns:1fr; }
  .stats { grid-template-columns:repeat(2,1fr); }
  .prod, .site { padding:18px; }
  .id-body { gap:14px; }
  .id-pic { width:104px; height:104px; }
  .id-txt h3 { font-size:1.7rem; }
  .duo-txt { font-size:.74rem; }
  .suite-apps { grid-template-columns:repeat(2,1fr); }
  .show .phone { width:28%; right:-4px; bottom:-10px; }
  .hero-btns .aqua { flex:1; justify-content:center; }
  .foot { justify-content:center; text-align:center; }
}

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none !important; transition:none !important; }
  html { scroll-behavior:auto; }
  .rv { opacity:1; transform:none; }
}