/* Atlas Yacht Service — stile comune a tutte le pagine. Blu notte e arancio vivo. */
@font-face { font-family: "Fraunces"; src: url("fonts/fraunces-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("fonts/fraunces-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("fonts/fraunces-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("fonts/manrope-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("fonts/manrope-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("fonts/manrope-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  /* notte: grigio scuro e bronzo */
  --night: #111214; --night-2: #191A1D; --night-3: #26282C; --night-4: #32353A;
  --ivory: #EFEBE4; --paper: #F8F6F2; --sand: #E3DDD2;
  --orange: #C79A60; --orange-2: #D8B17C; --orange-ink: #6F4C1F;
  --ink: #141516; --ink-2: #35342F; --ink-3: #55514A;
  --on-dark: #F6F3EE; --on-dark-2: #CFCAC2; --on-dark-3: #A6A198;
  --line: #CFC7B9; --line-dark: rgb(246 243 238 / .18);
  --card: #18191C; --card-2: #202226; --card-line: #34363C; --card-line-2: #45484F; --footer: #0B0B0C;
  --teal: #A9B8BA; --teal-ink: #4E6468; --on-acc: #111214;
  --fg-rgb: 246 243 238; --acc-rgb: 199 154 96; --acc2-rgb: 150 160 170;
  --serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --sans: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --snap: cubic-bezier(.76, 0, .24, 1);
  --spring: cubic-bezier(.3, 1.5, .5, 1);
  --wrap: 1200px;
  color-scheme: dark;
}
/* giorno: avorio caldo, testo grafite, stesso bronzo */
:root[data-theme="light"] {
  --night: #F4F1EB; --night-2: #FBF9F5; --night-3: #E5DED1; --night-4: #D5CCBC;
  --ivory: #E8E2D7; --paper: #F6F2EB; --sand: #DDD5C7;
  --orange: #835A26; --orange-2: #9A6D34; --orange-ink: #6A461A;
  --on-dark: #141516; --on-dark-2: #35342F; --on-dark-3: #57534C;
  --line: #C9C0B0; --line-dark: rgb(20 21 22 / .18);
  --card: #FFFFFF; --card-2: #F1ECE3; --card-line: #D6CEC0; --card-line-2: #C4BBAA; --footer: #E4DDD1;
  --teal: #3F5559; --on-acc: #FFFDF8;
  --fg-rgb: 20 21 22; --acc-rgb: 131 90 38; --acc2-rgb: 120 135 150;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { overflow-x: clip; }
body { margin: 0; background: var(--night); color: var(--on-dark); font: 400 17px/1.6 var(--sans); }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
.wrap { width: min(var(--wrap), 100% - 32px); margin-inline: auto; }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; letter-spacing: -.02em; line-height: 1.04; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(44px, 6.6vw, 100px); }
h2 { font-size: clamp(34px, 5vw, 64px); }
h3 { font-size: 23px; line-height: 1.15; }
em { font-style: italic; font-weight: 400; color: var(--orange); }
p { margin: 0; }
.eyebrow { display: inline-flex; align-items: center; gap: 12px; font: 700 12.5px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--orange); }
.eyebrow::before { content: ""; width: 30px; height: 2px; background: currentColor; }
.lead { font-size: clamp(18px, 1.7vw, 21px); color: var(--on-dark-2); max-width: 660px; }
section { padding: clamp(80px, 11vw, 150px) 0; position: relative; }
.light { background: var(--ivory); color: var(--ink); }
.light .lead { color: var(--ink-2); }
.light em { color: var(--orange-ink); }
.sec-head { display: grid; gap: 20px; margin-bottom: clamp(40px, 6vw, 64px); max-width: 820px; }

/* ---------- pulsanti ---------- */
.btn { position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 26px; border-radius: 99px; border: 0; background: var(--orange); color: var(--on-acc); font: 700 15.5px/1 var(--sans); text-decoration: none; cursor: pointer; overflow: hidden; isolation: isolate; transition: transform .35s var(--ease), box-shadow .35s var(--ease); box-shadow: 0 12px 30px -14px rgb(var(--acc-rgb) / .8); }
.btn::before { content: ""; position: absolute; inset: 0; background: var(--ivory); transform: translateY(101%); transition: transform .45s var(--snap); z-index: -1; }
.btn:hover::before { transform: none; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.97); }
.btn svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 2.2; fill: none; transition: transform .35s var(--ease); }
.btn:hover svg { transform: translateX(4px); }
.btn.ghost { background: transparent; color: var(--on-dark); box-shadow: inset 0 0 0 1.5px var(--line-dark); }
.btn.ghost::before { background: var(--on-dark); }
.btn.ghost:hover { color: var(--night); }
.light .btn.ghost { color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.light .btn.ghost::before { background: var(--ink); } .light .btn.ghost:hover { color: var(--ivory); }

/* ---------- testata ---------- */
header.top { position: fixed; inset: 0 0 auto; z-index: 40; transition: background .4s, backdrop-filter .4s, border-color .4s; border-bottom: 1px solid transparent; }
header.top.scrolled { background: color-mix(in srgb, var(--night) 82%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom-color: var(--line-dark); }
header.top .wrap { display: flex; align-items: center; gap: 22px; height: 84px; transition: height .4s var(--ease); }
header.top.scrolled .wrap { height: 68px; }
.logo { display: flex; align-items: center; gap: 12px; text-decoration: none; margin-right: auto; color: var(--on-dark); }
.logo svg { width: 42px; height: 42px; }
.logo b { display: block; font: 800 20px/1 var(--sans); letter-spacing: .06em; }
.logo small { display: block; margin-top: 4px; font: 700 10.5px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--on-dark-3); }
.needle { transform-origin: 20px 20px; animation: bussola 2.4s cubic-bezier(.3, 1.6, .5, 1) .3s both; }
@keyframes bussola { 0% { transform: rotate(-80deg); } 55% { transform: rotate(16deg); } 80% { transform: rotate(-5deg); } 100% { transform: rotate(0); } }
.logo:hover .needle { animation: none; transform: rotate(25deg); transition: transform .8s cubic-bezier(.3, 1.6, .5, 1); }
nav.links { display: flex; gap: 6px; }
nav.links a { position: relative; padding: 10px 14px; border-radius: 99px; text-decoration: none; font-size: 15px; font-weight: 600; color: var(--on-dark-2); transition: color .3s; }
nav.links a::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 5px; height: 2px; background: var(--orange); transform: scaleX(0); transform-origin: right; transition: transform .45s var(--snap); }
nav.links a:hover, nav.links a[aria-current="page"] { color: var(--on-dark); }
nav.links a:hover::after, nav.links a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.lang { position: relative; display: flex; border: 1px solid var(--line-dark); border-radius: 99px; padding: 3px; }
.lang .lthumb { position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); border-radius: 99px; background: var(--orange); transition: transform .55s cubic-bezier(.3, 1.5, .5, 1); }
.lang[data-on="en"] .lthumb { transform: translateX(100%); }
.lang button { position: relative; z-index: 1; border: 0; background: none; font: 700 12px/1 var(--sans); padding: 8px 11px; min-height: 32px; border-radius: 99px; cursor: pointer; color: var(--on-dark-3); transition: color .3s; }
.lang button[aria-pressed="true"] { color: var(--on-acc); }
header .btn { min-height: 44px; padding: 0 20px; font-size: 14.5px; }
.burger { display: none; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line-dark); background: none; cursor: pointer; position: relative; }
.burger i { position: absolute; left: 13px; right: 13px; height: 2px; background: var(--on-dark); transition: transform .45s var(--snap), top .45s var(--snap); }
.burger i:nth-child(1) { top: 18px; } .burger i:nth-child(2) { top: 26px; }
body.menu-open .burger i:nth-child(1) { top: 22px; transform: rotate(45deg); }
body.menu-open .burger i:nth-child(2) { top: 22px; transform: rotate(-45deg); }
@media (max-width: 1000px) { nav.links, header .btn { display: none; } .burger { display: block; } }
@media (max-width: 420px) { .logo small { display: none; } }

/* menu a tutto schermo (telefono) */
.menu { position: fixed; inset: 0; z-index: 35; background: var(--night-2); display: grid; align-content: center; padding: 100px 24px 40px; clip-path: circle(0 at calc(100% - 44px) 42px); transition: clip-path .7s var(--snap); visibility: hidden; }
body.menu-open .menu { clip-path: circle(150% at calc(100% - 44px) 42px); visibility: visible; }
.menu a { display: block; font: 600 clamp(40px, 12vw, 64px)/1.15 var(--serif); text-decoration: none; color: var(--on-dark); opacity: 0; transform: translateY(24px); transition: opacity .5s, transform .6s var(--ease), color .3s; }
.menu a[aria-current="page"], .menu a:hover { color: var(--orange); }
body.menu-open .menu a { opacity: 1; transform: none; }
body.menu-open .menu a:nth-child(2) { transition-delay: .06s; } body.menu-open .menu a:nth-child(3) { transition-delay: .12s; } body.menu-open .menu a:nth-child(4) { transition-delay: .18s; }
.menu .btn { margin-top: 32px; justify-self: start; }

/* ---------- transizione fra le pagine: tenda arancio, poi blu notte con bussola e nome ---------- */
.curtain { position: fixed; inset: 0; z-index: 100; pointer-events: none; }
.curtain:not(.in):not(.out) { visibility: hidden; }
.curtain .c1, .curtain .c2 { position: absolute; inset: 0; transform: translateY(100%); }
.curtain .c1 { background: var(--orange); }
.curtain .c2 { background: var(--night); display: grid; place-items: center; }
.curtain .c2 div { display: grid; justify-items: center; gap: 22px; }
.curtain svg { width: 74px; height: 74px; }
.curtain .spin { transform-origin: 20px 20px; }
.curtain b { font: 600 clamp(40px, 8vw, 96px)/1 var(--serif); color: var(--on-dark); overflow: hidden; }
.curtain b span { display: block; }
/* uscita dalla pagina */
.curtain.out { pointer-events: all; }
.curtain.out .c1 { animation: tendaSu .6s var(--snap) forwards; }
.curtain.out .c2 { animation: tendaSu .6s var(--snap) .12s forwards; }
.curtain.out b span { animation: parolaSu .7s var(--ease) .35s both; }
.curtain.out .spin { animation: gira 1.2s var(--ease) .2s both; }
/* arrivo sulla pagina nuova */
.curtain.in .c1 { transform: none; animation: tendaVia .7s var(--snap) .25s forwards; }
.curtain.in .c2 { transform: none; animation: tendaVia .7s var(--snap) .1s forwards; }
.curtain.in b span { animation: parolaVia .5s var(--ease) forwards; }
@keyframes tendaSu { from { transform: translateY(100%); } to { transform: none; } }
@keyframes tendaVia { from { transform: none; } to { transform: translateY(-100%); } }
@keyframes parolaSu { from { transform: translateY(110%); } }
@keyframes parolaVia { to { transform: translateY(-110%); } }
@keyframes gira { from { transform: rotate(-200deg); } to { transform: rotate(0); } }

/* ---------- apertura delle pagine ---------- */
.hero { min-height: 100svh; display: grid; align-items: center; padding: 120px 0 72px; overflow: hidden; background:
  radial-gradient(1200px 600px at 85% 20%, var(--night-3), transparent 60%), var(--night); }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(28px, 4vw, 56px); align-items: center; }
@media (max-width: 960px) { .hero .wrap { grid-template-columns: 1fr; } }
.hero h1 { margin: 24px 0 26px; }
.hero .ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.page-hero { padding: 170px 0 80px; background: radial-gradient(900px 500px at 80% 0%, var(--night-3), transparent 60%), var(--night); }
.page-hero h1 { font-size: clamp(44px, 7.4vw, 104px); margin: 22px 0 22px; }
/* titolo che sale parola per parola */
.split .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.split .w > span { display: inline-block; transform: translateY(105%); transition: transform .9s var(--ease); transition-delay: calc(var(--i) * 70ms + var(--d0, 150ms)); }
.split.on .w > span { transform: none; }

/* griglia tecnica dietro i disegni */
.plate { position: relative; border-radius: 26px; border: 1px solid var(--line-dark); padding: 20px; background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0)); }
.plate::before { content: ""; position: absolute; inset: 20px; border-radius: 14px; background-image: linear-gradient(rgb(var(--fg-rgb) / .06) 1px, transparent 1px), linear-gradient(90deg, rgb(var(--fg-rgb) / .06) 1px, transparent 1px); background-size: 24px 24px; pointer-events: none; }
.plate svg { position: relative; width: 100%; height: auto; }
.plate .cartouche { position: absolute; left: 32px; top: 30px; display: grid; grid-template-columns: auto auto; gap: 2px 14px; padding: 10px 14px; border: 1px solid var(--line-dark); background: var(--night-2); font: 500 11px/1.5 var(--sans); color: var(--on-dark-3); letter-spacing: .05em; }
.plate .cartouche b { color: var(--orange); font-weight: 700; }
@media (max-width: 960px) { .plate .cartouche { display: none; } }

/* colori dei disegni: su fondo scuro linee chiare e arancio, su fondo chiaro blu notte */
.draw [stroke="#0F2233"] { stroke: var(--on-dark); }
.draw [stroke="#A67A2C"] { stroke: var(--orange); }
.draw [stroke="#1F5E73"] { stroke: var(--teal); }
.draw [stroke="#6E7883"] { stroke: var(--on-dark-3); }
.draw [fill="#44525F"] { fill: var(--on-dark-2); }
.draw [fill="#1F5E73"] { fill: var(--teal); }
.draw [fill="#A67A2C"] { fill: var(--orange); }
.draw [fill="#0F2233"] { fill: var(--orange); }
.draw [fill="#E4EEF1"] { fill: var(--night-3); }
.light .draw [stroke="#0F2233"] { stroke: var(--ink); }
.light .draw [stroke="#A67A2C"] { stroke: var(--orange-ink); }
.light .draw [stroke="#1F5E73"] { stroke: var(--teal-ink); }
.light .draw [stroke="#6E7883"] { stroke: var(--ink-3); }
.draw text { fill: var(--on-dark-2); }
.light .draw text { fill: var(--ink-2); }
.draw path, .draw line, .draw circle, .draw rect, .draw ellipse { vector-effect: non-scaling-stroke; }
.js .draw .ln { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .draw.on .ln { animation: tratto 1.8s var(--ease) forwards; animation-delay: calc(var(--d, 0) * 90ms); }
.js .draw .fade { opacity: 0; transition: opacity .8s var(--ease) 1.1s; }
.js .draw.on .fade { opacity: 1; }
@keyframes tratto { to { stroke-dashoffset: 0; } }
.sway { transform-box: view-box; animation: dondola 6s ease-in-out infinite; }
@keyframes dondola { 50% { transform: rotate(.5deg); } }
.wave { animation: onda 5s linear infinite; }
@keyframes onda { to { transform: translateX(-80px); } }

/* ---------- fascia che scorre ---------- */
.marquee { background: var(--orange); color: var(--night); overflow: hidden; padding: 22px 0; transform: rotate(-1.6deg) scale(1.03); margin: -20px 0; position: relative; z-index: 2; box-shadow: 0 20px 40px -20px rgba(0,0,0,.6); }
.marquee .track { display: flex; gap: 48px; width: max-content; animation: scorri 38s linear infinite; font: 600 clamp(24px, 3.2vw, 40px)/1 var(--serif); white-space: nowrap; }
.marquee .track span { display: inline-flex; align-items: center; gap: 48px; }
.marquee .track span::after { content: ""; width: 14px; height: 14px; background: var(--night); transform: rotate(45deg); }
@keyframes scorri { to { transform: translateX(-50%); } }
.marquee:hover .track { animation-play-state: paused; }

/* ---------- servizi ---------- */
.services { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 980px) { .services { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .services { grid-template-columns: 1fr; } }
.svc { position: relative; display: grid; gap: 14px; align-content: start; padding: 24px; border-radius: 22px; background: var(--paper); border: 1px solid var(--line); text-decoration: none; color: var(--ink); overflow: hidden; isolation: isolate; transition: transform .5s var(--ease), box-shadow .5s var(--ease), color .4s; }
.svc::before { content: ""; position: absolute; inset: 0; background: var(--night); transform: translateY(101%); transition: transform .6s var(--snap); z-index: -1; }
.svc:hover { transform: translateY(-6px); box-shadow: 0 30px 50px -30px rgba(0, 0, 0, .45); color: var(--on-dark); }
.svc:hover::before { transform: none; }
.svc:hover p, .svc:hover li { color: var(--on-dark-2); }
.svc .txt { display: grid; gap: 12px; align-content: start; }
.svc.wide { grid-column: span 2; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 26px; align-items: center; align-content: center; }
.svc.wide h3 { font-size: 30px; }
@media (max-width: 640px) { .svc.wide { grid-column: auto; grid-template-columns: 1fr; } .svc.wide h3 { font-size: 23px; } }
.spray circle { transform-box: fill-box; transform-origin: center; opacity: .8; }
.svc:hover .spray circle { animation: spruzzo 1s linear infinite; }
.svc:hover .spray circle:nth-child(2) { animation-delay: .2s; } .svc:hover .spray circle:nth-child(3) { animation-delay: .4s; }
.svc:hover .spray circle:nth-child(4) { animation-delay: .6s; } .svc:hover .spray circle:nth-child(5) { animation-delay: .8s; }
@keyframes spruzzo { from { transform: translate(-20px, 0); opacity: 0; } 30% { opacity: 1; } to { transform: translate(14px, 0); opacity: 0; } }
.svc .ill { border-radius: 14px; background: var(--ivory); border: 1px solid var(--line); padding: 10px; transition: background .5s, border-color .5s; }
.svc:hover .ill { background: var(--night-2); border-color: var(--line-dark); }
.svc .ill [stroke="#0F2233"] { stroke: var(--ink); transition: stroke .5s; }
.svc:hover .ill [stroke="#0F2233"] { stroke: var(--on-dark); }
.svc .ill [stroke="#A67A2C"] { stroke: var(--orange-ink); } .svc:hover .ill [stroke="#A67A2C"] { stroke: var(--orange); }
.svc .ill [stroke="#1F5E73"] { stroke: var(--teal-ink); } .svc:hover .ill [stroke="#1F5E73"] { stroke: var(--teal); }
.svc .ill [stroke="#6E7883"] { stroke: var(--ink-3); }
.svc .num { font: 700 13px/1 var(--sans); color: var(--orange-ink); letter-spacing: .12em; transition: letter-spacing .4s var(--ease), color .4s; }
.svc:hover .num { color: var(--orange); letter-spacing: .26em; }
.svc p { color: var(--ink-2); font-size: 15.5px; transition: color .4s; }
.svc ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 14.5px; color: var(--ink-2); }
.svc li { display: flex; gap: 10px; } .svc li::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: 9px; border-radius: 50%; background: var(--orange); }
.svc .go { position: absolute; right: 22px; top: 22px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--orange); color: var(--on-acc); transform: scale(0) rotate(-45deg); transition: transform .5s cubic-bezier(.3, 1.5, .5, 1); }
.svc:hover .go { transform: scale(1) rotate(0); }
.svc .go svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 2.2; fill: none; }
.spin, .gauge, .roll, .orbit, .slide-x, .bob { transform-box: view-box; }
.svc:hover .spin { animation: gira360 2.4s linear infinite; } @keyframes gira360 { to { transform: rotate(360deg); } }
.svc:hover .gauge { animation: ago 1.6s ease-in-out infinite; } @keyframes ago { 50% { transform: rotate(-70deg); } }
.svc:hover .roll { animation: rullo 1.6s ease-in-out infinite; } @keyframes rullo { 50% { transform: translateX(-26px); } }
.svc:hover .orbit { animation: lucida 1.2s linear infinite; } @keyframes lucida { 25% { transform: translate(3px, 2px); } 50% { transform: translate(0, 4px); } 75% { transform: translate(-3px, 2px); } }
.svc:hover .slide-x { animation: scorre 1.8s ease-in-out infinite; } @keyframes scorre { 50% { transform: translateX(-120px); } }
.svc:hover .bob { animation: su 1.4s ease-in-out infinite; } @keyframes su { 50% { transform: translateY(-10px); } }

/* ---------- numeri ---------- */
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line-dark); margin-top: 48px; }
@media (max-width: 760px) { .stats { grid-template-columns: 1fr; } }
.stats div { padding: 28px 24px 0 0; }
.stats b { display: block; font: 600 clamp(34px, 4vw, 52px)/1 var(--serif); color: var(--orange); }
.stats span { display: block; margin-top: 10px; color: var(--on-dark-2); font-size: 15.5px; }

/* ---------- metodo ---------- */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; counter-reset: s; }
@media (max-width: 960px) { .steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }
.step { padding: 26px; border-radius: 22px; border: 1px solid var(--line-dark); background: var(--night-2); display: grid; gap: 12px; align-content: start; transition: transform .5s var(--ease), border-color .5s; }
.step:hover { transform: translateY(-6px); border-color: var(--orange); }
.step span { font: italic 400 52px/1 var(--serif); color: var(--orange); }
.step p { color: var(--on-dark-2); font-size: 15.5px; }

/* ---------- dove ---------- */
.where .wrap { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
@media (max-width: 900px) { .where .wrap { grid-template-columns: 1fr; } }
.where ul { margin: 28px 0 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.where li { display: flex; gap: 14px; align-items: baseline; font-size: 16.5px; color: var(--on-dark-2); }
.where li b { color: var(--on-dark); font-weight: 700; min-width: 132px; }
.map text { font: 600 12px var(--sans); }
.map .home text { font: 700 14px var(--sans); fill: var(--on-dark); }
.ping { transform-box: fill-box; transform-origin: center; animation: ping 3.5s var(--ease) infinite 1.5s; }
@keyframes ping { 0% { transform: scale(1); opacity: .9; } 70%, 100% { transform: scale(3.4); opacity: 0; } }

/* ---------- software ---------- */
.apps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 800px) { .apps { grid-template-columns: 1fr; } }
.app { position: relative; display: grid; grid-template-columns: 68px minmax(0, 1fr); gap: 20px; padding: 28px; border-radius: 24px; background: var(--card); border: 1px solid var(--card-line); color: var(--on-dark); overflow: hidden; transition: transform .5s var(--ease), border-color .5s; }
.app:hover { transform: translateY(-6px); border-color: color-mix(in srgb, var(--c) 60%, transparent); }
.app::after { content: ""; position: absolute; left: var(--mx, calc(100% - 40px)); top: var(--my, 40px); width: 260px; height: 260px; border-radius: 50%; transform: translate(-50%, -50%); background: radial-gradient(circle, color-mix(in srgb, var(--c) 34%, transparent), transparent 70%); pointer-events: none; transition: left .5s var(--ease), top .5s var(--ease); }
.app .mark { width: 68px; height: 68px; border-radius: 18px; display: grid; place-items: center; background: var(--card-2); border: 1px solid var(--card-line-2); transition: transform .6s cubic-bezier(.3, 1.5, .5, 1); }
.app:hover .mark { transform: rotate(-8deg) scale(1.06); }
.app .mark svg { width: 40px; height: 40px; }
.app h3 { font-family: var(--sans); font-size: 22px; font-weight: 700; letter-spacing: 0; }
.app h3 span { color: var(--c); }
.app .for { margin-top: 5px; font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark-3); }
.app p { margin-top: 12px; color: var(--on-dark-2); font-size: 15.5px; }
.app-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 18px; position: relative; z-index: 1; }
.app-acts a { font-weight: 700; font-size: 14.5px; color: var(--c); text-decoration: none; }
.app-acts a:hover { text-decoration: underline; }
.play { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 16px 0 12px; border-radius: 99px; border: 1px solid color-mix(in srgb, var(--c) 55%, transparent); background: color-mix(in srgb, var(--c) 14%, transparent); color: var(--on-dark); font: 700 14px/1 var(--sans); cursor: pointer; transition: background .3s, transform .3s var(--ease); }
button.play:hover { background: color-mix(in srgb, var(--c) 28%, transparent); transform: translateY(-1px); }
.play svg { width: 16px; height: 16px; fill: var(--c); }
.play.soon { cursor: default; border-style: dashed; background: none; color: var(--on-dark-3); } .play.soon svg { fill: var(--on-dark-3); }
.teaser { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 860px) { .teaser { grid-template-columns: 1fr 1fr; } }
.teaser a { display: grid; gap: 12px; padding: 22px; border-radius: 20px; background: var(--card); border: 1px solid var(--card-line); text-decoration: none; transition: transform .5s var(--ease), border-color .5s; }
.teaser a:hover { transform: translateY(-6px) rotate(-1deg); border-color: var(--c); }
.teaser svg { width: 40px; height: 40px; }
.teaser b { font: 700 18px/1.2 var(--sans); } .teaser b span { color: var(--c); }
.teaser small { color: var(--on-dark-3); font-size: 13.5px; }

.vbox { width: min(1100px, 100vw - 32px); padding: 0; border: 0; border-radius: 18px; background: #0B0F13; color: #EDEFF1; box-shadow: 0 40px 80px -20px rgba(0,0,0,.6); }
.vbox[open] { animation: vIn .5s var(--ease); }
@keyframes vIn { from { opacity: 0; transform: scale(.94) translateY(12px); } }
.vbox::backdrop { background: rgba(4, 10, 16, .82); backdrop-filter: blur(6px); }
.vbox-h { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px 10px 18px; }
.vbox-h b { font: 700 15px var(--sans); }
.vclose { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--card-line-2); background: #151C22; color: #EDEFF1; font-size: 16px; cursor: pointer; }
.vbox video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #000; }

/* ---------- invito finale ---------- */
.cta-band { background: var(--orange); color: var(--on-acc); padding: clamp(64px, 9vw, 120px) 0; overflow: hidden; }
.cta-band .wrap { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 28px; }
.cta-band h2 { max-width: 760px; } .cta-band em { color: var(--on-acc); }
.cta-band .btn { background: #1D1E20; color: #EDEAE4; box-shadow: none; }
.cta-band .btn::before { background: #F3F0EA; } .cta-band .btn:hover { color: #1D1E20; }

/* ---------- contatti ---------- */
.contact .wrap { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
@media (max-width: 900px) { .contact .wrap { grid-template-columns: 1fr; } }
.cards { display: grid; gap: 12px; }
.cards a, .cards div { display: flex; gap: 14px; align-items: center; padding: 18px 20px; border-radius: 16px; border: 1px solid var(--line); background: var(--paper); text-decoration: none; transition: transform .4s var(--ease), border-color .4s; }
.cards a:hover { transform: translateX(6px); border-color: var(--orange); }
.cards svg { width: 22px; height: 22px; stroke: var(--orange-ink); stroke-width: 1.8; fill: none; flex: none; }
.cards small { display: block; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
form.req { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: clamp(22px, 3vw, 34px); border-radius: 26px; background: var(--paper); border: 1px solid var(--line); }
@media (max-width: 620px) { form.req { grid-template-columns: 1fr; } }
form.req label { display: grid; gap: 6px; font-size: 14px; font-weight: 600; color: var(--ink-2); }
form.req label > span { transition: color .25s; }
form.req label:focus-within > span { color: var(--orange-ink); }
form.req .full { grid-column: 1 / -1; }
form.req input, form.req select, form.req textarea { font: inherit; font-size: 16px; color: var(--ink); background: var(--ivory); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; min-height: 50px; transition: border-color .3s, box-shadow .3s; }
form.req textarea { min-height: 130px; resize: vertical; }
form.req input:focus, form.req select:focus, form.req textarea:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 4px rgb(var(--acc-rgb) / .18); }
form.req .consent { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; font-weight: 500; }
form.req .consent input { min-height: 0; width: 20px; height: 20px; margin: 2px 0 0; padding: 0; accent-color: var(--orange-ink); flex: none; box-shadow: none; }
form.req .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.msg { grid-column: 1 / -1; padding: 12px 14px; border-radius: 12px; font-size: 15px; animation: vIn .5s var(--ease); }
.msg.ok { background: #E6F0EA; color: #1C5B3A; } .msg.err { background: #FBE6DA; color: #8A3414; }

/* ---------- piede ---------- */
footer { background: var(--footer); color: var(--on-dark-2); padding: 64px 0 36px; font-size: 14.5px; }
footer .wrap { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 28px; }
@media (max-width: 760px) { footer .wrap { grid-template-columns: 1fr; } }
footer .big { grid-column: 1 / -1; font: 600 clamp(48px, 11vw, 150px)/.9 var(--serif); color: var(--night-3); letter-spacing: -.03em; margin-bottom: 20px; user-select: none; }
:root[data-theme="light"] footer .big { color: var(--night-4); }
footer b { color: var(--on-dark); font: 600 18px var(--serif); }
footer a { color: var(--on-dark); text-decoration: none; } footer a:hover { color: var(--orange); }
footer .legal { grid-column: 1 / -1; padding-top: 22px; border-top: 1px solid var(--line-dark); font-size: 13px; color: var(--on-dark-3); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px; }
.made-in { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--on-dark-2); letter-spacing: .02em; cursor: default; transition: color .3s var(--ease); }
.made-in:hover { color: var(--on-dark); }
.made-in:hover .heart-minimal svg { animation-duration: 0.9s; }
.heart-minimal { display: inline-flex; align-items: center; justify-content: center; vertical-align: -2px; color: var(--orange); margin: 0 2px; }
.heart-minimal svg { width: 15px; height: 15px; display: block; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transform-origin: center; animation: heartPulse 1.8s var(--ease) infinite; }
@keyframes heartPulse {
  0%, 100% { transform: scale(1); }
  14% { transform: scale(1.22); }
  28% { transform: scale(1.02); }
  42% { transform: scale(1.14); }
  58% { transform: scale(1); }
}

/* comparsa morbida, a cascata */
.js .rv { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: var(--rd, 0s); }
.js .rv.on { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .rv, .js .draw .ln, .js .draw .fade, .split .w > span { opacity: 1 !important; transform: none !important; animation: none !important; stroke-dashoffset: 0 !important; transition: none !important; }
  .marquee .track, .needle, .sway, .wave, .ping, .svc:hover *, .heart-minimal svg { animation: none !important; }
  .curtain { display: none; }
}

/* ---------- marchi APEX: micro animazioni al passaggio del mouse (sul telefono quando compaiono) ---------- */
.mk { overflow: visible; }
.mk * { transform-box: fill-box; }
.mk .mk-ln { stroke-dasharray: 1; }
.mk .mk-pk { transform-origin: center; }
.mk .mk-ring { transform-origin: center; }
.mk .mk-pl { transform-origin: bottom; }
.mk .mk-n { transform-origin: center; }
@keyframes mkDraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes mkHop { 0%, 100% { transform: none; } 40% { transform: translateY(-5px) scale(1.15); } 70% { transform: translateY(1px); } }
@keyframes mkSpin { to { transform: rotate(90deg); } }
@keyframes mkRise { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes mkFlow { to { stroke-dashoffset: -28; } }
@keyframes mkPulse { 0%, 100% { transform: none; } 50% { transform: scale(1.45); } }
.hov:hover .mk .mk-ln { animation: mkDraw .9s var(--ease) both; }
.hov:hover .mk .mk-pk { animation: mkHop .7s var(--ease) .5s both; }
.hov:hover .mk .mk-ring { animation: mkSpin .9s var(--ease) both; }
.hov:hover .mk .mk-pl { animation: mkRise .5s var(--ease) calc(.25s + var(--i) * .12s) both; }
.hov:hover .mk .mk-rt { animation: mkFlow .8s linear infinite; }
.hov:hover .mk .mk-n { animation: mkPulse .6s var(--ease) calc(var(--i) * .15s) 2; }
@media (hover: none) {
  .hov.on .mk .mk-ln { animation: mkDraw 1.2s var(--ease) .3s both; }
  .hov.on .mk .mk-pk { animation: mkHop .7s var(--ease) 1.2s both; }
  .hov.on .mk .mk-ring { animation: mkSpin 1.2s var(--ease) .3s both; }
  .hov.on .mk .mk-pl { animation: mkRise .5s var(--ease) calc(.8s + var(--i) * .12s) both; }
  .hov.on .mk .mk-rt { animation: mkFlow 1.4s linear infinite; }
  .hov.on .mk .mk-n { animation: mkPulse .6s var(--ease) calc(.4s + var(--i) * .15s) 2; }
}
.teaser svg { transition: transform .6s cubic-bezier(.3, 1.5, .5, 1); }
.teaser a:hover svg { transform: rotate(-8deg) scale(1.1); }
.app h3 a { color: inherit; text-decoration: none; }
.app h3 a:hover span { text-decoration: underline; text-underline-offset: 4px; }
.app[data-href] { cursor: pointer; }
.app-acts a.more { color: var(--on-dark); }
.teaser.t3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 760px) { .teaser.t3 { grid-template-columns: 1fr; } }

/* ---------- pagina prodotto ---------- */
.prod .p-hero em { color: var(--c); }
.prod .eyebrow { color: var(--c); }
.prod .light .eyebrow { color: color-mix(in srgb, var(--c) 55%, var(--ink)); }
.p-hero { padding: 150px 0 70px; background: radial-gradient(800px 520px at 82% 20%, color-mix(in srgb, var(--c) 20%, transparent), transparent 62%), var(--night); overflow: hidden; }
.p-hero > .wrap:first-child { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(28px, 5vw, 70px); align-items: center; }
.p-text { display: grid; gap: 22px; justify-items: start; }
.p-hero h1 { font-size: clamp(42px, 6vw, 88px); }
.back { font: 700 14px/1 var(--sans); color: var(--on-dark-3); text-decoration: none; transition: color .3s, transform .3s var(--ease); }
.back:hover { color: var(--on-dark); transform: translateX(-4px); }
.p-acts { display: flex; flex-wrap: wrap; gap: 12px; }
.prod .p-acts .btn { background: var(--c); }
.pmark { display: grid; justify-items: center; gap: 18px; perspective: 900px; }
.pmark .tile { position: relative; width: min(100%, 320px); aspect-ratio: 1; border-radius: 30%; display: grid; place-items: center; background: radial-gradient(circle at 30% 25%, var(--card-2), var(--card) 70%); border: 1px solid color-mix(in srgb, var(--c) 35%, var(--card-line-2)); box-shadow: 0 40px 90px -30px color-mix(in srgb, var(--c) 55%, transparent), inset 0 1px 0 rgba(255,255,255,.06); transform: rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg)); transition: transform .5s var(--ease); animation: galleggia 6s ease-in-out infinite; }
.pmark .tile::after { content: ""; position: absolute; inset: -30%; background: radial-gradient(circle, color-mix(in srgb, var(--c) 30%, transparent), transparent 60%); z-index: -1; filter: blur(20px); }
.pmark .tile svg { width: 58%; height: 58%; transition: transform .6s cubic-bezier(.3, 1.5, .5, 1); }
.pmark:hover .tile svg { transform: scale(1.08) rotate(-6deg); }
.pmark b { font: 700 22px/1 var(--sans); } .pmark b span { color: var(--c); }
@keyframes galleggia { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
.chips { list-style: none; margin: 44px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.chips li { padding: 10px 16px; border-radius: 99px; border: 1px solid var(--line-dark); background: rgba(255,255,255,.03); font: 700 14px/1.2 var(--sans); color: var(--on-dark-2); transition: border-color .3s, color .3s, transform .3s var(--ease); }
.chips li:hover { border-color: var(--c); color: var(--on-dark); transform: translateY(-2px); }
.p-problem .big { font: 500 clamp(24px, 2.8vw, 38px)/1.3 var(--serif); letter-spacing: -.01em; color: var(--ink); max-width: 900px; }
.feats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.feat { position: relative; padding: 30px; border-radius: 24px; background: var(--night-2); border: 1px solid var(--line-dark); display: grid; gap: 12px; align-content: start; overflow: hidden; transition: transform .5s var(--ease), border-color .5s; }
.feat::before { content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 0; background: var(--c); transition: width .7s var(--ease); }
.feat:hover { transform: translateY(-6px); border-color: color-mix(in srgb, var(--c) 50%, transparent); }
.feat:hover::before, .feat.on::before { width: 100%; }
.feat .fi { font: italic 400 20px/1 var(--serif); color: var(--c); }
.feat p { color: var(--on-dark-2); font-size: 16px; }
.p-video { padding-top: 0; }
.vframe { border-radius: 22px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--c) 35%, var(--card-line)); box-shadow: 0 40px 90px -40px color-mix(in srgb, var(--c) 50%, transparent); background: #000; }
.vframe video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #000; }
.steps.s3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.light .step { background: var(--paper); border-color: var(--line); }
.light .step p { color: var(--ink-2); }
.prod .light .step span { color: color-mix(in srgb, var(--c) 60%, var(--ink)); }
.prod .light .step:hover { border-color: var(--c); }
.notes { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 18px; }
.note { padding: 28px; border-radius: 22px; background: var(--sand); display: grid; gap: 10px; }
.note p { color: var(--ink-2); }
@media (max-width: 900px) {
  .p-hero { padding-top: 120px; }
  .p-hero > .wrap:first-child { grid-template-columns: 1fr; }
  .pmark { order: -1; justify-items: start; }
  .pmark .tile { width: 150px; border-radius: 34px; }
  .pmark b { display: none; }
  .feats, .steps.s3, .notes { grid-template-columns: 1fr; }
  .chips { margin-top: 30px; }
}
@media (prefers-reduced-motion: reduce) { .pmark .tile { animation: none; } .mk * { animation: none !important; } }
/* marchi che sono già un'icona d'app (tessera propria): riempiono il riquadro */
.app .mark:has(.mk-app) { background: none; border: 0; padding: 0; }
.app .mark .mk-app { width: 68px; height: 68px; }
.pmark .tile:has(.mk-app) { background: none; border: 0; box-shadow: 0 40px 90px -30px color-mix(in srgb, var(--c) 55%, transparent); }
.pmark .tile .mk-app { width: 100%; height: 100%; }
.teaser .mk-app { width: 44px; height: 44px; }
.hov:hover .mk-app .mk-ln:nth-of-type(2) { animation-delay: .12s; } .hov:hover .mk-app .mk-ln:nth-of-type(3) { animation-delay: .3s; }

/* ---------- marchio Atlas: le linee si compongono, poi un'onda arancione le attraversa ---------- */
.atlas-mark { overflow: visible; }
.atlas-mark .an { transform-origin: 32px 32px; transform-box: view-box; }
.atlas-mark.entra .an { animation: lineaEntra 1s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--p, 0) * .14s + var(--k) * .028s); }
@keyframes lineaEntra { from { opacity: 0; transform: rotate(-28deg) scale(.82); } }
.atlas-mark.onda .an { animation: lineaOnda 1.1s cubic-bezier(.45, 0, .2, 1) both; animation-delay: calc(var(--k) * .026s + var(--p, 0) * .09s); }
@keyframes lineaOnda { 0% { transform: none; } 38% { transform: rotate(10deg) scale(1.04); stroke: #C29A63; } 100% { transform: none; } }
.curtain .atlas-mark { color: var(--on-dark); }
.curtain .atlas-mark .an { animation: lineaOnda 1.2s cubic-bezier(.45, 0, .2, 1) infinite; animation-delay: calc(var(--k) * .026s + var(--p, 0) * .09s); }
/* esploso: le pale si allontanano dal centro e tornano, con un alone arancio */
.atlas-mark .pala { transform-box: view-box; transform-origin: 32px 32px; }
.atlas-mark.onda .pala { animation: esploso 1.5s cubic-bezier(.3, 1.4, .4, 1) both; animation-delay: calc(var(--p) * .05s); }
@keyframes esploso { 0%, 100% { transform: none; } 35% { transform: translate(var(--dx, 0px), var(--dy, 0px)); } }
.atlas-mark.onda { animation: alone 1.6s ease-out both; }
@keyframes alone { 0%, 100% { filter: drop-shadow(0 0 0 rgb(var(--acc-rgb) / 0)); } 40% { filter: drop-shadow(0 0 6px rgb(var(--acc-rgb) / .75)) drop-shadow(0 0 18px rgb(var(--acc-rgb) / .35)); } }
/* il marchio grande respira da solo ogni tanto */
.bigmark.on .atlas-mark:not(.onda):not(.entra) .an { animation: lineaRespiro 7s cubic-bezier(.45, 0, .2, 1) 1s infinite; animation-delay: calc(1s + var(--k) * .04s + var(--p) * .12s); }
@keyframes lineaRespiro { 0%, 70%, 100% { transform: none; } 82% { transform: rotate(5deg); stroke: #D8B886; } }
.bigmark:not(.on) .atlas-mark.entra .an { animation-play-state: paused; opacity: 0; }
@media (prefers-reduced-motion: reduce) { .atlas-mark .an, .atlas-mark .pala, .atlas-mark { animation: none !important; } }
/* disegni dei servizi nuovi: graffi che spariscono, gocce che rimbalzano, goccia che cade */
.svc .graffi { transition: opacity 1.2s var(--ease) .3s; } .svc:hover .graffi { opacity: 0; }
.svc .gocce path { transform-box: fill-box; transform-origin: bottom; }
.svc:hover .gocce path { animation: goccia 1.2s ease-in-out infinite; } .svc:hover .gocce path:nth-child(even) { animation-delay: .3s; }
@keyframes goccia { 50% { transform: scaleY(1.25); } }
.svc .drip { transform-box: fill-box; } .svc:hover .drip { animation: cade 1.4s ease-in infinite; }
@keyframes cade { 0% { transform: none; opacity: 1; } 80% { transform: translateY(46px); opacity: 1; } 100% { transform: translateY(50px); opacity: 0; } }

/* ---------- presentazione dell'azienda ---------- */
.about { padding: clamp(70px, 9vw, 120px) 0; background: linear-gradient(180deg, var(--night), var(--night-2)); }
.about .wrap { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 6vw, 90px); align-items: center; }
.about-txt { display: grid; gap: 22px; justify-items: start; }
.bigmark { color: var(--on-dark); display: grid; place-items: center; }
.bigmark .atlas-mark { width: min(100%, 380px); height: auto; filter: drop-shadow(0 30px 60px rgb(var(--acc-rgb) / .12)); cursor: pointer; }
.ab-hero .bigmark .atlas-mark { width: min(100%, 420px); }
.quads { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.quad { padding: 28px; border-radius: 22px; background: var(--paper); border: 1px solid var(--line); display: grid; gap: 12px; align-content: start; transition: transform .5s var(--ease), border-color .5s; }
.quad:hover { transform: translateY(-6px); border-color: var(--orange); }
.quad span { font: italic 400 22px/1 var(--serif); color: var(--orange-ink); }
.quad p { color: var(--ink-2); font-size: 16px; }
.ab-chips li { border-color: var(--line); background: var(--paper); color: var(--ink); }
.ab-chips li:hover { border-color: var(--orange); color: var(--ink); }
@media (max-width: 1000px) { .quads { grid-template-columns: 1fr 1fr; } }
@media (max-width: 900px) {
  .about .wrap { grid-template-columns: 1fr; }
  .about .bigmark .atlas-mark { width: 180px; }
  .ab-hero .bigmark { order: -1; justify-items: start; } .ab-hero .bigmark .atlas-mark { width: 150px; }
}
@media (max-width: 560px) { .quads { grid-template-columns: 1fr; } }
.ab-hero { --c: var(--orange); }
/* ---------- informativa privacy ---------- */
.legal { padding-top: 150px; }
.legal .wrap { max-width: 780px; }
.legal h1 { font-size: clamp(38px, 5vw, 60px); margin-bottom: 20px; }
.legal h2 { font: 700 20px/1.3 var(--sans); letter-spacing: 0; margin: 36px 0 8px; }
.legal p, .legal li { color: var(--ink-2); margin-bottom: 10px; }
.legal a { color: var(--orange-ink); }
.legal .note { border: 1px solid var(--orange-ink); color: var(--orange-ink); border-radius: 14px; padding: 12px 16px; font-size: 14.5px; }
.legal mark { background: none; color: var(--orange-ink); font-weight: 700; }

/* ---------- 3D e animazioni dinamiche ---------- */
/* le sezioni salgono in prospettiva */
.js .rv { transform: perspective(1000px) translateY(38px) rotateX(12deg); transform-origin: 50% 0; }
.js .rv.on { transform: none; }
/* schede che si inclinano verso il mouse, con un riflesso di luce */
.tilt { transform: perspective(1000px) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)) translateY(-6px) !important; transition: transform .25s ease-out, border-color .5s, box-shadow .5s, background .5s !important; transition-delay: 0s !important; box-shadow: 0 34px 60px -34px rgba(4, 12, 20, .55); }
.tilt:not(.app)::before { content: ""; }
.svc.tilt, .feat.tilt, .quad.tilt, .step.tilt, .note.tilt, .teaser a.tilt { background-image: radial-gradient(420px circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, .09), transparent 45%); }
.light .quad.tilt, .light .step.tilt, .note.tilt { background-image: radial-gradient(420px circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, .8), transparent 50%); }
/* disegno dell'apertura: si gira verso il mouse, il cartiglio sta davanti */
.hero .plate { transform: perspective(1200px) translateY(var(--py, 0px)) rotateX(calc(var(--my, 0) * -16deg)) rotateY(calc(var(--mx, 0) * 20deg)); transform-style: preserve-3d; transition: transform .6s var(--ease), opacity .9s var(--ease); box-shadow: 0 60px 90px -50px rgba(0, 0, 0, .7); }
.js .hero .plate.rv:not(.on) { transform: perspective(1200px) translateY(40px) rotateX(18deg); }
.hero .plate .cartouche { transform: translateZ(50px); box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .6); }
.hero .plate svg { transform: translateZ(18px); }
/* marchio grande: segue il mouse in profondità e gira piano da solo */
.bigmark { perspective: 900px; }
.bigmark .atlas-mark { transform: translateY(var(--py, 0px)) rotateX(calc(var(--my, 0) * -28deg)) rotateY(calc(var(--mx, 0) * 32deg)); transition: transform .7s var(--ease); }
.pmark { translate: 0 var(--py, 0px); }
/* luci morbide che si muovono dietro l'apertura e la presentazione */
.hero, .about { isolation: isolate; }
.hero::after, .about::after { content: ""; position: absolute; z-index: -1; width: 46vmax; height: 46vmax; border-radius: 50%; filter: blur(60px); opacity: .35; pointer-events: none; animation: bolla 22s ease-in-out infinite alternate; }
.hero::after { right: -12vmax; top: -10vmax; background: radial-gradient(circle, rgb(var(--acc-rgb) / .55), transparent 65%); }
.about::after { left: -16vmax; bottom: -20vmax; background: radial-gradient(circle, rgb(var(--acc2-rgb) / .35), transparent 65%); animation-duration: 28s; }
@keyframes bolla { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-8vmax, 6vmax) scale(1.15); } 100% { transform: translate(4vmax, 10vmax) scale(.9); } }
.about { position: relative; overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .js .rv { transform: none; } .hero::after, .about::after { animation: none; }
  .hero .plate, .bigmark .atlas-mark { transform: none; }
}

/* ---------- selettore notte / giorno (stessa transizione di Signal: tramonto e alba) ---------- */
.tema { position: relative; display: flex; border: 1px solid var(--line-dark); border-radius: 99px; padding: 3px; view-transition-name: tema; }
.tema .tthumb { position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); border-radius: 99px; transition: transform .6s var(--spring), background .6s var(--ease), box-shadow .6s var(--ease);
  background: linear-gradient(180deg, #34363B, #232428); box-shadow: 0 0 0 1px #45484E, 0 2px 0 #0B0B0C, 0 0 14px -4px rgb(var(--acc-rgb) / .8); }
:root[data-theme="light"] .tema .tthumb { transform: translateX(100%); background: linear-gradient(180deg, #FFFBF3, #F2E7D4); box-shadow: 0 0 0 1px #E3D3B4, 0 2px 0 #D4C19C, 0 0 14px -4px #E0B25C; }
.tema button { position: relative; z-index: 1; border: 0; background: none; width: 36px; min-height: 32px; border-radius: 99px; cursor: pointer; display: grid; place-items: center; color: var(--on-dark-3); transition: color .3s; }
.tema button svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .9s var(--spring); }
:root:not([data-theme="light"]) .tema [data-tema="dark"] { color: #F1E3CB; }
:root[data-theme="light"] .tema [data-tema="light"] { color: #9A6A1E; }
:root:not([data-theme="light"]) .tema [data-tema="dark"] svg { transform: rotate(-28deg) scale(1.12); }
:root[data-theme="light"] .tema [data-tema="light"] svg { transform: rotate(90deg) scale(1.12); }
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-new(root) { -webkit-mask-image: var(--vt-mask); mask-image: var(--vt-mask); -webkit-mask-size: 100% 300%; mask-size: 100% 300%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.mk { color: var(--on-dark); }
@media (max-width: 1000px) { .tema button { width: 32px; } }
@media (max-width: 420px) { .tema { padding: 2px; } .tema button { width: 30px; min-height: 30px; } }
.cta-band .lead { color: var(--on-acc); opacity: .88; }

/* ---------- illustrazioni dei servizi: tante linee sottili, come il logo ---------- */
.il { --i-ink: var(--ink); --i-mu: #9A958C; width: 100%; height: auto; overflow: visible; }
.il * { fill: none; stroke: var(--i-ink); stroke-width: .9; stroke-linecap: round; stroke-linejoin: round; transition: stroke .5s; }
.il .a { stroke: var(--orange-ink); } .il .mu { stroke: var(--i-mu); }
.il g { stroke: none; }
.svc:hover .il { --i-ink: var(--on-dark); --i-mu: var(--on-dark-3); }
.svc:hover .il .a { stroke: var(--orange); }
.svc .il .spalma, .svc .il .spray circle, .svc .il .gocce circle, .svc .il .drip { transform-box: fill-box; }
.svc:hover .il .spalma { animation: spalma 1.6s ease-in-out infinite; } @keyframes spalma { 50% { transform: translate(-30px, 6px); } }
.svc:hover .il .drip { animation: cade 1.4s ease-in infinite; }
.svc:hover .il .gocce circle { animation: goccia 1.2s ease-in-out infinite; }
.pmark .tile::after, .hero::after, .about::after, .bigmark .atlas-mark { pointer-events: none; } .p-text { position: relative; z-index: 2; }
/* pulsante grande sopra i video delle pagine prodotto */
.vframe { position: relative; }
.vplay { position: absolute; left: 50%; top: 50%; width: 88px; height: 88px; margin: -44px 0 0 -44px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center;
  background: var(--c, var(--orange)); color: #111214; box-shadow: 0 20px 50px -10px rgba(0, 0, 0, .6), 0 0 0 10px rgb(255 255 255 / .12); transition: transform .4s var(--spring), opacity .3s; }
.vplay svg { width: 34px; height: 34px; fill: currentColor; margin-left: 5px; }
.vplay:hover { transform: scale(1.08); }
.vframe.gira .vplay { opacity: 0; pointer-events: none; transform: scale(.7); }
@media (max-width: 560px) { .vplay { width: 64px; height: 64px; margin: -32px 0 0 -32px; } .vplay svg { width: 26px; height: 26px; } }
.vbox-err { margin: 0; padding: 14px 18px; color: #F1C9A0; font-size: 15px; }

/* ---------- pagine prodotto più spiegate ---------- */
/* una giornata: linea del tempo */
.giornata { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; position: relative; }
.giornata::before { content: ""; position: absolute; left: 0; right: 0; top: 15px; height: 2px; background: linear-gradient(90deg, var(--c), color-mix(in srgb, var(--c) 20%, transparent)); }
.giornata li { position: relative; padding-top: 44px; display: grid; gap: 8px; }
.giornata li::before { content: ""; position: absolute; left: 0; top: 7px; width: 18px; height: 18px; border-radius: 50%; background: var(--paper); border: 3px solid var(--c); }
.giornata b { font: 700 13px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.giornata p { font: 500 clamp(17px, 1.6vw, 20px)/1.4 var(--serif); color: var(--ink); }
/* schermata illustrata con punti numerati */
.schermo { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.sc-img { display: grid; gap: 10px; }
.sc-img small { color: var(--on-dark-3); font-size: 13px; }
.sc { width: 100%; height: auto; filter: drop-shadow(0 40px 60px rgba(0, 0, 0, .35)); }
.sc .fr { fill: var(--card); stroke: var(--card-line-2); } .sc .fr2 { stroke: var(--card-line); fill: none; }
.sc .dot { fill: var(--card-line-2); } .sc .side { fill: var(--card-2); }
.sc .ln { fill: var(--card-line-2); } .sc .ln.on { fill: var(--c); } .sc .ln.strong { fill: var(--on-dark-3); }
.sc .card { fill: var(--card-2); stroke: var(--card-line); } .sc .card.hot { stroke: var(--c); }
.sc .row { fill: var(--card); } .sc .row.sel { fill: color-mix(in srgb, var(--c) 18%, var(--card)); stroke: var(--c); }
.sc .c { fill: var(--c); } .sc .c.pill { opacity: .85; } .sc .ok { fill: #6FBF8E; } .sc .warn { fill: #E0A23C; }
.sc .line { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; } .sc .c.line { stroke: var(--c); fill: none; } .sc .mute { stroke: var(--card-line-2); }
.sc .big { fill: var(--on-dark); font: 700 28px var(--sans); }
.sc .land { fill: var(--card-line); } .sc .route { fill: none; stroke-width: 3; stroke-linecap: round; } .sc .route.c { stroke: var(--c); } .sc .route.mute { stroke: var(--on-dark-3); } .sc .route.mute2 { stroke: var(--card-line-2); }
.sc .pin { fill: var(--on-dark); }
.sc .n circle { fill: var(--c); stroke: var(--card); stroke-width: 3; } .sc .n text { fill: #111214; font: 800 13px var(--sans); text-anchor: middle; }
.sc-punti { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.sc-punti li { display: grid; grid-template-columns: 36px 1fr; gap: 14px; align-items: start; padding: 16px; border-radius: 16px; border: 1px solid var(--line-dark); background: var(--night-2); }
.sc-punti span { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--c); color: #111214; font: 800 15px/1 var(--sans); }
.sc-punti p { color: var(--on-dark-2); }
/* chi lo usa */
.ruoli { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.ruolo { padding: 26px; border-radius: 22px; background: var(--paper); border: 1px solid var(--line); display: grid; gap: 14px; align-content: start; }
.ruolo ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.ruolo li { position: relative; padding-left: 22px; color: var(--ink-2); }
.ruolo li::before { content: ""; position: absolute; left: 0; top: .6em; width: 10px; height: 2px; background: var(--c); }
/* domande frequenti */
.faq { display: grid; gap: 12px; max-width: 900px; }
.faq details { border: 1px solid var(--line-dark); border-radius: 16px; background: var(--night-2); overflow: hidden; }
.faq summary { cursor: pointer; list-style: none; padding: 20px 56px 20px 22px; font: 700 18px/1.3 var(--sans); position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 22px; top: 50%; transform: translateY(-50%); font: 400 26px/1 var(--sans); color: var(--c); transition: transform .4s var(--spring); }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details p { padding: 0 22px 20px; color: var(--on-dark-2); max-width: 760px; }
/* cinque prodotti: il gestionale in testa, largo */
.apps .app:first-child { grid-column: 1 / -1; }
.teaser { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.teaser.t3 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) { .teaser { grid-template-columns: repeat(3, minmax(0, 1fr)); } .teaser.t3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 900px) { .giornata { grid-template-columns: 1fr 1fr; row-gap: 28px; } .giornata::before { display: none; } .schermo { grid-template-columns: 1fr; } .ruoli { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .giornata, .teaser, .teaser.t3 { grid-template-columns: 1fr; } }