/* Updated styling for the DRR Damson home page.
 * This file defines a dark, premium maker studio aesthetic with
 * neon turquoise and green accents, warm gold tones, glassmorphism cards
 * and responsive layouts.  It also hides the original hero/promo sections
 * on the home page so that the new sections can take over.
 */

/* Colour palette */
:root {
  --bg-main: #071112;
  --bg-secondary: #0B1D1C;
  --card-bg: rgba(13, 44, 43, 0.72);
  --accent: #19F5D0;
  --accent2: #45F882;
  --wood: #D6A756;
  --text-primary: #F4F1EA;
  --text-secondary: #B9B6AA;
  --border-col: #1E5F5A;
}

/* Hide the old sections only on the updated home page */
.home-updated .hero-splash,
.home-updated .promo,
.home-updated .section-title.container.fade-in,
.home-updated .container.fade-in .tiles,
.home-updated .allegro-section,
.home-updated .cta-grid,
.home-updated .about {
  display: none !important;
}

body.home-updated {
  /* Override any background image or gradient defined in other styles */
  background: var(--bg-main);
  color: var(--text-primary);
  font-family: 'Inter', sans-serif;
}

/* ------------------------------------------------------------------
 * Header / Navigation overrides
 *
 * The existing theme defines a semi–transparent header with neon
 * highlights. For the updated home page we darken the header, set
 * typography colours to match the new palette and tweak hover states.
 * These rules only apply when the body has the `home-updated` class to
 * avoid affecting other pages.
 */

body.home-updated .site-header {
  background: rgba(8, 12, 16, 0.8);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-col);
}

body.home-updated .main-nav a {
  color: var(--text-primary);
  opacity: 0.9;
  font-size: 0.9rem;
  padding: 12px 14px;
}

body.home-updated .main-nav a:hover {
  background: rgba(25, 245, 208, 0.16);
  color: var(--accent);
}

body.home-updated .nav-burger span {
  background: var(--text-primary);
}

/* Generic container */
.container-small {
  width: min(800px, 90%);
  margin: 0 auto;
  text-align: center;
  padding: 40px 0;
}

/* Hero section */
.hero-updated {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 20px;
  text-align: center;
  background:
    radial-gradient(circle at 10% 20%, rgba(25,245,208,0.12), transparent 40%),
    radial-gradient(circle at 80% 30%, rgba(214,167,86,0.10), transparent 40%),
    var(--bg-secondary);
}
.hero-updated h1 {
  font-size: 2.2rem;
  margin-bottom: 16px;
  color: var(--accent);
  line-height: 1.2;
}
.hero-updated p {
  font-size: 1.1rem;
  max-width: 800px;
  margin-bottom: 32px;
  color: var(--text-secondary);
}
.cta-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  margin-bottom: 32px;
}
.cta-btn {
  padding: 12px 24px;
  border-radius: 24px;
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.cta-primary {
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  color: #041010;
  box-shadow: 0 4px 20px rgba(25,245,208,0.3);
}
.cta-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(25,245,208,0.5);
}
.cta-secondary {
  border: 1px solid var(--wood);
  color: var(--wood);
}
.cta-secondary:hover {
  background: rgba(214,167,86,0.1);
}
.benefits {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
  margin-top: 20px;
}
.benefit-item {
  flex: 1 1 200px;
  max-width: 220px;
  text-align: center;
}
.benefit-item h4 {
  color: var(--accent);
  margin-top: 8px;
  margin-bottom: 4px;
  font-size: 1.1rem;
}
.benefit-item p {
  color: var(--text-secondary);
  font-size: 0.9rem;
}

/* Offers grid */
.offers-updated {
  padding: 60px 20px;
}
.offers-updated h2 {
  text-align: center;
  margin-bottom: 32px;
  font-size: 2rem;
  color: var(--accent);
}
.offer-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.offer-card {
  background: var(--card-bg);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(25,245,208,0.18);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(0,0,0,0.35);
  transition: transform 0.2s ease;
  display: flex;
  flex-direction: column;
}
.offer-card:hover {
  transform: translateY(-4px);
}
.offer-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}
.offer-card h3 {
  margin: 12px 16px 4px;
  color: var(--text-primary);
  font-size: 1.1rem;
}
.offer-card p {
  margin: 0 16px 12px;
  font-size: 0.9rem;
  color: var(--text-secondary);
  flex-grow: 1;
}
.offer-card .card-btn {
  margin: 0 16px 16px;
  display: inline-block;
  padding: 8px 16px;
  background: var(--accent);
  color: #041010;
  border-radius: 14px;
  text-decoration: none;
  font-weight: 600;
  transition: transform 0.2s ease, box-shadow 0.3s ease;
}
.offer-card .card-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(25,245,208,0.4);
}

/* Personalization section */
.personalization-updated h2,
.allegro-updated h2,
.generators-updated h2,
.realisations-updated h2,
.about-updated h2,
.contact-updated h2 {
  text-align: center;
  margin-bottom: 24px;
  font-size: 2rem;
  color: var(--accent);
}
.personalization-updated p,
.allegro-updated p,
.generators-updated p,
.about-updated p,
.contact-updated p {
  max-width: 800px;
  margin: 0 auto 20px;
  color: var(--text-secondary);
  line-height: 1.5;
  font-size: 1rem;
}
.personalization-updated .cta-btn {
  margin-top: 16px;
}

/* Allegro section */
.allegro-updated {
  padding: 60px 20px;
  text-align: center;
}

/* Generators */
.generators-updated {
  padding: 60px 20px;
}
.generators-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  max-width: 900px;
  margin: 0 auto;
}
.generator-card {
  background: var(--card-bg);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(25,245,208,0.18);
  border-radius: 20px;
  padding: 24px 16px;
  text-align: center;
  box-shadow: 0 12px 30px rgba(0,0,0,0.35);
}
.generator-card h3 {
  margin-bottom: 8px;
  color: var(--text-primary);
  font-size: 1.2rem;
}
.generator-card p {
  margin-bottom: 16px;
  color: var(--text-secondary);
  font-size: 0.9rem;
}
.generator-card .card-btn {
  background: var(--accent);
  color: #041010;
  padding: 8px 16px;
  border-radius: 14px;
  text-decoration: none;
  font-weight: 600;
  transition: transform 0.2s ease, box-shadow 0.3s ease;
}
.generator-card .card-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(25,245,208,0.4);
}

/* Realisations */
.realisations-updated {
  padding: 60px 20px;
}
.realisations-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  max-width: 1000px;
  margin: 0 auto;
}
.realisations-grid img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 8px 16px rgba(0,0,0,0.4);
  transition: transform 0.3s ease;
}
.realisations-grid img:hover {
  transform: scale(1.05);
}

/* About, contact sections */
.about-updated,
.contact-updated {
  padding: 60px 20px;
  text-align: center;
}
.contact-updated a {
  color: var(--accent);
}
.contact-updated a.cta-btn {
  margin-top: 16px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .hero-updated h1 {
    font-size: 1.8rem;
  }
  .hero-updated p {
    font-size: 1rem;
  }
  .offers-updated h2,
  .personalization-updated h2,
  .allegro-updated h2,
  .generators-updated h2,
  .realisations-updated h2,
  .about-updated h2,
  .contact-updated h2 {
    font-size: 1.6rem;
  }
}

/* ------------------------------------------------------------------
 * Order process section
 *
 * Four-step guide showing how to place a custom order. Follows the
 * same glassmorphism style as other cards and uses a responsive grid.
 */
.order-updated {
  padding: 60px 20px;
}
.order-updated h2 {
  text-align: center;
  margin-bottom: 32px;
  font-size: 2rem;
  color: var(--accent);
}
.order-steps {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  max-width: 1000px;
  margin: 0 auto;
}
.order-step {
  background: var(--card-bg);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(25,245,208,0.18);
  border-radius: 20px;
  padding: 20px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.35);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.order-step h3 {
  margin-bottom: 8px;
  color: var(--accent);
  font-size: 1.1rem;
}
.order-step p {
  color: var(--text-secondary);
  font-size: 0.9rem;
  flex-grow: 1;
}

/* ------------------------------------------------------------------
 * Skarbonki personalizowane landing page styles
 *
 * These classes style the dedicated landing page for personalised piggy
 * banks. They follow the same dark theme with neon accents and glass
 * cards. The page uses responsive grids and centered sections.
 */
.skarbonki-hero {
  padding: 80px 20px;
  text-align: center;
  background:
    radial-gradient(circle at 10% 30%, rgba(25,245,208,0.12), transparent 40%),
    radial-gradient(circle at 80% 40%, rgba(214,167,86,0.10), transparent 40%),
    var(--bg-secondary);
}
.skarbonki-hero h1 {
  color: var(--accent);
  font-size: 2.4rem;
  margin-bottom: 16px;
  line-height: 1.2;
}
.skarbonki-hero p {
  color: var(--text-secondary);
  font-size: 1.1rem;
  max-width: 800px;
  margin: 0 auto 32px;
}

.skarbonki-benefits {
  padding: 60px 20px;
}
.skarbonki-benefits h2 {
  text-align: center;
  margin-bottom: 24px;
  font-size: 2rem;
  color: var(--accent);
}
.benefits-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  max-width: 1000px;
  margin: 0 auto;
}
.benefit-card {
  background: var(--card-bg);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(25,245,208,0.18);
  border-radius: 20px;
  padding: 24px 16px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.35);
  text-align: center;
}
.benefit-card h3 {
  color: var(--accent);
  margin-bottom: 8px;
  font-size: 1.2rem;
}
.benefit-card p {
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.4;
}

.skarbonki-uses {
  padding: 60px 20px;
}
.skarbonki-uses h2 {
  text-align: center;
  margin-bottom: 24px;
  font-size: 2rem;
  color: var(--accent);
}
.uses-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  max-width: 1000px;
  margin: 0 auto;
}
.uses-card {
  background: var(--card-bg);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(25,245,208,0.18);
  border-radius: 20px;
  padding: 24px 16px;
  text-align: center;
  box-shadow: 0 12px 30px rgba(0,0,0,0.35);
}
.uses-card h3 {
  color: var(--accent);
  margin-bottom: 8px;
  font-size: 1.1rem;
}
.uses-card p {
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.4;
}

.skarbonki-gallery {
  padding: 60px 20px;
}
.skarbonki-gallery h2 {
  text-align: center;
  margin-bottom: 24px;
  font-size: 2rem;
  color: var(--accent);
}
.gallery-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  max-width: 1000px;
  margin: 0 auto;
}
.gallery-grid img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 8px 16px rgba(0,0,0,0.4);
  transition: transform 0.3s ease;
}
.gallery-grid img:hover {
  transform: scale(1.05);
}

.skarbonki-faq {
  padding: 60px 20px;
  max-width: 900px;
  margin: 0 auto;
}
.skarbonki-faq h2 {
  text-align: center;
  margin-bottom: 24px;
  font-size: 2rem;
  color: var(--accent);
}
.faq-item {
  margin-bottom: 24px;
}
.faq-item h3 {
  color: var(--accent);
  margin-bottom: 8px;
  font-size: 1.2rem;
}
.faq-item p {
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.5;
}

.skarbonki-contact {
  padding: 60px 20px;
  text-align: center;
}
.skarbonki-contact h2 {
  font-size: 2rem;
  margin-bottom: 16px;
  color: var(--accent);
}
.skarbonki-contact p {
  max-width: 700px;
  margin: 0 auto 24px;
  color: var(--text-secondary);
  font-size: 1rem;
  line-height: 1.5;
}
.skarbonki-contact a {
  color: var(--accent);
  text-decoration: underline;
}

/* ====== Style reuse for other landing pages (Toppery, Medale) ====== */

/* Hero sections */
.toppers-hero,
.medale-hero {
  padding: 80px 20px;
  text-align: center;
  background:
    radial-gradient(circle at 10% 30%, rgba(25,245,208,0.12), transparent 40%),
    radial-gradient(circle at 80% 40%, rgba(214,167,86,0.10), transparent 40%),
    var(--bg-secondary);
}
.toppers-hero h1,
.medale-hero h1 {
  color: var(--accent);
  font-size: 2.4rem;
  margin-bottom: 16px;
  line-height: 1.2;
}
.toppers-hero p,
.medale-hero p {
  color: var(--text-secondary);
  font-size: 1.1rem;
  max-width: 800px;
  margin: 0 auto 32px;
}

/* Benefits section */
.toppers-benefits,
.medale-benefits {
  padding: 60px 20px;
}
.toppers-benefits h2,
.medale-benefits h2 {
  text-align: center;
  margin-bottom: 24px;
  font-size: 2rem;
  color: var(--accent);
}

/* Uses section */
.toppers-uses,
.medale-uses {
  padding: 60px 20px;
}
.toppers-uses h2,
.medale-uses h2 {
  text-align: center;
  margin-bottom: 24px;
  font-size: 2rem;
  color: var(--accent);
}

/* Gallery section */
.toppers-gallery,
.medale-gallery {
  padding: 60px 20px;
}
.toppers-gallery h2,
.medale-gallery h2 {
  text-align: center;
  margin-bottom: 24px;
  font-size: 2rem;
  color: var(--accent);
}

/* FAQ section */
.toppers-faq,
.medale-faq {
  padding: 60px 20px;
  max-width: 900px;
  margin: 0 auto;
}
.toppers-faq h2,
.medale-faq h2 {
  text-align: center;
  margin-bottom: 24px;
  font-size: 2rem;
  color: var(--accent);
}

/* Contact section */
.toppers-contact,
.medale-contact {
  padding: 60px 20px;
  text-align: center;
}
.toppers-contact h2,
.medale-contact h2 {
  font-size: 2rem;
  margin-bottom: 16px;
  color: var(--accent);
}
.toppers-contact p,
.medale-contact p {
  max-width: 700px;
  margin: 0 auto 24px;
  color: var(--text-secondary);
  font-size: 1rem;
  line-height: 1.5;
}
.form-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 600px;
  margin: 0 auto;
}
.form-container label {
  text-align: left;
  color: var(--text-primary);
  font-size: 0.9rem;
  margin-top: 4px;
}
.form-container input,
.form-container textarea {
  width: 100%;
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-col);
  color: var(--text-primary);
  font-size: 0.9rem;
}
.form-container input:focus,
.form-container textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(25,245,208,0.3);
}
.form-container button {
  align-self: flex-start;
  padding: 10px 20px;
  border: none;
  border-radius: 20px;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  color: #041010;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.form-container button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(25,245,208,0.4);
}

/* ====== Sekcja najczęściej zamawiane ====== */
.popular-updated {
  padding: 60px 20px;
}
.popular-updated h2 {
  text-align: center;
  margin-bottom: 24px;
  font-size: 2rem;
  color: var(--accent);
}
.popular-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  max-width: 1000px;
  margin: 0 auto;
}
.popular-card {
  background: var(--card-bg);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(25,245,208,0.18);
  border-radius: 20px;
  padding: 24px 16px;
  text-align: center;
  box-shadow: 0 12px 30px rgba(0,0,0,0.35);
}
.popular-card h3 {
  color: var(--accent);
  margin-bottom: 8px;
  font-size: 1.2rem;
}
.popular-card p {
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.4;
}
.popular-card a {
  display: inline-block;
  margin-top: 12px;
  padding: 8px 16px;
  border-radius: 20px;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  color: #041010;
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.popular-card a:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(25,245,208,0.4);
}

/* ====== Sekcja opinii ====== */
.opinions-updated {
  padding: 60px 20px;
  background: var(--bg-secondary);
}
.opinions-updated h2 {
  text-align: center;
  margin-bottom: 24px;
  font-size: 2rem;
  color: var(--accent);
}
.opinions-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  max-width: 1000px;
  margin: 0 auto;
}
.opinion-card {
  background: var(--card-bg);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(25,245,208,0.18);
  border-radius: 20px;
  padding: 24px 20px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.35);
  font-style: italic;
  color: var(--text-secondary);
}
.opinion-card cite {
  display: block;
  margin-top: 8px;
  text-align: right;
  color: var(--accent);
  font-style: normal;
  font-weight: 600;
}

/* ====== Globalny FAQ ====== */
.faq-global-updated {
  padding: 60px 20px;
  max-width: 900px;
  margin: 0 auto;
}
.faq-global-updated h2 {
  text-align: center;
  margin-bottom: 24px;
  font-size: 2rem;
  color: var(--accent);
}
.faq-global-item {
  margin-bottom: 24px;
}
.faq-global-item h3 {
  color: var(--accent);
  margin-bottom: 8px;
  font-size: 1.2rem;
}
.faq-global-item p {
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.5;
}

/* ====== Landing page: Portrety grawerowane ====== */
/* Hero section */
.portraits-hero {
  padding: 80px 20px;
  text-align: center;
  background:
    radial-gradient(circle at 10% 30%, rgba(25,245,208,0.12), transparent 40%),
    radial-gradient(circle at 80% 40%, rgba(214,167,86,0.10), transparent 40%),
    var(--bg-secondary);
}
.portraits-hero h1 {
  color: var(--accent);
  font-size: 2.4rem;
  margin-bottom: 16px;
  line-height: 1.2;
}
.portraits-hero p {
  color: var(--text-secondary);
  font-size: 1.1rem;
  max-width: 800px;
  margin: 0 auto 32px;
}

/* Generic section padding for portraits */
.portraits-benefits,
.portraits-for,
.portraits-prepare,
.portraits-order,
.portraits-gallery,
.portraits-faq,
.portraits-contact {
  padding: 60px 20px;
}

/* Section headings for portraits */
.portraits-benefits h2,
.portraits-for h2,
.portraits-prepare h2,
.portraits-order h2,
.portraits-gallery h2,
.portraits-faq h2 {
  text-align: center;
  margin-bottom: 24px;
  font-size: 2rem;
  color: var(--accent);
}

/* Contact section for portraits */
.portraits-contact {
  text-align: center;
}
.portraits-contact h2 {
  font-size: 2rem;
  margin-bottom: 16px;
  color: var(--accent);
}
.portraits-contact p {
  max-width: 700px;
  margin: 0 auto 24px;
  color: var(--text-secondary);
  font-size: 1rem;
  line-height: 1.5;
}