/* ============================================
     DOG SITTER BRESCIA — DESIGN SYSTEM
     Palette: Gold #F5A623 / Teal #22D3EE / Lime #84CC16
     Background: Navy #0A1628
     Prefisso: dsb-
     ============================================ */

  /* === RESET === */
  .dsb *,.dsb *::before,.dsb *::after{box-sizing:border-box !important;margin:0 !important;padding:0 !important}
  .dsb a{color:inherit !important;-webkit-text-fill-color:inherit !important;text-decoration:none !important}
  .dsb img{max-width:100% !important;height:auto !important;display:block !important}
  .dsb ul,.dsb ol{list-style:none !important}

  .dsb {
    --navy: #0A1628 !important;
    --navy-light: #0F1F35 !important;
    --navy-card: #121E30 !important;
    --fg: #E8F4FD !important;
    --ink: #C4D8E8 !important;
    --muted: #8AA4B8 !important;
    --gold: #F5A623 !important;
    --gold-dark: #E8891C !important;
    --gold-soft: rgba(245,166,35,0.12) !important;
    --teal: #22D3EE !important;
    --teal-dark: #06B6D4 !important;
    --teal-soft: rgba(34,211,238,0.10) !important;
    --lime: #84CC16 !important;
    --lime-soft: rgba(132,204,22,0.10) !important;
    --green: #22C55E !important;
    --line: rgba(255,255,255,0.08) !important;
    --line-s: rgba(255,255,255,0.14) !important;
    --sh: 0 8px 28px rgba(0,0,0,0.5) !important;
    --sh-gold: 0 10px 30px rgba(245,166,35,0.22) !important;
    --sh-hover: 0 16px 44px rgba(245,166,35,0.3) !important;
    --r: 14px !important;
    --pill: 999px !important;
    --f-display: 'Sora', 'Poppins', system-ui, sans-serif !important;
    --f-body: 'DM Sans', 'Outfit', system-ui, sans-serif !important;
    --max-w: 1200px !important;
    --px: clamp(20px, 5vw, 56px) !important;
    --py: clamp(60px, 9vw, 110px) !important;
    font-family: var(--f-body) !important;
    color: var(--fg) !important;
    line-height: 1.6 !important;
    -webkit-text-fill-color: var(--fg) !important;
  }

  /* === SEZIONI === */
  .dsb-sec {
    padding: var(--py) var(--px) !important;
    position: relative !important;
    overflow: hidden !important;
  }

  .dsb-wrap {
    max-width: var(--max-w) !important;
    margin: 0 auto !important;
    position: relative !important;
    z-index: 1 !important;
  }

  .dsb-bg-1 { background: radial-gradient(1200px 600px at 10% 0%,rgba(245,166,35,0.12),transparent 50%),radial-gradient(900px 500px at 90% 20%,rgba(34,211,238,0.08),transparent 50%),var(--navy) !important; }
  .dsb-bg-2 { background: radial-gradient(1100px 550px at 85% -10%,rgba(34,211,238,0.10),transparent 50%),radial-gradient(900px 500px at 10% 110%,rgba(132,204,22,0.08),transparent 55%),var(--navy-light) !important; }
  .dsb-bg-3 { background: radial-gradient(1100px 550px at 50% -20%,rgba(245,166,35,0.08),transparent 50%),var(--navy) !important; }

  /* === TYPOGRAPHY === */
  .dsb-eye { font-size: 12px !important; color: var(--teal) !important; -webkit-text-fill-color: var(--teal) !important; text-transform: uppercase !important; letter-spacing: 0.1em !important; font-weight: 800 !important; }
  .dsb-h1 { font-family: var(--f-display) !important; font-size: clamp(32px,5.5vw,60px) !important; font-weight: 900 !important; line-height: 1.08 !important; letter-spacing: -0.025em !important; color: #fff !important; -webkit-text-fill-color: #fff !important; }
  .dsb-h2 { font-family: var(--f-display) !important; font-size: clamp(24px,3.5vw,40px) !important; font-weight: 900 !important; line-height: 1.15 !important; color: #fff !important; -webkit-text-fill-color: #fff !important; }
  .dsb-h3 { font-family: var(--f-display) !important; font-size: clamp(17px,2.2vw,22px) !important; font-weight: 800 !important; line-height: 1.3 !important; color: #fff !important; -webkit-text-fill-color: #fff !important; }
  .dsb-p { font-size: clamp(15px,1.8vw,17px) !important; line-height: 1.75 !important; color: var(--ink) !important; -webkit-text-fill-color: var(--ink) !important; }
  .dsb-gold { color: var(--gold) !important; -webkit-text-fill-color: var(--gold) !important; font-weight: 700 !important; }
  .dsb-teal { color: var(--teal) !important; -webkit-text-fill-color: var(--teal) !important; font-weight: 700 !important; }
  .dsb-sub { color: var(--muted) !important; -webkit-text-fill-color: var(--muted) !important; font-size: 15px !important; line-height: 1.6 !important; }

  /* === BUTTONS === */
  .dsb-btn { display: inline-flex !important; align-items: center !important; gap: 8px !important; font-family: var(--f-body) !important; font-weight: 800 !important; font-size: 15px !important; border-radius: 12px !important; border: 0 !important; cursor: pointer !important; transition: all 0.25s ease !important; text-decoration: none !important; }
  .dsb-btn:focus-visible { outline: 2px solid #fff !important; outline-offset: 3px !important; }
  .dsb-btn-gold { padding: 14px 30px !important; background: linear-gradient(135deg,var(--gold),var(--gold-dark)) !important; color: var(--navy) !important; -webkit-text-fill-color: var(--navy) !important; box-shadow: var(--sh-gold) !important; }
  .dsb-btn-gold:hover { background: linear-gradient(135deg,var(--teal),var(--teal-dark)) !important; color: var(--navy) !important; -webkit-text-fill-color: var(--navy) !important; transform: translateY(-3px) !important; box-shadow: var(--sh-hover) !important; }
  .dsb-btn-outline { padding: 12px 24px !important; color: var(--teal) !important; -webkit-text-fill-color: var(--teal) !important; background: transparent !important; border: 2px solid var(--teal) !important; }
  .dsb-btn-outline:hover { background: var(--teal-soft) !important; color: #fff !important; -webkit-text-fill-color: #fff !important; border-color: #fff !important; transform: translateY(-3px) !important; }

  /* === GRIDS === */
  .dsb-g2 { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: clamp(32px,5vw,64px) !important; align-items: center !important; }
  .dsb-g3 { display: grid !important; grid-template-columns: repeat(3,1fr) !important; gap: 20px !important; }
  .dsb-g4 { display: grid !important; grid-template-columns: repeat(4,1fr) !important; gap: 18px !important; }

  /* === TAGS === */
  .dsb-tag { display: inline-block !important; padding: 3px 10px !important; border-radius: var(--pill) !important; font-size: 11px !important; font-weight: 800 !important; white-space: nowrap !important; }
  .dsb-tag-hot { background: linear-gradient(90deg,var(--gold),var(--gold-dark)) !important; color: var(--navy) !important; -webkit-text-fill-color: var(--navy) !important; }
  .dsb-tag-online { background: linear-gradient(90deg,var(--teal),var(--teal-dark)) !important; color: var(--navy) !important; -webkit-text-fill-color: var(--navy) !important; }
  .dsb-tag-free { background: linear-gradient(90deg,#22c55e,#16a34a) !important; color: #fff !important; -webkit-text-fill-color: #fff !important; }
  .dsb-tag-premium { background: linear-gradient(90deg,#a855f7,#ec4899) !important; color: #fff !important; -webkit-text-fill-color: #fff !important; }
  .dsb-tag-vet { background: linear-gradient(90deg,var(--teal),var(--lime)) !important; color: var(--navy) !important; -webkit-text-fill-color: var(--navy) !important; }

  /* === SERVICE CARDS === */
  .dsb-svc { display: flex !important; flex-direction: column !important; background: linear-gradient(180deg,rgba(255,255,255,0.04),rgba(255,255,255,0.01)) !important; border: 1px solid var(--line) !important; border-radius: var(--r) !important; overflow: hidden !important; transition: all 0.28s ease !important; box-shadow: var(--sh) !important; }
  .dsb-svc:hover { border-color: rgba(245,166,35,0.35) !important; box-shadow: var(--sh-hover) !important; transform: translateY(-3px) !important; }
  .dsb-svc-head { padding: 18px 20px 0 !important; display: flex !important; align-items: center !important; gap: 10px !important; flex-wrap: wrap !important; }
  .dsb-svc-title { font-size: 16px !important; color: #fff !important; -webkit-text-fill-color: #fff !important; font-weight: 800 !important; font-family: var(--f-display) !important; }
  .dsb-svc-body { padding: 10px 20px 14px !important; display: grid !important; gap: 5px !important; font-size: 13px !important; color: var(--muted) !important; -webkit-text-fill-color: var(--muted) !important; flex-grow: 1 !important; }
  .dsb-svc-cta { display: flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; padding: 11px 20px !important; background: linear-gradient(90deg,var(--gold),var(--gold-dark)) !important; color: var(--navy) !important; -webkit-text-fill-color: var(--navy) !important; font-weight: 800 !important; font-size: 14px !important; transition: all 0.2s ease !important; text-decoration: none !important; }
  .dsb-svc-cta:hover { background: linear-gradient(135deg,var(--teal),var(--teal-dark)) !important; }
  .dsb-svc-cta::after { content: ' →' !important; }
  .dsb-svc-grid { display: grid !important; grid-template-columns: repeat(3,1fr) !important; gap: 16px !important; }
  .dsb-svc-cat { grid-column: 1 / -1 !important; font-size: 13px !important; font-weight: 800 !important; color: var(--teal) !important; -webkit-text-fill-color: var(--teal) !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; padding: 14px 0 6px !important; border-bottom: 2px solid rgba(34,211,238,0.2) !important; margin-top: 12px !important; }
  .dsb-svc-cat:first-of-type { margin-top: 0 !important; }

  /* === PILLS === */
  .dsb-pills { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; gap: 8px !important; }
  .dsb-pill { display: inline-flex !important; align-items: center !important; padding: 7px 14px !important; border-radius: var(--pill) !important; font-size: 12px !important; font-weight: 700 !important; color: var(--ink) !important; -webkit-text-fill-color: var(--ink) !important; border: 1px solid var(--line) !important; background: rgba(245,166,35,0.06) !important; transition: all 0.2s ease !important; }
  .dsb-pill:hover { background: linear-gradient(135deg,var(--gold),var(--gold-dark)) !important; color: var(--navy) !important; -webkit-text-fill-color: var(--navy) !important; transform: translateY(-2px) !important; box-shadow: var(--sh-gold) !important; }

  /* === STAT CARDS === */
  .dsb-stat { background: rgba(255,255,255,0.03) !important; border: 1px solid var(--line) !important; border-radius: 16px !important; padding: 22px !important; text-align: center !important; transition: all 0.3s ease !important; }
  .dsb-stat:hover { background: var(--gold-soft) !important; border-color: rgba(245,166,35,0.3) !important; transform: translateY(-4px) !important; }
  .dsb-stat-num { display: block !important; font-size: clamp(28px,3.5vw,42px) !important; font-weight: 900 !important; color: var(--gold) !important; -webkit-text-fill-color: var(--gold) !important; font-family: var(--f-display) !important; margin-bottom: 4px !important; }
  .dsb-stat-lbl { font-size: 12px !important; color: var(--muted) !important; -webkit-text-fill-color: var(--muted) !important; font-weight: 600 !important; }

  /* === STEPS === */
  .dsb-step { display: grid !important; gap: 12px !important; padding: 26px !important; background: linear-gradient(180deg,rgba(255,255,255,0.04),rgba(255,255,255,0.01)) !important; border: 1px solid var(--line) !important; border-radius: var(--r) !important; text-align: center !important; transition: all 0.28s ease !important; }
  .dsb-step:hover { border-color: rgba(34,211,238,0.3) !important; transform: translateY(-3px) !important; box-shadow: var(--sh-gold) !important; }
  .dsb-step-n { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 44px !important; height: 44px !important; border-radius: 50% !important; background: linear-gradient(135deg,var(--gold),var(--teal)) !important; color: var(--navy) !important; -webkit-text-fill-color: var(--navy) !important; font-size: 18px !important; font-weight: 900 !important; font-family: var(--f-display) !important; margin: 0 auto 6px !important; }
  .dsb-step p { font-size: 14px !important; color: var(--ink) !important; -webkit-text-fill-color: var(--ink) !important; line-height: 1.6 !important; }

  /* === FAQ === */
  .dsb-faq-grid { display: grid !important; gap: 10px !important; }
  .dsb-faq { background: var(--navy-card) !important; border: 1px solid var(--line) !important; border-radius: 12px !important; padding: 12px 14px !important; transition: all 0.2s ease !important; }
  .dsb-faq:hover { border-color: rgba(245,166,35,0.3) !important; }
  .dsb-faq[open] { outline: 2px solid var(--line-s) !important; }
  .dsb-faq summary { list-style: none !important; cursor: pointer !important; display: flex !important; align-items: center !important; gap: 10px !important; font-weight: 700 !important; font-size: 15px !important; color: var(--fg) !important; -webkit-text-fill-color: var(--fg) !important; }
  .dsb-faq summary::-webkit-details-marker { display: none !important; }
  .dsb-faq summary span { flex: 1 !important; }
  .dsb-faq summary::after { content: '+' !important; font-weight: 900 !important; color: var(--gold) !important; -webkit-text-fill-color: var(--gold) !important; font-size: 18px !important; }
  .dsb-faq[open] summary::after { content: '–' !important; }
  .dsb-faq[open] summary { color: var(--gold) !important; -webkit-text-fill-color: var(--gold) !important; }
  .dsb-faq-ans { margin-top: 10px !important; color: var(--ink) !important; -webkit-text-fill-color: var(--ink) !important; font-size: 14px !important; line-height: 1.65 !important; }
  .dsb-faq-ans strong { color: var(--gold) !important; -webkit-text-fill-color: var(--gold) !important; }
  .dsb-faq-ans a { color: var(--teal) !important; -webkit-text-fill-color: var(--teal) !important; text-decoration: underline !important; font-weight: 600 !important; }

  /* === TESTIMONIALS === */
  .dsb-testi { padding: 24px !important; background: rgba(255,255,255,0.03) !important; border: 1px solid var(--line) !important; border-radius: var(--r) !important; display: grid !important; gap: 12px !important; transition: all 0.28s ease !important; }
  .dsb-testi:hover { border-color: rgba(245,166,35,0.3) !important; transform: translateY(-3px) !important; }
  .dsb-testi-stars { color: var(--gold) !important; -webkit-text-fill-color: var(--gold) !important; font-size: 16px !important; letter-spacing: 2px !important; }

  /* === HERO IMG === */
  .dsb-hero-img { width: 100% !important; max-width: 440px !important; aspect-ratio: 1/1 !important; border-radius: 24px !important; overflow: hidden !important; box-shadow: 0 24px 64px rgba(0,0,0,0.5) !important; border: 2px solid var(--line-s) !important; position: relative !important; margin: 0 auto !important; }
  .dsb-hero-img img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
  .dsb-hero-img::after { content: '' !important; position: absolute !important; inset: 0 !important; background: linear-gradient(135deg,rgba(245,166,35,0.1),rgba(34,211,238,0.15)) !important; mix-blend-mode: overlay !important; pointer-events: none !important; }

  /* === CHECK === */
  .dsb-check::before { content: '✓' !important; color: var(--lime) !important; -webkit-text-fill-color: var(--lime) !important; font-weight: 900 !important; font-size: 16px !important; flex-shrink: 0 !important; margin-right: 10px !important; }

  /* === SECTION HEADER === */
  .dsb-sh { text-align: center !important; max-width: 800px !important; margin: 0 auto 40px !important; }

  /* === RESPONSIVE === */
  @media (max-width: 1024px) {
    .dsb-g2 { grid-template-columns: 1fr !important; }
    .dsb-g4 { grid-template-columns: repeat(2,1fr) !important; }
  }
  @media (min-width: 780px) { .dsb-faq-grid { grid-template-columns: 1fr 1fr !important; } }
  @media (max-width: 900px) { .dsb-svc-grid { grid-template-columns: repeat(2,1fr) !important; } }
  @media (max-width: 600px) {
    .dsb-g3,.dsb-g4,.dsb-svc-grid { grid-template-columns: 1fr !important; }
    .dsb-h1 { font-size: 26px !important; }
    .dsb-h2 { font-size: 22px !important; }
    .dsb-stat-num { font-size: 30px !important; }
  }