/**
 * AGstudio - Tema Light (Preview)
 * Stile: card bianche, colori pastello, ombre delicate, testi scuri leggibili
 * Attivato via cookie theme_preview=light
 */

/* ============================================================
   1. BASE & BACKGROUND
   ============================================================ */
html.theme-light,
html.theme-light body {
    background: #f8fafc !important;
    color: #1e293b !important;
}

html.theme-light .animated-bg {
    opacity: 0.04 !important;
}

html.theme-light .scroll-progress {
    background: linear-gradient(90deg, #2563eb 0%, #0ea5e9 50%, #06b6d4 100%) !important;
}

/* ============================================================
   2. NAVIGATION
   ============================================================ */
html.theme-light nav {
    background: rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: blur(20px) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

html.theme-light nav a,
html.theme-light nav button {
    color: #334155 !important;
}

html.theme-light nav a:hover,
html.theme-light nav button:hover {
    color: #2563eb !important;
}

html.theme-light nav .gradient-text {
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}

html.theme-light nav .absolute {
    background: rgba(255, 255, 255, 0.98) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1) !important;
}

html.theme-light nav .absolute a {
    color: #475569 !important;
}

html.theme-light nav .absolute a:hover {
    background: rgba(37, 99, 235, 0.08) !important;
    color: #2563eb !important;
}

html.theme-light #mobileMenu {
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(20px) !important;
    border-top-color: rgba(0, 0, 0, 0.06) !important;
}

html.theme-light #mobileMenu a {
    color: #334155 !important;
}

html.theme-light #mobileMenu a:hover {
    background: rgba(37, 99, 235, 0.06) !important;
    color: #2563eb !important;
}

html.theme-light #mobileMenu .text-gray-500 {
    color: #94a3b8 !important;
}

html.theme-light #mobileMenu .border-white\/10 {
    border-color: rgba(0, 0, 0, 0.06) !important;
}

html.theme-light nav svg {
    color: #334155 !important;
    stroke: #334155 !important;
}

/* Logo AGstudio nella nav → nero premium */
html.theme-light nav .gradient-text {
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    -webkit-text-fill-color: #0f172a !important;
    color: #0f172a !important;
    font-weight: 900 !important;
    letter-spacing: -0.03em !important;
    font-size: 1.6rem !important;
}

/* ============================================================
   3. TYPOGRAPHY — Colori globali
   ============================================================ */
html.theme-light h1,
html.theme-light h2,
html.theme-light h3,
html.theme-light h4,
html.theme-light h5,
html.theme-light h6 {
    color: #0f172a !important;
}

html.theme-light .gradient-text {
    background: linear-gradient(135deg, #2563eb 0%, #0ea5e9 50%, #0891b2 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

html.theme-light .text-white { color: #0f172a !important; }
html.theme-light .text-gray-300 { color: #334155 !important; }
html.theme-light .text-gray-400 { color: #475569 !important; }
html.theme-light .text-gray-500 { color: #64748b !important; }
html.theme-light .text-white\/50,
html.theme-light .text-white\/60,
html.theme-light .text-white\/70,
html.theme-light .text-white\/80 { color: #64748b !important; }

/* Accent colors */
html.theme-light .text-cyan-400,
html.theme-light .text-cyan-300 { color: #0284c7 !important; }
html.theme-light .text-cyan-500 { color: #0369a1 !important; }
html.theme-light .text-purple-400 { color: #7c3aed !important; }
html.theme-light .text-red-400 { color: #ef4444 !important; }
html.theme-light .text-green-400 { color: #16a34a !important; }
html.theme-light .text-yellow-400 { color: #ca8a04 !important; }
html.theme-light .text-blue-400 { color: #2563eb !important; }

html.theme-light strong.text-white { color: #0f172a !important; }
html.theme-light strong.text-cyan-400 { color: #0284c7 !important; }
html.theme-light strong.text-purple-400 { color: #7c3aed !important; }

/* ============================================================
   4. GLASS EFFECT — Card base per tutto il sito
   ============================================================ */
html.theme-light .glass {
    background: white !important;
    backdrop-filter: none !important;
    border: 1px solid rgba(0, 0, 0, 0.07) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

html.theme-light .glass:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06) !important;
}

/* ============================================================
   5. SECTIONS — Sfondi e separatori
   ============================================================ */
html.theme-light section {
    border-bottom-color: rgba(0, 0, 0, 0.03) !important;
}

html.theme-light section::after {
    background: linear-gradient(90deg, transparent, rgba(37, 99, 235, 0.06), transparent) !important;
}

/* Sezioni con sfondo alternate leggero */
html.theme-light section:nth-child(even) {
    background-color: rgba(241, 245, 249, 0.5) !important;
}

html.theme-light .bg-black,
html.theme-light .bg-gray-900,
html.theme-light .bg-gray-950 { background-color: #f8fafc !important; }

html.theme-light .bg-gray-900\/50,
html.theme-light .bg-gray-800\/50,
html.theme-light .bg-black\/50 { background-color: rgba(241, 245, 249, 0.5) !important; }

html.theme-light .bg-gray-800 { background-color: #f1f5f9 !important; }

/* Section gradient backgrounds → subtle pastello */
html.theme-light [class*="via-blue-950"],
html.theme-light [class*="via-purple-950"],
html.theme-light [class*="via-cyan-950"] {
    background: transparent !important;
}

/* ============================================================
   6. GRADIENT PIENI → Testo bianco (bottoni, badge, icone)
   Regola universale: qualsiasi gradient con colore pieno
   ============================================================ */
html.theme-light [class*="bg-gradient-to-"][class*="from-cyan-5"]:not([class*="/"]),
html.theme-light [class*="bg-gradient-to-"][class*="from-blue-5"]:not([class*="/"]),
html.theme-light [class*="bg-gradient-to-"][class*="from-purple-5"]:not([class*="/"]),
html.theme-light [class*="bg-gradient-to-"][class*="from-purple-6"]:not([class*="/"]),
html.theme-light .btn-glow[class*="bg-gradient"],
html.theme-light .btn-glow {
    color: white !important;
}

html.theme-light [class*="bg-gradient-to-"][class*="from-cyan-5"]:not([class*="/"]) *,
html.theme-light [class*="bg-gradient-to-"][class*="from-blue-5"]:not([class*="/"]) *,
html.theme-light [class*="bg-gradient-to-"][class*="from-purple-5"]:not([class*="/"]) *,
html.theme-light [class*="bg-gradient-to-"][class*="from-purple-6"]:not([class*="/"]) *,
html.theme-light .btn-glow[class*="bg-gradient"] *,
html.theme-light .btn-glow * {
    color: white !important;
    -webkit-text-fill-color: white !important;
}

/* ============================================================
   7. GRADIENT CON OPACITA → Sfondo pastello, testo scuro
   (from-xxx/10, from-xxx/5, from-xxx/20)
   ============================================================ */
html.theme-light [class*="bg-gradient"][class*="/"] {
    background: rgba(241, 245, 249, 0.5) !important;
}

html.theme-light [class*="bg-gradient"][class*="/"] *:not([class*="bg-gradient"]) {
    color: inherit !important;
    -webkit-text-fill-color: inherit !important;
}

/* ============================================================
   8. BG UTILITY OVERRIDES
   ============================================================ */
html.theme-light .bg-white\/5,
html.theme-light .bg-white\/10 { background-color: #f1f5f9 !important; }

html.theme-light .bg-cyan-500\/10,
html.theme-light .bg-cyan-500\/20 { background-color: rgba(2, 132, 199, 0.08) !important; }

html.theme-light .bg-purple-500\/20,
html.theme-light .bg-purple-500\/10 { background-color: rgba(124, 58, 237, 0.08) !important; }

/* ============================================================
   9. BORDER OVERRIDES
   ============================================================ */
html.theme-light .border-white\/10,
html.theme-light .border-white\/20 { border-color: rgba(0, 0, 0, 0.06) !important; }

html.theme-light .border-cyan-500\/50,
html.theme-light .border-cyan-500\/30 { border-color: rgba(2, 132, 199, 0.2) !important; }

html.theme-light .border-purple-500\/30,
html.theme-light .border-purple-500\/20 { border-color: rgba(124, 58, 237, 0.15) !important; }

html.theme-light .border-red-500\/30 { border-color: rgba(239, 68, 68, 0.15) !important; }
html.theme-light .border-green-500\/30 { border-color: rgba(34, 197, 94, 0.15) !important; }

/* ============================================================
   10. SHADOW OVERRIDES
   ============================================================ */
html.theme-light .shadow-lg { box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06) !important; }
html.theme-light .shadow-2xl { box-shadow: 0 25px 50px rgba(0, 0, 0, 0.08) !important; }

/* ============================================================
   11. CARDS — Portfolio, Glass, generic
   ============================================================ */
html.theme-light .portfolio-card {
    background: white !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    border-radius: 16px !important;
}

html.theme-light .portfolio-card:hover .portfolio-image-wrapper {
    box-shadow: 0 20px 40px rgba(37, 99, 235, 0.12) !important;
}

html.theme-light .skill-badge {
    background: white !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    color: #334155 !important;
}

html.theme-light .skill-badge:hover {
    box-shadow: 0 8px 24px rgba(37, 99, 235, 0.1) !important;
    border-color: rgba(37, 99, 235, 0.15) !important;
}

/* ============================================================
   12. SERVIZI — Inline styles override
   ============================================================ */
html.theme-light .servizi-card {
    background: #fff !important;
    border: 1px solid rgba(0, 0, 0, 0.07) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

html.theme-light .servizi-card:hover {
    box-shadow: 0 12px 32px rgba(37, 99, 235, 0.1) !important;
    border-color: rgba(37, 99, 235, 0.12) !important;
}

html.theme-light .servizi-card h3 { color: #0f172a !important; }
html.theme-light .servizi-card p { color: #475569 !important; }
html.theme-light .servizi-card li { color: #475569 !important; }
html.theme-light .servizi-card div[style*="border-top"] { border-color: rgba(0, 0, 0, 0.06) !important; }
html.theme-light .servizi-card div[style*="color:#22d3ee"] { color: #0284c7 !important; }
html.theme-light .servizi-card span[style*="background:#06b6d4"] { background: #0284c7 !important; }
html.theme-light .servizi-card span[style*="background:rgba(6,182,212"] {
    background: rgba(2, 132, 199, 0.08) !important;
    border-color: #0284c7 !important;
    color: #0284c7 !important;
}

/* CTA box servizi */
html.theme-light #servizi > div > div:last-child > div {
    background: white !important;
    border: 1px solid rgba(0, 0, 0, 0.07) !important;
}

html.theme-light #servizi a[style*="background:rgba(255,255,255,0.05)"] {
    background: #f1f5f9 !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
    color: #334155 !important;
}

/* ============================================================
   13. FORMS / INPUTS
   ============================================================ */
html.theme-light input,
html.theme-light textarea,
html.theme-light select {
    background: white !important;
    border-color: #d1d5db !important;
    color: #1e293b !important;
}

html.theme-light input:focus,
html.theme-light textarea:focus,
html.theme-light select:focus {
    border-color: #2563eb !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1) !important;
}

html.theme-light input::placeholder,
html.theme-light textarea::placeholder {
    color: #94a3b8 !important;
}

/* ============================================================
   14. FOOTER — Resta dark per contrasto
   ============================================================ */
html.theme-light footer {
    background: #0f172a !important;
    color: #e2e8f0 !important;
}

html.theme-light footer * {
    color: inherit !important;
}

html.theme-light footer a { color: #94a3b8 !important; }
html.theme-light footer a:hover { color: #60a5fa !important; }
html.theme-light footer .gradient-text { -webkit-text-fill-color: transparent !important; }
html.theme-light footer h1,
html.theme-light footer h2,
html.theme-light footer h3,
html.theme-light footer h4 { color: #e2e8f0 !important; }

/* ============================================================
   15. WIDGETS & BANNERS
   ============================================================ */
html.theme-light .accessibility-widget {
    background: white !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1) !important;
}

/* Accessibility Panel */
html.theme-light #accessibilityPanel {
    background-color: white !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12) !important;
}

html.theme-light #accessibilityPanel h3 {
    color: #0f172a !important;
}

html.theme-light #accessibilityPanel .border-b {
    border-color: rgba(0, 0, 0, 0.06) !important;
}

/* Option cards */
html.theme-light #accessibilityPanel .bg-white\/5 {
    background: #f8fafc !important;
    border-color: rgba(0, 0, 0, 0.06) !important;
}

html.theme-light #accessibilityPanel .bg-white\/5:hover,
html.theme-light #accessibilityPanel .hover\:bg-white\/10:hover {
    background: #f1f5f9 !important;
}

html.theme-light #accessibilityPanel .text-white {
    color: #0f172a !important;
}

html.theme-light #accessibilityPanel .text-gray-400 {
    color: #64748b !important;
}

html.theme-light #accessibilityPanel .text-purple-400 {
    color: #7c3aed !important;
}

/* Close button */
html.theme-light #closeAccessibility {
    color: #94a3b8 !important;
}

html.theme-light #closeAccessibility:hover {
    color: #334155 !important;
}

/* Toggle button */
html.theme-light #accessibilityToggle {
    background: white !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08) !important;
}

html.theme-light #accessibilityToggle:hover {
    border-color: rgba(124, 58, 237, 0.3) !important;
}

/* Reset button */
html.theme-light #resetAccessibility {
    background: rgba(239, 68, 68, 0.08) !important;
    border-color: rgba(239, 68, 68, 0.2) !important;
    color: #0f172a !important;
}

html.theme-light .cookie-banner {
    background: white !important;
    border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08) !important;
    color: #334155 !important;
}

/* Carousel */
html.theme-light .cr-card { color: #475569 !important; }

/* ============================================================
   16. OVERFLOW FIX — Per grid/flex che si rompono
   ============================================================ */
html.theme-light section,
html.theme-light section > div,
html.theme-light .grid,
html.theme-light .flex,
html.theme-light [class*="flex-col"],
html.theme-light [class*="grid-cols"] {
    overflow: visible !important;
}

/* ============================================================
   17. HOVER STATES — bg-white/10 su light diventa leggero
   ============================================================ */
html.theme-light .hover\:bg-white\/10:hover {
    background-color: rgba(241, 245, 249, 0.8) !important;
}

/* ============================================================
   18. CHATBOT-AI SECTION — Colori pastello leggibili
   ============================================================ */

/* Hero card principale */
html.theme-light #chatbot-ai .glass {
    background: white !important;
    border-color: rgba(124, 58, 237, 0.1) !important;
}

/* Testi dentro chatbot section */
html.theme-light #chatbot-ai .text-gray-300,
html.theme-light #chatbot-ai span.text-gray-300 {
    color: #334155 !important;
}

html.theme-light #chatbot-ai .text-gray-400 {
    color: #475569 !important;
}

html.theme-light #chatbot-ai .text-gray-500 {
    color: #64748b !important;
}

html.theme-light #chatbot-ai strong.text-white {
    color: #0f172a !important;
}

html.theme-light #chatbot-ai .text-white {
    color: #0f172a !important;
}

/* Chat mock — bot bubbles: sfondo pastello, testo scuro */
html.theme-light #chatbot-ai .bg-white\/10 {
    background: #f1f5f9 !important;
    border-color: rgba(124, 58, 237, 0.12) !important;
}

html.theme-light #chatbot-ai .bg-white\/10 .text-gray-300,
html.theme-light #chatbot-ai .bg-white\/10.text-gray-300,
html.theme-light #chatbot-ai div[class*="bg-white/10"] {
    color: #334155 !important;
}

/* Chat mock — user bubbles: gradient pieno, testo bianco */
html.theme-light #chatbot-ai .bg-gradient-to-r.from-purple-500 {
    color: white !important;
}

html.theme-light #chatbot-ai .bg-gradient-to-r.from-purple-500 * {
    color: white !important;
    -webkit-text-fill-color: white !important;
}

/* Chat header gradient — testo bianco */
html.theme-light #chatbot-ai .bg-gradient-to-r.from-purple-600 {
    color: white !important;
}

html.theme-light #chatbot-ai .bg-gradient-to-r.from-purple-600 * {
    color: white !important;
    -webkit-text-fill-color: white !important;
}

/* Icone check pastello viola */
html.theme-light #chatbot-ai .bg-purple-500\/20 {
    background: rgba(124, 58, 237, 0.08) !important;
}

html.theme-light #chatbot-ai .text-purple-400 {
    color: #7c3aed !important;
}

/* Feature cards sotto */
html.theme-light #chatbot-ai .glass.rounded-2xl {
    background: white !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
}

html.theme-light #chatbot-ai .glass.rounded-2xl:hover {
    border-color: rgba(124, 58, 237, 0.15) !important;
    box-shadow: 0 8px 24px rgba(124, 58, 237, 0.08) !important;
}

/* Feature card titles */
html.theme-light #chatbot-ai h4.text-white {
    color: #0f172a !important;
}

/* Feature card list items */
html.theme-light #chatbot-ai ul .text-gray-500,
html.theme-light #chatbot-ai li {
    color: #64748b !important;
}

/* CTA box at bottom */
html.theme-light #chatbot-ai .glass.rounded-3xl {
    background: white !important;
    border: 1px solid rgba(124, 58, 237, 0.1) !important;
}

/* Process steps circles */
html.theme-light #chatbot-ai .bg-purple-500\/20 svg {
    color: #7c3aed !important;
}

/* Powered by text */
html.theme-light #chatbot-ai .text-center.text-gray-500 {
    color: #94a3b8 !important;
}

/* White/20 bg inside chat mock */
html.theme-light #chatbot-ai .bg-white\/20 {
    background: rgba(255, 255, 255, 0.3) !important;
}

/* ============================================================
   19. CHATBOT WIDGET FLOTTANTE (basso destra)
   ============================================================ */

/* Window container */
html.theme-light #chatbot-window {
    background: white !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15) !important;
}

/* Messages area */
html.theme-light #chatbot-messages {
    background: #f8fafc !important;
}

/* Bot message bubbles */
html.theme-light .message-bot {
    background: white !important;
    color: #334155 !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

/* User message bubbles — gradient stays, text white */
html.theme-light .message-user {
    color: white !important;
}

/* Timestamps */
html.theme-light .message-timestamp {
    color: #94a3b8 !important;
}

/* Typing indicator */
html.theme-light .typing-cursor {
    color: #0284c7 !important;
}

/* Input area */
html.theme-light #chatbot-form {
    background: white !important;
    border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
}

html.theme-light #chatbot-form input {
    background: #f1f5f9 !important;
    color: #1e293b !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
}

html.theme-light #chatbot-form input::placeholder {
    color: #94a3b8 !important;
}

/* Scrollbar in chat */
html.theme-light .custom-scrollbar-chat {
    scrollbar-color: rgba(0, 0, 0, 0.15) rgba(0, 0, 0, 0.03) !important;
}

/* Label "Ciao, sono Stella!" */
html.theme-light #chatbot-label {
    background: white !important;
    border-color: rgba(124, 58, 237, 0.2) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
    color: #334155 !important;
}

html.theme-light #chatbot-label .text-cyan-300 {
    color: #0284c7 !important;
}

html.theme-light #chatbot-label .text-gray-400 {
    color: #64748b !important;
}

/* Header — gradient pastello */
html.theme-light #chatbot-window > div:first-child {
    background: linear-gradient(135deg, #818cf8 0%, #67e8f9 100%) !important;
}

/* Input area bottom — bianco pulito */
html.theme-light #chatbot-window .bg-gray-900\/80 {
    background: white !important;
    border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
}

/* Input field */
html.theme-light #chatbot-input {
    background: #f1f5f9 !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
    color: #1e293b !important;
}

html.theme-light #chatbot-input:focus {
    border-color: #818cf8 !important;
}

/* Send button — pastello */
html.theme-light #chatbot-form button[type="submit"] {
    background: linear-gradient(135deg, #818cf8 0%, #67e8f9 100%) !important;
}

/* Typing indicator */
html.theme-light #chatbot-typing {
    background: white !important;
    color: #64748b !important;
}

html.theme-light #chatbot-typing .text-gray-400 {
    color: #64748b !important;
}

html.theme-light #chatbot-typing .bg-cyan-400 {
    background: #818cf8 !important;
}

/* Lead modal */
html.theme-light #chatbot-lead-modal .glass {
    background: white !important;
}

/* ============================================================
   20. CONTATTI SECTION
   ============================================================ */
html.theme-light #contatti {
    background: transparent !important;
}

html.theme-light #contatti .glass {
    background: white !important;
    border: 1px solid rgba(0, 0, 0, 0.07) !important;
}

html.theme-light #contatti .glass:hover {
    box-shadow: 0 8px 24px rgba(37, 99, 235, 0.08) !important;
}

html.theme-light #contatti .text-cyan-400 {
    color: #0284c7 !important;
}

html.theme-light #contatti .text-gray-500 {
    color: #64748b !important;
}

html.theme-light #contatti .border-purple-500\/30 {
    border-color: rgba(124, 58, 237, 0.15) !important;
}

/* Email modal and other modals */
html.theme-light .bg-gray-900\/98,
html.theme-light .bg-gray-900\/95 {
    background-color: rgba(255, 255, 255, 0.98) !important;
}

/* ============================================================
   21. PREVIEW TOGGLE BANNER
   ============================================================ */
.theme-preview-banner {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 99999;
    background: #0f172a;
    color: white;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-family: 'Inter', sans-serif;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    gap: 10px;
}

.theme-preview-banner a {
    color: #60a5fa;
    text-decoration: underline;
    cursor: pointer;
}

/* ============================================================
   22. MOBILE RESPONSIVE — Fix globali tema light
   ============================================================ */
@media (max-width: 768px) {
    /* Hero section: testi più piccoli */
    html.theme-light #home p {
        font-size: clamp(0.8rem, 3.5vw, 1rem) !important;
    }

    /* Glass card padding ridotto */
    html.theme-light .glass.p-8 {
        padding: 1.25rem !important;
    }

    /* Stats: padding ridotto su mobile */
    html.theme-light #stats .glass {
        padding: 1.5rem !important;
    }

    /* Overflow fix per sezioni con contenuto largo */
    html.theme-light section {
        overflow-x: hidden !important;
    }

    /* CTA bottoni mobile: stack verticale */
    html.theme-light #servizi div[style*="display:flex"][style*="flex-wrap"] {
        flex-direction: column !important;
        align-items: center !important;
    }

    html.theme-light #servizi div[style*="display:flex"][style*="flex-wrap"] a {
        width: 100% !important;
        text-align: center !important;
        max-width: 300px !important;
    }
}