/* ============================================================
   Letsplaza Modern Theme
   Brand: dark navy + teal/aqua accent (heritage LP)
   Inspired by Deveyes Group restyling, distinct identity.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&display=swap');

:root{
  --bg:           #0a1620;
  --bg-2:         #0e1d2a;
  --bg-3:         #122636;
  --surface:      rgba(255,255,255,.04);
  --surface-2:    rgba(255,255,255,.07);
  --border:       rgba(255,255,255,.10);
  --border-2:     rgba(255,255,255,.18);
  --text:         #e9eef3;
  --text-muted:   #9bb0c2;
  --text-soft:    #c8d4df;
  --accent:       #3ec3d5;       /* heritage LP teal */
  --accent-2:     #6fe0ee;
  --accent-soft:  rgba(62,195,213,.14);
  --accent-glow:  rgba(62,195,213,.35);
  --danger:       #ef6b6b;
  --radius:       14px;
  --radius-lg:    22px;
  --container:    1200px;
  --header-h:     84px;

  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-serif: 'Playfair Display', 'Times New Roman', Georgia, serif;
}

*,*::before,*::after{ box-sizing:border-box; }
/* `scroll-behavior:smooth` nativo è gestito in JS (per poter applicare l'offset
   dell'header sticky e rispettare prefers-reduced-motion). Lo lasciamo solo
   come fallback per browser dove il JS non venisse caricato. */
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
:root{ --lp-scroll-offset: 96px; }
.section--anchor{ scroll-margin-top: var(--lp-scroll-offset); }
body{
  margin:0;
  font-family:var(--font-sans);
  font-size:16px;
  line-height:1.65;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,video{ max-width:100%; height:auto; display:block; }
a{ color:var(--accent); text-decoration:none; transition:color .2s ease; }
a:hover{ color:var(--accent-2); }
h1,h2,h3,h4{
  font-family:var(--font-serif);
  font-weight:500;
  letter-spacing:-0.01em;
  line-height:1.15;
  margin:0 0 .6em;
  color:#fff;
}
h1{ font-size:clamp(2.4rem, 5.5vw, 4.6rem); font-weight:500; }
h2{ font-size:clamp(1.8rem, 3.4vw, 2.7rem); }
h3{ font-size:clamp(1.25rem, 2vw, 1.55rem); }
h4{ font-size:1.1rem; font-family:var(--font-sans); font-weight:600; letter-spacing:.02em; }
p{ margin:0 0 1.1em; color:var(--text-soft); }
.eyebrow{
  display:inline-block;
  font-family:var(--font-sans);
  font-size:.78rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:1.2em;
  font-weight:500;
}
.container{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding:0 28px;
}

/* ============= HEADER / NAV ============= */
.site-header{
  position:fixed;
  top:0; left:0; right:0;
  height:var(--header-h);
  display:flex; align-items:center;
  z-index:100;
  background:rgba(10,22,32,.55);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .25s ease, background .25s ease;
}
.site-header.is-scrolled{
  background:rgba(10,22,32,.92);
  border-bottom-color:var(--border);
  box-shadow:0 8px 22px rgba(0,0,0,.28);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
.site-header__inner{
  width:100%;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:32px;
}
.brand{
  display:inline-flex; align-items:center; gap:12px;
  text-decoration:none; color:#fff;
}
.brand img{
  height:36px; width:auto; display:block;
  filter:brightness(1.05);
}
.brand--footer img{ height:32px; opacity:.92; }
.main-nav{ display:flex; justify-content:center; }
.main-nav ul{
  list-style:none; padding:0; margin:0;
  display:flex; align-items:center; gap:6px;
}
.main-nav a{
  display:block;
  padding:10px 16px;
  color:var(--text);
  font-size:.9rem;
  font-weight:500;
  letter-spacing:.04em;
  border-radius:8px;
  text-transform:uppercase;
  text-decoration:none;
  transition:color .2s, background .2s;
}
.main-nav a:hover,
.main-nav .current-menu-item > a,
.main-nav a.is-active{
  color:var(--accent);
  background:var(--accent-soft);
}
.main-nav a{ position:relative; }
.main-nav a.is-active::after{
  content:"";
  position:absolute;
  left:18%; right:18%; bottom:4px;
  height:2px;
  border-radius:2px;
  background:var(--accent);
  box-shadow:0 0 12px var(--accent-glow);
  transition:opacity .25s ease;
}
.main-nav .menu-item-has-children > a::after{
  content:""; display:inline-block;
  width:6px; height:6px; margin-left:8px;
  border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translateY(-2px);
}
.main-nav .sub-menu{
  position:absolute;
  display:none;
  background:var(--bg-2);
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px;
  min-width:220px;
  box-shadow:0 18px 48px rgba(0,0,0,.5);
  margin-top:8px;
}
.main-nav .menu-item-has-children{ position:relative; }
.main-nav .menu-item-has-children:hover > .sub-menu,
.main-nav .menu-item-has-children:focus-within > .sub-menu{ display:block; }
.main-nav .sub-menu a{
  text-transform:none;
  padding:8px 14px;
  font-size:.92rem;
  letter-spacing:0;
}
.header-cta{
  display:flex; align-items:center; gap:14px;
}
/* CTA pill: la label è il default desktop, l'icona compare solo nei breakpoint
   compatti per non rubare spazio al logo. */
.header-cta__btn{ display:inline-flex; align-items:center; gap:8px; }
.header-cta__icon{ display:none; font-size:1rem; line-height:1; }
.header-cta__label{ display:inline; }
.lang-switch{
  display:flex; gap:4px;
  border:1px solid var(--border);
  border-radius:999px;
  padding:4px;
  font-size:.72rem;
  letter-spacing:.18em;
}
.lang-switch a,
.lang-switch span{
  padding:5px 12px;
  border-radius:999px;
  color:var(--text-muted);
  text-transform:uppercase;
  cursor:pointer;
  transition:color .2s, background .2s;
}
.lang-switch a:hover{ color:#fff; }
.lang-switch a.active{
  background:var(--accent);
  color:#08171f;
  font-weight:600;
  cursor:default;
}
.lang-switch .disabled{
  opacity:.35;
  cursor:not-allowed;
}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px;
  padding:14px 28px;
  border-radius:999px;
  font-family:var(--font-sans);
  font-size:.82rem;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  cursor:pointer;
  border:1.5px solid transparent;
  transition:all .25s ease;
  white-space:nowrap;
}
.btn--primary{
  background:var(--accent); color:#08171f;
  box-shadow:0 8px 28px rgba(62,195,213,.28);
}
.btn--primary:hover{
  background:var(--accent-2); color:#08171f;
  transform:translateY(-2px);
  box-shadow:0 14px 38px rgba(62,195,213,.4);
}
.btn--ghost{
  background:transparent; color:var(--text);
  border-color:var(--border-2);
}
.btn--ghost:hover{ border-color:var(--accent); color:var(--accent); }
.btn--sm{ padding:10px 20px; font-size:.72rem; }

.menu-toggle{
  display:none;
  background:none; border:0;
  width:40px; height:40px;
  position:relative; cursor:pointer;
}
.menu-toggle span{
  position:absolute; left:8px; right:8px; height:2px;
  background:#fff; transition:transform .25s, top .25s, opacity .2s;
}
.menu-toggle span:nth-child(1){ top:14px; }
.menu-toggle span:nth-child(2){ top:20px; }
.menu-toggle span:nth-child(3){ top:26px; }
body.menu-open .menu-toggle span:nth-child(1){ top:20px; transform:rotate(45deg); }
body.menu-open .menu-toggle span:nth-child(2){ opacity:0; }
body.menu-open .menu-toggle span:nth-child(3){ top:20px; transform:rotate(-45deg); }

/* ============= HERO ============= */
.hero{
  position:relative;
  min-height:100vh;
  display:flex; align-items:center;
  padding:calc(var(--header-h) + 60px) 0 100px;
  overflow:hidden;
  isolation:isolate;
}
.hero__bg{
  position:absolute; inset:0; z-index:-2;
  overflow:hidden;
}
.hero__bg video,
.hero__bg img{
  width:100%; height:100%; object-fit:cover; opacity:.45;
}
.hero__bg::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(80% 60% at 50% 10%, transparent 0%, var(--bg) 75%),
    linear-gradient(180deg, rgba(10,22,32,.5) 0%, var(--bg) 100%);
}
.hero__particles{
  position:absolute; inset:0; z-index:-1;
  background-image:
    radial-gradient(2px 2px at 22% 32%, rgba(62,195,213,.45) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 78% 18%, rgba(255,255,255,.4) 50%, transparent 51%),
    radial-gradient(1px 1px at 12% 78%, rgba(62,195,213,.6) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 88% 72%, rgba(255,255,255,.35) 50%, transparent 51%),
    radial-gradient(1px 1px at 55% 55%, rgba(62,195,213,.5) 50%, transparent 51%);
  animation:driftBg 28s linear infinite;
  opacity:.6;
}
@keyframes driftBg{
  0%{ background-position:0 0,0 0,0 0,0 0,0 0; }
  100%{ background-position:60px -40px,-50px 30px,40px 50px,-60px -50px,30px -30px; }
}
.hero__content{
  text-align:center;
  max-width:880px;
  margin:0 auto;
}
.hero h1{
  font-size:clamp(2.6rem, 6.5vw, 5.2rem);
  margin-bottom:.4em;
}
.hero h1 .accent{
  display:block;
  color:var(--accent);
  font-style:italic;
  font-weight:400;
}
.hero__lead{
  font-size:clamp(1.05rem, 1.6vw, 1.2rem);
  color:var(--text-soft);
  max-width:640px;
  margin:0 auto 2em;
}
.hero__cta{
  display:flex; gap:16px; justify-content:center; flex-wrap:wrap;
  margin-top:2em;
}
.scroll-indicator{
  position:absolute; bottom:36px; left:50%;
  transform:translateX(-50%);
  font-size:.7rem; letter-spacing:.4em;
  color:var(--text-muted);
  text-transform:uppercase;
}
.scroll-indicator::after{
  content:""; display:block;
  width:1px; height:46px;
  background:linear-gradient(180deg, var(--accent), transparent);
  margin:14px auto 0;
}

/* ============= SECTIONS ============= */
.section{ padding:120px 0; position:relative; }
.section--alt{ background:var(--bg-2); }
.section__head{ text-align:center; margin-bottom:80px; max-width:780px; margin-left:auto; margin-right:auto; }
.section__head .lead{ color:var(--text-muted); font-size:1.1rem; }

/* Feature grid */
.features{
  display:grid;
  gap:24px;
  grid-template-columns:repeat(auto-fit, minmax(280px,1fr));
}
.feature-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:36px 30px;
  transition:transform .3s ease, border-color .3s ease, background .3s ease;
  position:relative;
  overflow:hidden;
}
.feature-card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity:0; transition:opacity .3s ease;
}
.feature-card:hover{
  transform:translateY(-4px);
  border-color:var(--border-2);
  background:var(--surface-2);
}
.feature-card:hover::before{ opacity:1; }
.feature-card__icon{
  width:54px; height:54px;
  border-radius:14px;
  background:var(--accent-soft);
  border:1px solid var(--accent-glow);
  display:grid; place-items:center;
  color:var(--accent);
  margin-bottom:24px;
  font-size:1.4rem;
}
.feature-card h3{ margin-bottom:12px; }
.feature-card p{ margin:0; font-size:.96rem; }

/* Two-column split */
.split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  align-items:center;
}
.split--reverse{ direction:rtl; }
.split--reverse > *{ direction:ltr; }
.split__media{
  position:relative;
  border-radius:var(--radius-lg);
  overflow:hidden;
  border:1px solid var(--border);
  background:var(--bg-3);
  aspect-ratio:4/5;
}
.split__media img,.split__media video{ width:100%; height:100%; object-fit:cover; }
.split__media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(135deg, transparent 60%, var(--accent-soft));
  pointer-events:none;
}
@media (max-width: 880px){ .split{ grid-template-columns:1fr; gap:40px; } .split__media{ aspect-ratio:16/10; } }

/* Pillars / module cards */
.pillars{
  display:grid;
  gap:18px;
  grid-template-columns:repeat(auto-fit, minmax(220px,1fr));
}
.pillar{
  background:var(--bg-3);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:28px 24px;
  transition:all .25s ease;
}
.pillar:hover{ border-color:var(--accent); transform:translateY(-2px); }
.pillar__num{
  font-family:var(--font-serif);
  font-size:1.4rem;
  color:var(--accent);
  font-style:italic;
  margin-bottom:8px;
  display:block;
}
.pillar h4{ margin-bottom:8px; color:#fff; }
.pillar p{ margin:0; font-size:.92rem; color:var(--text-muted); }

/* Solutions / pricing-style */
.solutions{
  display:grid; gap:28px;
  grid-template-columns:repeat(auto-fit, minmax(320px,1fr));
}
.solution{
  background:linear-gradient(180deg, var(--bg-3) 0%, var(--bg-2) 100%);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:44px 36px;
  position:relative;
  transition:transform .3s ease, border-color .3s ease;
}
.solution--featured{
  border-color:var(--accent);
  box-shadow:0 30px 80px rgba(62,195,213,.15);
}
.solution__badge{
  position:absolute; top:-13px; left:36px;
  background:var(--accent); color:#08171f;
  padding:5px 14px; border-radius:999px;
  font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; font-weight:600;
}
.solution h3{ margin-bottom:16px; }
.solution__price{
  font-family:var(--font-serif);
  font-size:1.05rem; color:var(--accent);
  font-style:italic; margin-bottom:24px;
  display:block;
}
.solution ul{ list-style:none; padding:0; margin:24px 0; }
.solution ul li{
  padding:10px 0 10px 28px;
  position:relative;
  border-bottom:1px solid var(--border);
  font-size:.94rem; color:var(--text-soft);
}
.solution ul li::before{
  content:""; position:absolute; left:0; top:16px;
  width:14px; height:8px;
  border-left:2px solid var(--accent);
  border-bottom:2px solid var(--accent);
  transform:rotate(-45deg);
}

/* Cases / events — grid; .case e child sono definiti più sotto in CASE STUDY (CPT) */
.cases{
  display:grid; gap:28px;
  grid-template-columns:repeat(auto-fit, minmax(300px,1fr));
}

/* Case studies expand/collapse (one-page) */
.cases-extra{
  overflow:hidden;
  transition:height .45s ease, opacity .35s ease;
  margin-top:24px;
}
.cases-extra[hidden]{ display:none !important; }
.cases-toggle{ cursor:pointer; }
@media (prefers-reduced-motion: reduce){
  .cases-extra{ transition:none; }
}

/* ---- Flash di destinazione dopo lo scroll animato dal menu ----
   Pulse breve (1.4s) sulla sezione di arrivo: glow teal e leggera
   linea accent in alto. Discreto, non invasivo. */
@keyframes lp-scroll-flash {
  0%   { box-shadow: inset 0 4px 0 0 transparent, 0 0 0 0 rgba(62,195,213,0); }
  20%  { box-shadow: inset 0 4px 0 0 var(--accent), 0 0 0 0 rgba(62,195,213,.35); }
  100% { box-shadow: inset 0 0 0 0 transparent, 0 0 0 0 rgba(62,195,213,0); }
}
.lp-scroll-flash {
  animation: lp-scroll-flash 1.4s ease-out;
}
@media (prefers-reduced-motion: reduce){
  .lp-scroll-flash { animation: none; }
}

/* CTA banner */
.cta-banner{
  background:linear-gradient(135deg, var(--bg-3) 0%, var(--bg-2) 100%);
  border:1px solid var(--accent-glow);
  border-radius:var(--radius-lg);
  padding:70px 60px;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.cta-banner::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(circle at 50% 0%, var(--accent-soft), transparent 60%);
  pointer-events:none;
}
.cta-banner h2{ margin-bottom:18px; }
.cta-banner p{ max-width:560px; margin:0 auto 32px; }

/* Page hero (interior) */
.page-hero{
  padding:calc(var(--header-h) + 80px) 0 80px;
  text-align:center;
  position:relative;
  background:radial-gradient(ellipse at top, var(--bg-3), var(--bg) 70%);
  border-bottom:1px solid var(--border);
}
.page-hero h1{ font-size:clamp(2.2rem, 4.6vw, 3.8rem); margin-bottom:.3em; }
.page-hero p{ max-width:680px; margin:0 auto; color:var(--text-muted); font-size:1.1rem; }

/* Page content prose */
.prose{ max-width:780px; margin:0 auto; }
.prose p,.prose li{ font-size:1.05rem; color:var(--text-soft); }
.prose h2{ margin-top:1.6em; }
.prose h3{ margin-top:1.4em; }
.prose ul{ padding-left:1.4em; }
.prose ul li{ margin-bottom:.5em; }
.prose strong{ color:#fff; }

/* ============= CONTACT (deveyes-inspired) ============= */
.contact{
  display:grid;
  grid-template-columns:1fr 1.05fr;
  gap:80px;
  align-items:start;
  max-width:1100px; margin:0 auto;
}
.contact__intro h2{ margin-bottom:18px; }
.contact__divider{
  width:60px; height:2px;
  background:var(--accent);
  margin:30px 0 36px;
}
.contact__intro p{ color:var(--text-soft); }
.contact__details{ margin-top:50px; display:grid; gap:32px; }
.contact__detail .label{
  display:block;
  font-size:.74rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:10px;
}
.contact__detail a,
.contact__detail .value{
  font-family:inherit;
  font-size:1rem;
  color:#fff;
  font-weight:400;
  font-style:normal;
  line-height:1.6;
}
.contact__detail a:hover{ color:var(--accent); }
.contact__form-card{
  background:linear-gradient(180deg, var(--bg-3) 0%, var(--bg-2) 100%);
  border:1px solid var(--accent-glow);
  border-radius:var(--radius-lg);
  padding:46px 42px;
  position:relative;
  overflow:hidden;
}
.contact__form-card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, transparent, var(--accent), transparent);
}
.contact__form-card h3{ margin-bottom:10px; }
.contact__form-card p.muted{ color:var(--text-muted); font-size:.96rem; margin-bottom:30px; }
.contact-form{ display:grid; gap:18px; }
.contact-form .field{ display:grid; gap:8px; }
.contact-form label{
  font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--text-muted); font-weight:500;
}
.contact-form input,
.contact-form textarea,
.contact-form select{
  width:100%;
  padding:14px 18px;
  background:rgba(0,0,0,.25);
  border:1px solid var(--border);
  border-radius:10px;
  color:#fff;
  font-family:var(--font-sans);
  font-size:.98rem;
  transition:border-color .2s, background .2s;
}
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus{
  outline:0; border-color:var(--accent); background:rgba(0,0,0,.35);
}
.contact-form textarea{ min-height:130px; resize:vertical; }
.contact-form .consent{
  display:flex; gap:12px; align-items:flex-start;
  font-size:.85rem; color:var(--text-muted);
}
.contact-form .consent input{ width:auto; margin-top:3px; }
.contact-form__privacy-note{
  font-size:.82rem;
  color:var(--text-muted);
  margin:4px 0 0;
  line-height:1.5;
}
.contact-form__privacy-note a{ color:var(--accent); text-decoration:underline; }
.contact-form__captcha{ margin-top:4px; min-height:65px; }
.contact-form__captcha .cf-turnstile{ display:flex; justify-content:flex-start; }
.contact-form button{ margin-top:8px; }
.contact-form .field__error{
  display:none;
  font-size:.78rem;
  color:#ff6b8a;
  letter-spacing:0;
  text-transform:none;
  margin-top:-2px;
}
.contact-form .field--invalid .field__error{ display:block; }
.contact-form .field--invalid input,
.contact-form .field--invalid textarea,
.contact-form .field--invalid select{
  border-color:#ff6b8a;
  background:rgba(255,107,138,.06);
}
.contact-form .consent.field--invalid > span{ color:#ff6b8a; }
.contact-form__notice{
  padding:14px 18px; border-radius:10px;
  font-size:.92rem; margin-bottom:20px;
}
.contact-form__notice--ok{
  background:rgba(62,195,213,.12);
  border:1px solid var(--accent-glow);
  color:var(--accent);
}
.contact-form__notice--err{
  background:rgba(239,107,107,.10);
  border:1px solid rgba(239,107,107,.4);
  color:var(--danger);
}
@media (max-width: 880px){
  .contact{ grid-template-columns:1fr; gap:50px; }
  .contact__form-card{ padding:34px 26px; }
}

/* ============= CASE STUDY (CPT) ============= */
/* Card più ricca: gradiente sul visual, decorazioni, hover lift, iniziale
   tipografica come fallback quando non c'è thumbnail (no immagini esterne). */
.case{
  position:relative;
  display:flex; flex-direction:column;
  background:linear-gradient(160deg, var(--bg-2) 0%, var(--bg) 100%);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  overflow:hidden;
  transition:transform .35s ease, border-color .25s ease, box-shadow .35s ease;
}
.case::before{
  content:""; position:absolute; inset:0;
  border-radius:inherit;
  background:linear-gradient(180deg, var(--accent-soft) 0%, transparent 35%);
  opacity:0; transition:opacity .35s ease;
  pointer-events:none;
}
.case:hover{
  transform:translateY(-6px);
  border-color:var(--border-2);
  box-shadow:0 22px 50px -28px rgba(0,0,0,.7), 0 0 0 1px var(--accent-soft);
}
.case:hover::before{ opacity:1; }
.case__visual{
  position:relative;
  aspect-ratio:16/9;
  background:#fff;
  display:grid; place-items:center;
  padding:0;
  overflow:hidden;
  border-bottom:1px solid var(--border);
}
.case--has-thumb .case__visual img{
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  display:block;
}

/* ---- Visual fallback (no thumb): allineato visivamente alle thumbnail
   delle case con immagine — stesso aspect-ratio, stessa "cornice", palette
   teal coerente. Niente più iniziale enorme: ora c'e` il nome del cliente
   in tipografia chiara su un mockup-pattern stile dashboard. ---- */
.case__visual--mono{
  background:
    /* glow superiore sinistro */
    radial-gradient(80% 70% at 0% 0%, rgba(111,224,238,.22) 0%, transparent 60%),
    /* glow inferiore destro */
    radial-gradient(70% 60% at 100% 100%, rgba(62,195,213,.18) 0%, transparent 60%),
    /* base teal scura coerente con la palette LP */
    linear-gradient(140deg, #0d2533 0%, #0a1c28 60%, #081521 100%);
  border-bottom-color:rgba(62,195,213,.30);
  display:flex; align-items:center; justify-content:center;
  padding:24px;
}
/* Sottile pattern a griglia tipo "dashboard wireframe" sullo sfondo */
.case__visual--mono::before{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(to right, rgba(111,224,238,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(111,224,238,.06) 1px, transparent 1px);
  background-size:36px 36px;
  mask-image:radial-gradient(ellipse at center, #000 30%, transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse at center, #000 30%, transparent 75%);
  pointer-events:none;
}
.case__initial{
  position:relative; z-index:2;
  font-family:var(--font-serif);
  font-weight:500;
  font-size:clamp(1.6rem, 2.6vw, 2rem);
  line-height:1.15;
  text-align:center;
  letter-spacing:-.01em;
  color:#fff;
  text-shadow:0 2px 24px rgba(62,195,213,.35);
  padding:0 8px;
  /* Garanzia di contrasto AAA sui device mobile */
  max-width:95%;
}
/* Indicatore decorativo discreto in alto a destra (tipo "live dot") */
.case__deco{
  position:absolute;
  pointer-events:none;
  z-index:1;
}
.case__deco--1{
  top:14px; right:14px;
  width:8px; height:8px; border-radius:50%;
  background:var(--accent-2);
  box-shadow:0 0 10px var(--accent-glow), 0 0 0 6px rgba(62,195,213,.10);
}
.case__deco--2{
  bottom:14px; left:14px;
  width:42px; height:3px; border-radius:2px;
  background:linear-gradient(90deg, var(--accent), transparent);
  opacity:.6;
}
.case__body{
  position:relative; z-index:1;
  padding:26px 26px 28px;
  display:flex; flex-direction:column; gap:8px;
  flex:1;
}
.case__tag{
  display:inline-block;
  font-size:.7rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--accent); margin-bottom:4px;
}
.case__title{ margin:0 0 6px; font-size:1.35rem; }
.case__excerpt{ margin:0 0 12px; color:var(--text-soft); font-size:.95rem; }
.case__platforms{
  margin-top:auto;
  font-size:.78rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--text-muted);
  padding-top:14px; border-top:1px dashed var(--border);
}

/* ============= MINI ABOUT (sobria, link a Deveyes) ============= */
/* margin-top negativo per "tirare su" la sezione e ridurre il vuoto
   dopo la card White Label di .section-soluzioni (che ha già padding 120px
   in basso). Così il gap effettivo si dimezza senza toccare la sezione
   sopra né perdere l'aria attorno al box. */
.mini-about{
  padding:0 0 30px;
  margin-top:-60px;
}
.mini-about__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; flex-wrap:wrap;
  background:linear-gradient(120deg, var(--bg-2), var(--bg-3));
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:26px 32px;
}
.mini-about__text{ flex:1 1 420px; min-width:280px; }
.mini-about__text .eyebrow{ margin-bottom:.5em; }
.mini-about__text p{ margin:0; color:var(--text-soft); font-size:.98rem; }
.mini-about__link{
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 20px; border-radius:999px;
  border:1px solid var(--border-2);
  color:var(--text); font-size:.92rem; letter-spacing:.04em;
  white-space:nowrap;
  transition:border-color .2s, color .2s, transform .2s;
}
.mini-about__link:hover{ border-color:var(--accent); color:var(--accent); transform:translateX(2px); }
.mini-about__link span{ transition:transform .2s; }
.mini-about__link:hover span{ transform:translateX(3px); }
@media (max-width: 720px){
  .mini-about__inner{ padding:22px; }
}

/* ============= SELECT (form contatti) chevron custom ============= */
.contact-form select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--accent) 50%),
    linear-gradient(135deg, var(--accent) 50%, transparent 50%);
  background-position:
    calc(100% - 22px) calc(50% - 2px),
    calc(100% - 16px) calc(50% - 2px);
  background-size:6px 6px, 6px 6px;
  background-repeat:no-repeat;
  padding-right:46px;
  cursor:pointer;
}
.contact-form select option{ background:var(--bg-2); color:#fff; }

/* ============= FOOTER ============= */
.site-footer{
  background:var(--bg-2);
  border-top:1px solid var(--border);
  padding:80px 0 30px;
  margin-top:60px;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:50px;
  margin-bottom:60px;
}
.footer-brand p{ font-size:.92rem; color:var(--text-muted); margin-top:18px; max-width:320px; }
.footer-col h3{
  font-size:.78rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--accent); margin:0 0 20px; font-weight:600; line-height:1.2;
}
.footer-col ul{ list-style:none; padding:0; margin:0; }
.footer-col li{ margin-bottom:10px; }
.footer-col a{
  color:var(--text-soft); font-size:.94rem;
}
.footer-col a:hover{ color:var(--accent); }
.footer-bottom{
  padding-top:24px;
  border-top:1px solid var(--border);
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px;
  font-size:.82rem; color:var(--text-muted);
}
.footer-bottom a{ color:var(--text-muted); }
.footer-bottom a:hover{ color:var(--accent); }
.deveyes-credit{
  font-style:italic; font-family:var(--font-serif);
}

/* ============= RESPONSIVE ============= */
@media (max-width: 960px){
  :root{ --header-h:70px; }

  /* Header layout: brand a sinistra, CTA pack a destra (lang + toggle).
     Su mobile non serve la colonna 1fr per il main-nav (è drawer fixed),
     quindi compattiamo a `auto auto` per ancorare bene il toggle a destra. */
  .site-header__inner{ grid-template-columns:auto auto; gap:12px; justify-content:space-between; }
  .header-cta{ gap:8px; margin-right:-6px; }
  .menu-toggle{ display:block; width:44px; height:44px; }
  .menu-toggle span{ left:12px; right:12px; }

  /* Mobile nav = side drawer da destra, NON fullscreen.
     Larghezza compatta per voci brevi, overlay scuro dietro.
     IMPORTANTE: settiamo height esplicito invece di affidarci a top+bottom.
     Su questo stack (Apache+php-S+iframe Replit, e su qualche browser mobile)
     la combinazione top:var() + bottom:0 non veniva risolta dal browser e
     l'altezza collassava all'altezza del primo figlio (~50px), nascondendo
     dietro overflow:auto le restanti voci del menu. Con height esplicito
     calc(100dvh - header) il drawer occupa sempre l'altezza giusta. */
  .main-nav{
    position:fixed;
    top:var(--header-h);
    right:0;
    height:calc(100vh - var(--header-h));
    height:calc(100dvh - var(--header-h));
    width:min(300px, 82vw);
    background:linear-gradient(180deg, rgba(10,22,32,.98) 0%, rgba(8,18,26,.98) 100%);
    border-left:1px solid var(--border);
    box-shadow:-24px 0 60px rgba(0,0,0,.45);
    padding:18px 18px 32px;
    overflow-y:auto;
    overflow-x:hidden;
    -webkit-overflow-scrolling:touch;
    transform:translateX(105%);
    opacity:0;
    visibility:hidden;
    transition:transform .36s cubic-bezier(.22,.61,.36,1),
               opacity .28s ease,
               visibility 0s linear .36s;
    z-index:90;
  }
  body.menu-open .main-nav{
    transform:translateX(0);
    opacity:1;
    visibility:visible;
    transition:transform .42s cubic-bezier(.22,.61,.36,1),
               opacity .25s ease,
               visibility 0s linear 0s;
  }

  /* Overlay (creato via JS) per dimmare il contenuto sottostante. */
  .menu-overlay{
    position:fixed; inset:var(--header-h) 0 0 0;
    background:rgba(5,12,18,.55);
    backdrop-filter:blur(2px);
    -webkit-backdrop-filter:blur(2px);
    opacity:0; visibility:hidden;
    transition:opacity .28s ease, visibility 0s linear .28s;
    z-index:80;
  }
  body.menu-open .menu-overlay{
    opacity:1; visibility:visible;
    transition:opacity .28s ease, visibility 0s linear 0s;
  }

  /* Drawer = lista verticale di voci. Tutti gli override !important sono
     volutamente ridondanti per essere a prova di interazione con regole
     desktop ereditate. */
  .main-nav{ display:block !important; }
  .main-nav ul{
    list-style:none;
    padding:0;
    margin:0;
    display:block !important;
    gap:0;
  }
  .main-nav li{
    display:block !important;
    width:100%;
    margin:2px 0;
    opacity:1 !important;
    transform:none !important;
  }
  .main-nav a{
    display:block !important;
    width:100% !important;
    padding:14px 14px !important;
    border-bottom:1px solid rgba(255,255,255,.06);
    border-radius:8px;
    color:var(--text);
    text-decoration:none;
    box-sizing:border-box;
  }
  .main-nav li:last-child a{ border-bottom:0; }
  .main-nav .sub-menu{ position:static; border:0; box-shadow:none; padding:0 0 6px 14px; display:block; background:transparent; }
  .main-nav .sub-menu a{ padding:10px 12px; font-size:.88rem; }

  /* CTA "Contattaci" deve restare visibile anche su tablet/mobile, accanto
     all'hamburger (era nascosta sotto i 960px nel layout precedente).
     Touch target ≥44px garantito da padding + min-height. */
  .header-cta .btn{
    display:inline-flex;
    min-height:44px;
    padding:10px 16px;
    font-size:.7rem;
  }

  body.menu-open{ overflow:hidden; }

  .footer-grid{ grid-template-columns:1fr 1fr; }
  .section{ padding:80px 0; }
  .cta-banner{ padding:50px 30px; }
}
@media (max-width: 560px){
  .footer-grid{ grid-template-columns:1fr; gap:40px; }
  .footer-bottom{ justify-content:flex-start; }
  .hero{ padding-top:calc(var(--header-h) + 30px); padding-bottom:60px; }
  .container{ padding:0 20px; }
  .lang-switch{ display:none; }
  .header-cta{ margin-right:-4px; gap:6px; }
  /* Sotto i 560px: bottone CTA "icon-only" per non spezzare il layout col logo.
     Touch target resta ≥44px (min-height + padding ai lati). */
  .header-cta__btn{
    min-width:44px;
    padding:0 12px !important;
  }
  .header-cta__label{ display:none; }
  .header-cta__icon{ display:inline-flex; font-size:1.05rem; }
}
@media (prefers-reduced-motion: reduce){
  .main-nav, .main-nav li, .menu-overlay{ transition:none !important; }
}

/* ============================================================
   ACCESSIBILITY OVERRIDES — WCAG AA contrast fix
   ============================================================
   Squirrel audit 2026-05-04 ha segnalato contrast insufficiente per:
   - .has-very-light-gray-background-color (Gutenberg block palette)
   - .has-very-light-gray-color (idem)
   - .screen-reader-text:focus (WP core, focus ring per skip-links)
   Override per garantire ratio >= 4.5:1 su sfondo scuro del tema.
   ============================================================ */

/* Gutenberg block palette: il "very light gray" core (#eee) + texto scuro
   non e' sufficiente sul nostro background dark; lo riconvertiamo in una
   superficie scura con testo chiaro per restare on-brand. */
.has-very-light-gray-background-color{
  background-color: var(--bg-3) !important;
  color: var(--text) !important;
}
.has-very-light-gray-color{
  color: var(--text-soft) !important;
}

/* Skip-link / screen-reader-text quando entra in focus deve essere
   visibile e leggibile. WP core lo mostra con un grigio chiarissimo:
   forziamo accent + bg scuro per contrast garantito. */
.screen-reader-text:focus,
.screen-reader-text:focus-visible{
  background-color: var(--bg-2) !important;
  color: var(--accent) !important;
  border: 2px solid var(--accent) !important;
  outline: 2px solid var(--accent-glow) !important;
  outline-offset: 2px !important;
  padding: 12px 18px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  z-index: 100000 !important;
}