/* ==========================================================================
   dark-homepage.css
   Homepage styles for kursy.dawidmazur.pl — AiWave-inspired dark theme
   Paleta: cyan #06B6D4, jasny cyan #22D3EE, tło #0E0C15
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. PAGE RESETS — Hide Blocksy header & remove container constraints
   -------------------------------------------------------------------------- */

/* Blocksy header hidden globally in dark-scarlet.css (dm-nav replaces it) */

body.dark-theme.page-id-14 .entry-header,
body.dark-theme.page-id-14 .page-title {
  display: none !important;
}

body.dark-theme.page-id-14 .entry-content,
body.dark-theme.page-id-14 .site-main,
body.dark-theme.page-id-14 article.page,
body.dark-theme.page-id-14 .ct-container,
body.dark-theme.page-id-14 .ct-container-full,
body.dark-theme.page-id-14 .ct-container-fluid {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Override WordPress is-layout-constrained which limits children max-width */
body.dark-theme .entry-content.is-layout-constrained > .dm-homepage,
body.dark-theme .is-layout-constrained > .dm-homepage {
  max-width: 100% !important;
  width: 100% !important;
}

.dm-homepage {
  max-width: 100% !important;
  width: 100% !important;
  overflow: clip;
}

body.dark-theme.page-id-14 .site-main {
  margin-top: 0 !important;
}

/* Force scroll on homepage — override Blocksy body overflow-x:hidden
   Only body gets overflow, html stays visible (default) so viewport scrolls */
body.dark-theme.page-id-14 {
  overflow: auto !important;
}

/* Override Blocksy #main-container overflow:clip which blocks page scroll */
body.dark-theme.page-id-14 #main-container {
  overflow: visible !important;
}

/* On homepage, #page padding comes from .dm-homepage, not from global rule */
body.dark-theme.page-id-14 #page,
body.dark-theme.page-id-14 .site {
  padding-top: 0 !important;
}

/* Blocksy footer hidden globally in dark-scarlet.css (dm-footer replaces it) */

/* Nav styles moved to dark-theme.css (global). See dm-nav section there. */

/* --------------------------------------------------------------------------
   2. HOMEPAGE WRAPPER
   -------------------------------------------------------------------------- */

.dm-homepage {
  background: var(--dark-bg, #0E0C15);
  color: var(--text-primary, #fff);
  font-family: 'Sora', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  line-height: 1.67;
  padding-top: 72px; /* compensate for fixed nav */
}

/* --------------------------------------------------------------------------
   3. HERO SECTION  (.dm-hero)
   -------------------------------------------------------------------------- */

.dm-hero {
  position: relative;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  min-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 100px 24px;
}

/* Background glow blobs — AiWave style */
.dm-hero-bg-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.dm-hero-bg-glow::before {
  content: "";
  position: absolute;
  left: -200px;
  top: 100px;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: linear-gradient(45deg, #06B6D4, #06B6D4);
  opacity: 0.15;
  filter: blur(120px);
}

.dm-hero-bg-glow::after {
  content: "";
  position: absolute;
  right: -200px;
  top: -150px;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: linear-gradient(45deg, #06B6D4, #22D3EE);
  opacity: 0.12;
  filter: blur(120px);
}

.dm-hero-content {
  position: relative;
  z-index: 1;
  max-width: 800px;
  text-align: center;
}

/* Badge — pill shape like AiWave */
.dm-hero-badge {
  display: inline-block;
  padding: 6px 20px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent-secondary, #22D3EE);
  border: 1px solid rgba(6, 182, 212, 0.3);
  border-radius: 100px;
  background: rgba(6, 182, 212, 0.08);
  margin-bottom: 28px;
}

.dm-hero-title {
  font-size: clamp(2.2rem, 5vw, 3.8rem);
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 24px;
  color: #fff;
  letter-spacing: -0.02em;
}

.dm-gradient-text {
  background: linear-gradient(135deg, var(--accent, #06B6D4) 0%, var(--accent-secondary, #22D3EE) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.dm-hero-desc {
  font-size: 16px;
  color: var(--text-secondary, #BCC3D7);
  max-width: 600px;
  margin: 0 auto 44px;
  line-height: 1.7;
}

/* Hero Stats */
.dm-hero-stats {
  display: flex;
  justify-content: center;
  gap: 56px;
  margin-bottom: 48px;
}

.dm-stat {
  text-align: center;
}

.dm-stat-number {
  display: block;
  font-size: 2rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
}

.dm-stat-label {
  display: block;
  font-size: 13px;
  color: var(--text-muted, #565e78);
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 500;
}

/* Hero CTA — AiWave .btn-default style */
.dm-hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 36px;
  height: 52px;
  line-height: 52px;
  font-size: 16px;
  font-weight: 600;
  color: #fff !important;
  background: linear-gradient(135deg, var(--accent, #06B6D4), var(--accent-secondary, #22D3EE));
  background-size: 200% auto;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 4px 20px rgba(6, 182, 212, 0.25);
  letter-spacing: 0.5px;
}

.dm-hero-cta:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 30px rgba(6, 182, 212, 0.4);
  filter: brightness(120%);
  color: #fff !important;
}

/* --------------------------------------------------------------------------
   4. COURSES SECTION  (.dm-courses)
   -------------------------------------------------------------------------- */

.dm-courses {
  position: relative;
  padding: 100px 24px;
  max-width: 1200px;
  margin: 0 auto;
  z-index: 2;
}

.dm-section-title {
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  font-weight: 700;
  text-align: center;
  margin: 0 0 12px;
  color: #fff;
  letter-spacing: -0.02em;
}

.dm-section-subtitle {
  text-align: center;
  font-size: 16px;
  color: var(--text-secondary, #BCC3D7);
  max-width: 560px;
  margin: 0 auto 56px;
  line-height: 1.67;
}

/* Course Grid */
.dm-course-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* WordPress wpautop inserts <p> tags between/inside card divs — hide them */
.dm-course-card > p,
.dm-course-card > br,
.dm-course-grid > p,
.dm-course-grid > br,
.dm-features-grid > p,
.dm-features-grid > br,
.dm-secondary-courses > p,
.dm-secondary-courses > br,
.dm-hero-stats > p,
.dm-hero-stats > br {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ==========================================================================
   Course Cards — AiWave .rainbow-pricing.style-aiwave exact replica
   Outer card = 2px padding border gap, pseudo-elements = gradient border
   Inner wrapper = actual card content with dark bg
   ========================================================================== */

/* Outer card: 2px padding creates gap for gradient border (AiWave technique) */
.dm-course-card {
  position: relative;
  padding: 2px;
  border-radius: 14px;
  transition: all 0.3s ease-in-out;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Pseudo-element border layers */
.dm-course-card::before,
.dm-course-card::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 14px;
  transition: all 0.3s;
}

/* Default border — visible subtle border like AiWave non-active cards */
.dm-course-card::before {
  background: rgba(255, 255, 255, 0.08);
  z-index: 0;
}

/* Gradient border — hidden, shown on hover/active */
.dm-course-card::after {
  background: linear-gradient(to right, #06B6D4, #22D3EE);
  z-index: 0;
  opacity: 0;
  visibility: hidden;
  filter: drop-shadow(0px 29px 36px rgba(34, 211, 238, 0.09));
}

.dm-course-card:hover {
  box-shadow: 0px 19px 19px rgba(34, 211, 238, 0.03);
}

.dm-course-card:hover::after {
  opacity: 1;
  visibility: visible;
}

/* Inner wrapper — sits on top of pseudo-element border */
.dm-card-inner {
  position: relative;
  z-index: 1;
  background: #13111C;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  flex: 1;
  padding-top: 44px;
}

/* Featured Card — gradient border always visible (AiWave .active) */
.dm-card-featured::after {
  opacity: 1;
  visibility: visible;
}

.dm-card-featured {
  box-shadow: 0px 19px 19px rgba(34, 211, 238, 0.05);
}

/* Card Image — proper aspect ratio, pushed down for badge space */
.dm-card-image {
  position: static;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.dm-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.dm-course-card:hover .dm-card-image img {
  transform: scale(1.05);
}

/* Card Badges — positioned in the padding-top area of dm-card-inner */
.dm-card-badge {
  position: absolute;
  top: 10px;
  right: 16px;
  padding: 6px 18px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: 6px;
  z-index: 5;
  color: #fff;
  background: var(--accent, #06B6D4);
  white-space: nowrap;
}

.dm-badge-accent,
.dm-badge-cyan {
  color: #fff;
  background: var(--accent, #06B6D4);
}

/* Featured badge — centered in padding area */
.dm-card-featured .dm-card-badge,
.dm-badge-gradient {
  top: 0;
  right: auto;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255, 184, 0, 1);
  color: #16181E;
  border-radius: 0 0 8px 8px;
  padding: 10px 32px;
  font-size: 13px;
  font-weight: 700;
  z-index: 5;
  white-space: nowrap;
}

/* Card Body */
.dm-card-body {
  padding: 28px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.dm-card-title {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 8px;
  color: #fff;
  line-height: 1.3;
}

.dm-card-desc {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.67;
  margin: 0 0 24px;
  flex: 1;
}

/* Card Features — AiWave style with border divider */
.dm-card-features {
  list-style: none;
  padding: 16px 0 0;
  margin: 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.dm-card-features li {
  font-size: 14px;
  color: var(--text-secondary, #BCC3D7);
  padding-left: 26px;
  position: relative;
  line-height: 1.5;
  display: flex;
  align-items: baseline;
}

.dm-card-features li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: var(--accent, #06B6D4);
  font-weight: 700;
  font-size: 14px;
}

/* Card Footer — AiWave pricing layout */
.dm-card-footer {
  padding: 24px 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Pricing — large AiWave style */
.dm-card-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.dm-price-amount {
  font-size: 2rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.dm-price-highlight {
  color: var(--accent-secondary, #22D3EE);
}

.dm-price-old {
  font-size: 14px;
  color: var(--text-muted, #565e78);
  text-decoration: line-through;
}

/* Card Button — border style for regular cards (AiWave Basic/Enterprise) */
.dm-card-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 28px;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.08);
  background: transparent;
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.3s ease;
  white-space: nowrap;
  height: 50px;
  line-height: 46px;
  width: 100%;
}

body.dark-theme .dm-card-btn:hover {
  background: var(--accent, #06B6D4);
  border-color: var(--accent, #06B6D4);
  color: #0E0C15;
}

/* Featured card button — gradient fill (AiWave Premium "Get Started") */
body.dark-theme .dm-btn-gradient {
  background: linear-gradient(135deg, var(--accent, #06B6D4), var(--accent-secondary, #22D3EE));
  color: #0E0C15;
  border: none;
  box-shadow: 0 4px 20px rgba(6, 182, 212, 0.3);
}

body.dark-theme .dm-btn-gradient:hover {
  box-shadow: 0 6px 28px rgba(6, 182, 212, 0.5);
  filter: brightness(115%);
  border: none;
  color: #0E0C15;
  background: linear-gradient(135deg, var(--accent, #06B6D4), var(--accent-secondary, #22D3EE));
}

/* --------------------------------------------------------------------------
   5. SECONDARY COURSES  (.dm-secondary-courses)
   -------------------------------------------------------------------------- */

.dm-secondary-courses {
  padding: 0 24px 80px;
  max-width: 1200px;
  margin: 0 auto;
}

.dm-mini-card {
  display: flex;
  align-items: center;
  gap: 20px;
  background: var(--dark-card, #16181E);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 20px 24px;
  margin-bottom: 16px;
  transition: all 0.3s ease;
}

.dm-mini-card:hover {
  transform: translateX(6px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  border-color: rgba(6, 182, 212, 0.2);
}

.dm-mini-icon {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background: rgba(6, 182, 212, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
}

.dm-mini-body {
  flex: 1;
  min-width: 0;
}

.dm-mini-body h4 {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 4px;
  color: #fff;
}

.dm-mini-body p {
  font-size: 14px;
  color: var(--text-secondary, #BCC3D7);
  margin: 0;
  line-height: 1.5;
}

.dm-mini-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-secondary, #22D3EE);
  text-decoration: none;
  transition: gap 0.25s ease, color 0.25s ease;
  white-space: nowrap;
  flex-shrink: 0;
  margin-top: 6px;
}

.dm-mini-link:hover {
  gap: 8px;
  color: var(--accent-light, #67E8F9);
}

.dm-mini-price {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   6. FEATURES GRID  (.dm-features)
   -------------------------------------------------------------------------- */

.dm-features {
  position: relative;
  padding: 100px 24px;
  max-width: 1200px;
  margin: 0 auto;
}

/* Background glow for features section */
.dm-features::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 400px;
  border-radius: 50%;
  background: var(--accent, #06B6D4);
  opacity: 0.04;
  filter: blur(120px);
  pointer-events: none;
}

.dm-features-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  position: relative;
  z-index: 1;
}

/* Feature card — AiWave bg-flashlight-static inspired */
.dm-feature {
  position: relative;
  background: var(--dark-card, #16181E);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 32px 24px;
  text-align: center;
  transition: all 0.3s ease;
  overflow: hidden;
}

.dm-feature::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(6, 182, 212, 0.08), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.dm-feature:hover {
  transform: translateY(-4px);
  border-color: rgba(6, 182, 212, 0.2);
}

.dm-feature:hover::before {
  opacity: 1;
}

.dm-feature-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 20px;
  border-radius: 16px;
  background: rgba(6, 182, 212, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.7rem;
  position: relative;
  z-index: 1;
}

.dm-feature h3 {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 10px;
  color: #fff;
  position: relative;
  z-index: 1;
}

.dm-feature p {
  font-size: 14px;
  color: var(--text-secondary, #BCC3D7);
  margin: 0;
  line-height: 1.67;
  position: relative;
  z-index: 1;
}

/* --------------------------------------------------------------------------
   7. CTA SECTION  (.dm-cta-section)
   -------------------------------------------------------------------------- */

.dm-cta-section {
  position: relative;
  padding: 100px 24px;
  text-align: center;
  overflow: hidden;
}

.dm-cta-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.dm-cta-glow::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 500px;
  height: 400px;
  border-radius: 50%;
  background: linear-gradient(45deg, #06B6D4, #22D3EE);
  opacity: 0.08;
  filter: blur(100px);
}

.dm-cta-section h2 {
  position: relative;
  z-index: 1;
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  font-weight: 700;
  margin: 0 0 16px;
  color: #fff;
}

.dm-cta-section p {
  position: relative;
  z-index: 1;
  font-size: 16px;
  color: var(--text-secondary, #BCC3D7);
  max-width: 520px;
  margin: 0 auto 36px;
  line-height: 1.67;
}

/* CTA Button — AiWave .btn-default style */
.dm-cta-btn {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 36px;
  height: 52px;
  line-height: 52px;
  font-size: 16px;
  font-weight: 600;
  color: #fff !important;
  background: linear-gradient(135deg, var(--accent, #06B6D4), var(--accent-secondary, #22D3EE));
  background-size: 200% auto;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 4px 20px rgba(6, 182, 212, 0.25);
  letter-spacing: 0.5px;
}

.dm-cta-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 35px rgba(6, 182, 212, 0.4);
  filter: brightness(120%);
  color: #fff !important;
}

/* Hide wpautop <p>/<br> in new sections too */
.dm-for-who-grid > p,
.dm-for-who-grid > br,
.dm-steps > p,
.dm-steps > br,
.dm-author-inner > p,
.dm-author-inner > br,
.dm-author-stats > p,
.dm-author-stats > br,
.dm-author-social > p,
.dm-author-social > br,
.dm-testimonials-grid > p,
.dm-testimonials-grid > br,
.dm-faq-list > p,
.dm-faq-list > br,
.dm-newsletter-inner > p,
.dm-newsletter-inner > br,
.dm-persona-list > p,
.dm-persona-list > br {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ==========================================================================
   8. DLA KOGO SECTION (.dm-for-who)
   AiWave-inspired: glass-morphism panels, subtle grid pattern,
   green/red accents for yes/no
   ========================================================================== */

.dm-for-who {
  position: relative;
  padding: 100px 24px;
  max-width: 1200px;
  margin: 0 auto;
}

.dm-for-who-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.dm-for-who-glow::before {
  content: "";
  position: absolute;
  right: -100px;
  top: 50%;
  transform: translateY(-50%);
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: #06B6D4;
  opacity: 0.04;
  filter: blur(100px);
}

.dm-for-who-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  position: relative;
  z-index: 1;
}

/* Single panel — centered */
.dm-for-who-single {
  grid-template-columns: 1fr;
  max-width: 640px;
  margin: 0 auto;
}

.dm-persona {
  position: relative;
  background: rgba(22, 24, 30, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  padding: 36px 32px;
  transition: all 0.3s ease;
}

.dm-persona:hover {
  border-color: rgba(255, 255, 255, 0.1);
  transform: translateY(-2px);
}

.dm-persona-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
}

.dm-persona-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  flex-shrink: 0;
}

.dm-persona-icon-yes {
  background: rgba(52, 211, 153, 0.12);
  color: #34D399;
  border: 1px solid rgba(52, 211, 153, 0.2);
}

.dm-persona-icon-no {
  background: rgba(239, 68, 68, 0.1);
  color: #EF4444;
  border: 1px solid rgba(239, 68, 68, 0.15);
}

.dm-persona-header h3 {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
  color: #fff;
}

.dm-persona-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.dm-persona-list li {
  font-size: 15px;
  color: var(--text-secondary, #BCC3D7);
  line-height: 1.6;
  padding-left: 28px;
  position: relative;
}

.dm-persona-yes .dm-persona-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #34D399;
  font-weight: 700;
  font-size: 14px;
}

.dm-persona-no .dm-persona-list li::before {
  content: "✕";
  position: absolute;
  left: 0;
  color: #EF4444;
  font-weight: 700;
  font-size: 14px;
}

/* ==========================================================================
   9. JAK TO DZIAŁA (.dm-how-it-works)
   AiWave-inspired: numbered steps with connecting gradient line,
   each step in a card with subtle glow on hover
   ========================================================================== */

.dm-how-it-works {
  position: relative;
  padding: 100px 24px;
  max-width: 1000px;
  margin: 0 auto;
}

/* Subtle dot grid background pattern — AiWave style */
.dm-how-it-works::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(6, 182, 212, 0.08) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
}

.dm-steps {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  position: relative;
  z-index: 1;
}

.dm-step {
  flex: 1;
  text-align: center;
  padding: 32px 20px;
  position: relative;
}

.dm-step-number {
  width: 64px;
  height: 64px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: linear-gradient(135deg, #06B6D4 0%, #22D3EE 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-shadow: 0 0 30px rgba(6, 182, 212, 0.3);
}

.dm-step-number span {
  font-size: 24px;
  font-weight: 800;
  color: #fff;
  line-height: 1;
}

/* Connecting line between steps */
.dm-step-connector {
  width: 80px;
  height: 2px;
  background: linear-gradient(90deg, #06B6D4, #22D3EE);
  opacity: 0.3;
  flex-shrink: 0;
  margin-top: 62px;
}

.dm-step-title {
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  margin: 0 0 10px;
}

.dm-step-desc {
  font-size: 14px;
  color: var(--text-secondary, #BCC3D7);
  line-height: 1.67;
  margin: 0;
  max-width: 240px;
  margin-left: auto;
  margin-right: auto;
}

/* ==========================================================================
   10. O AUTORZE (.dm-author)
   AiWave-inspired: split layout, photo with gradient border + glow,
   stats bar, social links
   ========================================================================== */

.dm-author {
  position: relative;
  padding: 120px 24px;
  max-width: 1200px;
  margin: 0 auto;
  overflow: hidden;
}

.dm-author-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.dm-author-glow::before {
  content: "";
  position: absolute;
  left: -50px;
  top: 50%;
  transform: translateY(-50%);
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: linear-gradient(135deg, #06B6D4, #22D3EE);
  opacity: 0.06;
  filter: blur(120px);
}

.dm-author-inner {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 64px;
  align-items: center;
  position: relative;
  z-index: 1;
}

.dm-author-photo-wrap {
  display: flex;
  justify-content: center;
}

.dm-author-photo-border {
  position: relative;
  padding: 3px;
  border-radius: 20px;
  background: linear-gradient(135deg, #06B6D4 0%, #22D3EE 50%, #06B6D4 100%);
  background-size: 200% 200%;
  animation: dm-gradient-shift 6s ease infinite;
}

@keyframes dm-gradient-shift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.dm-author-photo {
  display: block;
  width: 100%;
  max-width: 374px;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 17px;
  background: #16181E;
}

.dm-author-label {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent-secondary, #22D3EE);
  margin-bottom: 12px;
}

.dm-author-name {
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 800;
  color: #fff;
  margin: 0 0 8px;
  letter-spacing: -0.02em;
}

.dm-author-role {
  font-size: 15px;
  color: var(--accent-secondary, #22D3EE);
  margin: 0 0 24px;
  font-weight: 500;
}

.dm-author-role a {
  color: var(--accent-light, #67E8F9);
  text-decoration: none;
  border-bottom: 1px solid rgba(103, 232, 249, 0.3);
  transition: all 0.3s ease;
}

.dm-author-role a:hover {
  color: #fff;
  border-bottom-color: #fff;
}

.dm-author-bio {
  font-size: 15px;
  color: var(--text-secondary, #BCC3D7);
  line-height: 1.75;
  margin: 0 0 16px;
}

.dm-author-stats {
  display: flex;
  gap: 32px;
  margin: 32px 0;
  padding: 24px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.dm-author-stat {
  text-align: center;
}

.dm-author-stat-num {
  display: block;
  font-size: 1.8rem;
  font-weight: 800;
  background: linear-gradient(135deg, #06B6D4, #22D3EE);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.2;
}

.dm-author-stat-label {
  display: block;
  font-size: 12px;
  color: var(--text-muted, #565e78);
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 500;
}

.dm-author-social {
  display: flex;
  gap: 12px;
  margin-top: 8px;
}

.dm-author-social-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary, #BCC3D7);
  background: rgba(6, 182, 212, 0.06);
  border: 1px solid rgba(6, 182, 212, 0.15);
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.25s ease;
}

.dm-author-social-link:hover {
  color: #fff;
  background: rgba(6, 182, 212, 0.15);
  border-color: rgba(6, 182, 212, 0.3);
}

.dm-author-social-link svg {
  flex-shrink: 0;
}

/* ==========================================================================
   11. OPINIE KURSANTÓW (.dm-testimonials)
   AiWave-inspired: gradient border cards (same technique as course cards),
   star ratings, quote marks, avatar initials
   ========================================================================== */

.dm-testimonials {
  position: relative;
  padding: 100px 24px;
  max-width: 1200px;
  margin: 0 auto;
}

.dm-testimonials-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.dm-testimonials-glow::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 700px;
  height: 300px;
  border-radius: 50%;
  background: #06B6D4;
  opacity: 0.04;
  filter: blur(100px);
}

.dm-testimonials-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  position: relative;
  z-index: 1;
}

/* Testimonial card — AiWave gradient border technique */
.dm-testimonial-card {
  position: relative;
  padding: 2px;
  border-radius: 16px;
  transition: all 0.3s ease;
}

.dm-testimonial-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.06);
  z-index: 0;
  transition: all 0.3s ease;
}

.dm-testimonial-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 16px;
  background: linear-gradient(135deg, #06B6D4, #22D3EE);
  z-index: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.dm-testimonial-card:hover::after {
  opacity: 1;
}

.dm-testimonial-card:hover {
  box-shadow: 0 12px 40px rgba(6, 182, 212, 0.1);
}

.dm-testimonial-inner {
  position: relative;
  z-index: 1;
  background: #13111C;
  border-radius: 14px;
  padding: 32px;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.dm-testimonial-stars {
  font-size: 16px;
  color: #FBBF24;
  letter-spacing: 2px;
  margin-bottom: 16px;
}

.dm-testimonial-text {
  font-size: 15px;
  color: var(--text-secondary, #BCC3D7);
  line-height: 1.75;
  margin: 0 0 24px;
  flex: 1;
  font-style: italic;
  position: relative;
}

.dm-testimonial-text::before {
  content: "\201C";
  position: absolute;
  top: -16px;
  left: -4px;
  font-size: 48px;
  color: rgba(6, 182, 212, 0.2);
  font-family: Georgia, serif;
  line-height: 1;
}

.dm-testimonial-author {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.dm-testimonial-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #06B6D4, #22D3EE);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

.dm-testimonial-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dm-testimonial-name {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
}

.dm-testimonial-course {
  font-size: 12px;
  color: var(--text-muted, #565e78);
}

/* ==========================================================================
   12. FAQ SECTION (.dm-faq)
   AiWave-inspired: clean accordion, gradient left border on open,
   subtle hover, smooth height transition
   ========================================================================== */

.dm-faq {
  position: relative;
  padding: 100px 24px;
  max-width: 800px;
  margin: 0 auto;
}

.dm-faq-list {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.dm-faq-item {
  background: rgba(22, 24, 30, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.dm-faq-item:hover {
  border-color: rgba(6, 182, 212, 0.15);
}

.dm-faq-item.active {
  border-color: rgba(6, 182, 212, 0.25);
  border-left: 3px solid #06B6D4;
}

.dm-faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  cursor: pointer;
  user-select: none;
  transition: background 0.2s ease;
}

.dm-faq-question:hover {
  background: rgba(6, 182, 212, 0.04);
}

.dm-faq-question span:first-child {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  flex: 1;
  line-height: 1.4;
}

.dm-faq-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(6, 182, 212, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: var(--accent-secondary, #22D3EE);
  flex-shrink: 0;
  transition: all 0.3s ease;
  font-weight: 300;
}

.dm-faq-item.active .dm-faq-icon {
  background: rgba(6, 182, 212, 0.15);
  transform: rotate(45deg);
}

.dm-faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, padding 0.35s ease;
}

.dm-faq-item.active .dm-faq-answer {
  max-height: 300px;
}

.dm-faq-answer p {
  padding: 0 24px 20px;
  font-size: 15px;
  color: var(--text-secondary, #BCC3D7);
  line-height: 1.75;
  margin: 0;
}

/* ==========================================================================
   13. NEWSLETTER (.dm-newsletter)
   AiWave-inspired: gradient-bordered input, centered layout, glow
   ========================================================================== */

.dm-newsletter {
  position: relative;
  padding: 80px 24px;
  max-width: 700px;
  margin: 0 auto;
}

.dm-newsletter-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.dm-newsletter-glow::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  height: 250px;
  border-radius: 50%;
  background: linear-gradient(135deg, #06B6D4, #22D3EE);
  opacity: 0.05;
  filter: blur(80px);
}

.dm-newsletter-inner {
  position: relative;
  z-index: 1;
  background: rgba(22, 24, 30, 0.5);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(6, 182, 212, 0.15);
  border-radius: 20px;
  padding: 48px 40px;
  text-align: center;
}

.dm-newsletter-title {
  font-size: clamp(1.4rem, 3vw, 1.8rem);
  font-weight: 700;
  color: #fff;
  margin: 0 0 12px;
}

.dm-newsletter-desc {
  font-size: 15px;
  color: var(--text-secondary, #BCC3D7);
  line-height: 1.67;
  margin: 0 0 28px;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

/* Style mc4wp form */
.dm-newsletter-form form {
  display: flex;
  gap: 12px;
  max-width: 460px;
  margin: 0 auto;
}

.dm-newsletter-form input[type="email"],
.dm-newsletter-form input[type="text"] {
  flex: 1;
  height: 50px;
  padding: 0 20px;
  background: rgba(14, 12, 21, 0.6);
  border: 1px solid rgba(6, 182, 212, 0.2);
  border-radius: 10px;
  color: #fff;
  font-family: 'Sora', sans-serif;
  font-size: 14px;
  outline: none;
  transition: border-color 0.3s ease;
}

.dm-newsletter-form input[type="email"]:focus,
.dm-newsletter-form input[type="text"]:focus {
  border-color: #06B6D4;
  box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.1);
}

.dm-newsletter-form input[type="email"]::placeholder {
  color: var(--text-muted, #565e78);
}

.dm-newsletter-form input[type="submit"],
.dm-newsletter-form button[type="submit"] {
  height: 50px;
  padding: 0 28px;
  background: linear-gradient(135deg, #06B6D4, #22D3EE);
  border: none;
  border-radius: 10px;
  color: #fff;
  font-family: 'Sora', sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.dm-newsletter-form input[type="submit"]:hover,
.dm-newsletter-form button[type="submit"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(6, 182, 212, 0.3);
  filter: brightness(110%);
}

/* mc4wp success/error messages */
.dm-newsletter-form .mc4wp-response {
  margin-top: 16px;
  font-size: 14px;
  color: #34D399;
}

.dm-newsletter-form .mc4wp-error {
  color: #EF4444;
}

/* ==========================================================================
   14. CTA GUARANTEE BADGE
   ========================================================================== */

.dm-cta-guarantee {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 24px;
  background: rgba(52, 211, 153, 0.08);
  border: 1px solid rgba(52, 211, 153, 0.2);
  border-radius: 100px;
  margin-bottom: 28px;
  font-size: 14px;
  font-weight: 500;
  color: #34D399;
}

.dm-cta-guarantee svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: #34D399;
}

/* --------------------------------------------------------------------------
   15. RESPONSIVE — 1024px breakpoint
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {

  .dm-course-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .dm-features-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .dm-hero-stats {
    gap: 32px;
  }

  .dm-author-inner {
    grid-template-columns: 300px 1fr;
    gap: 40px;
  }

  .dm-testimonials-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Nav responsive moved to dark-theme.css */
}

/* --------------------------------------------------------------------------
   9. RESPONSIVE — 680px breakpoint
   -------------------------------------------------------------------------- */

@media (max-width: 680px) {

  .dm-homepage {
    padding-top: 64px;
  }

  /* Hero */
  .dm-hero {
    min-height: auto;
    padding: 60px 16px 80px;
  }

  .dm-hero-title {
    font-size: 1.8rem;
  }

  .dm-hero-desc {
    font-size: 15px;
  }

  .dm-hero-stats {
    flex-direction: column;
    gap: 16px;
    align-items: center;
  }

  .dm-stat-number {
    font-size: 1.6rem;
  }

  .dm-hero-cta {
    padding: 0 32px;
    height: 50px;
    line-height: 50px;
    font-size: 15px;
  }

  .dm-hero-badge {
    font-size: 11px;
    padding: 5px 16px;
  }

  /* Course Grid — single column */
  .dm-course-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .dm-courses {
    padding: 60px 16px;
  }

  .dm-section-title {
    font-size: 1.6rem;
  }

  .dm-section-subtitle {
    font-size: 15px;
    margin-bottom: 36px;
  }

  .dm-card-image {
    height: 180px;
  }

  .dm-card-body {
    padding: 20px;
  }

  .dm-card-footer {
    padding: 16px 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .dm-card-btn {
    width: 100%;
    justify-content: center;
  }

  /* Secondary Courses */
  .dm-secondary-courses {
    padding: 0 16px 60px;
  }

  .dm-mini-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 20px;
  }

  .dm-mini-icon {
    width: 48px;
    height: 48px;
    font-size: 1.2rem;
  }

  /* Features — 2 columns on mobile */
  .dm-features {
    padding: 60px 16px;
  }

  .dm-features-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }

  .dm-feature {
    padding: 24px 16px;
  }

  .dm-feature-icon {
    width: 48px;
    height: 48px;
    font-size: 1.3rem;
    margin-bottom: 14px;
  }

  .dm-feature h3 {
    font-size: 14px;
  }

  .dm-feature p {
    font-size: 13px;
  }

  /* CTA */
  .dm-cta-section {
    padding: 60px 16px;
  }

  .dm-cta-section h2 {
    font-size: 1.6rem;
  }

  .dm-cta-section p {
    font-size: 15px;
  }

  .dm-cta-btn {
    padding: 0 36px;
    height: 50px;
    line-height: 50px;
    font-size: 15px;
  }

  /* Dla kogo — stack */
  .dm-for-who {
    padding: 60px 16px;
  }

  .dm-for-who-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .dm-persona {
    padding: 28px 24px;
  }

  .dm-persona-header h3 {
    font-size: 16px;
  }

  .dm-persona-list li {
    font-size: 14px;
  }

  /* Jak to działa — vertical stack */
  .dm-how-it-works {
    padding: 60px 16px;
  }

  .dm-steps {
    flex-direction: column;
    align-items: center;
    gap: 0;
  }

  .dm-step {
    padding: 24px 16px;
  }

  .dm-step-connector {
    width: 2px;
    height: 40px;
    margin-top: 0;
  }

  .dm-step-number {
    width: 56px;
    height: 56px;
  }

  .dm-step-number span {
    font-size: 20px;
  }

  .dm-step-desc {
    max-width: 100%;
  }

  /* O autorze — stack */
  .dm-author {
    padding: 60px 16px;
  }

  .dm-author-inner {
    grid-template-columns: 1fr;
    gap: 32px;
    text-align: center;
  }

  .dm-author-photo-border {
    max-width: 280px;
    margin: 0 auto;
  }

  .dm-author-stats {
    justify-content: center;
  }

  .dm-author-social {
    justify-content: center;
    flex-wrap: wrap;
  }

  .dm-author-name {
    font-size: 2rem;
  }

  /* Opinie — single column */
  .dm-testimonials {
    padding: 60px 16px;
  }

  .dm-testimonials-grid {
    grid-template-columns: 1fr;
  }

  .dm-testimonial-inner {
    padding: 24px;
  }

  /* FAQ */
  .dm-faq {
    padding: 60px 16px;
  }

  .dm-faq-question {
    padding: 16px 18px;
  }

  .dm-faq-question span:first-child {
    font-size: 15px;
  }

  .dm-faq-answer p {
    padding: 0 18px 16px;
    font-size: 14px;
  }

  /* Newsletter */
  .dm-newsletter {
    padding: 40px 16px;
  }

  .dm-newsletter-inner {
    padding: 32px 24px;
  }

  .dm-newsletter-form form {
    flex-direction: column;
  }

  /* CTA guarantee badge */
  .dm-cta-guarantee {
    font-size: 12px;
    padding: 8px 18px;
  }
}

@media (max-width: 400px) {
  .dm-features-grid {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   10. UTILITY & ANIMATIONS
   -------------------------------------------------------------------------- */

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .dm-course-card,
  .dm-mini-card,
  .dm-feature,
  .dm-hero-cta,
  .dm-cta-btn,
  .dm-nav-cta,
  .dm-card-btn,
  .dm-persona,
  .dm-step,
  .dm-testimonial-card,
  .dm-faq-item,
  .dm-author-social-link {
    transition: none !important;
  }

  .dm-course-card:hover,
  .dm-feature:hover,
  .dm-mini-card:hover,
  .dm-persona:hover,
  .dm-testimonial-card:hover {
    transform: none !important;
  }
}

/* Selection color */
.dm-homepage ::selection {
  background: rgba(6, 182, 212, 0.35);
  color: #fff;
}

/* Scrollbar */
.dm-homepage::-webkit-scrollbar {
  width: 8px;
}

.dm-homepage::-webkit-scrollbar-track {
  background: var(--dark-bg, #0E0C15);
}

.dm-homepage::-webkit-scrollbar-thumb {
  background: rgba(6, 182, 212, 0.3);
  border-radius: 4px;
}

.dm-homepage::-webkit-scrollbar-thumb:hover {
  background: rgba(6, 182, 212, 0.5);
}