/* ==========================================================================
   TőzsdeTurbó Akadémia — component styles
   Complements Tailwind (CDN). Design tokens mirror the Kiképző Tábor funnel.
   ========================================================================== */

:root {
  /* Brand */
  --color-brand-green: #00e297;
  --color-brand-green-deep: #00a56d;
  --color-brand-green-muted: #57dca7;
  --color-brand-purple: #3a1c5a;
  --color-brand-purple-deep: #1f0e30;
  --color-brand-purple-soft: #5a2b86;
  --color-gold: #d4af37;
  --color-gold-soft: #ecd485;

  /* Surfaces */
  --color-bg-dark: #131313;
  --color-bg-darker: #0e0e0e;
  --color-bg-elevated: #1a1a1a;

  /* Text */
  --color-text-primary: #f5f5f5;
  --color-text-secondary: #a8a8a8;
  --color-text-muted: #6b6b6b;

  /* Glass */
  --color-glass-tint: rgba(255, 255, 255, 0.04);
  --color-glass-tint-strong: rgba(255, 255, 255, 0.08);
  --color-glass-border: rgba(255, 255, 255, 0.08);
  --color-glass-border-strong: rgba(255, 255, 255, 0.16);

  /* Fonts */
  --font-display: "Manrope", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-cta: "Rubik", system-ui, sans-serif;

  --radius-glass: 1rem;
  --max-width: 80rem;
}

/* ----- Base -------------------------------------------------------------- */

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.75;
  color: var(--color-text-secondary);
  background-color: var(--color-bg-dark);
  /* Fixed radial glow — purple top-left, green bottom-right */
  background-image:
    radial-gradient(60% 55% at 0% 0%,
      color-mix(in oklab, var(--color-brand-purple) 35%, transparent) 0%, transparent 60%),
    radial-gradient(60% 55% at 100% 100%,
      color-mix(in oklab, var(--color-brand-green-deep) 18%, transparent) 0%, transparent 60%);
  background-attachment: fixed;
  background-repeat: no-repeat;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--color-text-primary);
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0;
}

p { margin: 0; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

::selection {
  background: var(--color-brand-green);
  color: #06251a;
}

:focus-visible {
  outline: 2px solid var(--color-brand-green);
  outline-offset: 2px;
  border-radius: 4px;
}

.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: 1.25rem;
}

.section {
  padding-block: clamp(3.5rem, 8vw, 7rem);
}

/* ----- Glass surfaces ---------------------------------------------------- */

.glass {
  background-color: var(--color-glass-tint);
  /* frosted sheen: top highlight + soft diagonal glow */
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0) 38%),
    radial-gradient(120% 80% at 0% 0%, rgba(0, 226, 151, 0.06) 0%, transparent 55%);
  border: 1px solid var(--color-glass-border);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  border-radius: var(--radius-glass);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 12px 40px -24px rgba(0, 0, 0, 0.8);
}

.glass-strong {
  background-color: var(--color-glass-tint-strong);
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 42%),
    radial-gradient(120% 90% at 100% 0%, rgba(90, 43, 134, 0.14) 0%, transparent 55%);
  border: 1px solid var(--color-glass-border-strong);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border-radius: var(--radius-glass);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 16px 50px -26px rgba(0, 0, 0, 0.85);
}

.glow-green { box-shadow: 0 0 40px -10px var(--color-brand-green); }
.glow-purple { box-shadow: 0 0 48px -12px var(--color-brand-purple-soft); }

/* Green→purple gradient border via double background trick */
.gradient-border {
  position: relative;
  background:
    linear-gradient(160deg, rgba(26, 26, 26, 0.92), rgba(15, 26, 22, 0.92)) padding-box,
    linear-gradient(135deg, var(--color-brand-green) 0%, var(--color-brand-purple-soft) 55%, var(--color-brand-green-deep) 100%) border-box;
  border: 1.5px solid transparent;
  border-radius: 1.25rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 22px 60px -30px rgba(0, 0, 0, 0.9);
  overflow: hidden;
}
/* soft inner glow at the top of gradient-border panels */
.gradient-border::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(90% 70% at 50% -10%, rgba(0, 226, 151, 0.12) 0%, transparent 60%);
  pointer-events: none;
}

/* ----- Eyebrow pill ------------------------------------------------------ */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-brand-green);
  background: color-mix(in oklab, var(--color-brand-green) 12%, transparent);
  border: 1px solid color-mix(in oklab, var(--color-brand-green) 35%, transparent);
  padding: 0.4rem 0.9rem;
  border-radius: 9999px;
}

.pill--gold {
  color: var(--color-gold-soft);
  background: color-mix(in oklab, var(--color-gold) 14%, transparent);
  border-color: color-mix(in oklab, var(--color-gold) 40%, transparent);
}

/* row of small stat pills (e.g. under the curriculum title) */
.stat-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1rem;
}

.pill__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  background: var(--color-brand-green);
  box-shadow: 0 0 0 0 color-mix(in oklab, var(--color-brand-green) 70%, transparent);
  animation: pulse-dot 2s infinite;
}

@keyframes pulse-dot {
  0%   { box-shadow: 0 0 0 0 color-mix(in oklab, var(--color-brand-green) 60%, transparent); }
  70%  { box-shadow: 0 0 0 8px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* ----- Buttons ----------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  font-family: var(--font-cta);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  border: none;
  border-radius: 9999px;
  padding: 0.95rem 1.7rem;
  transition: transform 0.2s ease, box-shadow 0.3s ease, background 0.3s ease, border-color 0.3s ease;
  text-align: center;
}

.btn--lg { padding: 1.1rem 2.3rem; font-size: 1.05rem; }
.btn--sm { padding: 0.5rem 1rem; font-size: 0.78rem; letter-spacing: 0.03em; }

/* Floating CTA — slides up from the bottom once the user scrolls past the hero. */
.floating-cta {
  position: fixed;
  inset-inline: 0;
  bottom: 1.1rem;
  margin-inline: auto;
  width: fit-content;
  z-index: 80;
  opacity: 0;
  transform: translateY(160%);
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.35s ease;
  box-shadow: 0 14px 34px -8px rgba(0, 0, 0, 0.7), 0 10px 30px -10px color-mix(in oklab, var(--color-brand-green) 55%, transparent);
}
.floating-cta.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.floating-cta.is-visible:hover { transform: translateY(-2px); }

.btn-primary {
  color: #ffffff;
  background: linear-gradient(90deg, #19e84e 0%, #00e29a 50%, #00e6cc 100%);
  box-shadow: 0 10px 30px -10px color-mix(in oklab, var(--color-brand-green) 50%, transparent);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 40px -10px color-mix(in oklab, var(--color-brand-green) 70%, transparent);
}

.btn-ghost {
  color: var(--color-text-primary);
  background: var(--color-glass-tint);
  border: 1px solid var(--color-glass-border-strong);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.btn-ghost:hover {
  transform: translateY(-2px);
  border-color: color-mix(in oklab, var(--color-brand-green) 60%, transparent);
  background: var(--color-glass-tint-strong);
}

.btn__arrow { transition: transform 0.2s ease; }
.btn:hover .btn__arrow { transform: translateX(3px); }

/* ----- Headings helpers -------------------------------------------------- */

.text-gradient {
  background: linear-gradient(180deg, #8dffcb 0%, #00f5a0 55%, #00c47e 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.h-underline {
  text-decoration: underline;
  text-decoration-color: var(--color-gold);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.12em;
}

.section-title {
  font-size: clamp(1.6rem, 3.5vw, 2.5rem);
  font-weight: 800;
}

.eyebrow {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-brand-green-muted);
}

/* ----- Feature / module cards ------------------------------------------- */

.feature-card { padding: 1.6rem; transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; }
.feature-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in oklab, var(--color-brand-green) 40%, transparent);
  box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.7);
}

.card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 0.85rem;
  background: color-mix(in oklab, var(--color-brand-green) 14%, transparent);
  color: var(--color-brand-green);
  margin-bottom: 1rem;
}

/* ----- Section 1 "A módszer": text left, stacked charts right ----------- */
/* text in a solid centered box */
.modszer-box {
  max-width: 48rem;
  margin: 0 auto;
  text-align: left;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-glass-border);
  border-radius: 1.25rem;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  font-size: 1.05rem;
  line-height: 1.7;
  box-shadow: 0 22px 60px -34px rgba(0, 0, 0, 0.9);
}

/* "predict the move" reveal puzzle — 3 cards, in-card reveal */
.puzzle-head { text-align: center; max-width: 44rem; margin: 3.25rem auto 0; }

.puzzle-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  max-width: 78rem;
  margin: 1.75rem auto 0;
}
@media (min-width: 760px) { .puzzle-grid { grid-template-columns: repeat(3, 1fr); align-items: start; } }

.puzzle-card { padding: 1rem; display: flex; flex-direction: column; }
.puzzle-card .puzzle__q { font-size: 1rem; }

.puzzle__q {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--color-text-primary);
  margin-bottom: 0.6rem;
}

.puzzle-card__media {
  position: relative;
  border-radius: 0.65rem;
  overflow: hidden;
  border: 1px solid var(--color-glass-border);
  background: #0c0f0e;
  cursor: zoom-in;
}
/* zoom hint badge (top-left) */
.pz-zoom {
  position: absolute;
  top: 0.55rem;
  left: 0.55rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 9999px;
  color: #fff;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  pointer-events: none;
}
.pz-zoom svg { width: 0.95rem; height: 0.95rem; }
.pz-img { width: 100%; display: block; }
.pz-after { display: none; }
.puzzle-card.is-revealed .pz-before { display: none; }
.puzzle-card.is-revealed .pz-after { display: block; animation: pz-fade 0.5s ease; }
@keyframes pz-fade { from { opacity: 0; } to { opacity: 1; } }

/* bottom gradient so the reveal button reads over the chart */
.puzzle-card__media::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 5rem;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
  pointer-events: none;
}
.puzzle-card.is-revealed .puzzle-card__media::after { display: none; }

/* reveal button overlaid at the bottom of the setup chart */
.pz-reveal {
  position: absolute;
  left: 50%;
  bottom: 0.8rem;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
  padding: 0.6rem 1.1rem;
  border: none;
  border-radius: 9999px;
  cursor: pointer;
  font-family: var(--font-cta);
  font-weight: 700;
  font-size: 0.76rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #06251a;
  background: linear-gradient(90deg, #19e84e, #00e29a 60%, #00e6cc);
  box-shadow: 0 8px 22px -8px color-mix(in oklab, var(--color-brand-green) 70%, transparent);
  transition: transform 0.2s ease, box-shadow 0.3s ease;
}
.pz-reveal:hover {
  transform: translateX(-50%) translateY(-2px);
  box-shadow: 0 12px 30px -8px color-mix(in oklab, var(--color-brand-green) 85%, transparent);
}
.pz-reveal svg { width: 1rem; height: 1rem; }
.puzzle-card.is-revealed .pz-reveal { display: none; }

/* "order flow" badge — appears once revealed */
.pz-badge {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  display: none;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.7rem;
  border-radius: 9999px;
  font-family: var(--font-body);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-brand-green);
  background: color-mix(in oklab, var(--color-brand-green) 18%, transparent);
  border: 1px solid color-mix(in oklab, var(--color-brand-green) 42%, transparent);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.pz-badge svg { width: 0.8rem; height: 0.8rem; }
.puzzle-card.is-revealed .pz-badge { display: inline-flex; }

/* explanation */
.pz-answer {
  display: none;
  margin-top: 0.75rem;
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--color-text-secondary);
}
.puzzle-card.is-revealed .pz-answer { display: block; animation: pz-fade 0.45s ease; }
.pz-answer strong { color: var(--color-brand-green); }

/* "3 Fegyver" list in the left text column */
.weapons-heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--color-text-primary);
  margin-top: 1.75rem;
}
.weapon-list {
  list-style: none;
  padding: 0;
  margin: 1.1rem 0 0;
  display: grid;
  gap: 0.95rem;
}
.weapon-list li {
  position: relative;
  padding-left: 1.5rem;
  color: var(--color-text-secondary);
  font-size: 1rem;
  line-height: 1.65;
}
.weapon-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 9999px;
  background: var(--color-brand-green);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-brand-green) 22%, transparent);
}
.weapon-list strong { color: var(--color-text-primary); font-weight: 700; }

.chart-card { position: relative; padding: 1.25rem; margin: 0; }
.chart-card__img { overflow: hidden; margin: 0.9rem 0; }
.chart-card figcaption { font-size: 0.85rem; color: var(--color-text-secondary); }

.chart-badge {
  position: absolute;
  top: -0.7rem;
  right: -0.7rem;
  z-index: 2;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
  border: 3px solid var(--color-bg-dark);
}
.chart-badge--x { background: #ff5b6b; color: #2a0d10; }
.chart-badge--check { background: var(--color-brand-green); color: #06251a; }

/* ----- Comparison panels ------------------------------------------------- */

.comparison { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 768px) { .comparison { grid-template-columns: 1fr 1fr; } }

.comparison__side { padding: 1.6rem; }
.comparison__side--negative { border-color: color-mix(in oklab, #ff6b6b 45%, transparent); }
.comparison__side--positive { border-color: color-mix(in oklab, var(--color-brand-green) 50%, transparent); }

.comparison__label {
  display: inline-block;
  font-family: var(--font-cta);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  margin-bottom: 0.9rem;
}
.comparison__label--negative { color: #ff9b9b; background: rgba(255, 107, 107, 0.12); }
.comparison__label--positive { color: var(--color-brand-green); background: color-mix(in oklab, var(--color-brand-green) 12%, transparent); }

/* ----- Accordion (curriculum + FAQ) ------------------------------------- */

.accordion-item { overflow: hidden; }
/* gap only where accordion cards sit side-by-side as separate cards (FAQ) */
#gyik .accordion-item + .accordion-item { margin-top: 0.85rem; }

.accordion-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 1rem;
  text-align: left;
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  padding: 1.25rem 1.4rem;
  font-family: var(--font-display);
}

.accordion-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--color-brand-green);
  flex-shrink: 0;
}

.accordion-title {
  flex: 1;
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--color-text-primary);
}

.accordion-chevron {
  flex-shrink: 0;
  transition: transform 0.3s ease;
  color: var(--color-text-muted);
}
/* only the item's OWN trigger chevron rotates (not nested children's) */
.accordion-item.is-open > .accordion-trigger .accordion-chevron { transform: rotate(180deg); color: var(--color-brand-green); }

/* default (FAQ, pricing — single level): clean max-height collapse via JS */
.accordion-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}
.accordion-content { padding: 0 1.4rem 1.4rem; color: var(--color-text-secondary); }

/* curriculum (#tananyag): nesting-safe grid-rows animation; padding lives on the
   inner content so a collapsed card shows NOTHING (no peek) */
#tananyag .accordion-panel {
  display: grid;
  grid-template-rows: 0fr;
  max-height: none;
  transition: grid-template-rows 0.35s ease;
}
#tananyag .accordion-item.is-open > .accordion-panel { grid-template-rows: 1fr; }
#tananyag .accordion-content { overflow: hidden; min-height: 0; padding: 0; }
#tananyag .lesson-toc { padding: 0.1rem 1.4rem 1.1rem; }

/* full curriculum: intro on top, phases 2-by-2, 5th centered below */
.curriculum { max-width: 66rem; margin-inline: auto; }
.intro-block { max-width: 52rem; margin: 0 auto 1.75rem; }

.phase-grid {
  display: grid;
  gap: 1.5rem 1.75rem;
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 820px) { .phase-grid { grid-template-columns: 1fr 1fr; } }

/* 5th phase spans the row but stays one-column wide, centered */
@media (min-width: 820px) {
  .phase-col--wide {
    grid-column: 1 / -1;
    max-width: calc(50% - 0.875rem);
    margin-inline: auto;
  }
}

.phase-heading {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--color-brand-green);
  margin: 0 0 0.9rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--color-glass-border);
}

/* chapter card header: number · title + one-line summary + video count */
.chapter-trigger { align-items: flex-start; gap: 0.85rem; }
.chapter-trigger .accordion-num { margin-top: 0.1rem; }
.chapter-trigger .accordion-chevron { margin-top: 0.25rem; }
.chapter-info { flex: 1; display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.chapter-summary {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--color-text-secondary);
}
.chapter-meta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-brand-green);
}
.chapter-meta svg { width: 0.9rem; height: 0.9rem; }

/* phase card: top-level collapsible (expands to its modules) */
.phase-trigger { align-items: center; gap: 1rem; }
.phase-card__head { flex: 1; display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.phase-card__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.12rem;
  color: var(--color-brand-green);
}
.phase-card__meta {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
/* modules as flat rows separated by hairlines — no card-in-card */
.phase-content .module-card {
  margin: 0;
  background: none !important;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  border-top: 1px solid var(--color-glass-border);
}
.phase-content .module-card::after { content: none !important; }
.phase-content .chapter-trigger { padding: 0.85rem 1.3rem; }
.phase-content .module-card:last-child { margin-bottom: 0.5rem; }

/* lesson table-of-contents (inside curriculum accordions) */
.lesson-toc { list-style: none; counter-reset: lesson; margin: 0; padding: 0; }
.lesson-toc li {
  counter-increment: lesson;
  display: flex;
  gap: 0.75rem;
  align-items: baseline;
  padding: 0.65rem 0.15rem;
  color: var(--color-text-secondary);
  font-size: 0.95rem;
}
.lesson-toc li + li { border-top: 1px solid var(--color-glass-border); }
.lesson-toc li::before {
  content: counter(lesson, decimal-leading-zero);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--color-brand-green);
  min-width: 1.6rem;
  flex-shrink: 0;
}

/* ----- Pricing ----------------------------------------------------------- */

.price-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
  align-items: stretch;
}
@media (min-width: 768px) { .price-grid { grid-template-columns: 1fr 1fr; } }

.price-box { padding: 2rem; display: flex; flex-direction: column; height: 100%; }
.price-box--highlight { box-shadow: 0 0 48px -16px var(--color-brand-green); }
.price-box--inactive { opacity: 0.6; }

.price-box__price { font-family: var(--font-display); font-weight: 800; font-size: 2.4rem; color: var(--color-brand-green); }
.price-box__original { color: var(--color-text-muted); text-decoration: line-through; font-size: 1rem; }
.price-box__features { list-style: none; padding: 0; margin: 1.4rem 0; display: grid; gap: 0.7rem; flex: 1; }
.price-box__features li { display: flex; gap: 0.6rem; align-items: flex-start; }
.price-box__check { color: var(--color-brand-green); flex-shrink: 0; margin-top: 0.15rem; }

/* ----- Pricing cards (two plans, annual featured) ----------------------- */

/* make the pricing section pop — it's the most important block */
#arak .section-title { font-size: clamp(1.9rem, 4.5vw, 3rem); }

.price-grid--cards {
  align-items: start;
  gap: 1.75rem;
  max-width: 64rem;
  margin-inline: auto;
}
@media (min-width: 880px) { .price-grid--cards { padding-block: 1.25rem; } }

.price-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: visible;
  border-radius: 1.1rem;
  /* frosted gradient glass instead of flat grey */
  background:
    linear-gradient(168deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.025) 42%, rgba(90, 43, 134, 0.09) 100%),
    rgba(16, 18, 20, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(22px) saturate(1.35);
  -webkit-backdrop-filter: blur(22px) saturate(1.35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 24px 64px -34px rgba(0, 0, 0, 0.95);
}
/* soft green wash behind the list area for depth */
.price-card__body {
  position: relative;
  background: radial-gradient(120% 55% at 50% 100%, rgba(0, 226, 151, 0.06), transparent 70%);
}

.price-card--featured {
  z-index: 1;
  border: 1.5px solid color-mix(in oklab, var(--color-brand-green) 60%, transparent);
  box-shadow: 0 0 70px -10px var(--color-brand-green), 0 26px 64px -30px rgba(0, 0, 0, 0.9);
}

/* floating gold "recommended" ribbon above the featured card */
.price-card__ribbon {
  position: absolute;
  top: -0.85rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 1.15rem;
  border-radius: 9999px;
  font-family: var(--font-cta);
  font-weight: 700;
  font-size: 0.74rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #2a1e02;
  background: linear-gradient(90deg, var(--color-gold-soft), var(--color-gold));
  box-shadow: 0 8px 22px -6px rgba(212, 175, 55, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.price-card__header {
  position: relative;
  text-align: center;
  padding: 1.4rem 1.5rem 1.15rem;
}
/* faint inset separator below the price block */
.price-card__header::after {
  content: "";
  position: absolute;
  left: 1.25rem;
  right: 1.25rem;
  bottom: 0;
  height: 1px;
  background: var(--color-glass-border);
}
.price-card__plan {
  display: inline-flex;
  align-items: center;
  margin-bottom: 1rem;
  padding: 0.36rem 0.95rem;
  border-radius: 9999px;
  background: color-mix(in oklab, var(--color-brand-green) 14%, transparent);
  border: 1px solid color-mix(in oklab, var(--color-brand-green) 38%, transparent);
  color: var(--color-brand-green);
  font-family: var(--font-cta);
  font-weight: 700;
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.price-card__price {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.1rem, 5.2vw, 3rem);
  line-height: 1;
  color: #fff;
}
.price-card__price small { font-size: 0.42em; font-weight: 600; color: var(--color-text-secondary); }
.price-card__note {
  display: block;
  margin-top: 0.7rem;
  font-style: italic;
  font-size: 0.88rem;
  color: var(--color-text-secondary);
}
.note-accent { color: var(--color-brand-green); font-style: normal; font-weight: 600; }

.price-card__body { padding: 0.3rem 1.25rem 1.5rem; }
.price-card__list { display: block; }

/* plan rows: neutralise the default accordion-item card look */
.plan-item {
  margin: 0; /* kill the base .accordion-item gap; rows are split by the border only */
  background: none !important;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
}
.plan-item::after { content: none !important; }
.plan-item + .plan-item,
.plan-item--static { border-top: 1px solid var(--color-glass-border); }

/* proportional rows */
.plan-trigger,
.plan-item--static {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.62rem 0.35rem;
}
/* keep the icon + plus vertically centred against multi-line titles */
.price-card .plan-trigger,
.price-card .plan-item--static { align-items: center !important; }
.price-card .plan-ico,
.price-card .plan-plus { align-self: center !important; }
.price-card .plan-title { line-height: 1.35; margin: 0; }
/* collapsed answer must add ZERO height: kill its block padding unless open
   (physical longhands so they override the .plan-content `padding` shorthand) */
.price-card .plan-item > .accordion-panel > .plan-content {
  padding-top: 0;
  padding-bottom: 0;
}
.price-card .plan-item.is-open > .accordion-panel > .plan-content {
  padding-top: 0.15rem;
  padding-bottom: 1rem;
}
/* line icons in the site's green style (no badge box) */
.plan-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.7rem;
  height: 1.7rem;
  flex-shrink: 0;
  color: var(--color-brand-green);
}
.plan-ico svg { width: 1.45rem; height: 1.45rem; }
.plan-ico--gold { color: var(--color-gold-soft); }

/* grouped panels (Bónuszok / Éves extrák) with a pill label on the top edge */
.plan-group {
  position: relative;
  margin-top: 1.45rem;
  padding: 0.85rem 0.7rem 0.25rem;
  border: 1px solid var(--color-glass-border);
  border-radius: 0.95rem;
  background: rgba(255, 255, 255, 0.025);
}
.plan-group--gold { border-color: color-mix(in oklab, var(--color-gold) 30%, transparent); }
.plan-group__label {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  padding: 0.32rem 0.85rem;
  border-radius: 9999px;
  white-space: nowrap;
  background: #181b1e;
  border: 1px solid color-mix(in oklab, var(--color-brand-green) 38%, transparent);
  color: var(--color-brand-green);
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.plan-group__label svg { width: 0.85rem; height: 0.85rem; }
.plan-group--gold .plan-group__label {
  color: var(--color-gold-soft);
  border-color: color-mix(in oklab, var(--color-gold) 45%, transparent);
}

.plan-title {
  flex: 1;
  text-align: left;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.97rem;
  line-height: 1.4;
  color: var(--color-text-primary);
}
.plan-plus {
  flex-shrink: 0;
  width: 1.4rem;
  text-align: center;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.35rem;
  line-height: 1;
  color: var(--color-text-muted);
  transition: transform 0.3s ease, color 0.3s ease;
}
.plan-item.is-open .plan-plus { transform: rotate(45deg); color: var(--color-brand-green); }

.plan-content {
  padding: 0 0.35rem 1rem 1.95rem;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--color-text-secondary);
}

.plan-divider {
  margin: 0.4rem 0 0;
  padding: 0.85rem 0.35rem 0.5rem;
  border-top: 1px solid var(--color-glass-border);
  text-align: center;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-gold-soft);
}

.price-card__cta { width: 100%; margin-top: 1.1rem; }
.price-card__cancel {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  margin-top: 1rem;
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--color-text-muted);
  text-align: left;
}
.price-card__cancel svg { flex-shrink: 0; width: 0.95rem; height: 0.95rem; margin-top: 0.18rem; }

/* ----- Proof gallery ----------------------------------------------------- */

.proof-grid {
  display: grid;
  gap: 0.85rem;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 768px) { .proof-grid { grid-template-columns: repeat(3, 1fr); } }

.proof-item {
  border-radius: 0.85rem;
  overflow: hidden;
  border: 1px solid var(--color-glass-border);
  cursor: zoom-in;
  transition: transform 0.25s ease, border-color 0.25s ease;
}
.proof-item:hover { transform: scale(1.02); border-color: color-mix(in oklab, var(--color-brand-green) 50%, transparent); }
.proof-item img { width: 100%; height: 100%; object-fit: cover; }

/* ----- Results (eredmények: funded / trades / írásos) ------------------- */

.results { max-width: 66rem; margin-inline: auto; }
.results-group + .results-group { margin-top: 2.5rem; }
.results-group__label {
  text-align: center;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-brand-green-muted);
  margin-bottom: 1.1rem;
}
.results-grid {
  display: grid;
  gap: 0.85rem;
  grid-template-columns: 1fr;
  align-items: start; /* keep natural heights, no stretching/cropping */
}
@media (min-width: 640px) { .results-grid { grid-template-columns: repeat(3, 1fr); } }

.results-item {
  padding: 0;
  background: none;
  cursor: zoom-in;
  border: 1px solid var(--color-glass-border);
  border-radius: 0.7rem;
  overflow: hidden;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.results-item img { width: 100%; height: auto; display: block; }
.results-item:hover {
  transform: translateY(-3px);
  border-color: color-mix(in oklab, var(--color-brand-green) 50%, transparent);
  box-shadow: 0 16px 36px -20px var(--color-brand-green);
}

/* ----- Lightbox ---------------------------------------------------------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(8, 8, 8, 0.88);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.lightbox.is-open { display: flex; }
.lightbox img { max-width: 92vw; max-height: 88vh; border-radius: 0.85rem; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); }
.lightbox__close {
  position: absolute;
  top: 1.25rem;
  right: 1.5rem;
  background: var(--color-glass-tint-strong);
  border: 1px solid var(--color-glass-border-strong);
  color: #fff;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 9999px;
  font-size: 1.4rem;
  cursor: pointer;
  line-height: 1;
}

/* ----- Navigation -------------------------------------------------------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in oklab, var(--color-bg-darker) 80%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--color-glass-border);
}
.nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 3.4rem; }
.nav__logo { display: inline-flex; align-items: center; gap: 0.55rem; font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; color: #fff; letter-spacing: -0.02em; }
.nav__logo-img { height: 1.85rem; width: auto; display: block; }
.nav__logo span { color: var(--color-brand-green); }
.nav__links { display: none; gap: 1.6rem; }
.nav__links a { font-size: 0.85rem; color: var(--color-text-secondary); transition: color 0.2s ease; }
.nav__links a:hover { color: var(--color-text-primary); }
@media (min-width: 1024px) { .nav__links { display: flex; } }

.nav__toggle {
  display: inline-flex;
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  padding: 0.5rem;
}
.nav__cta-desktop { display: none; }
@media (min-width: 1024px) { .nav__toggle { display: none; } .nav__cta-desktop { display: inline-flex; } }

.nav__mobile {
  display: none;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.75rem 1.25rem 1.25rem;
  border-top: 1px solid var(--color-glass-border);
}
.nav__mobile.is-open { display: flex; }
.nav__mobile a { padding: 0.6rem 0; color: var(--color-text-secondary); }

/* ----- Hero -------------------------------------------------------------- */

.hero { padding-block: clamp(1.25rem, 3vw, 2.25rem) clamp(2.5rem, 6vw, 4.5rem); position: relative; }
.hero__headline { font-size: clamp(2rem, 5.5vw, 3.6rem); font-weight: 800; }
.hero__sub {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.1rem, 2.3vw, 1.5rem);
  line-height: 1.35;
  color: var(--color-text-secondary);
  max-width: 40rem;
}

/* ----- Hero Vimeo video placeholder ------------------------------------- */

.hero-video {
  position: relative;
  width: 100%;
  max-width: 46rem;
  aspect-ratio: 16 / 9;
  margin-top: 0.5rem;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  /* dark poster with a subtle brand wash; replaced visually once an iframe is dropped in */
  background-color: #0c0f0e;
  background-image:
    radial-gradient(90% 120% at 50% 0%, rgba(0, 226, 151, 0.10), transparent 60%),
    linear-gradient(160deg, rgba(58, 28, 90, 0.22), rgba(0, 165, 109, 0.10));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 24px 60px -28px rgba(0, 0, 0, 0.9);
}

/* a real embed fills the frame */
.hero-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.hero-video__play {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.6rem;
  height: 4.6rem;
  padding-left: 0.25rem;
  border: none;
  border-radius: 9999px;
  color: #ffffff;
  cursor: pointer;
  background: linear-gradient(90deg, #19e84e 0%, #00e29a 50%, #00e6cc 100%);
  box-shadow: 0 12px 34px -10px color-mix(in oklab, var(--color-brand-green) 70%, transparent);
  transition: transform 0.2s ease, box-shadow 0.3s ease;
}
.hero-video__play::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  border: 2px solid color-mix(in oklab, var(--color-brand-green) 55%, transparent);
  animation: video-pulse 2.2s ease-out infinite;
}
.hero-video__play:hover {
  transform: scale(1.06);
  box-shadow: 0 16px 44px -10px color-mix(in oklab, var(--color-brand-green) 85%, transparent);
}

@keyframes video-pulse {
  0%   { transform: scale(1);   opacity: 0.7; }
  70%  { transform: scale(1.5); opacity: 0; }
  100% { transform: scale(1.5); opacity: 0; }
}

.hero-video__label {
  position: absolute;
  bottom: 0.85rem;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* ----- Hero myth-busting cards ------------------------------------------ */

.myth-cards {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  width: 100%;
  max-width: 56rem;
  margin-top: 1.35rem;
  text-align: left;
}
@media (min-width: 768px) { .myth-cards { grid-template-columns: repeat(3, 1fr); } }

.myth-card {
  display: flex;
  flex-direction: column;
  padding: 0;
  /* darker, more opaque frosted base + stronger blur so text stays readable
     over the busy order-flow background */
  background-color: rgba(13, 16, 18, 0.66);
  backdrop-filter: blur(28px) saturate(1.3);
  -webkit-backdrop-filter: blur(28px) saturate(1.3);
}

/* split the card into two equal halves, text vertically centered in each,
   so the divider and rows line up across all cards regardless of text length */
.myth-false,
.myth-true {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 1.15rem 1.4rem;
}
.myth-card .myth-true { border-top: 1px solid var(--color-glass-border); }

.myth-false .myth-txt {
  color: var(--color-text-secondary);
  font-size: 0.92rem;
}
.myth-true .myth-txt {
  color: var(--color-text-primary);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.98rem;
  line-height: 1.35;
}

.badge-x,
.badge-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 9999px;
  flex-shrink: 0;
}
.badge-x { background: rgba(255, 91, 107, 0.16); color: #ff6b6b; }
.badge-check {
  background: color-mix(in oklab, var(--color-brand-green) 16%, transparent);
  color: var(--color-brand-green);
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--color-brand-green) 30%, transparent);
}

/* ----- Disclaimers / footer --------------------------------------------- */

.disclaimer { font-size: 0.78rem; color: var(--color-text-muted); line-height: 1.7; }
.disclaimer + .disclaimer { margin-top: 0.9rem; }

.footer { border-top: 1px solid var(--color-glass-border); padding-block: 2.5rem; }
.footer__links { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.footer__links a { font-size: 0.85rem; color: var(--color-text-secondary); transition: color 0.2s ease; }
.footer__links a:hover { color: var(--color-brand-green); }

/* ----- Scroll reveal ----------------------------------------------------- */

.reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ----- Checklist --------------------------------------------------------- */

.checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.75rem; }
.checklist li { display: flex; gap: 0.7rem; align-items: flex-start; }
.checklist svg { color: var(--color-brand-green); flex-shrink: 0; margin-top: 0.15rem; }

/* ==========================================================================
   VISUAL DEPTH LAYER — gradient borders, section dividers, glow orbs
   ========================================================================== */

/* ----- Gradient hairline divider between sections ----------------------- */
.section { position: relative; }
.section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(100% - 2.5rem, 80rem);
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    color-mix(in oklab, var(--color-brand-green) 45%, transparent) 30%,
    color-mix(in oklab, var(--color-brand-purple-soft) 55%, transparent) 70%,
    transparent 100%);
}

/* ----- Gradient borders on glass cards (frosted + glowing edge) --------- */
.feature-card,
.accordion-item,
.price-box { position: relative; }

.feature-card::after,
.accordion-item::after,
.price-box::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg,
    color-mix(in oklab, var(--color-brand-green) 55%, transparent) 0%,
    rgba(255, 255, 255, 0.06) 45%,
    color-mix(in oklab, var(--color-brand-purple-soft) 55%, transparent) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  opacity: 0.45;
  transition: opacity 0.25s ease;
}
.feature-card:hover::after,
.accordion-item.is-open::after { opacity: 1; }
.price-box--highlight::after { opacity: 0.95; }

/* ----- Decorative glow orbs (hero + final CTA) -------------------------- */
.hero { overflow: hidden; }
.hero .container { position: relative; z-index: 2; }

/* blurred DeepCharts-style trading chart behind the hero */
.hero__chart {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(6px) saturate(1.2);
  opacity: 0.45;
  z-index: 0;
  pointer-events: none;
  /* fade the heatmap toward the edges so it blends into the background */
  -webkit-mask-image: radial-gradient(130% 115% at 50% 34%, #000 32%, transparent 84%);
          mask-image: radial-gradient(130% 115% at 50% 34%, #000 32%, transparent 84%);
}

.hero::before,
.hero::after {
  content: "";
  position: absolute;
  border-radius: 9999px;
  filter: blur(90px);
  z-index: 1;
  pointer-events: none;
}
.hero::before {
  width: 38rem; height: 38rem;
  top: -14rem; right: -10rem;
  background: radial-gradient(circle, rgba(0, 226, 151, 0.22) 0%, transparent 70%);
}
.hero::after {
  width: 34rem; height: 34rem;
  bottom: -16rem; left: -12rem;
  background: radial-gradient(circle, rgba(90, 43, 134, 0.30) 0%, transparent 70%);
}

/* ----- Section panels — subtle framed background for key sections ------- */
.section--framed > .container > .panel,
.panel {
  position: relative;
  border-radius: 1.5rem;
  padding: clamp(1.75rem, 4vw, 3rem);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0) 60%),
    linear-gradient(160deg, rgba(58, 28, 90, 0.18) 0%, rgba(0, 165, 109, 0.08) 100%);
  border: 1px solid var(--color-glass-border);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ----- Comparison sides: stronger glow per side ------------------------- */
.comparison__side--negative { box-shadow: 0 0 38px -22px #ff6b6b, inset 0 1px 0 rgba(255, 255, 255, 0.06); }
.comparison__side--positive { box-shadow: 0 0 38px -18px var(--color-brand-green), inset 0 1px 0 rgba(255, 255, 255, 0.06); }

/* ----- Nav: gradient bottom edge ---------------------------------------- */
.nav { position: sticky; }
.nav::after {
  content: "";
  position: absolute;
  bottom: -1px; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--color-brand-green) 50%, transparent), color-mix(in oklab, var(--color-brand-purple-soft) 50%, transparent), transparent);
}

/* Mentor card: two columns on wider screens */
@media (min-width: 768px) {
  #mentor .gradient-border > div { grid-template-columns: 1fr 1fr; align-items: start; }
}

/* sr-only fallback (in case CDN utility differs) */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ==========================================================================
   SECTION 2 — Akadémia lesson mock + 0→profi timeline
   ========================================================================== */

.akademia-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
  align-items: stretch;
}
@media (min-width: 920px) { .akademia-grid { grid-template-columns: 1.5fr 1fr; } }

/* ----- Lesson mock (fake app window) ------------------------------------ */
.lesson-mock { overflow: hidden; }

.lesson-mock__bar {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.7rem 1rem;
  background: rgba(8, 10, 12, 0.6);
  border-bottom: 1px solid var(--color-glass-border);
}
.lesson-mock__dot { width: 0.6rem; height: 0.6rem; border-radius: 9999px; background: var(--color-text-muted); opacity: 0.6; }
.lesson-mock__dot:nth-child(1) { background: #ff6b6b; }
.lesson-mock__dot:nth-child(2) { background: #f0b429; }
.lesson-mock__dot:nth-child(3) { background: var(--color-brand-green); }
.lesson-mock__title { margin-left: 0.6rem; font-size: 0.78rem; color: var(--color-text-muted); }

.lesson-mock__body { display: grid; grid-template-columns: 1fr; }
@media (min-width: 520px) { .lesson-mock__body { grid-template-columns: 0.95fr 1.05fr; } }

.lesson-mock__nav {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 1rem;
  border-bottom: 1px solid var(--color-glass-border);
}
@media (min-width: 520px) { .lesson-mock__nav { border-bottom: 0; border-right: 1px solid var(--color-glass-border); } }

.lesson-mock__module {
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0.6rem 0 0.2rem;
}
.lesson-mock__module:first-child { margin-top: 0; }

.lesson-mock__lesson {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.5rem;
  border-radius: 0.5rem;
  font-size: 0.82rem;
  color: var(--color-text-secondary);
}
.lesson-mock__lesson.is-active {
  background: color-mix(in oklab, var(--color-brand-green) 12%, transparent);
  color: var(--color-text-primary);
}
.lesson-mock__lesson.is-done { color: var(--color-text-muted); }

.lm-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.1rem; height: 1.1rem; border-radius: 9999px; flex-shrink: 0;
  font-size: 0.62rem; line-height: 1;
}
.lm-check { background: color-mix(in oklab, var(--color-brand-green) 18%, transparent); color: var(--color-brand-green); }
.lm-play { background: var(--color-brand-green); color: #06251a; }
.lm-dot { border: 1.5px solid var(--color-text-muted); width: 0.85rem; height: 0.85rem; }

.lesson-mock__progress {
  margin-top: 0.7rem;
  height: 6px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.lesson-mock__progress > span {
  display: block; height: 100%;
  background: linear-gradient(90deg, #19e84e, #00e6cc);
  border-radius: inherit;
}
.lesson-mock__progress-label { font-size: 0.66rem; color: var(--color-text-muted); margin-top: 0.35rem; }

.lesson-mock__main { display: flex; flex-direction: column; gap: 0.8rem; padding: 1rem; }
.lesson-mock__video {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 0.6rem;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(90% 120% at 50% 0%, rgba(0, 226, 151, 0.10), transparent 60%),
    linear-gradient(160deg, rgba(58, 28, 90, 0.30), rgba(0, 165, 109, 0.12));
  border: 1px solid var(--color-glass-border);
}
.lesson-mock__playbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.8rem; height: 2.8rem; padding-left: 0.15rem;
  border-radius: 9999px; color: #fff; font-size: 1rem;
  background: linear-gradient(90deg, #19e84e, #00e29a 60%, #00e6cc);
  box-shadow: 0 8px 22px -8px color-mix(in oklab, var(--color-brand-green) 70%, transparent);
}
.lesson-mock__rows { display: grid; gap: 0.5rem; }
.lesson-mock__rows > span { height: 0.6rem; border-radius: 9999px; background: rgba(255, 255, 255, 0.07); }
.lesson-mock__rows > span.short { width: 60%; }
.lesson-mock__check { font-size: 0.82rem; }
.lesson-mock__check li { color: var(--color-text-secondary); }

/* ----- 0 → profi step timeline ------------------------------------------ */
.step-timeline {
  list-style: none;
  margin: 0;
  padding: 0.25rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  position: relative;
}
.step-timeline li { position: relative; display: flex; gap: 0.9rem; align-items: flex-start; }
/* connector line through the number badges */
.step-timeline li:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 1.05rem;
  top: 2.1rem;
  bottom: -1.1rem;
  width: 2px;
  background: linear-gradient(180deg, color-mix(in oklab, var(--color-brand-green) 50%, transparent), color-mix(in oklab, var(--color-brand-purple-soft) 45%, transparent));
}
.step-timeline__num {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.1rem; height: 2.1rem;
  border-radius: 9999px;
  font-family: var(--font-display); font-weight: 700; font-size: 0.95rem;
  color: var(--color-brand-green);
  background: color-mix(in oklab, var(--color-brand-green) 12%, transparent);
  border: 1.5px solid color-mix(in oklab, var(--color-brand-green) 45%, transparent);
}
.step-timeline li.is-goal .step-timeline__num {
  color: #2a1e02;
  background: linear-gradient(135deg, var(--color-gold-soft), var(--color-gold));
  border-color: var(--color-gold);
}
.step-timeline__txt strong { font-family: var(--font-display); color: var(--color-text-primary); font-size: 0.98rem; }
.step-timeline__txt p { margin-top: 0.15rem; font-size: 0.85rem; color: var(--color-text-secondary); }

/* ==========================================================================
   SECTION 3 — Prop economics (compare + stat flow + certificate)
   ========================================================================== */

.prop-compare {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
  max-width: 56rem;
  margin-inline: auto;
}
@media (min-width: 768px) { .prop-compare { grid-template-columns: 1fr 1fr; } }

.prop-card { padding: 1.6rem; }
.prop-card--neg { border-color: color-mix(in oklab, #ff6b6b 40%, transparent); }
.prop-card--pos {
  border-color: color-mix(in oklab, var(--color-brand-green) 50%, transparent);
  box-shadow: 0 0 42px -18px var(--color-brand-green);
}
.prop-card__big {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.5rem;
  margin: 0.9rem 0 1rem;
  color: var(--color-text-primary);
}
.prop-card--pos .prop-card__big { color: var(--color-brand-green); }
.prop-card__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.7rem; }
.prop-card__list li { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.92rem; }
.prop-card__list li.neg { color: var(--color-text-muted); }
.prop-x { color: #ff6b6b; flex-shrink: 0; }

/* stat flow */
.stat-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 2rem;
}
.stat {
  display: flex; flex-direction: column; align-items: center;
  padding: 1rem 1.25rem;
  min-width: 7.5rem;
}
.stat__num { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; color: var(--color-text-primary); }
.stat__label { font-size: 0.72rem; color: var(--color-text-muted); margin-top: 0.2rem; text-align: center; }
.stat--hl { border-color: color-mix(in oklab, var(--color-brand-green) 55%, transparent); box-shadow: 0 0 40px -16px var(--color-brand-green); }
.stat--hl .stat__num { color: var(--color-brand-green); }
.stat__arrow { color: var(--color-brand-green-muted); font-size: 1.1rem; }
@media (max-width: 560px) { .stat__arrow { transform: rotate(90deg); } }

/* prop economics as a single vertical flow (leads the eye down) */
.prop-flow-wrap { max-width: 40rem; margin: 0.5rem auto 0; }
.prop-flow { gap: 1.5rem; }
.prop-flow .step-timeline__txt strong { font-size: 1.2rem; color: var(--color-brand-green); }
.prop-flow li.is-goal .step-timeline__txt strong { color: var(--color-gold-soft); }
.prop-flow .step-timeline__txt p { font-size: 0.92rem; margin-top: 0.25rem; }

/* multi-account copy callout */
.copy-callout {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  max-width: 48rem;
  margin: 2.25rem auto 0;
  padding: clamp(1.25rem, 3vw, 1.75rem);
  text-align: left;
}
.copy-callout__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 0.9rem;
  color: var(--color-brand-green);
  background: color-mix(in oklab, var(--color-brand-green) 14%, transparent);
}
.copy-callout__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.1rem, 2.4vw, 1.5rem);
  line-height: 1.25;
  color: var(--color-text-primary);
}
.copy-callout__text { margin-top: 0.4rem; font-size: 0.95rem; color: var(--color-text-secondary); }
@media (max-width: 560px) { .copy-callout { flex-direction: column; text-align: center; } }

/* real payout certificate gallery ($6k day) */
.cert-block { margin-top: 2.5rem; text-align: center; }
.cert-block__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(0.9rem, 1.7vw, 1.05rem);
  color: var(--color-text-secondary);
  margin-top: 1.1rem;
}
.cert-gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.85rem;
  max-width: 56rem;
  margin-inline: auto;
}

.cert-item {
  padding: 0;
  border: 1px solid var(--color-glass-border);
  background: none;
  border-radius: 0.7rem;
  overflow: hidden;
  cursor: zoom-in;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.cert-item:hover {
  transform: translateY(-3px);
  border-color: color-mix(in oklab, var(--color-brand-green) 55%, transparent);
  box-shadow: 0 16px 36px -20px var(--color-brand-green);
}
.cert-item img { width: 100%; display: block; }

.cert-cell { margin: 0; display: flex; flex-direction: column; gap: 0.5rem; flex: 0 1 calc((100% - 0.85rem) / 2); }
@media (min-width: 720px) { .cert-cell { flex-basis: calc((100% - 1.7rem) / 3); } }
.cert-cell figcaption { font-size: 0.82rem; color: var(--color-text-secondary); }
.cert-cell__acct { font-family: var(--font-display); font-weight: 700; color: var(--color-brand-green); }

.cert-note { margin-top: 1.1rem; font-size: 0.8rem; color: var(--color-text-muted); }