/* Tema Moderno — Apple/Stripe Tech Minimal
   Outfit sans. Slate #0f172a + blu elettrico #2563eb + bianco puro #ffffff.
   Per commercio tech, servizi professionali, startup, negozi moderni.

   FIRMA VISIVA UNICA:
   - Hero split text-dominant (5fr/3fr) con gradient pulito
   - Sticky nav con barra progresso scroll in alto
   - Service grid 4-col con numeri grandi "01"-"99" come ::before
   - Cards sharp 6px, zero shadow, hover border glow blu
   - Section headings con contatori animati numerici
   - Footer ultra-minimal
   - Link underlines animate (width 0 → 100%)
   - Typography: Outfit tight letter-spacing */

/* === FONTS === */
@font-face{font-family:'Outfit';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/outfit-latin.woff2') format('woff2'),url('/assets/fonts/outfit-400.ttf') format('truetype')}
@font-face{font-family:'Outfit';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/outfit-latin.woff2') format('woff2'),url('/assets/fonts/outfit-500.ttf') format('truetype')}
@font-face{font-family:'Outfit';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/outfit-latin.woff2') format('woff2'),url('/assets/fonts/outfit-600.ttf') format('truetype')}
@font-face{font-family:'Outfit';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/outfit-latin.woff2') format('woff2'),url('/assets/fonts/outfit-700.ttf') format('truetype')}

/* === VARIABLES === */
:root {
  --bg:#ffffff;--card:#ffffff;--ink:#0f172a;--green:#2563eb;--green-light:#1d4ed8;
  --green-pale:#eff6ff;--gold:#0f172a;--gold-light:#f1f5f9;--muted:#64748b;
  --border:#e2e8f0;--cream:#f8fafc;
  --font-serif:'Outfit',system-ui,sans-serif;
  --font-sans:'Outfit',system-ui,sans-serif;
}
::selection{background:#2563eb;color:#fff}

/* === SCROLL PROGRESS BAR + GRID LINES PATTERN === */
body{
  background:
    linear-gradient(#e2e8f0 1px,transparent 1px) 0 0 / 100% 80px,
    linear-gradient(90deg,#e2e8f0 1px,transparent 1px) 0 0 / 80px 100%,
    #ffffff!important;
  background-attachment:fixed!important;
  color:#0f172a;
  font-family:'Outfit',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}
/* Soften grid: only every 4th line fully visible */
body::after{
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,.96));
}
body::before{
  content:'';position:fixed;top:0;left:0;
  height:3px;width:var(--scroll-progress,0%);
  background:linear-gradient(90deg,#2563eb,#60a5fa);
  z-index:9999;transition:width .1s;
}

/* === GLOBAL TYPOGRAPHY === */
h1,h2,h3,h4,h5,h6{
  font-family:'Outfit',system-ui,sans-serif!important;
  font-style:normal!important;color:#0f172a;
  letter-spacing:-.015em;font-weight:600;
}

/* === GLOBAL CARD — Sharp 6px, border only, glow on hover === */
.svc-card,.review-card,.team-card,.offerta-card,.blog-card,.contact-card,.orari-card,.faq-item{
  border-radius:8px!important;
  border:1px solid #e2e8f0!important;
  background:#ffffff;
  box-shadow:none;
  transition:all .4s cubic-bezier(.25,.46,.45,.94);
  position:relative;
}
.svc-card:hover,.review-card:hover,.team-card:hover,.offerta-card:hover,.blog-card:hover,.contact-card:hover{
  border-color:#2563eb!important;
  box-shadow:0 0 0 1px #2563eb,0 12px 40px -12px rgba(37,99,235,.2);
  transform:translateY(-3px);
}
.svc-card::after{display:none!important}

/* === Service card with BIG NUMBER === */
.svc-grid{
  grid-template-columns:repeat(4,1fr)!important;
  gap:1rem!important;
}
.svc-card{padding:2.4rem 1.6rem!important;overflow:hidden}
.svc-card::before{
  content:counter(svc-counter,decimal-leading-zero);
  counter-increment:svc-counter;
  position:absolute;top:-.8rem;right:-.4rem;
  font-size:6rem;font-weight:700;
  color:#f1f5f9;line-height:1;
  pointer-events:none;z-index:0;
  font-feature-settings:"tnum";
}
.svc-grid{counter-reset:svc-counter}
.svc-card>*{position:relative;z-index:1}
.svc-icon{
  width:40px;height:40px;border-radius:8px!important;
  background:#eff6ff;color:#2563eb;
  border:none;box-shadow:none;
}
.svc-card:hover .svc-icon{background:#2563eb;color:#fff}
.svc-card h3{font-size:1.1rem!important;font-weight:600;margin-top:1.2rem;color:#0f172a}
.svc-card p{color:#64748b;font-size:.92rem;line-height:1.65}
@media(max-width:1100px){.svc-grid{grid-template-columns:repeat(3,1fr)!important}}
@media(max-width:800px){.svc-grid{grid-template-columns:repeat(2,1fr)!important}}
@media(max-width:520px){.svc-grid{grid-template-columns:1fr!important}}

/* === Buttons — Sharp pill, electric blue === */
.btn-hero,.nav-cta,.filter-btn,.page-btn{border-radius:999px!important}
.btn-hero-primary{
  background:#2563eb!important;color:#fff!important;
  padding:.95rem 2.2rem!important;
  font-weight:600;letter-spacing:-.005em;font-size:.92rem;
  border:none;box-shadow:0 6px 20px -8px rgba(37,99,235,.5);
  text-transform:none;
}
.btn-hero-primary:hover{
  background:#1d4ed8!important;
  transform:translateY(-1px);
  box-shadow:0 10px 28px -8px rgba(37,99,235,.6);
}
.btn-hero-outline{
  border:1px solid #e2e8f0!important;color:#0f172a;
  padding:.95rem 2.2rem!important;background:#fff;font-weight:600;
  text-transform:none;font-size:.92rem;
}
.btn-hero-outline:hover{border-color:#0f172a!important;background:#f8fafc}

/* === Hero badge — Minimal pill === */
.hero-badge{
  border-radius:999px;
  background:#eff6ff;color:#2563eb;
  padding:.4rem 1rem;letter-spacing:-.005em;font-size:.78rem;font-weight:500;
  text-transform:none;border:1px solid #dbeafe;
  display:inline-flex;align-items:center;gap:.5rem;
}
.hero-badge::before{
  content:'';width:6px;height:6px;border-radius:50%;
  background:#2563eb;box-shadow:0 0 0 3px #dbeafe;
}

/* === Sections — Generous spacing, minimal === */
.services,.orari,.reviews,.team,.contact,.gallery,.faq,.offerte-preview,.offerte-section,.turni-section,.booking-section,.blog-section{
  padding:7rem 2.5rem!important;
  background:#ffffff;
}
.reviews{background:#f8fafc}
.offerte-preview{background:#f8fafc}

/* === Hero — Split text-dominant (5/3), big image right === */
.hero{
  padding:10rem 2.5rem 7rem!important;
  background:linear-gradient(180deg,#f8fafc 0%,#ffffff 100%);
  position:relative;overflow:hidden;
}
.hero::before{
  content:'';position:absolute;top:-50%;right:-15%;
  width:700px;height:700px;border-radius:50%;
  background:radial-gradient(circle,rgba(37,99,235,.08),transparent 60%);
  pointer-events:none;
}
/* === HERO MODERNO: no visual, testo enorme LEFT-aligned tutto wide === */
.hero-inner{
  grid-template-columns:1fr!important;
  gap:2rem!important;
  max-width:1200px!important;
  margin:0 auto!important;
  text-align:left!important;
}
.hero-content{text-align:left;max-width:none}
.hero-visual{display:none!important}
.hero-sub{margin-left:0!important;margin-right:0!important;max-width:640px;text-align:left}
.hero-buttons{justify-content:flex-start!important}
.hero-stats{justify-content:flex-start!important}
.hero h1{
  font-size:clamp(3.5rem,8vw,7rem)!important;
  color:#0f172a!important;font-weight:700!important;
  letter-spacing:-.035em!important;line-height:.95!important;
  max-width:900px;
}
.hero h1 em{color:#2563eb;font-style:normal;font-weight:700;background:linear-gradient(90deg,#2563eb,#60a5fa);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero .lead,.hero-sub{color:#64748b;font-weight:400;font-size:1.14rem;max-width:520px}
.hero-visual-circle{
  width:440px;height:440px;
  background:conic-gradient(from 180deg,#eff6ff,#dbeafe,#bfdbfe,#eff6ff);
  border-radius:50%;
  box-shadow:0 30px 80px -20px rgba(37,99,235,.3);
  position:relative;
}
.hero-visual-circle::after{
  content:'';position:absolute;inset:10%;
  border-radius:50%;
  background:#ffffff;
  box-shadow:0 20px 40px -10px rgba(15,23,42,.1);
}
.hero-visual-cross::before,.hero-visual-cross::after{background:#2563eb;border-radius:3px;z-index:2}
.hero-stat-num{
  color:#0f172a;font-size:2.6rem!important;
  font-weight:700;letter-spacing:-.02em;font-family:'Outfit',sans-serif!important;
  font-feature-settings:"tnum";
}
.hero-stat-label{color:#64748b;text-transform:none;letter-spacing:-.005em;font-weight:500}
.hero-float{
  border-radius:12px;border:1px solid #e2e8f0;
  box-shadow:0 20px 40px -15px rgba(15,23,42,.12);
  background:#fff;
}
.hero-float-icon.green{background:#eff6ff;color:#2563eb;border-radius:8px}
.hero-float-icon.gold{background:#f1f5f9;color:#0f172a;border-radius:8px}

/* === Section headings — Tight, big, minimal === */
.section-heading{
  font-size:clamp(2.2rem,4.2vw,3.4rem)!important;
  color:#0f172a!important;
  font-family:'Outfit',sans-serif!important;
  font-weight:700!important;
  letter-spacing:-.025em!important;
  line-height:1.05!important;
}
.section-heading em,.about-title em{
  color:#2563eb;font-style:normal;font-weight:700;
  background:linear-gradient(90deg,#2563eb,#60a5fa);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.section-tag,.contact-tag{
  color:#2563eb!important;font-size:.76rem!important;
  letter-spacing:-.005em!important;text-transform:none!important;
  font-weight:600!important;
  display:inline-flex;align-items:center;gap:.5rem;
}
.section-tag::before,.contact-tag::before{
  content:'';width:8px;height:8px;background:#2563eb;
  border-radius:50%;box-shadow:0 0 0 3px #dbeafe;
}

/* === FIRMA MODERNO: Section counter "01 02 03..." stile Stripe/Apple docs ===
   Ogni sezione ha un grande numero monospace davanti al section-heading,
   incrementato automaticamente via CSS counter. */
body[data-theme="moderno"]{counter-reset:section-num}
section.services,section.gallery,section.team,section.reviews,section.faq,
section.offerte-preview,section.blog-section,section.contact{counter-increment:section-num}
section.services .section-heading::before,
section.gallery .section-heading::before,
section.team .section-heading::before,
section.reviews .section-heading::before,
section.faq .section-heading::before,
section.offerte-preview .section-heading::before,
section.blog-section .section-heading::before{
  content:counter(section-num,decimal-leading-zero);
  display:block;
  font-family:ui-monospace,'SF Mono','Monaco','Courier New',monospace;
  font-size:.82rem;
  font-weight:500;
  color:#2563eb;
  letter-spacing:.12em;
  margin-bottom:.6rem;
  position:relative;
}
section.services .section-heading::before{content:'01 \2014 SERVIZI'}
section.offerte-preview .section-heading::before{content:'02 \2014 PRODOTTI'}
section.gallery .section-heading::before{content:'03 \2014 GALLERIA'}
section.team .section-heading::before{content:'04 \2014 TEAM'}
section.reviews .section-heading::before{content:'05 \2014 TESTIMONIANZE'}
section.faq .section-heading::before{content:'06 \2014 FAQ'}
section.blog-section .section-heading::before{content:'07 \2014 BLOG'}
/* Il section-tag già presente diventa nascosto per non duplicare */
.section-tag{display:none!important}

/* === Nav — Minimal, sticky with progress === */
.nav{
  background:rgba(255,255,255,.85)!important;
  backdrop-filter:blur(20px);
  border-bottom:1px solid #f1f5f9!important;
}
.nav-name,.nav .brand{color:#0f172a!important;font-family:'Outfit',sans-serif!important;font-weight:700;letter-spacing:-.02em}
.nav-links a:not(.nav-cta){
  color:#64748b!important;font-weight:500;
  position:relative;transition:color .2s;
}
.nav-links a:not(.nav-cta)::after{
  content:'';position:absolute;bottom:-6px;left:0;
  width:0;height:2px;background:#2563eb;
  transition:width .3s ease;
}
.nav-links a:not(.nav-cta):hover{color:#2563eb!important}
.nav-links a:not(.nav-cta):hover::after{width:100%}
.nav-cross::before,.nav-cross::after{background:#2563eb}
.nav-cta{
  background:#0f172a!important;color:#ffffff!important;
  font-size:.82rem!important;padding:.7rem 1.5rem!important;
  border-radius:999px!important;font-weight:600;
  text-transform:none;letter-spacing:-.005em;
}
.nav-cta:hover{background:#2563eb!important;transform:translateY(-1px)}
.nav.scrolled{background:rgba(255,255,255,.92);box-shadow:0 1px 0 rgba(15,23,42,.04)}
.mobile-overlay{background:#0f172a}
.mobile-overlay a{color:#f8fafc}
.mobile-overlay a:hover{color:#60a5fa}

/* === About — Dark slate minimal === */
.about{
  background:#0f172a!important;color:#cbd5e1!important;border-radius:0;
  padding:7rem 3rem!important;
}
.about::before,.about::after{border-color:rgba(37,99,235,.15)!important}
.about h1,.about h2,.about h3,.about-title{color:#ffffff!important;letter-spacing:-.02em}
.about-title em{color:#60a5fa;font-style:normal;background:linear-gradient(90deg,#60a5fa,#93c5fd);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.about-stat-num{color:#60a5fa;font-family:'Outfit',sans-serif;font-weight:700;font-feature-settings:"tnum"}
.about-quote{border-color:#2563eb;color:#cbd5e1;border-left-width:3px}
.about-values li{color:#cbd5e1}
.about-values li::before{background:#2563eb;border-radius:2px}

/* === Reviews === */
.review-card{padding:2.2rem 2rem!important;text-align:left}
.review-stars{color:#2563eb;font-size:1rem;letter-spacing:.1em}
.review-author{color:#0f172a;font-weight:700;font-family:'Outfit',sans-serif}
.review-text{color:#475569;font-style:normal;font-size:1rem;line-height:1.75}
.review-card::before{
  content:'"';
  position:absolute;top:.2rem;left:1.2rem;
  font-family:Georgia,serif;font-size:4rem;line-height:.8;
  color:#e2e8f0;pointer-events:none;
}

/* === Team === */
.team-photo{
  border-radius:8px!important;
  width:100%!important;height:220px!important;
  object-fit:cover;
  filter:grayscale(60%);
  transition:all .4s;
}
.team-card:hover .team-photo{filter:grayscale(0%)}
.team-card{padding:1.6rem!important;text-align:left}
.team-role{color:#2563eb;font-weight:500;font-size:.8rem}
.team-name{font-family:'Outfit',sans-serif;color:#0f172a;font-size:1.15rem;font-weight:600}

/* === Gallery — Grid minimal === */
.gallery-grid{gap:.8rem!important}
.gallery-grid img,.gallery-grid a{
  border-radius:8px!important;
  filter:grayscale(15%);
  transition:all .4s cubic-bezier(.25,.46,.45,.94);
}
.gallery-grid img:hover,.gallery-grid a:hover{
  transform:scale(1.02);
  filter:grayscale(0%);
  box-shadow:0 20px 40px -10px rgba(15,23,42,.15);
}

/* === Offerte === */
.offerta-badge{
  background:#2563eb;color:#ffffff;border-radius:999px;
  padding:.3rem 1rem;font-weight:600;font-size:.74rem;
  letter-spacing:-.005em;
}
.offerta-scadenza{color:#64748b;font-weight:500}
.offerta-title{font-family:'Outfit',sans-serif;color:#0f172a;font-weight:600}
.offerta-card img{border-radius:8px 8px 0 0}

/* === Blog === */
.cat-news,.cat-offerta,.cat-blog{
  background:#f1f5f9;color:#0f172a;
  border-radius:999px;padding:.3rem .9rem;
  font-size:.72rem;font-weight:600;
  border:none;text-transform:none;letter-spacing:-.005em;
}
.cat-offerta{background:#eff6ff;color:#2563eb}
.blog-card h3{font-family:'Outfit',sans-serif;color:#0f172a;font-weight:600}
.blog-card img{border-radius:8px 8px 0 0}

/* === Contact === */
.contact{background:#f8fafc}
.contact-card{background:#ffffff}
.contact-card a{color:#0f172a}
.contact-card a:hover{color:#2563eb}

/* === Footer — Ultra minimal === */
.site-footer{
  background:#0f172a;color:#94a3b8;
  border-top:1px solid #1e293b;
  padding-top:4rem!important;
}
.site-footer a{color:#94a3b8;transition:color .2s}
.site-footer a:hover{color:#60a5fa}
.footer-logo{color:#ffffff;font-family:'Outfit',sans-serif;font-weight:700;letter-spacing:-.02em}
.footer-cross::before,.footer-cross::after{background:#2563eb}
.footer-col h4{color:#ffffff;font-family:'Outfit',sans-serif;font-weight:600;text-transform:none;letter-spacing:-.005em;font-size:.92rem}
.footer-bottom{border-top:1px solid #1e293b}
.footer-bottom a{color:#60a5fa}

/* === FAQ === */
.faq-item{background:#fff;border:1px solid #e2e8f0;box-shadow:none;border-radius:8px!important}
.faq-item.open{border-color:#2563eb;box-shadow:0 0 0 1px #2563eb,0 8px 24px -8px rgba(37,99,235,.2)}
.faq-item.open .faq-question{color:#2563eb}
.faq-question{font-family:'Outfit',sans-serif;color:#0f172a;font-weight:600}

/* === Turni === */
.turni-day.today{outline-color:#2563eb;outline-width:2px}
.turni-event{border-left-color:#2563eb;border-left-width:3px;border-radius:6px}

/* === Forms === */
.booking-form input,.booking-form textarea,.booking-form select{
  border-radius:8px!important;border:1px solid #e2e8f0!important;background:#fff;
  padding:.85rem 1rem;font-family:'Outfit',sans-serif;
  transition:all .2s;
}
.booking-form input:focus,.booking-form textarea:focus{
  border-color:#2563eb;outline:none;
  box-shadow:0 0 0 3px rgba(37,99,235,.1);
}
.booking-form label{color:#475569;font-weight:500;text-transform:none;letter-spacing:-.005em;font-size:.85rem}

/* === Brands === */
.brands{border-color:#f1f5f9;background:#f8fafc}
.brands img{filter:grayscale(100%);opacity:.6;transition:all .3s}
.brands img:hover{filter:grayscale(0%);opacity:1}

/* === Filter / Pagination === */
.filter-btn{
  border:1px solid #e2e8f0;background:#fff;color:#475569;
  border-radius:999px;font-weight:500;font-size:.85rem;
  padding:.5rem 1.2rem;
}
.filter-btn.active,.filter-btn:hover{background:#0f172a;color:#fff;border-color:#0f172a}
.page-btn{border:1px solid #e2e8f0;border-radius:8px;background:#fff;font-weight:500}
.page-btn.active,.page-btn:hover{background:#0f172a;color:#fff;border-color:#0f172a}

/* === Cookie === */
.cookie-banner{background:#0f172a;color:#cbd5e1;border-top:1px solid #1e293b}
.cookie-banner button{background:#2563eb;color:#fff;border-radius:999px;font-weight:600}
.cookie-banner button:hover{background:#1d4ed8}

/* === Links === */
a{color:#0f172a;transition:color .2s}
a:hover{color:#2563eb}

/* === Mobile === */
@media(max-width:900px){
  .hero-inner{grid-template-columns:1fr!important;text-align:center}
  .hero-visual{display:none}
}
@media(max-width:768px){
  .hero{padding:7rem 1.5rem 4rem!important}
  .services,.orari,.reviews,.team,.contact,.faq,.offerte-preview,.about{padding:4rem 1.5rem!important}
  .svc-card::before{font-size:4rem;top:-.4rem;right:-.2rem}
}