/* ═══ la pagina iniziale di Atlante: blu notte, vetro, turchese e il punto arancio ═══
   (i nomi delle variabili sono rimasti: --oro è l'accento turchese, --arancio la meta) */
:root { --nero: #050b17; --nero2: #0c1a33; --carta: #e6eefa; --tenue: rgba(230, 238, 250, 0.62); --linea: rgba(230, 238, 250, 0.12); --oro: #19d3c5; --oro2: #6ff3e3; --arancio: #f5a33a; --vetro: rgba(22, 44, 82, 0.55); color-scheme: dark; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--nero); color: var(--carta); font: 16px/1.6 Inter, system-ui, sans-serif; -webkit-font-smoothing: antialiased; min-height: 100vh;
  background-image: url("/icone/reticolo.svg"), radial-gradient(ellipse 55% 45% at 0% 12%, rgba(25, 211, 197, 0.2), transparent 70%), radial-gradient(ellipse 60% 55% at 100% 0%, rgba(40, 90, 170, 0.32), transparent 70%),
    radial-gradient(ellipse 50% 40% at 100% 100%, rgba(40, 70, 150, 0.25), transparent 70%);
  background-repeat: no-repeat; background-position: right -22vmax top -8vmax, 0 0, 0 0, 0 0; background-size: 92vmax 92vmax, auto, auto, auto; background-attachment: fixed; }
/* i due punti che brillano, come due mete sulla mappa */
body::before, body::after { content: ""; position: fixed; z-index: -1; width: 10px; height: 10px; border-radius: 50%; pointer-events: none; animation: brilla 3.2s ease-in-out infinite alternate; }
body::before { left: 7%; top: 28%; background: var(--oro); box-shadow: 0 0 0 6px rgba(25, 211, 197, 0.14), 0 0 28px 6px rgba(25, 211, 197, 0.45); }
body::after { right: 4%; top: 72%; background: var(--arancio); box-shadow: 0 0 0 6px rgba(245, 163, 58, 0.14), 0 0 28px 6px rgba(245, 163, 58, 0.45); animation-delay: 1.6s; }
@keyframes brilla { to { opacity: 0.55; transform: scale(0.8); } }
h1, h2, h3 { font-family: 'Space Grotesk', Inter, sans-serif; font-weight: 600; letter-spacing: -0.02em; }
.muted { color: var(--tenue); } .piccolo { font-size: 13px; }
.carica { text-align: center; padding: 40vh 0; color: var(--tenue); }
.kick { font: 500 12px Inter, sans-serif; letter-spacing: 0.22em; text-transform: uppercase; color: var(--oro); margin: 0; }
.bt { font: 500 14px Inter, sans-serif; padding: 10px 18px; border-radius: 999px; border: 1px solid var(--linea); background: transparent; color: var(--carta); cursor: pointer; transition: background 0.2s, transform 0.2s; }
.bt:hover { background: rgba(230, 238, 250, 0.08); }
.bt.vetro { backdrop-filter: blur(10px); }
.bt.oro { background: linear-gradient(135deg, #2fe6d4, #10bfb3); color: #04212a; border: 0; font-weight: 600; padding: 13px 24px; box-shadow: 0 14px 34px -12px rgba(25, 211, 197, 0.7); }
.bt.oro:hover { transform: translateY(-1px); }
.bt:disabled { opacity: 0.5; cursor: wait; }

.nav { display: flex; justify-content: space-between; align-items: center; padding: 22px max(20px, 5vw); }
.marchio { font: 700 22px 'Space Grotesk', Inter, sans-serif; letter-spacing: -0.01em; display: flex; align-items: center; gap: 12px; }
.marchio .logo { width: 40px; height: 46px; flex: none; filter: drop-shadow(0 0 10px rgba(25, 211, 197, 0.35)); }
.marchio > span { display: grid; line-height: 1.1; }
.marchio small { font: 400 12px Inter, sans-serif; letter-spacing: 0.02em; color: var(--tenue); margin-top: 3px; }
.io { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.io img, .io .av { width: 34px; height: 34px; border-radius: 50%; }
.io .av { display: grid; place-items: center; background: var(--oro); color: #04212a; font: 600 14px Inter; font-style: normal; }
.famiglia { font: 600 11px Inter; letter-spacing: 0.14em; text-transform: uppercase; color: var(--oro); border: 1px solid rgba(25, 211, 197, 0.45); padding: 6px 12px; border-radius: 999px; }

/* chi non è entrato */
.hero { min-height: 100vh; display: flex; flex-direction: column; }
.hero-c { max-width: 860px; padding: 8vh max(20px, 6vw) 30px; animation: su 1s both; }
.hero h1 { font-size: clamp(52px, 9vw, 112px); line-height: 0.95; margin: 18px 0 24px; }
.hero h1 em { font-style: italic; color: var(--oro2); }
.lead { font-size: 19px; color: var(--tenue); max-width: 36em; margin: 0; }
.entra { margin: 36px 0 12px; min-height: 44px; }
.dev { display: flex; gap: 8px; flex-wrap: wrap; }
.dev input { font: 15px Inter; padding: 11px 16px; border-radius: 999px; border: 1px solid var(--linea); background: rgba(255, 255, 255, 0.04); color: var(--carta); }
.dev button { font: 500 14px Inter; padding: 11px 18px; border-radius: 999px; border: 1px dashed var(--oro); background: none; color: var(--oro); cursor: pointer; }
.tre { margin-top: auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1px; background: var(--linea); border-top: 1px solid var(--linea); }
.tre-c { background: var(--nero); padding: 28px max(20px, 3vw) 34px; display: grid; gap: 8px; animation: su 0.9s both; }
.tre-c .ico { width: 40px; height: 40px; color: var(--oro); }
.tre-c b { font: 600 24px 'Space Grotesk', Inter, sans-serif; } .tre-c small { color: var(--tenue); font-size: 14px; }

/* chi è entrato */
.ciao { padding: 5vh max(20px, 5vw) 26px; animation: su 0.8s both; }
.ciao h1 { font-size: clamp(40px, 6vw, 72px); margin: 10px 0 0; line-height: 1; }
.strade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 0 max(20px, 5vw); }
.strada { position: relative; text-align: left; display: grid; align-content: start; gap: 10px; min-height: 260px; padding: 26px 26px 28px; border-radius: 28px; cursor: pointer; overflow: hidden;
  border: 1px solid var(--linea); color: var(--carta); font: inherit; background: linear-gradient(160deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015)); backdrop-filter: blur(14px);
  transition: transform 0.35s cubic-bezier(.2,.8,.2,1), border-color 0.3s, background 0.3s; animation: su 0.8s both; }
.strada::before { content: ""; position: absolute; inset: auto -30% -60% auto; width: 80%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(25, 211, 197, 0.28), transparent 70%); opacity: 0; transition: opacity 0.4s; }
.strada:hover { transform: translateY(-4px); border-color: rgba(25, 211, 197, 0.4); }
.strada:hover::before, .strada.on::before { opacity: 1; }
.strada.on { border-color: var(--oro); background: linear-gradient(160deg, rgba(25, 211, 197, 0.16), rgba(255, 255, 255, 0.02)); }
.strada .n { font: 500 12px Inter; letter-spacing: 0.2em; color: var(--oro); }
.strada .ico { width: 54px; height: 54px; color: var(--oro2); margin: 6px 0 8px; }
.strada b { font: 600 30px/1.05 'Space Grotesk', Inter, sans-serif; }
.strada small { color: var(--tenue); font-size: 15px; max-width: 26em; }
.strada .freccia { position: absolute; right: 26px; top: 24px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--linea); display: grid; place-items: center; transition: transform 0.3s, background 0.3s; }
.strada.on .freccia { transform: rotate(90deg); background: var(--oro); color: #04212a; border-color: var(--oro); }
.strada .conta { position: absolute; right: 76px; top: 30px; font: 600 12px Inter; background: rgba(230, 238, 250, 0.12); padding: 4px 10px; border-radius: 999px; }

.pannello-s { padding: 26px max(20px, 5vw) 120px; }
.vuoto { color: var(--tenue); text-align: center; padding: 30px 0; }
.pan { border-radius: 28px; border: 1px solid var(--linea); background: rgba(255, 255, 255, 0.035); padding: clamp(22px, 4vw, 44px); animation: su 0.6s both; }
.pan-t h2 { font-size: clamp(30px, 4vw, 44px); margin: 0 0 8px; }
.pan-t p { color: var(--tenue); max-width: 46em; margin: 0 0 24px; }
.campo { width: 100%; font: 18px/1.5 Inter; padding: 18px 20px; border-radius: 20px; border: 1px solid var(--linea); background: rgba(0, 0, 0, 0.25); color: var(--carta); resize: vertical; outline: none; }
.campo:focus { border-color: var(--oro); box-shadow: 0 0 0 4px rgba(25, 211, 197, 0.15); }
.riga { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.motori { display: flex; gap: 6px; flex-wrap: wrap; }
.motori button { font: 500 13px Inter; border: 1px solid var(--linea); background: none; color: var(--tenue); padding: 7px 14px; border-radius: 999px; cursor: pointer; }
.motori .on { border-color: var(--oro); color: var(--oro2); background: rgba(25, 211, 197, 0.1); }
.motori button:disabled { opacity: 0.35; cursor: not-allowed; }
.stato { min-height: 24px; color: var(--oro2); font-size: 14px; display: flex; align-items: center; gap: 8px; }
.pallino { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--oro); animation: pulsa 1s infinite alternate; }
.drop { display: grid; justify-items: center; gap: 6px; padding: 46px 20px; border-radius: 24px; border: 1.5px dashed rgba(25, 211, 197, 0.45); background: rgba(25, 211, 197, 0.05); cursor: pointer; text-align: center; transition: background 0.25s, transform 0.25s; }
.drop:hover, .drop.su { background: rgba(25, 211, 197, 0.12); transform: scale(1.005); }
.drop .ico { width: 56px; height: 56px; color: var(--oro2); }
.drop b { font: 600 24px 'Space Grotesk', Inter, sans-serif; } .drop small { color: var(--tenue); }
.lavoro { margin-top: 18px; display: grid; gap: 6px; }
.lavoro p { margin: 0; display: flex; gap: 10px; align-items: center; color: var(--carta); }
.lavoro p.ok { color: var(--tenue); } .lavoro p span { width: 18px; text-align: center; color: var(--oro); }
.lavoro .err { color: #f0a08a; }
.pan h3 { font-size: 24px; margin: 34px 0 14px; }
.carte { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 16px; }
.carte.grandi { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.carta { display: grid; text-decoration: none; color: var(--carta); border-radius: 22px; overflow: hidden; border: 1px solid var(--linea); background: var(--nero2); transition: transform 0.3s, border-color 0.3s; }
.carta:hover { transform: translateY(-4px); border-color: rgba(25, 211, 197, 0.45); }
.c-img { height: 170px; background: linear-gradient(135deg, #1d3a66, #0c1830) center/cover; }
.carte.grandi .c-img { height: 220px; }
.c-t { display: grid; gap: 3px; padding: 16px 18px 18px; }
.c-t .k { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--oro); }
.c-t b { font: 600 23px 'Space Grotesk', Inter, sans-serif; } .c-t span:not(.k), .c-t small { color: var(--tenue); font-size: 14px; }
.avviso { position: fixed; left: 50%; bottom: 22px; transform: translate(-50%, 20px); background: var(--carta); color: var(--nero); padding: 10px 18px; border-radius: 999px; font-size: 14px; opacity: 0; pointer-events: none; transition: 0.3s; max-width: 90vw; text-align: center; z-index: 90; }
.avviso.in { opacity: 1; transform: translate(-50%, 0); }
@keyframes su { from { opacity: 0; transform: translateY(18px); } }
@keyframes pulsa { to { opacity: 0.25; transform: scale(0.7); } }
@media (max-width: 860px) { .strade { grid-template-columns: 1fr; } .strada { min-height: 0; } }
/* telefono: il marchio sopra, i bottoni in una riga sotto */
@media (max-width: 600px) {
  .nav { flex-wrap: wrap; gap: 14px; padding-top: 18px; }
  .nav .io { width: 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .nav .io::-webkit-scrollbar { display: none; }
  .nav .io > * { flex: none; white-space: nowrap; }
  .nav .et { display: none; }
}
.app-bt { border-color: rgba(25, 211, 197, 0.55); color: var(--oro2); }
/* aperta come app: niente barre del browser, si tiene conto della tacca */
@media (display-mode: standalone) { .nav { padding-top: max(22px, calc(env(safe-area-inset-top) + 8px)); } }

/* ═══ la porta: a sinistra cos'è Atlante, a destra la scheda di vetro per entrare ═══ */
.porta-g { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 440px); gap: clamp(28px, 5vw, 70px); align-items: center; padding: 3vh max(20px, 6vw) 50px; }
.porta-g .hero-c { padding: 0; }
.hero h1 { font-weight: 700; letter-spacing: -0.035em; }
.hero h1 em { font-style: normal; background: linear-gradient(120deg, #6ff3e3, #19d3c5 55%, #f5a33a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.scheda { position: relative; border-radius: 30px; padding: clamp(26px, 4vw, 44px); background: linear-gradient(160deg, rgba(30, 58, 104, 0.62), rgba(14, 28, 56, 0.66)); border: 1px solid rgba(150, 190, 240, 0.18);
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.06); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); text-align: center; animation: su 0.9s 0.1s both; }
.scheda .logo { width: 116px; height: 134px; display: block; margin: 0 auto 6px; filter: drop-shadow(0 0 26px rgba(25, 211, 197, 0.4)); }
.scheda h2 { font: 700 clamp(38px, 5vw, 50px)/1.05 'Space Grotesk', Inter, sans-serif; letter-spacing: -0.02em; margin: 6px 0 6px; background: linear-gradient(180deg, #ffffff, #c9dbf2); -webkit-background-clip: text; background-clip: text; color: transparent; }
.scheda .motto { color: var(--tenue); margin: 0 0 26px; font: 500 15px 'Space Grotesk', Inter, sans-serif; }
.scheda .motto b { color: var(--oro); font-weight: 600; }
.scheda form { display: grid; gap: 14px; text-align: left; }
.scheda label { display: grid; gap: 8px; font: 500 12px Inter, sans-serif; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(200, 216, 240, 0.8); }
.scheda input { font: 16px Inter, sans-serif; padding: 15px 18px; border-radius: 16px; border: 1px solid rgba(150, 190, 240, 0.18); background: rgba(255, 255, 255, 0.06); color: var(--carta); text-transform: none; letter-spacing: 0; outline: none; transition: border-color 0.2s, box-shadow 0.2s; width: 100%; }
.scheda input::placeholder { color: rgba(200, 216, 240, 0.45); }
.scheda input:focus { border-color: var(--oro); box-shadow: 0 0 0 4px rgba(25, 211, 197, 0.15); }
.scheda .pw { position: relative; }
.scheda .pw input { padding-right: 84px; }
.scheda .mostra { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); border: 0; background: none; color: rgba(200, 216, 240, 0.85); font: 600 13px Inter, sans-serif; padding: 8px 10px; cursor: pointer; }
.scheda form > button { margin-top: 8px; font: 600 17px 'Space Grotesk', Inter, sans-serif; padding: 16px; border-radius: 999px; border: 0; cursor: pointer; color: #04212a;
  background: linear-gradient(135deg, #2fe6d4, #10bfb3); box-shadow: 0 18px 40px -16px rgba(25, 211, 197, 0.8); transition: transform 0.2s, box-shadow 0.2s; }
.scheda form > button:hover { transform: translateY(-1px); box-shadow: 0 22px 46px -16px rgba(25, 211, 197, 0.95); }
.scheda .entra { margin: 0 0 16px; min-height: 0; display: flex; justify-content: center; }
.scheda .entra:empty { display: none; }
.scheda .oppure { display: flex; align-items: center; gap: 12px; color: var(--tenue); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; margin: 4px 0 16px; }
.scheda .oppure::before, .scheda .oppure::after { content: ""; flex: 1; height: 1px; background: rgba(150, 190, 240, 0.18); }
.scheda #msg { margin: 14px 0 0; }
.tre { background: rgba(150, 190, 240, 0.12); }
.tre-c { background: rgba(10, 20, 40, 0.86); }
.tre-c .ico { color: var(--oro); }
@media (max-width: 900px) { .porta-g { grid-template-columns: 1fr; } .scheda { order: -1; } .hero h1 { font-size: clamp(40px, 11vw, 64px); } .porta-g .lead { font-size: 17px; } }
/* i titoli in Space Grotesk, decisi */
.ciao h1 { font-weight: 700; letter-spacing: -0.03em; }
.strada { background: linear-gradient(160deg, rgba(30, 58, 104, 0.5), rgba(14, 28, 56, 0.4)); border-color: rgba(150, 190, 240, 0.16); }
.strada.on .freccia { color: #04212a; }
.pan { background: linear-gradient(160deg, rgba(30, 58, 104, 0.38), rgba(14, 28, 56, 0.3)); border-color: rgba(150, 190, 240, 0.16); backdrop-filter: blur(14px); }
.carta { background: rgba(16, 32, 61, 0.85); }

/* ═══ LA ROTTA: la firma di Atlante. Puntini turchesi che arrivano alla meta arancio. ═══ */
.rotta { display: inline-flex; align-items: center; gap: 0; width: 64px; height: 10px; vertical-align: middle;
  background: radial-gradient(circle, var(--oro) 2px, transparent 2.6px) 0 50% / 11px 10px repeat-x; position: relative; }
.rotta::after { content: ""; position: absolute; right: -10px; top: 50%; width: 12px; height: 16px; margin-top: -12px; filter: drop-shadow(0 0 6px rgba(245, 163, 58, 0.7));
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 16'%3E%3Cpath d='M1.5 15.5V1' stroke='%23f5a33a' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M2.5 1l8.5 3.5-8.5 3.5z' fill='%23f5a33a'/%3E%3C/svg%3E") no-repeat center / contain; }
.rotta.cammina { animation: cammina 1.1s linear infinite; }
@keyframes cammina { to { background-position: 11px 50%; } }
.kick { display: flex; align-items: center; gap: 14px; }
.kick .rotta { width: 44px; }
/* le coordinate, come su una carta nautica */
.coord { font: 400 12.5px "Space Mono", ui-monospace, monospace; letter-spacing: 0.04em; color: rgba(200, 216, 240, 0.6); }
.meta { display: flex; justify-content: center; align-items: center; gap: 10px; margin: 22px 0 0; padding-top: 18px; border-top: 1px dashed rgba(150, 190, 240, 0.18); flex-wrap: wrap; }
.meta b { font: 600 14px 'Space Grotesk', Inter, sans-serif; color: var(--carta); transition: opacity 0.4s; }
.meta .coord { transition: opacity 0.4s; }
.meta.cambia b, .meta.cambia .coord { opacity: 0; }
.meta small { font: 500 11px Inter, sans-serif; letter-spacing: 0.16em; text-transform: uppercase; color: var(--arancio); }
.stato .pallino { display: none; }

/* la porta della Scoperta, sotto le tre strade */
.scopri { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px; align-items: center; margin: 16px max(20px, 5vw) 0; padding: 20px 24px; border-radius: 24px; text-decoration: none; color: var(--carta);
  border: 1px solid rgba(245, 163, 58, 0.35); background: linear-gradient(120deg, rgba(245, 163, 58, 0.12), rgba(25, 211, 197, 0.08) 60%, rgba(14, 28, 56, 0.4)); transition: transform 0.3s, border-color 0.3s; animation: su 0.8s 0.25s both; }
.scopri:hover { transform: translateY(-3px); border-color: var(--arancio); }
.scopri small { display: block; font: 600 11px Inter, sans-serif; letter-spacing: 0.18em; text-transform: uppercase; color: var(--arancio); }
.scopri b { display: block; font: 600 21px 'Space Grotesk', Inter, sans-serif; margin: 2px 0; }
.scopri span span, .scopri > span:nth-child(2) > span { color: var(--tenue); font-size: 14.5px; }
.scopri .freccia { width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(245, 163, 58, 0.5); display: grid; place-items: center; color: var(--arancio); }
.sc-link { color: var(--arancio); border-color: rgba(245, 163, 58, 0.45); text-decoration: none; }
@media (max-width: 600px) { .scopri { grid-template-columns: 1fr; } .scopri .freccia { display: none; } }

/* ═══ L'APERTURA: il marchio si costruisce. Le braccia del titano si alzano,
   il mondo cade e si posa sulle mani, poi gira piano; le bandierine si
   piantano una dopo l'altra, l'ultima è la meta. ═══ */
.scheda .logo * { transform-box: view-box; }
.scheda h2 { animation: su 0.8s 2.2s both; }
.scheda .motto { animation: su 0.8s 2.35s both; }
@keyframes alza { to { stroke-dashoffset: 0; } }
@keyframes posa { 0% { transform: translateY(-46px) scale(0.4); opacity: 0; } 60% { opacity: 1; } 100% { transform: none; } }
@keyframes gira { 0% { transform: scaleX(1); } 50% { transform: scaleX(-1); } 100% { transform: scaleX(1); } }
@keyframes appare { from { opacity: 0; } }
@keyframes pianta { from { transform: translateY(-14px) scaleY(0); opacity: 0; } }
@keyframes sventola { 0%, 100% { transform: skewY(0deg); } 50% { transform: skewY(-5deg); } }
@media (prefers-reduced-motion: reduce) { .scheda .logo *, .scheda h2, .scheda .motto { animation: none !important; stroke-dashoffset: 0 !important; } }

/* ═══ ALTO LIVELLO: il globo 3D dietro, vetro vero, i mirini da strumento ═══ */
.globo3d { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: -1; pointer-events: none; }
body.con-globo { background-image: radial-gradient(ellipse 55% 45% at 0% 12%, rgba(25, 211, 197, 0.16), transparent 70%), radial-gradient(ellipse 60% 55% at 100% 0%, rgba(40, 90, 170, 0.28), transparent 70%); }
body.con-globo::before, body.con-globo::after { display: none; }
h1, h2, h3 { letter-spacing: -0.03em; }
.hero h1 { font-weight: 700; letter-spacing: -0.045em; text-shadow: 0 0 60px rgba(25, 211, 197, 0.18); }
.ciao h1 { letter-spacing: -0.04em; }
.marchio { font-weight: 700; letter-spacing: -0.02em; }
.marchio .logo { width: 44px; height: 44px; }
.scheda { background: linear-gradient(160deg, rgba(14, 32, 64, 0.5), rgba(6, 14, 30, 0.55)); border-color: rgba(120, 220, 230, 0.22); border-radius: 22px;
  backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3); }
.scheda .logo { width: 150px; height: 150px; margin-bottom: 0; }
/* i mirini agli angoli: come il vetro di uno strumento di navigazione */
.scheda::after, .strada::after, .pan::after, .scopri::after, .sc-chat::after, .sc-mappa-box::after, .tile::after {
  content: ""; position: absolute; inset: 9px; pointer-events: none; border-radius: 0; opacity: 0.75;
  --m: rgba(95, 245, 228, 0.7);
  background:
    linear-gradient(var(--m), var(--m)) top left / 14px 1.5px no-repeat, linear-gradient(var(--m), var(--m)) top left / 1.5px 14px no-repeat,
    linear-gradient(var(--m), var(--m)) top right / 14px 1.5px no-repeat, linear-gradient(var(--m), var(--m)) top right / 1.5px 14px no-repeat,
    linear-gradient(var(--m), var(--m)) bottom left / 14px 1.5px no-repeat, linear-gradient(var(--m), var(--m)) bottom left / 1.5px 14px no-repeat,
    linear-gradient(var(--m), var(--m)) bottom right / 14px 1.5px no-repeat, linear-gradient(var(--m), var(--m)) bottom right / 1.5px 14px no-repeat; }
.strada, .pan, .scopri, .tile { position: relative; }
.strada { border-radius: 20px; background: linear-gradient(160deg, rgba(14, 32, 64, 0.55), rgba(6, 14, 30, 0.45)); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.strada::after { opacity: 0; transition: opacity 0.3s; } .strada:hover::after, .strada.on::after { opacity: 0.9; }
.pan { border-radius: 22px; }
.scopri::after { --m: rgba(245, 163, 58, 0.75); }
.scheda #msg b { color: var(--arancio); } .scheda #msg code { font: 12px "Space Mono", monospace; color: var(--oro2); }
.tre { background: transparent; border-top-color: rgba(120, 220, 230, 0.14); }
.tre-c { background: rgba(5, 11, 23, 0.6); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
/* l'apertura con il marchio nuovo: le gambe si disegnano, la rotta appare, la meta si pianta */
.scheda .logo .l-gambe { stroke-dasharray: 100; stroke-dashoffset: 100; animation: alza 1s 0.25s cubic-bezier(.5,0,.2,1) forwards; }
.scheda .logo .l-filo, .scheda .logo .l-bordo { animation: appare 1.2s both; }
.scheda .logo .l-rotta { animation: appare 0.5s 1.15s both; }
.scheda .logo .l-meta { transform-origin: 65.4px 64.8px; animation: pianta 0.7s 1.45s cubic-bezier(.3,1.8,.5,1) both; }