/* ===================================
   SANDONIS — Main Stylesheet
   Dark theme with gold accents
   =================================== */

/* --- Reset & Base --- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --bg-base:       #0a0a0a;
  --bg-surface:    #0f0f0f;
  --bg-card:       #141414;
  --bg-card-hover: #1a1a1a;
  --border:        #1e1e1e;
  --border-light:  #272727;

  --text-primary:   #f0ece4;
  --text-secondary: #c9a84c;
  --text-muted:     #4a4540;

  /* Gold palette */
  --gold:          #c9a84c;
  --gold-light:    #e2c47a;
  --gold-dim:      #9a7d35;
  --gold-glow:     rgba(201, 168, 76, 0.12);
  --gold-border:   rgba(201, 168, 76, 0.25);

  --font-sans: 'Segoe UI', system-ui, -apple-system, sans-serif;

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;

  --transition: 0.2s ease;
}

html { scroll-behavior: smooth; }

body {
  background-color: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden; /* contain decorative pics that sit past the section edges */
}

/* Fixed background layer: the tiled image plus a dark overlay on top.
   Painting the image here (instead of background-attachment: fixed on the
   body) avoids per-frame recompositing during scroll, which was causing
   ghosting/smearing. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-color: var(--bg-base);
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.85)), /* dark overlay — raise/lower alpha to taste */
    url('../assets/background.png');
  background-repeat: no-repeat, repeat-x;
  background-position: center, center top;
  background-size: cover, auto;
  z-index: -1;
  pointer-events: none;
  /* Promote to its own compositor layer so scrolling doesn't repaint it */
  will-change: transform;
  transform: translateZ(0);
}

a { color: inherit; text-decoration: none; }
ul { list-style: none; }
img { display: block; max-width: 100%; }

/* Ensure all page content sits above the body::before overlay */
body > * {
  position: relative;
  z-index: 1;
}

/* ===================================
   DECORATIVE PICTURES
   Ambient images that scroll with the page content, sitting in the side
   margins and fading into the dark background via an edge mask.
   =================================== */
.deco-pic {
  position: absolute;
  z-index: 0;               /* behind the content column, above the section bg */
  width: clamp(220px, 26vw, 440px);
  height: auto;
  opacity: 0.35;
  pointer-events: none;
  user-select: none;
  filter: grayscale(30%) contrast(0.95);
  /* Fade all edges so the image dissolves into the background */
  -webkit-mask-image: radial-gradient(ellipse at center, #000 35%, transparent 72%);
          mask-image: radial-gradient(ellipse at center, #000 35%, transparent 72%);
}

/* pic 1 — centered on the divider line between Ohjelmat and Prosessi, right side */
.deco-pic--1 { bottom: 0; right: -3%; transform: translateY(50%); }

/* pic 2 — centered on the divider line between Prosessi and Miksi Sandonis, left side */
.deco-pic--2 { bottom: 0; left: -3%; transform: translateY(50%); }

/* pic 3 — centered on the divider line at the bottom of the Miksi Sandonis section, right side */
.deco-pic--3 { bottom: 0; right: -3%; transform: translateY(50%); }

/* Hide on narrower screens where there is no margin room */
@media (max-width: 1300px) {
  .deco-pic { display: none; }
}

/* ===================================
   BUTTONS
   =================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.75rem;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition);
  border: 2px solid transparent;
  white-space: nowrap;
  text-transform: uppercase;
}

.btn--primary {
  background: linear-gradient(135deg, var(--gold), var(--gold-dim));
  color: #0a0a0a;
  border-color: var(--gold);
  box-shadow: 0 0 20px rgba(201, 168, 76, 0.2);
}
.btn--primary:hover {
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  box-shadow: 0 0 28px rgba(201, 168, 76, 0.35);
}

.btn--ghost {
  background-color: transparent;
  color: var(--text-primary);
  border-color: var(--border-light);
}
.btn--ghost:hover {
  border-color: var(--gold-border);
  color: var(--gold-light);
}

.btn--outline-gold {
  background: transparent;
  color: var(--gold);
  border-color: var(--gold-border);
}
.btn--outline-gold:hover {
  background: var(--gold-glow);
  border-color: var(--gold);
}

.btn--full { width: 100%; }
.btn--lg { padding: 1rem 2.5rem; font-size: 1rem; }

/* ===================================
   LAYOUT
   =================================== */
.section-container {
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.section-header {
  text-align: center;
  margin-bottom: 3.5rem;
  background: var(--bg-card);
  border: 2px solid var(--gold-border);
  border-radius: var(--radius-md);
  padding: 2rem 2rem 1.75rem;
}

.section-tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.75rem;
}

.section-title {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin-bottom: 0.75rem;
}

.section-subtitle {
  font-size: 1rem;
  color: var(--text-secondary);
  max-width: 560px;
  margin: 0 auto;
}

/* ===================================
   AD BANNER
   =================================== */
.ad-banner {
  background: linear-gradient(90deg, #1a1400 0%, #0f0f0f 50%, #1a1400 100%);
  border-bottom: 1px solid var(--gold-border);
  padding: 0.65rem 1rem;
  display: none;
}

.ad-banner.is-visible { display: block; }

.ad-banner__inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.ad-banner__tag {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  background: var(--gold-glow);
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

.ad-banner__text {
  font-size: 0.88rem;
  color: var(--text-secondary);
  flex: 1;
}

.ad-banner__text strong { color: var(--gold-light); }

.ad-banner__cta {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--gold);
  border: 2px solid var(--gold-border);
  padding: 0.3rem 0.85rem;
  border-radius: var(--radius-sm);
  transition: background var(--transition), color var(--transition);
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.ad-banner__cta:hover { background: var(--gold-glow); }

.ad-banner__close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.2rem;
  cursor: pointer;
  line-height: 1;
  padding: 0.2rem;
  transition: color var(--transition);
  margin-left: auto;
}
.ad-banner__close:hover { color: var(--text-primary); }

/* ===================================
   NAV
   =================================== */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(10, 10, 10, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
  /* Isolate the sticky bar on its own layer to prevent scroll smearing */
  will-change: transform;
  transform: translateZ(0);
}

.nav__container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav__logo {
  font-size: 1.3rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  color: var(--text-primary);
  transition: color var(--transition);
}
.nav__logo:hover { color: var(--gold); }

.nav__links {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.nav__links a {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-secondary);
  transition: color var(--transition);
  letter-spacing: 0.03em;
}
.nav__links a:hover { color: var(--text-primary); }

/* Hamburger toggle — hidden on desktop, shown on mobile via breakpoint */
.nav__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  padding: 0 9px;
  background: transparent;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color var(--transition);
}
.nav__toggle:hover { border-color: var(--gold-border); }

.nav__toggle-bar {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--gold);
  border-radius: 2px;
  transition: transform var(--transition), opacity var(--transition);
}

/* Animate bars into an X when open */
.nav__toggle.is-active .nav__toggle-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav__toggle.is-active .nav__toggle-bar:nth-child(2) {
  opacity: 0;
}
.nav__toggle.is-active .nav__toggle-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.nav__shop-btn {
  background: linear-gradient(135deg, var(--gold), var(--gold-dim)) !important;
  color: #000 !important;
  padding: 0.45rem 1.2rem !important;
  border-radius: var(--radius-sm) !important;
  font-weight: 700 !important;
  font-size: 0.82rem !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  transition: box-shadow var(--transition) !important;
}
.nav__shop-btn:hover {
  box-shadow: 0 0 18px rgba(201, 168, 76, 0.3) !important;
  color: #000 !important;
}

.nav__site2-btn {
  background: transparent !important;
  color: var(--text-secondary) !important;
  border: 1px solid var(--border-light) !important;
  padding: 0.45rem 1.2rem !important;
  border-radius: var(--radius-sm) !important;
  font-weight: 600 !important;
  font-size: 0.82rem !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  transition: border-color var(--transition), color var(--transition) !important;
}
.nav__site2-btn:hover {
  border-color: var(--gold-border) !important;
  color: var(--gold-light) !important;
}

/* ===================================
   HERO
   =================================== */
.hero {
  position: relative;
  min-height: 90vh;
  display: flex;
  align-items: center;
  padding: 6rem 1.5rem 4rem;
  overflow: hidden;
}

/* Subtle vignette */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 80% 50%, rgba(201,168,76,0.04) 0%, transparent 65%);
  pointer-events: none;
}

.hero__content {
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
  position: relative;
  z-index: 2;
}

.hero__content-box {
  max-width: 640px;
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.25rem;
}

.hero__eyebrow::before {
  content: '';
  display: inline-block;
  width: 24px;
  height: 1px;
  background: var(--gold);
}

.hero__title {
  font-size: clamp(2.8rem, 8vw, 6rem);
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--text-primary);
  margin-bottom: 1.5rem;
}

.hero__title em {
  font-style: normal;
  color: var(--gold);
}

.hero__subtitle {
  font-size: 1.1rem;
  color: var(--text-secondary);
  max-width: 500px;
  margin-bottom: 2.5rem;
  line-height: 1.75;
}

.hero__actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.hero__bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 1;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}

.hero__bg-text {
  position: absolute;
  right: -2rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: clamp(8rem, 22vw, 18rem);
  font-weight: 900;
  letter-spacing: -0.05em;
  color: rgba(201, 168, 76, 0.03);
  pointer-events: none;
  user-select: none;
  line-height: 1;
  z-index: 1;
}

/* ===================================
   STATS BAR
   =================================== */
.stats {
  padding: 3rem 0;
  background: transparent;
}

.stats__grid {
  display: flex;
  justify-content: center;
  gap: 0;
  flex-wrap: wrap;
}

.stats__item {
  flex: 1;
  min-width: 180px;
  text-align: center;
  padding: 1.5rem 2rem;
  background: var(--bg-card);
  border: 2px solid var(--gold-border);
  border-radius: var(--radius-md);
  margin: 0.25rem;
}

.stats__number {
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  color: var(--gold);
  line-height: 1;
  margin-bottom: 0.4rem;
}

.stats__label {
  font-size: 0.82rem;
  color: var(--text-secondary);
  letter-spacing: 0.04em;
}

/* ===================================
   PROGRAMS
   =================================== */
.programs {
  padding: 6rem 0;
  background-color: transparent;
  position: relative;
}
.programs > .section-container { position: relative; z-index: 1; }

.programs__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}

.program-card {
  background: var(--bg-card);
  border: 2px solid var(--gold-border);
  border-radius: var(--radius-md);
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  transition: background var(--transition), border-color var(--transition), transform var(--transition), box-shadow var(--transition);
  position: relative;
  overflow: hidden;
}

.program-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0;
  transition: opacity var(--transition);
}

.program-card:hover {
  background: var(--bg-card-hover);
  border-color: var(--gold-border);
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.4);
}

.program-card:hover::before { opacity: 1; }

.program-card__badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  background: var(--gold-glow);
  border: 2px solid var(--gold-border);
  padding: 0.25rem 0.6rem;
  border-radius: 4px;
  width: fit-content;
}

.program-card__icon {
  font-size: 2rem;
  line-height: 1;
}

.program-card__title {
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}

.program-card__desc {
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.65;
  flex: 1;
}

.program-card__features {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 0.25rem;
}

.program-card__features li {
  font-size: 0.82rem;
  color: var(--text-secondary);
  padding-left: 1.1rem;
  position: relative;
}

.program-card__features li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--gold);
  font-size: 0.75rem;
  font-weight: 700;
}

.programs__cta {
  text-align: center;
  margin-top: 2.5rem;
}

/* ===================================
   HOW IT WORKS
   =================================== */
.steps {
  padding: 6rem 0;
  background: transparent;
  position: relative;
}
.steps > .section-container { position: relative; z-index: 1; }

.steps__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
  position: relative;
}

.step-card {
  background: var(--bg-card);
  border: 2px solid var(--gold-border);
  border-radius: var(--radius-md);
  padding: 2rem 1.5rem;
  position: relative;
  transition: border-color var(--transition);
}

.step-card:hover { border-color: var(--gold-border); }

.step-card__number {
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  color: var(--gold);
  background: var(--gold-glow);
  border: 2px solid var(--gold-border);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
}

.step-card h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}

.step-card p {
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.65;
}

/* ===================================
   WHY SANDONIS
   =================================== */
.why {
  padding: 6rem 0;
  background: transparent;
  position: relative;
}
.why > .section-container { position: relative; z-index: 1; }

.why__video {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 ratio */
  margin-bottom: 3rem;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 2px solid var(--gold-border);
}

.why__video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.why__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
}

.why__item {
  background: var(--bg-card);
  border: 2px solid var(--gold-border);
  border-radius: var(--radius-md);
  padding: 2rem 1.5rem;
  transition: border-color var(--transition);
}

.why__item:hover { border-color: var(--gold-border); }

.why__icon {
  font-size: 1.8rem;
  margin-bottom: 0.75rem;
}

.why__item h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}

.why__item p {
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.65;
}

/* ===================================
   TESTIMONIALS
   =================================== */
.testimonials {
  padding: 6rem 0;
  background: transparent;
}

.testimonials__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem;
}

.testimonial-card {
  background: var(--bg-card);
  border: 2px solid var(--gold-border);
  border-radius: var(--radius-md);
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: border-color var(--transition);
}

.testimonial-card:hover { border-color: var(--gold-border); }

.testimonial-card__stars {
  color: var(--gold);
  font-size: 0.85rem;
  letter-spacing: 0.05em;
}

.testimonial-card__quote {
  font-size: 0.95rem;
  color: var(--text-primary);
  line-height: 1.7;
  font-style: italic;
  flex: 1;
}

.testimonial-card__quote::before { content: '\201C'; color: var(--gold); }
.testimonial-card__quote::after  { content: '\201D'; color: var(--gold); }

.testimonial-card__author {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-secondary);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ===================================
   FAQ
   =================================== */
.faq {
  padding: 6rem 0;
  background: transparent;
}

.faq__list {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.faq__item {
  background: var(--bg-card);
  border: 2px solid var(--gold-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color var(--transition);
}

.faq__item.is-open { border-color: var(--gold-border); }

.faq__question {
  width: 100%;
  background: none;
  border: none;
  color: var(--text-primary);
  font-size: 0.95rem;
  font-weight: 600;
  font-family: var(--font-sans);
  text-align: left;
  padding: 1.25rem 1.5rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  transition: color var(--transition);
}

.faq__question:hover { color: var(--gold-light); }

.faq__icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border: 2px solid var(--gold-border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  font-size: 0.85rem;
  transition: transform var(--transition), background var(--transition);
}

.faq__item.is-open .faq__icon {
  transform: rotate(45deg);
  background: var(--gold-glow);
}

.faq__answer {
  display: none;
  padding: 0 1.5rem 1.25rem;
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.75;
  border-top: 1px solid var(--border);
}

.faq__item.is-open .faq__answer { display: block; }

/* ===================================
   SURVEY
   =================================== */
.survey {
  padding: 6rem 0;
  background: transparent;
}

/* ===================================
   SURVEY
   =================================== */
.survey {
  padding: 6rem 0;
  background: transparent;
}

.survey__form {
  max-width: 680px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.survey__group {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.survey__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

.survey__label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.5;
}

.survey__required {
  color: var(--gold);
}

.survey__input {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 0.95rem;
  font-family: var(--font-sans);
  padding: 0.75rem 1rem;
  transition: border-color var(--transition);
  outline: none;
  width: 100%;
}

.survey__input:focus {
  border-color: var(--gold);
}

.survey__input::placeholder {
  color: var(--text-muted);
}

.survey__textarea {
  resize: vertical;
  min-height: 90px;
}

/* Radio options */
.survey__options {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.survey__options--row {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.survey__option {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  cursor: pointer;
  padding: 0.65rem 1rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: border-color var(--transition), background var(--transition);
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.survey__option:hover {
  border-color: var(--gold-border);
  color: var(--text-primary);
}

.survey__option input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border: 2px solid var(--border-light);
  border-radius: 50%;
  flex-shrink: 0;
  transition: border-color var(--transition), background var(--transition);
  position: relative;
}

.survey__option input[type="radio"]:checked {
  border-color: var(--gold);
  background: var(--gold);
  box-shadow: inset 0 0 0 3px var(--bg-card);
}

.survey__option:has(input:checked) {
  border-color: var(--gold-border);
  background: var(--gold-glow);
  color: var(--text-primary);
}

.survey__options--row .survey__option {
  flex: 0 0 auto;
  min-width: 64px;
  justify-content: center;
}

/* Submit */
.survey__submit {
  padding-top: 0.5rem;
}

/* Success state */
.survey__success {
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
  padding: 3rem 2rem;
  background: var(--bg-card);
  border: 2px solid var(--gold-border);
  border-radius: var(--radius-md);
}

.survey__success-icon {
  font-size: 2.5rem;
  color: var(--gold);
  margin-bottom: 1rem;
}

.survey__success h3 {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}

.survey__success p {
  color: var(--text-secondary);
  font-size: 0.95rem;
}

@media (max-width: 640px) {
  .survey__row {
    grid-template-columns: 1fr;
  }
}

/* ===================================
   FINAL CTA
   =================================== */
.cta-section {
  padding: 7rem 0;
  background: transparent;
  position: relative;
  overflow: hidden;
}



.cta-section__inner {
  text-align: center;
  position: relative;
  z-index: 1;
  background: var(--bg-card);
  border: 2px solid var(--gold-border);
  border-radius: var(--radius-md);
  padding: 3rem 2rem;
}

.cta-section__title {
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  margin-bottom: 0.85rem;
}

.cta-section__sub {
  font-size: 1rem;
  color: var(--text-secondary);
  margin-bottom: 2rem;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

/* ===================================
   FOOTER
   =================================== */
.footer {
  padding: 2rem 1.5rem;
  background: transparent;
}

.footer__container {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  background: var(--bg-card);
  border: 2px solid var(--gold-border);
  border-radius: var(--radius-md);
  padding: 1.25rem 2rem;
}

.footer__brand {
  font-size: 0.9rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  color: var(--gold);
}

.footer__copy {
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* Discreet admin entry point — the © mark only, indistinguishable from text */
.footer__copy-link {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.footer__link {
  font-size: 0.82rem;
  color: var(--text-secondary);
  transition: color var(--transition);
}
.footer__link:hover { color: var(--gold); }

/* ===================================
   RESPONSIVE
   =================================== */
@media (max-width: 640px) {
  /* Show hamburger, collapse nav links into a dropdown panel */
  .nav__container { position: relative; }

  .nav__toggle { display: flex; }

  .nav__links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.5rem;
    background: rgba(10, 10, 10, 0.98);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
  }

  .nav__links.is-open { display: flex; }

  .nav__links a {
    padding: 0.9rem 1rem;
    font-size: 0.95rem;
    border-radius: var(--radius-sm);
  }
  .nav__links a:hover { background: var(--gold-glow); }

  .nav__shop-btn {
    text-align: center;
    margin-top: 0.35rem;
  }

  .hero {
    min-height: auto;
    padding: 5rem 1.25rem 3rem;
  }

  .hero__bg-text {
    font-size: 7rem;
    opacity: 0.6;
  }

  .stats__item {
    min-width: 140px;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  .stats__item:last-child { border-bottom: none; }

  .ad-banner__inner { gap: 0.5rem; }

  .footer__container {
    flex-direction: column;
    text-align: center;
  }

  .programs__grid {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 641px) and (max-width: 1024px) {
  .programs__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Checkout is handled on Stripe's hosted page — no in-page modal needed. */

/* ===================================
   CHECKOUT MODAL (Stripe Embedded Checkout)
   Keeps the buyer on sandonis.fi — the Stripe payment form is mounted
   inside #checkoutContainer instead of a hosted redirect.
   =================================== */

/* Lock background scroll while the modal is open */
body.no-scroll { overflow: hidden; }

/* While the checkout modal is open the fixed background image is fully
   covered by the overlay anyway. Drop it from the compositor so it stops
   competing with the Stripe iframe for GPU/paint work. */
body.no-scroll::before { display: none; }

.checkout-modal[hidden] { display: none; }

.checkout-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(1rem, 4vw, 3rem) 1rem;
  overflow-y: auto;
  /* Make the modal a self-contained stacking + paint context. Without
     isolation the compositor keeps reconciling the huge fixed background
     layer (body::before) with the modal on top, so every internal resize
     of the Stripe iframe repainted the whole page. */
  isolation: isolate;
}

.checkout-modal__overlay {
  position: fixed;
  inset: 0;
  /* Solid, near-opaque overlay instead of backdrop-filter: blur().
     A live blur forces the browser to continuously re-sample and repaint
     everything behind it (the fixed background image + Stripe's iframe),
     which caused noticeable lag. A flat colour composites for free. */
  background: rgba(6, 6, 6, 0.9);
}

.checkout-modal__dialog {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 560px;
  margin: auto;
  background: var(--bg-card);
  border: 1px solid var(--gold-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
  animation: checkout-pop var(--transition);
  /* Promote to its own compositor layer AND confine layout/paint to the
     dialog, so when the Stripe iframe changes height the browser only
     re-lays-out and repaints inside this box — never the page behind it. */
  transform: translateZ(0);
  contain: layout paint;
}

@keyframes checkout-pop {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.checkout-modal__close {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 2;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--text-primary);
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--border-light);
  border-radius: 50%;
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition), background var(--transition);
}

.checkout-modal__close:hover {
  color: var(--gold-light);
  border-color: var(--gold-border);
  background: rgba(0, 0, 0, 0.55);
}

.checkout-modal__body {
  padding: 1.25rem;
  border-radius: var(--radius-lg);
  /* Stripe Embedded Checkout renders on a light background, so give it a
     clean surface rather than the dark card colour. */
  background: #ffffff;
  margin: 3px;
}

#checkoutContainer {
  min-height: 320px;
  /* Confine the Stripe iframe's frequent height changes to this box so
     they don't trigger layout/paint further up the tree. */
  contain: layout paint;
}

/* Stripe mounts its checkout as an <iframe> in here. Promote it to its
   own compositor layer so its internal animations/scrolling composite
   on the GPU instead of repainting through the modal. */
#checkoutContainer iframe {
  transform: translateZ(0);
  will-change: transform;
}