/* ==========================================================================
   IdeeFuoriClasse — arredare-casa-online-gratis.css
   Page-specific styles for the home page (index.html)
   ========================================================================== */

/* ---------- Hero ---------- */
.hero { padding: 52px 0 44px; }
.hero .hero-grid { display: grid; gap: 30px; align-items: center; }
.hero h1 { margin-bottom: .5rem; }
.hero .hero-sub { font-size: 1.15rem; max-width: 46ch; }
.hero .hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 1.4rem; }
.hero .frame { min-height: 260px; }

.badges {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
  margin-top: 40px;
}
.badge-tile {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: 16px 18px;
  background: var(--paper);
  font-weight: 600;
  font-size: .97rem;
}
.badge-tile strong { display: block; font-size: 1.05rem; }

@media (min-width: 901px) {
  .hero .hero-grid { grid-template-columns: 1.05fr .95fr; gap: 44px; }
}

/* ---------- Come funziona: step cards ---------- */
.steps { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.step {
  position: relative;
  background: var(--paper);
  padding: 26px 22px 24px;
}
.step .step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--paper);
  background: var(--accent);
  border-radius: 60% 40% 55% 45% / 45% 55% 45% 55%;
  margin-bottom: .8rem;
}
.step h3 { display: flex; align-items: center; gap: .5rem; }
.step p:last-child { margin-bottom: 0; }

/* ---------- Servizi ---------- */
.service-card .icon-lg { color: var(--accent); }
.service-card h3 { margin-top: .6rem; }

/* ---------- Per chi ---------- */
.audience-list { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.audience-item { padding: 20px 20px 18px; background: var(--paper); }
.audience-item h3 { display: flex; align-items: center; gap: .5rem; margin-bottom: .4rem; }
.audience-item p { margin-bottom: 0; font-size: .98rem; }

/* ---------- Comparison table ---------- */
#studio-vs-app .table-scroll { margin-top: 1.4rem; }
#studio-vs-app th:first-child { width: 30%; }
#studio-vs-app td .icon { color: var(--accent); }

/* ---------- Portfolio ---------- */
.portfolio-grid { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.portfolio-card h3 { font-size: 1.08rem; margin: .9rem 0 .3rem; }
.portfolio-card p { font-size: .93rem; color: var(--ink-soft); margin-bottom: 0; }

/* ---------- Prezzi ---------- */
.price-grid { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); margin-top: 1.6rem; }
.price-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  padding: 26px 22px 24px;
}
.price-card h3 { font-size: 1.25rem; margin-bottom: .3rem; }
.price-card .price {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1.1;
  margin: .2rem 0 .1rem;
}
.price-card .price-note { font-size: .85rem; color: var(--ink-soft); margin-bottom: 1rem; }
.price-card .check-list { flex: 1 1 auto; margin-bottom: 1.2rem; font-size: .96rem; }
.price-card .btn { align-self: flex-start; }
.price-badge {
  position: absolute;
  top: -14px;
  right: 16px;
  background: var(--gold);
  color: var(--ink);
  font-size: .8rem;
  font-weight: 700;
  padding: .25rem .7rem;
  border: 2px solid var(--ink);
  border-radius: 14px 4px 12px 5px / 4px 11px 5px 14px;
}
.price-reassurance { margin-top: 1.4rem; font-weight: 600; text-align: center; }

/* ---------- Chi siamo ---------- */
.about-grid { display: grid; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); align-items: start; }

/* ---------- CTA banner ---------- */
#contatti .cta-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 1.4rem; }
#contatti .cta-mail { margin-top: 1.4rem; font-size: .95rem; margin-bottom: 0; }