/* Separated subpage layout styles extracted from the former homepage stylesheet. */
/* 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 */
.landing-page .hero-splash,
.landing-page .promo,
.landing-page .section-title.container.fade-in,
.landing-page .container.fade-in .tiles,
.landing-page .allegro-section,
.landing-page .cta-grid,
.landing-page .about {
 display: none !important;
}

body.landing-page {
 /* 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 `landing-page` class to
 * avoid affecting other pages.
 */

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

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

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

body.landing-page .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;
}

/* Override nav text colour for improved readability */
body.landing-page .main-nav a {
 color: #ffffff !important;
}