/**
 * © Alessandro Castagna — 321.al / EVOLAB
 * Tutti i diritti riservati. Uso non autorizzato vietato.
 * info@321.it · https://321.al
 *
 * RelaxOne Radio — Progettazione globale dell'ecosistema (design book).
 * Sistema visivo: cornici dispositivo + UI kit app/dashboard + diagrammi.
 */

:root {
  --ink-900: #06141f; --ink-850: #081a28; --ink-800: #0b2233; --ink-700: #0b3e60; --ink-600: #114a6e;
  --amber: #f39200; --amber-soft: #ffb24d; --amber-glow: rgba(243,146,0,.4);
  --teal: #17bebb; --teal-soft: #66e0dd; --olive: #8ea604; --clay: #c98a5e;
  --cream: #f6efe4; --sand: #e6dccb; --mist: #b9c6d1; --mist-dim: #7e93a3;
  --line: rgba(230,220,203,.12); --line-2: rgba(230,220,203,.22);
  --glass: rgba(255,255,255,.035); --glass-2: rgba(255,255,255,.06);
  --grad-amber: linear-gradient(135deg,#ffb24d,#f39200 55%,#d96b00);
  --grad-teal: linear-gradient(135deg,#66e0dd,#17bebb 60%,#0e8c8a);
  --display: 'Fraunces', Georgia, serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --radius: 16px; --pad-x: clamp(1.1rem,4vw,5rem);
  --ease: cubic-bezier(.22,.61,.36,1); --ease-out: cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after { box-sizing: border-box; margin:0; padding:0; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *{animation-duration:.001ms!important;transition-duration:.001ms!important} }
body { font-family: var(--sans); color: var(--sand); background: var(--ink-900); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img,svg { display:block; max-width:100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
ul { list-style: none; }
::selection { background: var(--amber); color: var(--ink-900); }
body::before { content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.04; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* tutti i contenuti sopra l'overlay grana (stacking robusto) */
.dhero, .chapter, .dfoot { position: relative; z-index: 2; }

/* ===================================================== TOP NAV */
.dnav { position: fixed; top:0; left:0; right:0; z-index: 100; display:flex; align-items:center; justify-content:space-between;
  padding:.7rem var(--pad-x); background: rgba(6,20,31,.8); backdrop-filter: blur(16px) saturate(140%); border-bottom:1px solid var(--line); }
.dnav__brand { display:flex; align-items:center; gap:.6rem; font-weight:700; color: var(--cream); }
.dnav__brand .dot { width:10px; height:10px; border-radius:50%; background: var(--grad-amber); box-shadow:0 0 12px var(--amber-glow); }
.dnav__brand small { color: var(--mist-dim); font-weight:500; }
.dnav__links { display:flex; gap:.3rem; overflow-x:auto; scrollbar-width:none; }
.dnav__links::-webkit-scrollbar{display:none}
.dnav__links a { font-size:.82rem; font-weight:500; color: var(--mist); padding:.35rem .7rem; border-radius:999px; white-space:nowrap; transition:all .2s; }
.dnav__links a:hover { color: var(--cream); background: var(--glass-2); }
.dnav__links a.active { color: var(--ink-900); background: var(--grad-amber); }
.dnav__right { display:flex; align-items:center; gap:.5rem; }
.dnav__cta { font-size:.82rem; font-weight:600; color: var(--cream); border:1px solid var(--line-2); padding:.4rem .9rem; border-radius:999px; white-space:nowrap; cursor:pointer; background:none; display:inline-flex; align-items:center; gap:.35rem; transition:border-color .2s, background .2s; }
.dnav__cta:hover { border-color: var(--amber); background: var(--glass-2); }
#dnav-print { background: var(--grad-amber); color: var(--ink-900); border:none; }
.lang { display:flex; gap:.12rem; padding:.2rem; background: var(--glass); border:1px solid var(--line); border-radius:999px; }
.lang button { font-size:.72rem; font-weight:700; letter-spacing:.04em; padding:.3rem .55rem; border-radius:999px; color: var(--mist-dim); transition:all .2s; }
.lang button.active { background: var(--grad-amber); color: var(--ink-900); }
@media(max-width:900px){ #dnav-site{display:none} .dnav__links{display:none} }
@media(max-width:560px){ #dnav-print span, #dnav-print { font-size:0; } #dnav-print i{font-size:1rem} }

/* progress bar */
.dprogress { position: fixed; top:0; left:0; height:2px; background: var(--grad-amber); z-index:101; width:0; box-shadow:0 0 10px var(--amber-glow); }

/* ===================================================== SHELL / SECTIONS */
.wrap { width:100%; max-width: 1240px; margin-inline:auto; padding-inline: var(--pad-x); }
.chapter { position: relative; padding-block: clamp(3.5rem,8vh,7rem); border-top:1px solid var(--line); }
.chapter:first-of-type { border-top:none; }
.chead { max-width: 62ch; margin-bottom: clamp(2rem,4vh,3.2rem); }
.chead .ix { font-family: var(--mono); font-size:.8rem; color: var(--amber-soft); letter-spacing:.1em; }
.chead h2 { font-family: var(--display); font-weight:400; font-size: clamp(1.9rem,4vw,3.1rem); line-height:1.05; letter-spacing:-.015em; color: var(--cream); margin:.6rem 0 .8rem; }
.chead .lead { font-size: clamp(1rem,1.5vw,1.2rem); color: var(--mist); }
.chead .note { margin-top:1rem; display:inline-flex; gap:.5rem; align-items:center; font-size:.82rem; color: var(--mist-dim); border:1px dashed var(--line-2); padding:.45rem .9rem; border-radius:999px; }
.eyebrow { display:inline-flex; align-items:center; gap:.5rem; font-size:.78rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color: var(--amber-soft); }
.eyebrow::before { content:""; width:24px; height:1px; background: var(--amber); }

/* ===================================================== HERO */
.dhero { position: relative; min-height: 96svh; display:flex; flex-direction:column; justify-content:center; padding: 7rem var(--pad-x) 3rem; overflow:hidden; }
.dhero__bg { position:absolute; inset:0; z-index:-1;
  background: radial-gradient(60% 70% at 18% 12%, rgba(243,146,0,.2), transparent 60%),
              radial-gradient(50% 60% at 85% 18%, rgba(23,190,187,.16), transparent 60%),
              radial-gradient(80% 90% at 60% 110%, rgba(11,62,96,.5), transparent 70%), var(--ink-900); }
.dhero h1 { font-family: var(--display); font-weight:300; font-size: clamp(2.6rem,7vw,6rem); line-height:.98; letter-spacing:-.025em; color: var(--cream); margin:1.3rem 0; max-width: 16ch; }
.dhero h1 .em { font-style:italic; background: var(--grad-amber); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.dhero__sub { font-size: clamp(1.05rem,1.7vw,1.35rem); color: var(--mist); max-width: 56ch; }
.dhero__row { display:flex; flex-wrap:wrap; gap:1px; margin-top:2.5rem; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--line); max-width: 880px; }
.dhero__cell { flex:1 1 200px; padding:1.3rem 1.4rem; background: rgba(8,26,40,.6); }
.dhero__cell .k { font-family: var(--mono); font-size:.72rem; color: var(--mist-dim); letter-spacing:.08em; }
.dhero__cell .v { font-family: var(--display); font-size:1.5rem; color: var(--cream); margin-top:.2rem; }
.dhero__cell:nth-child(1) .v{color:var(--amber-soft)} .dhero__cell:nth-child(2) .v{color:var(--teal-soft)}

/* ===================================================== DEVICE FRAMES */
.gallery { display:flex; gap:1.6rem; overflow-x:auto; padding:1rem .2rem 2rem; scroll-snap-type:x mandatory; scrollbar-width:thin; scrollbar-color: var(--line-2) transparent; }
.gallery::-webkit-scrollbar{height:8px} .gallery::-webkit-scrollbar-thumb{background:var(--line-2); border-radius:9px}
.gitem { scroll-snap-align:center; flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:.9rem; }
.gcap { max-width: 300px; text-align:center; }
.gcap .t { color: var(--cream); font-weight:600; font-size:.95rem; }
.gcap .d { color: var(--mist-dim); font-size:.82rem; margin-top:.15rem; }

/* phone */
.phone { width: 300px; height: 620px; border-radius: 44px; padding: 11px; position: relative;
  background: linear-gradient(160deg,#2a3742,#0d1620); box-shadow: 0 40px 80px -30px rgba(0,0,0,.8), inset 0 0 0 1px rgba(255,255,255,.06); }
.phone::before { content:""; position:absolute; top:20px; left:50%; transform:translateX(-50%); width:96px; height:26px; background:#050b12; border-radius:99px; z-index:6; }
.phone__screen { width:100%; height:100%; border-radius: 34px; overflow:hidden; position:relative; background: var(--ink-900); display:flex; flex-direction:column; }

/* tablet / browser */
.browser { width: min(880px, 86vw); border-radius: 14px; overflow:hidden; background: var(--ink-850); border:1px solid var(--line-2); box-shadow:0 40px 90px -40px rgba(0,0,0,.8); }
.browser__bar { display:flex; align-items:center; gap:.5rem; padding:.7rem 1rem; background:#0a1722; border-bottom:1px solid var(--line); }
.browser__dots { display:flex; gap:.4rem; }
.browser__dots span { width:11px; height:11px; border-radius:50%; }
.browser__dots span:nth-child(1){background:#ff5f57} .browser__dots span:nth-child(2){background:#febc2e} .browser__dots span:nth-child(3){background:#28c840}
.browser__url { flex:1; font-family:var(--mono); font-size:.74rem; color: var(--mist-dim); background: var(--ink-900); padding:.35rem .8rem; border-radius:7px; border:1px solid var(--line); }
.browser__body { display:flex; min-height: 460px; }

/* ===================================================== APP UI KIT (dark) */
.app { flex:1; display:flex; flex-direction:column; height:100%; font-size:13px; }
.app__status { display:flex; justify-content:space-between; align-items:center; padding:14px 20px 6px; font-size:11px; font-weight:600; color: var(--cream); }
.app__status .r { display:flex; gap:5px; align-items:center; }
.app__bar { display:flex; align-items:center; justify-content:space-between; padding:8px 18px 12px; }
.app__bar h3 { font-family: var(--display); font-size: 19px; color: var(--cream); font-weight:500; }
.app__bar .ico { width:32px; height:32px; border-radius:50%; background: var(--glass-2); display:grid; place-items:center; color: var(--mist); font-size:15px; }
.app__body { flex:1; overflow:hidden; padding:0 16px; display:flex; flex-direction:column; gap:14px; }
.app__greet { color: var(--mist-dim); font-size:12px; }
.app__greet b { color: var(--cream); font-family:var(--display); font-size:17px; display:block; font-weight:500; }

.seg { display:flex; gap:4px; background: var(--glass); border:1px solid var(--line); border-radius:999px; padding:3px; }
.seg span { flex:1; text-align:center; font-size:11px; font-weight:600; padding:6px; border-radius:999px; color: var(--mist-dim); }
.seg span.on { background: var(--grad-amber); color: var(--ink-900); }

.searchbar { display:flex; align-items:center; gap:8px; background: var(--glass-2); border:1px solid var(--line); border-radius:12px; padding:9px 12px; color: var(--mist-dim); font-size:12px; }

.rowlabel { display:flex; justify-content:space-between; align-items:baseline; }
.rowlabel b { color: var(--cream); font-size:14px; font-weight:600; }
.rowlabel span { color: var(--amber-soft); font-size:11px; }

.hscroll { display:flex; gap:10px; overflow:hidden; }
.chcard { flex:0 0 130px; border-radius:14px; overflow:hidden; position:relative; height:150px; padding:11px; display:flex; flex-direction:column; justify-content:flex-end; color:#fff; }
.chcard::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 30%,rgba(0,0,0,.55)); }
.chcard .meta { position:relative; z-index:2; }
.chcard .v { font-size:9px; text-transform:uppercase; letter-spacing:.1em; opacity:.85; }
.chcard .n { font-family:var(--display); font-size:15px; line-height:1.1; margin-top:2px; }
.chcard .tier { position:absolute; top:9px; right:9px; z-index:2; font-size:8px; font-weight:800; letter-spacing:.06em; padding:3px 6px; border-radius:6px; background:rgba(0,0,0,.4); backdrop-filter:blur(4px); }

.listrow { display:flex; align-items:center; gap:11px; padding:8px 0; border-bottom:1px solid var(--line); }
.listrow .cv { width:42px; height:42px; border-radius:10px; flex-shrink:0; display:grid; place-items:center; color:#fff; font-size:15px; }
.listrow .tx { flex:1; min-width:0; }
.listrow .tx b { display:block; color: var(--cream); font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.listrow .tx span { color: var(--mist-dim); font-size:11px; }
.listrow .pl { color: var(--amber-soft); font-size:18px; }

/* tab bar */
.tabbar { display:flex; justify-content:space-around; padding:11px 8px 18px; border-top:1px solid var(--line); background: rgba(6,20,31,.7); }
.tabbar a { display:flex; flex-direction:column; align-items:center; gap:3px; font-size:9px; color: var(--mist-dim); }
.tabbar a i { font-size:19px; }
.tabbar a.on { color: var(--amber-soft); }

/* now playing full */
.np { flex:1; display:flex; flex-direction:column; padding:18px 22px 22px; background:
  radial-gradient(70% 50% at 50% 18%, rgba(243,146,0,.22), transparent 60%), var(--ink-900); }
.np__art { aspect-ratio:1; border-radius:22px; margin:6px 0 22px; position:relative; overflow:hidden; box-shadow:0 30px 60px -30px rgba(0,0,0,.7); }
.np__art .waves { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:4px; }
.np__art .waves i { width:5px; background:rgba(255,255,255,.55); border-radius:3px; animation: npb 1.1s var(--ease) infinite; }
.np__v { font-size:10px; text-transform:uppercase; letter-spacing:.15em; color: var(--amber-soft); }
.np__t { font-family:var(--display); font-size:23px; color: var(--cream); margin:3px 0; }
.np__p { color: var(--mist-dim); font-size:12px; }
.np__scrub { height:4px; background: var(--glass-2); border-radius:9px; margin:20px 0 7px; position:relative; }
.np__scrub::after { content:""; position:absolute; left:0; top:0; bottom:0; width:38%; background: var(--grad-amber); border-radius:9px; }
.np__time { display:flex; justify-content:space-between; font-size:10px; color: var(--mist-dim); font-variant-numeric:tabular-nums; }
.np__ctrl { display:flex; align-items:center; justify-content:center; gap:26px; margin-top:18px; }
.np__ctrl i { color: var(--cream); font-size:24px; }
.np__ctrl .play { width:62px; height:62px; border-radius:50%; background: var(--grad-amber); display:grid; place-items:center; color: var(--ink-900); font-size:26px; box-shadow:0 14px 30px -10px var(--amber-glow); }
.np__chips { display:flex; gap:7px; margin-top:20px; flex-wrap:wrap; }
.np__chips span { font-size:10px; color: var(--mist); border:1px solid var(--line); border-radius:7px; padding:4px 8px; }

/* mini player inside app */
.miniplayer { display:flex; align-items:center; gap:10px; margin:0 12px 8px; padding:8px; border-radius:14px; background: rgba(8,26,40,.9); border:1px solid var(--line-2); }
.miniplayer .cv { width:38px; height:38px; border-radius:9px; flex-shrink:0; }
.miniplayer .tx { flex:1; min-width:0; } .miniplayer .tx b{display:block;color:var(--cream);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .miniplayer .tx span{color:var(--mist-dim);font-size:10px}
.miniplayer .pl { color: var(--amber-soft); font-size:22px; }

/* gamification */
.xpcard { border:1px solid var(--line); border-radius:16px; padding:14px; background:linear-gradient(160deg,rgba(243,146,0,.1),var(--glass)); }
.xpcard .lvl { display:flex; justify-content:space-between; align-items:center; }
.xpcard .lvl b { font-family:var(--display); color: var(--cream); font-size:16px; }
.xpcard .lvl span { font-size:11px; color: var(--amber-soft); }
.xpbar { height:7px; background: var(--glass-2); border-radius:9px; margin:9px 0 5px; overflow:hidden; }
.xpbar i { display:block; height:100%; width:64%; background: var(--grad-amber); border-radius:9px; }
.xpcard .sub { font-size:10px; color: var(--mist-dim); }
.streak { display:flex; gap:6px; margin-top:4px; }
.streak span { flex:1; height:30px; border-radius:8px; background: var(--glass); display:grid; place-items:center; font-size:9px; color: var(--mist-dim); }
.streak span.hit { background: rgba(243,146,0,.2); color: var(--amber-soft); }
.badgegrid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.badge { aspect-ratio:1; border-radius:13px; background: var(--glass); border:1px solid var(--line); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; padding:4px; text-align:center; }
.badge i { font-size:18px; color: var(--amber-soft); }
.badge.lock { opacity:.4; } .badge.lock i{color:var(--mist-dim)}
.badge span { font-size:7.5px; color: var(--mist); line-height:1.1; }
.sesscard { border:1px solid var(--line); border-radius:14px; padding:12px; display:flex; align-items:center; gap:11px; }
.sesscard .ic { width:40px; height:40px; border-radius:11px; background: var(--grad-teal); display:grid; place-items:center; color: var(--ink-900); font-size:18px; }
.sesscard .tx b { display:block; color:var(--cream); font-size:13px; } .sesscard .tx span{color:var(--mist-dim);font-size:10px}
.sesscard .go { margin-left:auto; color: var(--amber-soft); font-size:20px; }

/* tier card mini */
.tierm { border:1px solid var(--line); border-radius:14px; padding:13px; }
.tierm.hot { border-color: var(--amber); background:linear-gradient(160deg,rgba(243,146,0,.12),var(--glass)); }
.tierm .n { font-family:var(--display); color:var(--cream); font-size:16px; }
.tierm .pr { color: var(--amber-soft); font-weight:700; font-size:15px; margin:3px 0 8px; }
.tierm li { font-size:11px; color: var(--mist); display:flex; gap:6px; padding:3px 0; } .tierm li i{color:var(--teal);font-size:12px;margin-top:2px}

/* ===================================================== DASHBOARD UI KIT */
.dash { display:flex; width:100%; font-size:13px; }
.dash__side { width: 184px; flex-shrink:0; background:#071119; border-right:1px solid var(--line); padding:16px 12px; display:flex; flex-direction:column; gap:4px; }
.dash__side .lg { display:flex; align-items:center; gap:7px; padding:6px 8px 14px; color: var(--cream); font-weight:700; font-size:13px; }
.dash__side .lg .dot{width:8px;height:8px;border-radius:50%;background:var(--grad-amber)}
.dash__side a { display:flex; align-items:center; gap:9px; padding:8px 10px; border-radius:9px; color: var(--mist-dim); font-size:12px; }
.dash__side a i { font-size:15px; }
.dash__side a.on { background: var(--glass-2); color: var(--cream); }
.dash__main { flex:1; padding:18px 20px; min-width:0; background: var(--ink-850); }
.dash__top { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.dash__top h4 { font-family:var(--display); color:var(--cream); font-size:18px; font-weight:500; }
.dash__top .btn-a { background: var(--grad-amber); color: var(--ink-900); font-size:11px; font-weight:700; padding:7px 13px; border-radius:8px; display:inline-flex; gap:5px; align-items:center; }
.kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:10px; margin-bottom:16px; }
.kpi { border:1px solid var(--line); border-radius:12px; padding:12px; background: var(--glass); }
.kpi .k { font-size:10px; color: var(--mist-dim); text-transform:uppercase; letter-spacing:.06em; }
.kpi .v { font-family:var(--display); font-size:22px; color: var(--cream); margin:2px 0; }
.kpi .n { font-size:10px; color: var(--teal-soft); }
.tbl { width:100%; border-collapse:collapse; font-size:12px; }
.tbl th { text-align:left; color: var(--mist-dim); font-weight:600; font-size:10px; text-transform:uppercase; letter-spacing:.06em; padding:8px 10px; border-bottom:1px solid var(--line-2); }
.tbl td { padding:9px 10px; border-bottom:1px solid var(--line); color: var(--sand); }
.tbl td b { color: var(--cream); }
.pill { font-size:9px; font-weight:700; padding:2px 7px; border-radius:6px; }
.pill.free{background:rgba(126,147,163,.2);color:var(--mist)} .pill.plus{background:rgba(243,146,0,.18);color:var(--amber-soft)} .pill.pro{background:rgba(23,190,187,.18);color:var(--teal-soft)}
.form { display:flex; flex-direction:column; gap:11px; }
.field label { font-size:10px; color: var(--mist-dim); text-transform:uppercase; letter-spacing:.06em; display:block; margin-bottom:4px; }
.field .inp { background: var(--ink-900); border:1px solid var(--line); border-radius:8px; padding:8px 10px; color: var(--cream); font-size:12px; }
.field .inp.ph { color: var(--mist-dim); }
.upload { border:1.5px dashed var(--line-2); border-radius:12px; padding:20px; text-align:center; color: var(--mist-dim); font-size:12px; }
.upload i { font-size:26px; color: var(--amber-soft); display:block; margin-bottom:6px; }
.frow { display:flex; gap:11px; } .frow .field{flex:1}
.toggle { display:flex; align-items:center; gap:8px; font-size:11px; color: var(--mist); }
.toggle .sw { width:34px; height:19px; border-radius:99px; background: var(--grad-amber); position:relative; }
.toggle .sw::after { content:""; position:absolute; right:2px; top:2px; width:15px; height:15px; border-radius:50%; background:#fff; }

/* certificate document */
.cert { background: linear-gradient(180deg,#fbf7ef,#f2ead9); color:#2a2118; border-radius:10px; padding: clamp(1.4rem,3vw,2.6rem); position:relative; overflow:hidden; box-shadow:0 30px 70px -40px rgba(0,0,0,.7); border:1px solid rgba(0,0,0,.06); }
.cert::before { content:""; position:absolute; inset:10px; border:1.5px solid rgba(201,138,94,.4); border-radius:6px; pointer-events:none; }
.cert::after { content:"\2731"; position:absolute; right:-30px; top:-30px; font-size:160px; color:rgba(243,146,0,.07); }
.cert__seal { position:absolute; top: clamp(1.4rem,3vw,2.6rem); right: clamp(1.4rem,3vw,2.6rem); width:74px; height:74px; border-radius:50%; border:2px solid var(--amber); display:grid; place-items:center; text-align:center; font-size:8px; font-weight:800; letter-spacing:.08em; color:#b5710a; text-transform:uppercase; line-height:1.2; }
.cert__seal i { font-size:22px; display:block; }
.cert .k { font-family:var(--mono); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:#9a7b53; }
.cert h3 { font-family:var(--display); font-size: clamp(1.4rem,3vw,2rem); color:#2a2118; margin:.3rem 0 .2rem; max-width: 80%; }
.cert .venue { font-size:1.05rem; color:#6b4f2e; margin-bottom:1.1rem; }
.cert .body { font-size:.92rem; line-height:1.7; color:#3d3225; max-width: 60ch; }
.cert ul { margin:1rem 0; }
.cert li { display:flex; gap:.6rem; font-size:.88rem; padding:.3rem 0; color:#3d3225; }
.cert li i { color: var(--amber); margin-top:.15rem; }
.cert__foot { margin-top:1.4rem; padding-top:1rem; border-top:1px solid rgba(0,0,0,.12); display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; font-size:.78rem; color:#7a6647; }
.cert__sign { font-family:var(--display); font-style:italic; font-size:1.1rem; color:#2a2118; }

/* ===================================================== ARCHITECTURE / DATA / API */
.arch { display:flex; flex-direction:column; gap:14px; align-items:center; }
.arch__row { display:flex; gap:14px; flex-wrap:wrap; justify-content:center; width:100%; }
.arch__node { flex:1 1 240px; max-width:340px; border:1px solid var(--line-2); border-radius:14px; padding:1.2rem 1.3rem; background: var(--glass); position:relative; }
.arch__node.client { border-color: rgba(243,146,0,.4); background:linear-gradient(160deg,rgba(243,146,0,.08),var(--glass)); }
.arch__node .ly { font-family:var(--mono); font-size:.72rem; color: var(--amber-soft); letter-spacing:.08em; }
.arch__node .tc { font-family:var(--display); font-size:1.2rem; color: var(--cream); margin:.2rem 0 .35rem; }
.arch__node .ro { font-size:.86rem; color: var(--mist); }
.arch__arrow { color: var(--mist-dim); font-size:1.4rem; text-align:center; }

.dm { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px; }
.dmcard { border:1px solid var(--line); border-radius:12px; overflow:hidden; background: var(--glass); }
.dmcard__h { display:flex; align-items:center; justify-content:space-between; padding:9px 12px; background: var(--glass-2); border-bottom:1px solid var(--line); }
.dmcard__h b { font-family:var(--mono); font-size:.82rem; color: var(--cream); }
.dmcard__h .g { font-size:.64rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:2px 6px; border-radius:5px; background:rgba(23,190,187,.16); color: var(--teal-soft); }
.dmcard ul { padding:8px 12px; }
.dmcard li { font-family:var(--mono); font-size:.74rem; color: var(--mist); padding:2.5px 0; }
.dmcard li:first-child { color: var(--amber-soft); }

.apilist { border:1px solid var(--line); border-radius:14px; overflow:hidden; }
.apirow { display:grid; grid-template-columns: 64px 1fr; gap:0; align-items:center; border-bottom:1px solid var(--line); }
.apirow:last-child{border-bottom:none}
.apirow .m { font-family:var(--mono); font-size:.7rem; font-weight:700; text-align:center; padding:10px 4px; color: var(--ink-900); }
.apirow .m.GET{background:var(--teal)} .apirow .m.POST{background:var(--amber)} .apirow .m.DELETE{background:var(--clay)} .apirow .m.PUT{background:var(--olive)}
.apirow .pa { padding:9px 14px; min-width:0; }
.apirow .pa code { font-family:var(--mono); font-size:.8rem; color: var(--cream); }
.apirow .pa span { display:block; font-size:.78rem; color: var(--mist-dim); margin-top:1px; }

.pipeline { display:flex; gap:10px; overflow-x:auto; padding-bottom:8px; counter-reset:p; }
.pstep { flex:0 0 220px; border:1px solid var(--line); border-radius:12px; padding:1.1rem; background: var(--glass); counter-increment:p; position:relative; }
.pstep::before { content:counter(p); font-family:var(--display); color: var(--amber); font-size:1rem; }
.pstep b { display:block; color: var(--cream); font-size:.95rem; margin:.3rem 0; }
.pstep span { color: var(--mist); font-size:.82rem; }

/* bridge steps */
.bflow { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px; counter-reset:b; }
.bnode { border:1px solid var(--line-2); border-radius:14px; padding:1.5rem 1.3rem; background: rgba(8,26,40,.5); position:relative; counter-increment:b; }
.bnode::before { content:counter(b,decimal-leading-zero); font-family:var(--display); color: var(--amber); font-size:1.1rem; }
.bnode b { display:block; color: var(--cream); font-size:1.05rem; margin:.5rem 0 .3rem; }
.bnode p { color: var(--mist); font-size:.9rem; }

/* roadmap */
.rmap { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.rcol { border:1px solid var(--line); border-radius:16px; padding:1.4rem; }
.rcol.p0 { border-color: var(--amber); background:linear-gradient(170deg,rgba(243,146,0,.1),var(--glass)); }
.rcol .ph { font-family:var(--mono); font-size:.74rem; color: var(--amber-soft); }
.rcol h4 { font-family:var(--display); color: var(--cream); font-size:1.3rem; margin:.2rem 0 .9rem; }
.rcol li { display:flex; gap:.55rem; font-size:.88rem; color: var(--mist); padding:.35rem 0; }
.rcol li i { color: var(--teal); margin-top:.2rem; font-size:.9rem; }

/* reveal */
.reveal { opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.reveal.in { opacity:1; transform:none; }

/* footer */
.dfoot { border-top:1px solid var(--line); padding:3rem var(--pad-x); color: var(--mist-dim); font-size:.85rem; display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem; }
.dfoot a{color:var(--amber-soft)}

/* anims */
@keyframes npb { 0%,100%{height:20%} 50%{height:80%} }

@media (max-width: 760px){
  .rmap{grid-template-columns:1fr}
  .browser__body{flex-direction:column}
  .dash__side{width:100%; flex-direction:row; overflow-x:auto; border-right:none; border-bottom:1px solid var(--line)}
  .dash{flex-direction:column}
}

/* ===================================================== PRINT (presentazione / PDF) */
@media print {
  @page { size: A4 portrait; margin: 11mm; }
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
  html, body { background: #06141f !important; }
  body::before { display: none !important; }
  .dnav, .dprogress { display: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .wrap { max-width: none !important; padding-inline: 0 !important; }

  .dhero { min-height: auto !important; padding: 1rem 0 2rem !important; break-after: page; }
  .dhero h1 { font-size: 3.2rem !important; }
  .chapter { break-before: page; border-top: none !important; padding-block: 1.2rem !important; position: static !important; }
  .chead { margin-bottom: 1.4rem !important; }

  /* gallerie: tutto visibile, niente scroll orizzontale */
  .gallery, .pipeline { overflow: visible !important; flex-wrap: wrap !important; justify-content: flex-start !important; gap: 1rem !important; }
  .gitem, .phone, .browser, .cert, .dmcard, .apilist, .apirow, .rcol, .bnode, .arch__node, .pstep, .kpi, .wave, .vcard, .craft, .func__card { break-inside: avoid !important; }
  .phone { box-shadow: none !important; }
  .browser { width: 100% !important; max-width: 700px !important; box-shadow: none !important; }
  .dm { grid-template-columns: repeat(3, 1fr) !important; }
  .rmap { grid-template-columns: 1fr !important; gap: .8rem !important; }
  .arch__node, .pstep, .chcard, .badge { box-shadow: none !important; }

  /* il certificato chiaro stampa pulito */
  .cert { box-shadow: none !important; border: 1px solid #d8c9ac !important; }
}