/* ==== Palette Software Magic ==== */

:root {
  --smg-bg: #070b10;
  --smg-surface: #0e131b;
  --smg-card: #111a26;
  --smg-text: #ffffff;
  --smg-muted: #aab4c3;
  --smg-accent: #ffb84d;
  --smg-accent-2: #00c8ff;
  --smg-bg: #0a0f16;           
  --smg-surface: #111823;      
  --smg-card: #141d2b;         
  --smg-text: #ffffff;         
  --smg-muted: #b0bac9;        
  --smg-accent: #ffb84d;       
  --smg-accent-2: #00c8ff;     
  --smg-radius: 16px;
  --smg-shadow: 0 10px 30px rgba(0,0,0,.4);

}
/*



@media (prefers-color-scheme: light) {
  :root {
    --smg-bg: #f7f9fc;
    --smg-surface: #ffffff;
    --smg-card: #ffffff;
    --smg-text: #111;
    --smg-muted: #444;
    --smg-accent: #ff8c00;
    --smg-accent-2: #007acc;
    --smg-shadow: 0 10px 30px rgba(0,0,0,.1);
  }
}

:root[data-theme="dark"] {
  --smg-bg: #070b10;
  --smg-surface: #0e131b;
  --smg-card: #111a26;
  --smg-text: #ffffff;
  --smg-muted: #aab4c3;
  --smg-accent: #ffb84d;
  --smg-accent-2: #00c8ff;
}
*/
/* ==== Base look&feel ==== */
html { scroll-behavior: smooth; }
body {
  background: radial-gradient(1200px 600px at 20% -10%, rgba(255,184,77,.05), transparent 40%),
              radial-gradient(1000px 500px at 120% 10%, rgba(0,200,255,.05), transparent 35%),
              var(--smg-bg);
  color: var(--smg-text);
  -webkit-font-smoothing: antialiased;  
  text-rendering: optimizeLegibility;
}

h1,h2,h3 { line-height: 1.15; letter-spacing: -.02em; }
h1 { font-size: clamp(2rem, 2.5vw + 1rem, 3.2rem); }
h2 { font-size: clamp(1.6rem, 1.6vw + .9rem, 2.2rem); }
p { color: var(--smg-muted); max-width: 70ch; }

main, .container, .content, .wrap {
  margin-inline: auto; width: min(1100px, 92vw);
}

/* ==== Header sticky + glass ==== */
header, .site-header, nav[role="navigation"] {
  position: sticky; top: 0; z-index: 999;
  backdrop-filter: saturate(140%) blur(10px);
  background: color-mix(in oklab, var(--smg-surface) 85%, transparent);
  border-bottom: 1px solid color-mix(in oklab, var(--smg-accent) 20%, transparent);
}

/* ==== Link underline “smart” ==== */
a {
  color: var(--smg-text); text-decoration: none; position: relative;
}
a:hover, a:focus { color: var(--smg-accent); }
a::after {
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px;
  transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg,var(--smg-accent),var(--smg-accent-2));
  transition: transform .35s ease;
}
a:hover::after, a:focus::after { transform: scaleX(1); }

/* ==== Card uplift ==== */
section article, .card, .box, .panel, .feature, [class*="card-"], [class*="tile"] {
  background: var(--smg-card);
  border-radius: var(--smg-radius);
  box-shadow: var(--smg-shadow);
  border: 1px solid rgba(255,255,255,.06);
  overflow: clip;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
section article:hover,
.card:hover, .box:hover, .panel:hover, .feature:hover, [class*="card-"]:hover, [class*="tile"]:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
  border-color: color-mix(in oklab, var(--smg-accent) 25%, transparent);
}

/* ==== Immagini ==== */
img { display:block; max-width:100%; height:auto; border-radius: calc(var(--smg-radius) - 4px); }
figure img, .card img { filter: saturate(1.05) contrast(1.02); transition: transform .5s ease, filter .5s ease; }
figure:hover img, .card:hover img { transform: scale(1.03); filter: saturate(1.15) contrast(1.06); }

/* ==== CTA / Buttons ==== */
button, .btn, [class*="btn-"], input[type="submit"], a.button {
  display: inline-flex; align-items: center; gap:.6rem;
  padding: .8rem 1.1rem; border-radius: 999px; border: 0;
  background: linear-gradient(135deg, var(--smg-accent), var(--smg-accent-2));
  color: #fff !important; font-weight: 600; letter-spacing:.02em;
  box-shadow: 0 10px 20px rgba(255,184,77,.25);
  transition: transform .15s ease, filter .2s ease, box-shadow .2s ease;
}
button:hover, .btn:hover, [class*="btn-"]:hover, input[type="submit"]:hover, a.button:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow: 0 16px 28px rgba(255,184,77,.33);
}

/* ==== Sezioni ==== */
section, .section, [class*="section-"] { padding-block: clamp(40px, 6vw, 96px); }

/* ==== Reveal on scroll ==== */
.reveal {
  opacity: 0; transform: translateY(18px) scale(.995);
  transition: opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,1);
  will-change: transform, opacity;
}
.reveal.is-inview { opacity: 1; transform: none; }

/* ==== Footer ==== */
footer {
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.18));
  border-top: 1px solid rgba(255,255,255,.08);
}

/* ==== Focus visibile ==== */
:focus-visible {
  outline: 2px solid color-mix(in oklab, var(--smg-accent) 60%, white);
  outline-offset: 3px; border-radius: 8px;
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}