/* ===== Shared dark layout for Zio Ricco Studio sub-pages ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html,body{background:#0C0C0C;font-family:'Kanit',sans-serif;color:#D7E2EA;-webkit-font-smoothing:antialiased;line-height:1.6}
img{display:block;max-width:100%}
a{text-decoration:none;color:inherit}

.hero-heading{
  background:linear-gradient(180deg,#646973 0%,#BBCCD7 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.wrap{width:100%;max-width:1040px;margin:0 auto;padding:0 1.25rem}
@media(min-width:768px){.wrap{padding:0 2rem}}

/* Buttons */
.cta{border-radius:9999px;color:#fff;font-weight:600;text-transform:uppercase;letter-spacing:.06em;
  border:none;cursor:pointer;white-space:nowrap;display:inline-block;padding:.8rem 1.8rem;font-size:.8rem;
  background:linear-gradient(123deg,#1B1060 5%,#2B1A8C 30%,#EE6FA6 68%,#F4C430 100%);
  box-shadow:0 4px 4px rgba(43,26,140,.3),4px 4px 12px #3826a8 inset;
  outline:2px solid #fff;outline-offset:-3px;transition:transform .2s ease}
.cta:hover{transform:scale(1.03)}
.ghost{border-radius:9999px;background:transparent;border:2px solid #D7E2EA;color:#D7E2EA;
  font-weight:500;text-transform:uppercase;letter-spacing:.06em;cursor:pointer;white-space:nowrap;
  display:inline-block;padding:.7rem 1.6rem;font-size:.8rem;transition:background .2s ease}
.ghost:hover{background:rgba(215,226,234,.1)}

/* Topbar */
.topbar{position:sticky;top:0;z-index:50;background:rgba(12,12,12,.82);backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(215,226,234,.1)}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding-top:.8rem;padding-bottom:.8rem}
.tb-brand{display:flex;align-items:center;gap:.7rem}
.logo-badge{position:relative;width:44px;height:44px;border-radius:50%;flex-shrink:0}
.logo-badge::before{content:"";position:absolute;inset:-4px;border-radius:50%;z-index:0;
  background:conic-gradient(from 0deg,#F4C430,#EE6FA6,#7621B0,#2B1A8C,#F4C430);filter:blur(3px);
  animation:spin 6s linear infinite}
.logo-badge img{position:relative;z-index:1;width:100%;height:100%;border-radius:50%;box-shadow:0 0 0 2px #0C0C0C}
.tb-name{font-weight:800;text-transform:uppercase;letter-spacing:.02em;color:#fff;font-size:1rem}
.tb-name b{color:#F4C430;font-weight:800}
@keyframes spin{to{transform:rotate(360deg)}}
.tb-links{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.tb-links a{color:#D7E2EA;font-weight:500;text-transform:uppercase;letter-spacing:.03em;font-size:.72rem;
  padding:.5rem .95rem;border-radius:9999px;border:1px solid rgba(215,226,234,.2);white-space:nowrap;transition:background .2s}
.tb-links a:hover{background:rgba(215,226,234,.09)}
.tb-links a.cta{border:none;padding:.55rem 1.1rem}
@media(min-width:768px){.tb-links a{font-size:.8rem}}
@media(max-width:520px){.tb-name{display:none}.tb-links a{font-size:.64rem;padding:.42rem .7rem}}

/* Page head */
.page-head{position:relative;text-align:center;padding:4rem 0 3rem;overflow:hidden}
.page-head::before{content:"";position:absolute;top:-40%;left:50%;transform:translateX(-50%);
  width:80%;height:120%;background:radial-gradient(50% 50% at 50% 30%, rgba(120,80,220,.18), transparent 70%);
  pointer-events:none}
.eyebrow{display:inline-block;font-weight:600;text-transform:uppercase;letter-spacing:.18em;font-size:.72rem;
  color:#F49BC1;margin-bottom:1rem;position:relative}
.page-head h1{font-weight:900;text-transform:uppercase;line-height:1.02;letter-spacing:-.02em;
  font-size:clamp(2.4rem,8vw,88px);position:relative}
.page-head p.lead{color:#D7E2EA;opacity:.7;font-weight:300;max-width:44rem;margin:1.2rem auto 0;
  font-size:clamp(1rem,1.9vw,1.3rem);position:relative}

/* Section spacing */
.section{padding:2.5rem 0}
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.25,.1,.25,1),transform .7s cubic-bezier(.25,.1,.25,1)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}.logo-badge::before{animation:none}}

/* Chips (blog filter) */
.chips{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;margin-top:1.75rem;position:relative}
.chip{font-weight:500;text-transform:uppercase;letter-spacing:.04em;font-size:.75rem;padding:.55rem 1.2rem;
  border-radius:9999px;border:1px solid rgba(215,226,234,.25);background:transparent;color:#D7E2EA;cursor:pointer;transition:.18s}
.chip:hover{background:rgba(215,226,234,.08)}
.chip.on{background:#F4C430;color:#0C0C0C;border-color:#F4C430;font-weight:600}

/* Blog grid */
.grid{display:grid;gap:1.25rem}
@media(min-width:640px){.grid{grid-template-columns:1fr 1fr}}
@media(min-width:980px){.grid{grid-template-columns:1fr 1fr 1fr}}
.card{display:block;border:1px solid rgba(215,226,234,.16);border-radius:24px;overflow:hidden;
  background:rgba(255,255,255,.02);transition:transform .2s ease,background .2s ease}
.card:hover{transform:translateY(-5px);background:rgba(255,255,255,.05)}
.cover{aspect-ratio:16/9;background-size:cover;background-position:center}
.cover-ph{display:grid;place-items:center}
.cover-ph span{font-size:3rem;filter:drop-shadow(0 6px 14px rgba(0,0,0,.4))}
.card-body{padding:1.25rem}
.cat-badge{display:inline-block;font-weight:600;text-transform:uppercase;letter-spacing:.06em;font-size:.68rem;
  color:#F49BC1;background:rgba(244,155,193,.12);padding:.3rem .7rem;border-radius:9999px;margin-bottom:.6rem}
.card-body h3{color:#fff;font-weight:600;font-size:1.2rem;line-height:1.2;margin-bottom:.5rem}
.card-body p{color:#D7E2EA;opacity:.6;font-weight:300;font-size:.95rem;margin-bottom:.9rem}
.card-meta{display:flex;align-items:center;justify-content:space-between;font-size:.78rem;color:#D7E2EA;opacity:.55}
.leggi{color:#F4C430;font-weight:600;opacity:1}
.empty{text-align:center;color:#D7E2EA;opacity:.6;padding:2rem 0}

/* Article */
.art-cover{aspect-ratio:auto;height:clamp(200px,34vw,380px)}
.art-wrap{max-width:720px;padding-top:2rem}
.back{display:inline-block;color:#F4C430;font-weight:600;font-size:.9rem;margin-bottom:1rem}
.art-wrap h1{color:#fff;font-weight:800;font-size:clamp(1.8rem,4.4vw,2.6rem);line-height:1.15;margin:.4rem 0 .5rem}
.art-date{color:#D7E2EA;opacity:.5;font-weight:500;font-size:.88rem;margin-bottom:1.6rem}
.art-body p{color:#D7E2EA;opacity:.88;font-weight:300;font-size:1.08rem;margin-bottom:1.1rem;line-height:1.75}
.art-body h3{color:#fff;font-weight:600;font-size:1.4rem;margin:2rem 0 .8rem}
.art-body h4{color:#F49BC1;font-weight:600;font-size:1.1rem;margin:1.6rem 0 .6rem}
.art-body figure{margin:1.5rem 0}
.art-body img{width:100%;border-radius:16px;border:1px solid rgba(215,226,234,.14)}
.img-ph{aspect-ratio:16/9;border-radius:16px;display:grid;place-items:center;gap:.4rem;
  background:linear-gradient(135deg,#2B1A8C,#EE6FA6);color:#fff;text-align:center;padding:1rem}
.img-ph span{font-size:2.4rem}
.art-body figcaption{font-size:.85rem;color:#D7E2EA;opacity:.5;text-align:center;margin-top:.5rem}
.art-body ul,.art-body ol{margin:0 0 1.1rem;padding-left:1.4rem}
.art-body li{color:#D7E2EA;opacity:.88;font-weight:300;font-size:1.05rem;margin-bottom:.5rem;line-height:1.6}
.art-body table{width:100%;border-collapse:collapse;margin:.5rem 0 1.4rem;border-radius:14px;overflow:hidden;
  border:1px solid rgba(215,226,234,.16);font-size:.92rem}
.art-body th,.art-body td{padding:.7rem .9rem;text-align:left;border-bottom:1px solid rgba(215,226,234,.12)}
.art-body th{background:rgba(43,26,140,.5);color:#fff;font-weight:600}
.art-body tr:last-child td{border-bottom:none}
.art-body .disclaimer{display:block;margin-top:2rem;padding-top:1.1rem;border-top:1px solid rgba(215,226,234,.14);
  font-size:.85rem;line-height:1.6;color:#D7E2EA;opacity:.5}

/* Tool cards (calcolatori) */
.tool-card{display:flex;align-items:center;gap:1.2rem;border:1px solid rgba(215,226,234,.16);border-radius:24px;
  padding:1.6rem 1.8rem;margin-bottom:1rem;background:rgba(255,255,255,.02);transition:transform .2s,background .2s}
.tool-card:hover{transform:translateY(-4px);background:rgba(255,255,255,.05)}
.tool-ico{flex-shrink:0;width:62px;height:62px;border-radius:18px;display:grid;place-items:center;font-size:2rem;
  background:rgba(244,196,48,.14);border:1px solid rgba(244,196,48,.25)}
.tool-txt{flex:1;min-width:0}
.tool-txt h3{color:#fff;font-weight:600;font-size:1.35rem;margin-bottom:.3rem}
.tool-txt p{color:#D7E2EA;opacity:.6;font-weight:300;font-size:1rem}
.tool-go{flex-shrink:0;font-size:1.7rem;color:#F4C430}
@media(max-width:560px){.tool-go{display:none}}

/* CTA card */
.cta-band{padding:3rem 0 1rem}
.cta-card{max-width:52rem;margin:0 auto;text-align:center;border:2px solid #D7E2EA;border-radius:40px;
  padding:3rem 1.5rem;background:radial-gradient(120% 120% at 50% 0%, rgba(43,26,140,.35) 0%, rgba(12,12,12,0) 60%)}
.cta-card h2{font-weight:900;text-transform:uppercase;font-size:clamp(1.8rem,5vw,3rem);line-height:1.05;margin-bottom:.9rem}
.cta-card p{color:#D7E2EA;opacity:.75;font-weight:300;max-width:34rem;margin:0 auto 1.6rem;font-size:1.05rem}

/* Footer */
footer.site{background:#0C0C0C;border-top:1px solid rgba(215,226,234,.12);text-align:center;padding:2.5rem 1.5rem;margin-top:2rem}
footer.site .f-brand{font-weight:900;text-transform:uppercase;letter-spacing:.03em;font-size:1.3rem;color:#fff}
footer.site .f-small{opacity:.5;font-size:.85rem;margin-top:.5rem;line-height:1.6}
footer.site a{color:#F4C430}