/* Hero */
.hero.obj-hero {
  background:
    linear-gradient(180deg, rgba(11,18,32,0.82) 0%, rgba(11,18,32,0.88) 45%, rgba(11,18,32,0.94) 100%),
    url('/img/obj-hero.png') right center/cover no-repeat;
  padding: 96px 0 86px;
  margin-bottom: 0 !important;
  position: relative;
  z-index: 0 !important;
}

.hero.cs-hero {
  background:
    linear-gradient(180deg, rgba(11,18,32,0.82) 0%, rgba(11,18,32,0.88) 45%, rgba(11,18,32,0.94) 100%),
    url('/img/cs-hero.png') right center/cover no-repeat;
  padding: 96px 0 86px;
  margin-bottom: 0 !important;
  position: relative;
  z-index: 0 !important;
}

.hero.vps-hero {
  background:
    linear-gradient(180deg, rgba(11,18,32,0.82) 0%, rgba(11,18,32,0.88) 45%, rgba(11,18,32,0.94) 100%),
    url('/img/vps-hero.png') right center/cover no-repeat;
  padding: 96px 0 86px;
  margin-bottom: 0 !important;
  position: relative;
  z-index: 0 !important;
}

.hero.db-hero {
  background:
    linear-gradient(180deg, rgba(11,18,32,0.82) 0%, rgba(11,18,32,0.88) 45%, rgba(11,18,32,0.94) 100%),
    url('/img/dbaas-hero.png') right center/cover no-repeat;
  padding: 96px 0 86px;
  margin-bottom: 0 !important;
  position: relative;
  z-index: 0 !important;
}


.hero,
.hero * { position: relative; z-index: 0; }

.hero-bullets { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
.hero-bullets li { display: flex; align-items: center; gap: 10px; }
.hero-bullets .dot { width: 18px; height: 18px; border-radius: 50%; background: var(--ok); flex: 0 0 18px; }

/* Toggle */
.obj-toggle { display: flex; gap: 10px; flex-wrap: wrap; margin: 16px 0 18px; }
.obj-toggle .pill {
  display: inline-flex; align-items: center; justify-content: center;
  height: 44px; padding: 0 18px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--light-card, #0e162b);
  color: var(--fg); text-decoration: none; cursor: pointer; user-select: none;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.obj-toggle .pill:hover { background: #f9fafb !important; }
.obj-toggle .pill.active {
  background: var(--accent) !important; color: #111827 !important;
  font-weight: 800; border-color: transparent !important; box-shadow: 0 2px 6px rgba(0,0,0,.08);
}

/* Table */
.table-card { background: var(--card); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow); overflow: hidden; }
.obj-table { width: 100%; border-collapse: collapse; }
.obj-table thead th {
  text-align: left; padding: 14px 16px; font-weight: 700; background: #111827; color: #e5e7eb;
  border-bottom: 1px solid var(--border); white-space: nowrap;
}
.obj-table tbody td { padding: 14px 16px; border-bottom: 1px solid var(--border); }
.obj-table tbody tr:hover { background: #0b1220; }
.td-actions { text-align: right; white-space: nowrap; }
.btn-buy { display: inline-flex; align-items: center; justify-content: center; padding: 10px 18px; border-radius: 10px; font-weight: 700; text-decoration: none; }

/* Layout helpers */
.hidden { display: none !important; }
.section { padding: 47px 0; }
.obj-head .lead { color: var(--muted); max-width: 980px; }
#cs-pricing { margin-bottom: 40px; }
#vps-pricing { margin-bottom: 40px; }

/* Headings */
.section h2,
.section h3 { font-size: 1.8rem; font-weight: 700; margin-bottom: 24px; color: var(--fg); }

/* Cards */
.card, .case {
  background: var(--card); border: 1px solid var(--border); border-radius: 16px;
  box-shadow: var(--shadow); padding: 22px 20px; transition: background .2s ease, transform .2s ease;
}
.card:hover, .case:hover { background: #111a2f; transform: translateY(-3px); }
.card h3, .card h4, .case h3, .case h4 { font-size: 1.1rem; font-weight: 700; margin-bottom: 8px; color: var(--fg); }
.card p, .case p { font-size: .95rem; line-height: 1.5; color: var(--muted); }

/* Grid */
.grid-3 { display: grid; gap: 24px; }
@media (min-width: 900px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }

/* Light palette */
:root{
  --light-bg: #f5f7fb;
  --light-fg: #0b1220;
  --light-muted: #5b6470;
  --light-card: #ffffff;
  --light-border: #e5e7eb;
  --light-header: #eef2f7;
  --light-hover: #f0f4f8;
  --header-h: 74px;
}

/* Light section base */
.light-section,
.light-section .section { background: var(--light-bg) !important; color: var(--light-fg) !important; }
.light-section h1,
.light-section h2,
.light-section h3,
.light-section h4,
.light-section h5 { color: var(--light-fg) !important; }
.light-section p,
.light-section .lead,
.light-section li { color: var(--light-muted) !important; }

/* Light cards and tables */
.light-section .card,
.light-section .case,
.light-section .table-card {
  background: var(--light-card) !important; border: 1px solid var(--light-border) !important;
  box-shadow: var(--shadow); color: var(--light-fg) !important;
}
.light-section .obj-table thead th {
  background: var(--light-header) !important; color: var(--light-fg) !important; border-bottom: 1px solid var(--light-border) !important;
}
.light-section .obj-table tbody td {
  color: var(--light-fg) !important; border-bottom: 1px solid var(--light-border) !important;
}
.light-section .obj-table tbody tr:hover { background: var(--light-hover) !important; }

/* Light toggle */
.light-section .obj-toggle .pill {
  background: #f9fafb !important; color: var(--light-fg) !important; border: 1px solid var(--light-border) !important;
}
.light-section .obj-toggle .pill.active { background: var(--accent) !important; color: #111827 !important; border-color: transparent !important; }

/* Light FAQ */
.light-section .faq-item.card { background: var(--light-card) !important; border: 1px solid var(--light-border) !important; }
.light-section .faq-item summary { color: var(--light-fg) !important; }
.light-section .faq-item .answer,
.light-section .faq-item .answer p { color: var(--light-muted) !important; }

/* Light section specific fixes */
main.light-section .obj-head,
main.light-section .obj-head * { color: var(--light-fg) !important; background: transparent !important; }
main.light-section h1,
main.light-section h2,
main.light-section h3,
main.light-section h4 { color: var(--light-fg) !important; }
main.light-section .card,
main.light-section .case {
  background: var(--light-card) !important; background-image: none !important;
  border: 1px solid var(--light-border) !important; color: var(--light-fg) !important;
}
main.light-section #faq-object-storage,
main.light-section #faq-object-storage .container,
main.light-section #faq-object-storage .faq { background: var(--light-bg) !important; }
main.light-section #faq-object-storage .faq-item.card,
main.light-section #faq-object-storage .faq-item.card summary,
main.light-section #faq-object-storage .faq-item.card .answer { background: var(--light-card) !important; }
main.light-section #faq-object-storage .chev { color: var(--light-fg) !important; }

/* Spaziatura sotto hero in area chiara */
main.light-section .obj-head { padding-top: 56px; }
main.light-section .obj-head h2 {
  font-size: 1.8rem; line-height: 1.2; margin: 0 0 12px 0; color: var(--light-fg) !important;
}
main.light-section .obj-head .lead { color: var(--light-muted) !important; }

/* Header sopra a tutto, sticky con fallback */
header,
.site-header,
.main-header,
.topbar {
  z-index: 10000 !important;
  position: sticky;
  top: 0;
  background-color: #0b1220 !important;
  background-image: none !important;
  opacity: 1 !important;
  backdrop-filter: none !important;
}

/* La navbar eredita il contesto del header, non viene resa sticky di suo */
.navbar{
  z-index: 10001;
}

@supports not (position: sticky) {
  header,
  .site-header,
  .main-header,
  .topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
  }
  body{
    padding-top: var(--header-h);
  }
}



/* Ancore e scroll offset per header fisso */
html { scroll-padding-top: var(--header-h); }
[id] { scroll-margin-top: var(--header-h); }

/* Z-index stacking fixes sotto header */
main.light-section .obj-head,
main.light-section .obj-head * { position: relative; z-index: 0 !important; }