/* ═══════════════════════════════════════════════════════════════════
   RESET & BASE
═══════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Any element carrying the HTML `hidden` attribute must actually hide,
   full stop — without this, a component class that sets its own `display`
   (e.g. .alert { display: flex }) silently wins over the browser's default
   [hidden] { display: none }, since author stylesheets always beat the
   user-agent stylesheet regardless of selector specificity. Bit us once
   already (the now-removed .erdeklodes-qualifier block); this stops the
   whole category of bug from recurring on any future component. */
[hidden] { display: none !important; }

html {
  /* Solid fallback, not transparent — .bg-layer is position:fixed and
     normally covers the full viewport, but iOS Safari's rubber-band
     overscroll bounce can momentarily detach fixed elements from the
     viewport, exposing whatever's behind them. Without a solid color
     here that gap flashes browser-default white instead of the theme. */
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font);
  font-size: var(--text-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
  overflow-x: clip;
}

body { min-height: 100vh; overflow-x: clip; background: var(--color-bg); }
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font-family: var(--font); cursor: pointer; border: none; }

/* ═══════════════════════════════════════════════════════════════════
   LAYOUT
═══════════════════════════════════════════════════════════════════ */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--sp-48);
}
.section            { padding-block: var(--sp-128); }
.section--flush-top { padding-top: 0; }

@media (max-width: 640px) {
  .container { padding-inline: var(--sp-24); }
  .section   { padding-block: var(--sp-96); }
}

/* ═══════════════════════════════════════════════════════════════════
   BACKGROUND LAYER  (fixed, full-screen)
═══════════════════════════════════════════════════════════════════ */
.bg-layer {
  /* z-index:0, not negative — negative z-index stacks below the html/body
     canvas background (needed for the iOS overscroll fix above), which
     hid this layer entirely. .page-wrap's z-index:1 still keeps page
     content in front of this, so the stacking order is unaffected. */
  position: fixed; top: 0; left: 0; right: 0; z-index: 0;
  /* inset:0's implicit height doesn't reliably track the *real* visible
     viewport on mobile as the browser's address bar hides/shows — it can
     size against the larger static layout viewport instead, so the box
     itself keeps resizing while scrolling, which reads as the image
     drifting even with object-position:center. 100dvh is the CSS unit
     built specifically to track the actual visible viewport instead. */
  height: 100vh;
  height: 100dvh;
  pointer-events: none; overflow: hidden;
}
.bg-layer picture {
  /* <picture> is inline by default — display:contents removes it from the
     box tree so .bg-layer__img's width/height:100% still resolve against
     .bg-layer itself, same as before the mobile <source> was added. */
  display: contents;
}
.bg-layer__img {
  width: 100%; height: 100%;
  /* center, not "center top" — this is position:fixed;inset:0, and on
     mobile the box's actual height changes as the browser's address bar
     shows/hides during scroll. Top-anchoring made that height change
     reveal more of the image at the bottom, which read as the image
     drifting upward. Centering keeps the same crop regardless. */
  object-fit: cover; object-position: center center;
  display: block;
}
.bg-layer__veil {
  position: absolute; inset: 0;
  background: rgba(31,35,53,.55);
}
/* 88px = 16px padding-top + 56px header__inner height + 16px padding-bottom */
.page-wrap { position: relative; z-index: 1; overflow-x: clip; padding-top: 88px; }
.admin-bar .page-wrap { padding-top: 120px; } /* 88 + 32px admin bar */
@media screen and (max-width: 782px) { .admin-bar .page-wrap { padding-top: 134px; } } /* 88 + 46px */

/* ═══════════════════════════════════════════════════════════════════
   TYPOGRAPHY HELPERS
═══════════════════════════════════════════════════════════════════ */
.t-display  { font-size: var(--text-8xl); font-weight: 800; line-height: 1.0; }
.t-h1       { font-size: var(--text-7xl); font-weight: 800; line-height: 1.05; }
.t-h2       { font-size: var(--text-5xl); font-weight: 800; line-height: 1.1; }
.t-h3       { font-size: var(--text-4xl); font-weight: 700; line-height: 1.2; }
.t-h4       { font-size: var(--text-2xl); font-weight: 700; }
.t-body-lg  { font-size: var(--text-2xl); color: var(--color-muted); line-height: 1.6; }
.t-body     { font-size: var(--text-base); color: var(--color-muted); line-height: 1.6; }
.text-primary   { color: var(--color-primary); }
.text-muted     { color: var(--color-muted); }
.green          { color: var(--color-primary); }
.italic         { font-style: italic; color: var(--color-primary); text-shadow: 0 0 60px rgba(120,255,0,.2); }
.italic-primary { font-style: italic; color: var(--color-primary); text-shadow: 0 0 60px rgba(120,255,0,.2); }
.neon-mark {
  display: inline;
  background: rgba(120,255,0,.14);
  border: 1px solid rgba(120,255,0,.28);
  border-radius: 4px;
  padding: 1px 7px;
  font-weight: 700;
  color: var(--color-primary);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* ── Typewriter cursor ── */
.tw-cursor {
  color: var(--color-primary); font-weight: 300;
  animation: tw-blink 800ms step-end infinite;
}
@keyframes tw-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* ═══════════════════════════════════════════════════════════════════
   BUTTONS
═══════════════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex; align-items: center; gap: var(--sp-8);
  border-radius: var(--radius); font-family: var(--font);
  white-space: nowrap; line-height: 1; cursor: pointer; border: none;
  transition: all var(--dur-fast) linear;
}
.btn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; }

.btn-primary {
  background: var(--grad-btn) !important; color: var(--color-text) !important;
  font-size: var(--text-xl); font-weight: 500;
  text-shadow: 0 0 2px var(--color-primary-dk);
  padding: var(--sp-16) var(--sp-48);
  box-shadow: var(--shadow-glow);
  text-decoration: none !important;
}
.btn-primary:hover { transform: scale(.93); box-shadow: 0 0 52px rgba(120,255,0,.35); }

/* Larger variant for specific standalone CTAs (garancia, pricing-info,
   instructor section) — desktop only, ~20-25% bigger than the standard
   .btn-primary. Mobile keeps the regular size. */
@media (min-width: 768px) {
  .btn-primary--lg {
    font-size: var(--text-2xl);
    padding: var(--sp-20) 60px;
  }
}

.btn-primary-sm {
  background: var(--grad-btn) !important; color: var(--color-text) !important;
  font-size: var(--text-base); font-weight: 500;
  text-shadow: 0 0 2px var(--color-primary-dk);
  padding: var(--sp-8) var(--sp-24);
  text-decoration: none !important;
}
.btn-primary-sm:hover { transform: scale(.93); }

.btn-ghost {
  background: transparent; color: var(--color-text);
  font-size: var(--text-xl); font-weight: 600;
  padding: var(--sp-16) var(--sp-48);
  border: 1px solid rgba(120,255,0,.55);
  transition: background var(--dur-fast), border-color var(--dur-fast);
}
.btn-ghost:hover { background: rgba(120,255,0,.08); border-color: rgba(120,255,0,.9); }

.btn-ghost-sm {
  background: rgba(250,250,250,.05); color: var(--color-text);
  font-size: var(--text-base); font-weight: 500;
  padding: var(--sp-8) var(--sp-16);
  border: 1px solid var(--color-border);
  transition: background var(--dur-fast);
}
.btn-ghost-sm:hover { background: rgba(250,250,250,.1); }

.btn-disabled { opacity: .35; pointer-events: none; }

@media (max-width: 640px) {
  .btn-primary { padding: var(--sp-16) var(--sp-24); font-size: var(--text-base); white-space: normal; text-align: center; }
  .btn-ghost   { padding: var(--sp-16) var(--sp-24); font-size: var(--text-base); white-space: normal; text-align: center; }
}

/* ═══════════════════════════════════════════════════════════════════
   TAGS
═══════════════════════════════════════════════════════════════════ */
.tag {
  display: inline-block; padding: 6px 18px;
  border-radius: var(--radius);
  font-size: var(--text-base); font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
}
.tag-green { background: rgba(120,255,0,.12); color: var(--color-primary); }
.tag-white { background: rgba(250,250,250,.08); color: var(--color-text); }
.tag-dim   { background: var(--color-surface-2); color: var(--color-muted); }

/* ═══════════════════════════════════════════════════════════════════
   ALERTS
═══════════════════════════════════════════════════════════════════ */
.alert {
  display: flex; align-items: flex-start; gap: var(--sp-16);
  padding: var(--sp-16) var(--sp-24);
  border-radius: var(--radius-in); font-size: var(--text-base);
}
.alert-ok   { background: rgba(120,255,0,.08);  border: 1px solid rgba(120,255,0,.25); }
.alert-err  { background: rgba(255,70,70,.08);  border: 1px solid rgba(255,70,70,.25); }
.alert-info { background: rgba(100,160,255,.08);border: 1px solid rgba(100,160,255,.25); }
.alert__icon  { font-size: var(--text-xl); flex-shrink: 0; }
.alert__title { font-weight: 700; }
.alert__body  { color: var(--color-muted); font-size: var(--text-base); margin-top: 4px; }

/* ═══════════════════════════════════════════════════════════════════
   FORMS
═══════════════════════════════════════════════════════════════════ */
.form-group { display: flex; flex-direction: column; gap: var(--sp-8); }
.form-label {
  font-size: var(--text-base); font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: var(--color-muted);
}
.form-input {
  width: 100%; padding: 11px 14px;
  background: rgba(0,0,0,.22); border: 1px solid rgba(255,255,255,.07);
  border-radius: 10px; font-family: var(--font);
  font-size: var(--text-base); color: var(--color-text); outline: none;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.form-input::placeholder { color: rgba(250,250,250,.28); }
.form-input:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(120,255,0,.09); }
textarea.form-input { border-radius: 10px; resize: vertical; min-height: 100px; }
select.form-input {
  appearance: none; -webkit-appearance: none; -moz-appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='rgba(250,250,250,0.35)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px;
}

.form-bento {
  position: relative; overflow: hidden;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(37,42,61,.72);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  max-width: 680px;
}
.form-bento__head {
  padding: 28px 28px 22px;
  border-bottom: 1px solid rgba(255,255,255,.05);
  display: flex; align-items: center; gap: 14px;
  position: relative; z-index: 1;
}
.form-bento__icon {
  width: 38px; height: 38px; border-radius: 9px; flex-shrink: 0;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09);
  display: flex; align-items: center; justify-content: center;
}
.form-bento__icon svg { width: 18px; height: 18px; stroke: rgba(250,250,250,.5); fill: none; stroke-width: 1.5; }
.form-bento__title { font-size: var(--text-lg); font-weight: 700; }
.form-bento__sub   { font-size: var(--text-base); color: var(--color-muted); margin-top: 2px; line-height: 1.4; }
.form-bento__body  { padding: 24px 28px 28px; position: relative; z-index: 1; }
.form-bento__grid  { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-bento__grid .form-group--full { grid-column: 1 / -1; }
.form-bento__foot  { display: flex; justify-content: flex-end; margin-top: 20px; }
@media (max-width: 560px) { .form-bento__grid { grid-template-columns: 1fr; } }

/* ═══════════════════════════════════════════════════════════════════
   GLASS CARD BASE  +  EDGE GLOW (cursor-proximity border light)
═══════════════════════════════════════════════════════════════════ */
.card {
  position: relative; overflow: hidden;
  background: rgba(37,42,61,.6);
  border: 1px solid rgba(120,255,0,.10);
  border-radius: var(--radius-card);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  transition: border-color var(--dur-base);
}
.card::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .07;
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.9) 1px, transparent 1px);
  background-size: 14px 14px;
}

[data-glow]::after {
  content: '';
  position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: radial-gradient(
    200px circle at var(--glow-x, -9999px) var(--glow-y, -9999px),
    rgba(120,255,0,.6), transparent 65%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none; z-index: 5;
  opacity: 0; transition: opacity var(--dur-base) ease;
}
[data-glow]:hover::after { opacity: 1; }

/* ═══════════════════════════════════════════════════════════════════
   SCROLL REVEAL
═══════════════════════════════════════════════════════════════════ */
.reveal {
  opacity: 0; transform: translateY(30px);
  transition: opacity 500ms var(--ease), transform 500ms var(--ease);
}
.reveal.visible  { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: 72ms; }
.reveal-d2 { transition-delay: 144ms; }
.reveal-d3 { transition-delay: 216ms; }
.reveal-d4 { transition-delay: 288ms; }
.reveal-d5 { transition-delay: 360ms; }
.reveal-d6 { transition-delay: 432ms; }

/* ═══════════════════════════════════════════════════════════════════
   HEADER
═══════════════════════════════════════════════════════════════════ */
.header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100; padding-block: var(--sp-16);
  /* No background/blur here on purpose — this box spans full viewport width,
     wider than the rounded bar inside it. Any visual treatment here paints a
     square-edged strip beyond the rounded corners. All visuals live on
     .header__inner so only the rounded container is ever visible. */
  transition: opacity 450ms ease;
}
/* Faded out while #csomagok (the packages section) is under the header —
   toggled by app.js via IntersectionObserver */
.header--hidden { opacity: 0; pointer-events: none; }
.admin-bar .header { top: 32px; }
@media screen and (max-width: 782px) { .admin-bar .header { top: 46px; } }

.header__inner {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-16); height: 56px; padding-inline: var(--sp-20);
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transition: background var(--dur-base), border-color var(--dur-base), box-shadow var(--dur-base);
}
.header__inner::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(ellipse at 50% -40%, rgba(120,255,0,.07), transparent 70%);
}

/* Scrolled state — only the rounded bar goes solid brand-dark; the strip
   around it stays fully transparent, so no square-edged block ever appears
   next to the rounded corners. Toggled by app.js (.header.is-scrolled). */
.header.is-scrolled .header__inner {
  background: rgba(31,35,53,.94);
  border-color: rgba(255,255,255,.14);
  box-shadow: 0 8px 28px rgba(0,0,0,.28);
}

.header__logo {
  display: inline-flex; align-items: center; flex-shrink: 0;
}
.header__logo-img {
  height: 40px; width: auto; display: block;
}
.header__nav { display: none; }
@media (min-width: 768px) {
  .header__nav { display: flex; align-items: center; gap: var(--sp-24); position: relative; }
}
.header__nav a {
  font-size: var(--text-base); font-weight: 600; white-space: nowrap;
  color: rgba(250,250,250,.65); transition: color var(--dur-fast);
}
.header__nav a:hover { color: var(--color-text); }
.header__nav a.active { color: var(--color-text); }
.header__nav a.active::after {
  content: ''; display: block; width: 4px; height: 4px; border-radius: 50%;
  background: var(--color-primary); box-shadow: 0 0 6px rgba(120,255,0,.8);
  margin: 3px auto 0;
}
.header__actions { display: flex; align-items: center; gap: var(--sp-12); position: relative; }
.header__burger {
  display: flex; width: 36px; height: 36px;
  border-radius: var(--radius-in);
  background: rgba(255,255,255,.05); border: 1px solid var(--color-border);
  align-items: center; justify-content: center; cursor: pointer;
}
@media (min-width: 768px) { .header__burger { display: none; } }
@media (max-width: 767px) {
  .header__actions .btn-primary-sm { display: none; }
  .header__logo-img { height: 28px; }
}
.burger-lines { display: flex; flex-direction: column; gap: 4px; }
.burger-lines span { display: block; width: 18px; height: 2px; background: var(--color-text); border-radius: 2px; }

/* Mobile nav drawer */
.mobile-nav {
  display: none;
  position: absolute; top: calc(100% + 8px); left: 0; right: 0;
  background: rgba(31,35,53,.97);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius-card);
  padding: var(--sp-24);
  flex-direction: column; gap: var(--sp-16);
  z-index: 50;
}
.mobile-nav.open { display: flex; }
.mobile-nav a { font-size: var(--text-xl); font-weight: 600; color: rgba(250,250,250,.75); transition: color var(--dur-fast); }
.mobile-nav a:hover { color: var(--color-text); }

/* Language switcher */
.lang-switch { position: relative; }
.lang-switch__btn {
  display: flex; align-items: center; gap: 5px;
  background: none !important; border: none !important; box-shadow: none !important;
  cursor: pointer;
  color: rgba(250,250,250,.65) !important; font-family: var(--font);
  font-size: var(--text-base); font-weight: 600;
  padding: 6px 10px; border-radius: var(--radius-in);
  transition: background var(--dur-fast), color var(--dur-fast);
}
.lang-switch__btn:hover { background: rgba(255,255,255,.06) !important; color: var(--color-text) !important; }
.lang-switch__btn svg {
  width: 13px; height: 13px; stroke: currentColor; fill: none;
  stroke-width: 2.5; opacity: .5;
  transition: transform var(--dur-fast), opacity var(--dur-fast);
}
.lang-switch.open .lang-switch__btn { color: var(--color-text); }
.lang-switch.open .lang-switch__btn svg { transform: rotate(180deg); opacity: .8; }

.lang-switch__dropdown {
  display: none; position: absolute; top: calc(100% + 8px); right: 0;
  background: rgba(26,29,46,.97);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius-card);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 8px 32px rgba(0,0,0,.35);
  min-width: 148px; overflow: hidden; z-index: 200;
}
.lang-switch.open .lang-switch__dropdown { display: block; }
.lang-switch__opt {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 16px; font-size: var(--text-base); font-weight: 500;
  color: rgba(250,250,250,.65);
  transition: background var(--dur-fast), color var(--dur-fast);
}
.lang-switch__opt:hover { background: rgba(255,255,255,.06); color: var(--color-text); }
.lang-switch__opt--active { color: var(--color-text); font-weight: 700; }
.lang-switch__opt--active::after {
  content: ''; display: block; width: 5px; height: 5px; border-radius: 50%;
  background: var(--color-primary); box-shadow: 0 0 6px rgba(120,255,0,.7);
  margin-left: auto;
}

/* Single-flag language link */
.lang-flag-btn {
  display: flex; align-items: center; justify-content: center;
  font-size: var(--text-2xl); line-height: 1;
  padding: 4px 8px; border-radius: var(--radius-in);
  text-decoration: none; opacity: .75;
  transition: opacity var(--dur-fast), transform var(--dur-fast);
}
.lang-flag-btn:hover { opacity: 1; transform: scale(1.15); }

/* Hero — trust chips use soft white instead of neon for checkmarks */
.hero-cinematic .trust__chip svg { stroke: rgba(250,250,250,.4); }
.hero-cinematic .trust__chip     { color: rgba(250,250,250,.55); }

/* ═══════════════════════════════════════════════════════════════════
   HERO ELEMENTS
═══════════════════════════════════════════════════════════════════ */
.hero-badge {
  display: inline-flex; align-items: center; gap: var(--sp-8);
  padding: var(--sp-8) var(--sp-16); border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.05);
  font-size: var(--text-base); cursor: pointer;
  transition: background var(--dur-fast);
  margin-bottom: var(--sp-32);
}
.hero-badge:hover { background: rgba(255,255,255,.09); }
.hero-badge__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--color-primary); box-shadow: 0 0 8px rgba(120,255,0,.7); flex-shrink: 0;
}
.hero-badge__new  { font-weight: 700; }
.hero-badge__text { color: var(--color-muted); }
.hero-badge svg   { width: 14px; height: 14px; stroke: rgba(250,250,250,.3); fill: none; stroke-width: 2; }

.trust { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-24); }
.trust__chip { display: flex; align-items: center; gap: var(--sp-8); font-size: var(--text-base); color: var(--color-muted); }
.trust__chip svg { width: 16px; height: 16px; stroke: rgba(120,255,0,.6); fill: none; stroke-width: 2; flex-shrink: 0; }

/* ═══════════════════════════════════════════════════════════════════
   HERO SECTION
═══════════════════════════════════════════════════════════════════ */
.hero {
  padding-block: var(--sp-128) var(--sp-96);
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.hero__headline {
  font-size: clamp(var(--text-5xl), 7vw, var(--text-8xl));
  font-weight: 800; line-height: 1.05; max-width: 900px;
  margin-bottom: var(--sp-24);
  text-transform: uppercase;
}
.hero__sub {
  font-size: var(--text-2xl); color: rgba(250,250,250,.88);
  font-weight: 600; line-height: 1.55; max-width: 560px; margin-bottom: var(--sp-40);
}
.hero__actions {
  display: flex; gap: var(--sp-16); flex-wrap: wrap;
  justify-content: center; margin-bottom: var(--sp-32);
}

/* ═══════════════════════════════════════════════════════════════════
   SECTION HEAD  (shared title + subtitle block)
═══════════════════════════════════════════════════════════════════ */
.section-head { text-align: center; margin-bottom: var(--sp-64); }
.section-head__title {
  font-size: clamp(var(--text-4xl), 5.5vw, var(--text-7xl));
  font-weight: 800; line-height: 1.1; margin-bottom: var(--sp-16);
}
.section-head__title::after {
  content: '';
  display: block;
  width: 52px; height: 2px;
  background: linear-gradient(90deg, transparent, #78FF00, transparent);
  box-shadow: 0 0 14px rgba(120,255,0,.55);
  margin: 10px auto 0;
  border-radius: 2px;
}
.section-head__sub {
  font-size: var(--text-xl); color: var(--color-muted);
  line-height: 1.5; max-width: 620px; margin-inline: auto;
}

/* ═══════════════════════════════════════════════════════════════════
   FEATURE CARDS
═══════════════════════════════════════════════════════════════════ */
.feat-grid { display: grid; gap: var(--sp-24); grid-template-columns: 1fr; }
@media (min-width: 768px) { .feat-grid { grid-template-columns: repeat(3,1fr); } }

.feat-card {
  position: relative; overflow: hidden;
  border-radius: var(--radius-card);
  border: 1px solid rgba(120,255,0,.10);
  background: rgba(37,42,61,.65);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  padding: var(--sp-48); display: flex; flex-direction: column;
  min-height: 420px; transition: border-color var(--dur-base);
}

.feat-card__icon {
  width: 40px; height: 40px; border-radius: var(--radius-in);
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(250,250,250,.05);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--sp-20);
}
.feat-card__icon svg { width: 20px; height: 20px; stroke: rgba(250,250,250,.55); fill: none; stroke-width: 1.5; }
.feat-card__title { font-size: var(--text-2xl); font-weight: 700; margin-bottom: var(--sp-8); line-height: 1.25; }
.feat-card__desc  { font-size: var(--text-xl); color: rgba(250,250,250,.6); line-height: 1.7; }

.feat-illus { margin-top: auto; padding-top: var(--sp-24); flex: 1; display: flex; flex-direction: column; justify-content: flex-end; }
.feat-illus__panel {
  border-radius: var(--radius-card); padding: var(--sp-20);
  border: 1px solid rgba(255,255,255,.07);
  background: rgba(15,17,28,.55);
  position: relative; overflow: hidden;
}

/* Illustration: nodes */
.illus-node {
  width: 30px; height: 30px; border-radius: 7px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08);
  display: flex; align-items: center; justify-content: center; color: rgba(250,250,250,.3);
}
.illus-node svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 1.5; }
.illus-node-active { background: rgba(120,255,0,.12); border-color: rgba(120,255,0,.3); color: var(--color-primary); }
.illus-core {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  background: var(--grad-btn); border: 1px solid rgba(255,255,255,.15);
  box-shadow: 0 0 20px rgba(120,255,0,.4);
  display: flex; align-items: center; justify-content: center; color: var(--color-bg);
}
.illus-core svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; }

/* Illustration: chart */
.illus-tooltip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: var(--radius-in);
  background: rgba(255,255,255,.08); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.1);
  font-size: var(--text-base); font-weight: 700; margin-bottom: 14px;
}
.illus-tooltip svg { width: 12px; height: 12px; stroke: var(--color-primary); fill: none; stroke-width: 2.5; }
.illus-bars { display: flex; align-items: flex-end; gap: 3px; height: 64px; }
.illus-bar      { flex: 1; border-radius: 3px 3px 0 0; background: rgba(120,255,0,.35); }
.illus-bar-peak { background: var(--color-primary); box-shadow: 0 0 12px rgba(120,255,0,.6); }

/* Illustration: radar */
.illus-radar { display: flex; align-items: center; justify-content: center; position: relative; width: 160px; height: 160px; margin: 0 auto; }
.illus-ring  { position: absolute; border-radius: 50%; border-style: solid; }
.illus-dot   { position: absolute; border-radius: 50%; }
.illus-center {
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(120,255,0,.1); border: 1px solid rgba(120,255,0,.3);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-primary); box-shadow: 0 0 22px rgba(120,255,0,.22);
}
.illus-center svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.5; }

/* ═══════════════════════════════════════════════════════════════════
   STEPS
═══════════════════════════════════════════════════════════════════ */
.steps { display: grid; grid-template-columns: 1fr; gap: var(--sp-48); position: relative; }
.steps::before {
  content: ''; display: none; position: absolute;
  top: 48px; left: 17%; right: 17%; height: 1px;
  background: linear-gradient(to right, transparent, rgba(120,255,0,.25), transparent);
}
@media (min-width: 768px) {
  .steps { grid-template-columns: repeat(3,1fr); }
  .steps::before { display: block; }
}

.step { display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; z-index: 1; }
.step__circle {
  width: 96px; height: 96px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--sp-24);
  background: rgba(37,42,61,.9); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 0 28px rgba(120,255,0,.05);
}
.step__circle svg { width: 36px; height: 36px; stroke: rgba(250,250,250,.55); fill: none; stroke-width: 1.5; }
.step__circle-active {
  background: rgba(120,255,0,.1); border-color: rgba(120,255,0,.3);
  box-shadow: 0 0 32px rgba(120,255,0,.2); position: relative;
}
.step__circle-active svg { stroke: var(--color-primary); }
.step__circle-active::after {
  content: ''; position: absolute; top: -4px; right: -4px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--color-primary); box-shadow: 0 0 10px rgba(120,255,0,.8);
}
.step__title { font-size: var(--text-xl); font-weight: 700; margin-bottom: var(--sp-8); }
.step__desc  { font-size: var(--text-xl); color: rgba(250,250,250,.6); line-height: 1.7; max-width: 240px; margin-inline: auto; }
.step__desc strong { color: var(--color-primary); font-weight: 700; }

/* ── "You are here" annotation on step 1 ── */
.step-you-are-here {
  position: absolute; top: -36px; left: 19%;
  display: flex; align-items: flex-end; gap: 8px;
  pointer-events: none; z-index: 2;
}
.step-you-are-here__arrow { width: 64px; height: 38px; flex-shrink: 0; }
.step-you-are-here__text {
  font-size: var(--text-sm); font-style: italic; font-weight: 600;
  color: var(--color-primary); line-height: 1.35;
  text-shadow: 0 0 20px rgba(120,255,0,.4);
  transform: rotate(-4deg); transform-origin: bottom left;
  white-space: nowrap;
}
@media (max-width: 767px) {
  .steps { margin-top: var(--sp-48); }
  .step-you-are-here {
    /* right-side placement: arrow tip (bottom-left of SVG) points toward
       the centered step circle — works across all common phone widths */
    display: flex;
    top: -46px;
    left: auto;
    right: var(--sp-16);
  }
  .step-you-are-here__arrow { display: none; }
  .step-you-are-here__text  { font-size: 11px; }
}

/* ═══════════════════════════════════════════════════════════════════
   TESTIMONIALS  (.t-card)
═══════════════════════════════════════════════════════════════════ */
.t-grid { display: grid; gap: var(--sp-24); grid-template-columns: 1fr; }
@media (min-width: 768px) { .t-grid { grid-template-columns: repeat(2,1fr); } }

.t-card {
  position: relative; overflow: hidden;
  background: rgba(37,42,61,.6);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(120,255,0,.10);
  border-radius: var(--radius-card);
  padding: var(--sp-48); display: flex; flex-direction: column; gap: var(--sp-24);
  transition: border-color var(--dur-base);
}
.t-card::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .07;
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.9) 1px, transparent 1px);
  background-size: 14px 14px;
}

.t-stars { display: flex; gap: var(--sp-4); color: var(--color-primary); }
.t-stars svg { width: 16px; height: 16px; fill: currentColor; }

.t-quote {
  font-size: var(--text-xl); font-weight: 600;
  line-height: 1.6; color: rgba(250,250,250,.82); font-style: italic;
}
.t-quote::before {
  content: '"'; color: var(--color-primary);
  font-size: var(--text-5xl); font-style: normal;
  line-height: 0; vertical-align: -.4em; margin-right: 4px;
}

.t-author { display: flex; align-items: center; gap: var(--sp-16); }
.t-avatar {
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.1);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--text-xl); flex-shrink: 0; overflow: hidden;
}
.t-avatar img { width: 100%; height: 100%; object-fit: cover; }
.t-name { font-weight: 700; font-size: var(--text-base); }
.t-meta { font-size: var(--text-base); color: var(--color-muted); }

/* ═══════════════════════════════════════════════════════════════════
   PRICING  (.pricing-card)
═══════════════════════════════════════════════════════════════════ */
.pricing-grid-wrap {
  display: grid; gap: var(--sp-24); grid-template-columns: 1fr;
  overflow: visible;
}
@media (min-width: 768px) {
  .pricing-grid-wrap {
    grid-template-columns: repeat(3,1fr);
    grid-template-rows: auto 1fr auto auto; /* title+desc | features | price | btn */
    column-gap: var(--sp-24);
    row-gap: 22px;
    padding-top: 100px; /* room for the "Tanulóink kedvence" badge + arrow animation above Ezüst Plusz */
  }
  .pricing-wrap {
    grid-row: span 4;
    display: grid;
    grid-template-rows: subgrid;
    overflow: visible;
  }
  .pricing-card {
    grid-row: span 4;
    display: grid;
    grid-template-rows: subgrid;
    gap: 0;
  }
}

.pricing-wrap {
  position: relative;
  padding-top: 0;
  display: flex; flex-direction: column;
  overflow: visible;
}
.pricing-wrap--pop { padding-top: 0; }

/* ── "Tanulóink kedvence" badge — animated arrow floats above Ezüst Plusz,
   dipping down into the card's colored header so it feels tucked-in
   rather than a disconnected floating sticker. z-index keeps it drawn
   on top of the header even where it overlaps. ── */
.pricing-pop-badge {
  position: absolute; top: -78px; left: 50%; transform: translate(-50%, 0) rotate(-3deg);
  display: flex; flex-direction: column; align-items: center;
  gap: 2px; white-space: nowrap; pointer-events: none; z-index: 5;
}
.pricing-pop-badge span {
  font-size: var(--text-sm); font-weight: 700; font-style: italic;
  color: var(--color-primary); text-shadow: 0 0 14px rgba(120,255,0,.5);
}
.pricing-pop-badge__arrow {
  width: 90px; height: 90px; flex-shrink: 0;
  /* Recolors the animation's baked-in stroke to brand green */
  filter: brightness(0) saturate(100%) invert(67%) sepia(96%) saturate(793%) hue-rotate(55deg) brightness(117%) contrast(116%);
  transform: scaleY(-1);
  margin-top: -6px;
}
@media (max-width: 767px) {
  /* In-flow on mobile so it can never overlap the card above it */
  .pricing-pop-badge {
    position: static; transform: rotate(-2deg);
    align-self: center;
    margin-bottom: var(--sp-8); margin-top: var(--sp-8);
  }
  .pricing-pop-badge__arrow { width: 66px; height: 66px; }

  /* Cheapest → most expensive: Bronz, Ezüst Plusz, Arany VIP */
  .pricing-grid-wrap .pricing-wrap:has(.pricing-card--pop) { order: 3; }
  .pricing-grid-wrap .pricing-wrap--pop { order: 2; }
  .pricing-grid-wrap .pricing-wrap:not(.pricing-wrap--pop):not(:has(.pricing-card--pop)) { order: 1; }
}

.pricing-card {
  padding: var(--sp-32); display: flex; flex-direction: column; gap: 22px;
  flex: 1;
  position: relative; overflow: hidden;
  border-radius: var(--radius-card);
  border: 1px solid rgba(120,255,0,.15);
  background: #ffffff;
  box-shadow: 0 4px 32px rgba(0,0,0,.14);
  transition: border-color var(--dur-base), box-shadow var(--dur-base);
}
.pricing-card:hover { border-color: rgba(120,255,0,.35); box-shadow: 0 8px 48px rgba(0,0,0,.18); }

/* ── All 3 cards share the same white body now — one set of
   dark-on-white text/icon colors instead of separate light/dark variants ── */
.pricing-amount { color: var(--color-primary); text-shadow: 0 0 20px rgba(120,255,0,.3); }
.pricing-period { color: rgba(0,0,0,.55); }
.pricing-desc   { color: rgba(0,0,0,.65); }
.pricing-features li { color: #1F2335; font-weight: 500; }
.pricing-features li strong { color: #050a00; font-weight: 800; }
.pricing-features svg { stroke: #2d7000; }
.pricing-features li.feat-exclude { color: #1F2335; text-decoration-color: rgba(31,35,53,.4); }
.pricing-features li.feat-exclude svg { stroke: #cc1515; fill: rgba(200,20,20,.12); }
.pricing-features li.feat-exclude strong { color: inherit; font-weight: inherit; }

/* ── Ezüst Plusz — identical to Bronz, differentiated only by the header
   color below ── */
.pricing-card--popular { /* inherits base, no overrides */ }

/* ── Arany VIP — the most expensive tier. Flat white like the others now
   (the gradient looked messy) — differentiated by the green header band
   below plus a slightly stronger border/glow. ── */
.pricing-card--pop {
  border: 1.5px solid rgba(120,255,0,.5);
  box-shadow: 0 0 50px rgba(120,255,0,.15), 0 20px 60px rgba(0,0,0,.18);
}
.pricing-card--pop:hover {
  border-color: rgba(120,255,0,.75);
  box-shadow: 0 0 70px rgba(120,255,0,.22), 0 24px 68px rgba(0,0,0,.22);
}

/* ── Card header — solid colored band (bleeds to the card's edges via
   negative margin) instead of plain text, so it's always readable
   regardless of card background, and doubles as the VIP differentiator.
   Wraps the title + the (i) info popover trigger. ── */
.pricing-header {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  /* !important — matches this file's established pattern of hard-pinning
     colors against OceanWP's own heading/accent rules, which otherwise can
     win the cascade against a plain (non-!important) declaration here. */
  color: #FAFAFA !important;
  background: var(--color-bg);
  padding: 22px 46px;
  margin: -32px -32px 24px;
  border-radius: var(--radius-card) var(--radius-card) 0 0;
}
.pricing-card--pop .pricing-header {
  background: var(--color-primary);
  color: #050a00 !important;
}

.pricing-title {
  display: inline-flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  justify-content: center;
  font-size: var(--text-3xl); font-weight: 800; letter-spacing: -.01em;
  text-align: center;
  color: inherit !important;
}

/* ── Tiny "csomag" tag — friendly hand-labeled feel next to the tier name ── */
.pricing-badge {
  font-size: 11px; font-weight: 700; letter-spacing: .02em;
  padding: 3px 10px; border-radius: var(--radius);
  transform: rotate(-4deg);
  background: rgba(255,255,255,.16);
  color: inherit !important;
  white-space: nowrap;
}
.pricing-card--pop .pricing-badge { background: rgba(0,0,0,.12); }

/* ── Info icon + click/hover popover with the longer per-package explainer ── */
.pricing-info { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); }
.pricing-info__btn {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.14); color: inherit;
  border: 1px solid rgba(255,255,255,.28);
  transition: background var(--dur-fast);
}
.pricing-info__btn:hover,
.pricing-info__btn:focus-visible { background: rgba(255,255,255,.3); }
.pricing-card--pop .pricing-info__btn { background: rgba(0,0,0,.1); border-color: rgba(0,0,0,.22); }
.pricing-card--pop .pricing-info__btn:hover,
.pricing-card--pop .pricing-info__btn:focus-visible { background: rgba(0,0,0,.2); }
.pricing-info__btn svg { width: 15px; height: 15px; }

.pricing-info__panel {
  position: absolute; top: calc(100% + 12px); right: -6px;
  width: 280px; max-width: 78vw;
  /* Explicit, tier-independent colors — the panel must always read as plain
     dark-on-white regardless of which card's (green or navy) header it hangs
     off, so it never inherits the Arany VIP header's dark-on-green context. */
  background: #ffffff; color: #1F2335; text-align: left;
  font-size: var(--text-sm); font-weight: 500; line-height: 1.6;
  border-radius: var(--radius-in);
  border: 1px solid rgba(31,35,53,.08);
  box-shadow: 0 16px 44px rgba(0,0,0,.28);
  padding: var(--sp-20) var(--sp-16) var(--sp-16);
  overflow: hidden;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity var(--dur-base), transform var(--dur-base), visibility var(--dur-base);
  z-index: 20;
}
.pricing-info__panel::before {
  content: ''; position: absolute; top: -6px; right: 20px;
  width: 12px; height: 12px; background: #ffffff;
  border-left: 1px solid rgba(31,35,53,.08); border-top: 1px solid rgba(31,35,53,.08);
  transform: rotate(45deg);
}
/* Decorative accent bar along the top edge, echoing .section-head__title::after.
   Fallback gradient for when no tier is detected — normally overridden below. */
.pricing-info__panel::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, #F19F4D, #78FF00, #F9CF00);
}

/* ── Popover border/glow/accent tinted to match each medal color ── */
.pricing-info[data-tier="arany"] .pricing-info__panel {
  border: 1.5px solid #D4AF37;
  box-shadow: 0 16px 44px rgba(212,175,55,.32);
}
.pricing-info[data-tier="arany"] .pricing-info__panel::before { border-left-color: #D4AF37; border-top-color: #D4AF37; }
.pricing-info[data-tier="arany"] .pricing-info__panel::after  { background: #D4AF37; }

.pricing-info[data-tier="ezust"] .pricing-info__panel {
  border: 1.5px solid #9AA1A8;
  box-shadow: 0 16px 44px rgba(154,161,168,.3);
}
.pricing-info[data-tier="ezust"] .pricing-info__panel::before { border-left-color: #9AA1A8; border-top-color: #9AA1A8; }
.pricing-info[data-tier="ezust"] .pricing-info__panel::after  { background: #9AA1A8; }

.pricing-info[data-tier="bronz"] .pricing-info__panel {
  border: 1.5px solid #CD7F32;
  box-shadow: 0 16px 44px rgba(205,127,50,.3);
}
.pricing-info[data-tier="bronz"] .pricing-info__panel::before { border-left-color: #CD7F32; border-top-color: #CD7F32; }
.pricing-info[data-tier="bronz"] .pricing-info__panel::after  { background: #CD7F32; }

.pricing-info__title {
  display: flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 800; color: #050a00;
  letter-spacing: -.01em;
  margin: 0 0 10px; padding-bottom: 10px;
  border-bottom: 1px dashed rgba(31,35,53,.15);
}
.pricing-info__title-medal { font-size: 18px; line-height: 1; }

/* Body can now hold several <p>/<ul> blocks (see neon_parse_rich_text()) —
   spacing between them, last one flush with the panel's own padding. */
.pricing-info__body { color: #1F2335; max-height: 60vh; overflow-y: auto; }
.pricing-info__body p,
.pricing-info__body ul { margin: 0 0 10px; }
.pricing-info__body p:last-child,
.pricing-info__body ul:last-child { margin-bottom: 0; }

.rich-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.rich-list li { position: relative; padding-left: 14px; }
.rich-list li::before { content: '–'; position: absolute; left: 0; color: rgba(31,35,53,.4); }

.rich-hl {
  font-weight: 700; color: #163d00;
  background: rgba(120,255,0,.28);
  padding: 1px 5px; border-radius: 4px;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
.rich-u {
  font-weight: 600; color: #1F2335;
  text-decoration: underline; text-decoration-color: rgba(120,255,0,.85);
  text-decoration-thickness: 2px; text-underline-offset: 3px;
}
@media (hover: hover) {
  .pricing-info:hover .pricing-info__panel { opacity: 1; visibility: visible; transform: translateY(0); }
}

/* ── "calc" variant — small subdued corner badge on the price calculator's
   KRESZ-csomag pills, so it doesn't compete with the pill's own click
   target or clutter the compact row of pills. ── */
.price-calc__pill-wrap { position: relative; flex: 1; min-width: 130px; }
.price-calc__pill-wrap .price-calc__pill { width: 100%; min-width: 0; flex: none; }
@media (max-width: 600px) { .price-calc__pill-wrap { min-width: 100%; } }

.pricing-info--calc { position: absolute; top: -7px; right: -7px; }
.pricing-info--calc .pricing-info__btn {
  width: 19px; height: 19px;
  background: var(--grad-btn); color: var(--color-text);
  border: 1px solid rgba(255,255,255,.3);
  opacity: .8;
  transition: opacity var(--dur-fast), box-shadow var(--dur-fast);
}
.pricing-info--calc .pricing-info__btn svg { width: 11px; height: 11px; }
.pricing-info--calc .pricing-info__btn:hover,
.pricing-info--calc .pricing-info__btn:focus-visible { opacity: 1; box-shadow: 0 0 10px rgba(120,255,0,.55); }
.pricing-info--calc.is-open .pricing-info__btn { opacity: 1; box-shadow: 0 0 10px rgba(120,255,0,.55); }
@media (hover: hover) {
  .pricing-info--calc:hover .pricing-info__btn { opacity: 1; box-shadow: 0 0 10px rgba(120,255,0,.55); }
}
@media (max-width: 480px) {
  .pricing-info--calc .pricing-info__panel { right: -14px; }
}
.pricing-info.is-open .pricing-info__panel { opacity: 1; visibility: visible; transform: translateY(0); }

/* ── "inline" variant — flows next to a text label (e.g. the calculator's
   "Intenzív órákkal tanulnál?" question) instead of anchoring to a card
   header or pill corner. Small and subdued, same "don't distract" intent
   as the calc variant. ── */
.pricing-info--inline {
  position: relative; display: inline-flex; vertical-align: middle;
  top: auto; right: auto; transform: none;
  margin-left: 6px;
}
.pricing-info--inline .pricing-info__btn {
  width: 18px; height: 18px;
  background: var(--grad-btn); color: var(--color-text);
  border: 1px solid rgba(255,255,255,.3);
  opacity: .8;
  transition: opacity var(--dur-fast), box-shadow var(--dur-fast);
}
.pricing-info--inline .pricing-info__btn svg { width: 11px; height: 11px; }
.pricing-info--inline .pricing-info__btn:hover,
.pricing-info--inline .pricing-info__btn:focus-visible,
.pricing-info--inline.is-open .pricing-info__btn { opacity: 1; box-shadow: 0 0 10px rgba(120,255,0,.55); }
@media (hover: hover) {
  .pricing-info--inline:hover .pricing-info__btn { opacity: 1; box-shadow: 0 0 10px rgba(120,255,0,.55); }
}
/* Anchored from its left edge, not right — it sits mid-line in a paragraph
   rather than a corner, so a right-aligned popover could run off-screen. */
.pricing-info--inline .pricing-info__panel { right: auto; left: 0; }
.pricing-info--inline .pricing-info__panel::before { right: auto; left: 14px; }
@media (max-width: 480px) {
  .pricing-info--inline .pricing-info__panel { width: 240px; }
}

@media (max-width: 480px) {
  .pricing-info__panel { width: 220px; right: -14px; }
}

.pricing-footer {
  display: flex; flex-direction: column; gap: var(--sp-8);
  text-align: center;
  padding-top: var(--sp-16);
  border-top: 1px solid rgba(31,35,53,.08);
}

.pricing-price  { display: flex; align-items: baseline; justify-content: center; gap: var(--sp-8); }
.pricing-amount { font-size: var(--text-4xl); font-weight: 800; line-height: 1; }
.pricing-period { font-size: var(--text-base); }
.pricing-desc   { font-size: var(--text-sm); line-height: 1.45; font-weight: 600; font-style: italic; letter-spacing: .01em; }

.pricing-features { list-style: none; display: flex; flex-direction: column; gap: 11px; flex: 1; }
.pricing-features li { display: flex; align-items: flex-start; gap: 10px; font-size: var(--text-base); line-height: 1.3; }
.pricing-features li span { flex: 1; }
.pricing-features svg {
  width: 15px; height: 15px; flex-shrink: 0; margin-top: 2px;
  fill: none; stroke-width: 2.5;
  stroke-linecap: round; stroke-linejoin: round;
}
.pricing-card .btn { width: 100%; justify-content: center; }

.pricing-features li.feat-exclude   { text-decoration: line-through; }

.pricing-trust {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: var(--sp-32); margin-top: var(--sp-48);
}
.pricing-trust-item { display: flex; align-items: center; gap: var(--sp-8); font-size: var(--text-base); color: rgba(250,250,250,.6); }
.pricing-trust-item svg {
  width: 15px; height: 15px; flex-shrink: 0;
  stroke: var(--color-primary); fill: none; stroke-width: 2.5;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ═══════════════════════════════════════════════════════════════════
   INSTRUCTOR CAROUSEL
═══════════════════════════════════════════════════════════════════ */
.instr-carousel {
  overflow: hidden; position: relative;
  padding-block: var(--sp-8); cursor: ew-resize;
  -webkit-mask: linear-gradient(to right, transparent 0, #fff 96px, #fff calc(100% - 96px), transparent 100%);
  mask: linear-gradient(to right, transparent 0, #fff 96px, #fff calc(100% - 96px), transparent 100%);
}
.instr-track { display: flex; gap: var(--sp-20); width: max-content; will-change: transform; }

.instr-card {
  display: grid; grid-template-columns: 210px 1fr;
  overflow: hidden; width: 520px; flex-shrink: 0; min-height: 260px;
  position: relative;
  border: 1px solid rgba(120,255,0,.12);
  border-radius: var(--radius-card);
}
.instr-photo {
  position: relative;
  background-color: var(--color-bg);
  background-image: radial-gradient(circle at 1px 1px, rgba(120,255,0,.12) 1px, transparent 0);
  background-size: 18px 18px;
  border-right: 1px solid rgba(255,255,255,.05);
  overflow: hidden; min-height: 260px;
}
.instr-photo::before { display: none; }
.instr-num {
  position: absolute; top: 12px; left: 12px; z-index: 3;
  font-size: var(--text-base); font-weight: 700; letter-spacing: .14em;
  color: rgba(250,250,250,.55);
}
.instr-avatar {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border-radius: 0; border: none;
  background: transparent;
  display: block; overflow: hidden;
  font-size: var(--text-5xl); line-height: 260px; text-align: center;
}
.instr-avatar img { width: 100%; height: 100%; object-fit: contain; object-position: center center; display: block; }
.instr-body { padding: 22px 24px; display: flex; flex-direction: column; gap: 8px; justify-content: center; }
.instr-name    { font-size: var(--text-base); font-weight: 700; }
.instr-desc {
  font-size: var(--text-base); color: rgba(250,250,250,.6); line-height: 1.6;
  display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden;
}
.instr-desc.is-expanded { display: block; overflow: visible; }
.instr-quote-btn {
  display: inline-flex !important; align-items: center; gap: 6px;
  background: rgba(255,255,255,.05) !important;
  border: 1px solid rgba(255,255,255,.13) !important;
  border-radius: 20px !important;
  padding: 6px 14px !important;
  cursor: pointer;
  font-size: var(--text-base) !important; font-weight: 600 !important;
  letter-spacing: 0 !important; text-transform: none !important;
  color: rgba(250,250,250,.65) !important;
  box-shadow: none !important;
  transition: background .2s, border-color .2s, color .2s;
  margin-top: 2px;
}
.instr-quote-btn:hover {
  background: rgba(120,255,0,.09) !important;
  border-color: rgba(120,255,0,.35) !important;
  color: var(--color-primary) !important;
}
.instr-quote-btn svg { width: 13px; height: 13px; flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 2.5; transition: transform .25s; }
.instr-quote-btn.is-expanded svg { transform: rotate(180deg); }
.instr-license { font-size: var(--text-base); font-weight: 500; letter-spacing: 0; text-transform: none; color: rgba(250,250,250,.6); margin-top: 4px; display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.instr-munkaidő { margin-top: 8px; margin-bottom: 4px; }
.instr-munkaidő p { font-size: var(--text-base); color: rgba(250,250,250,.65); margin: 2px 0; line-height: 1.45; }
.instr-car   { color: rgba(250,250,250,.88); font-weight: 600; display: inline-flex; align-items: center; gap: 5px; }
.instr-sep   { color: rgba(250,250,250,.3); }
.instr-price { color: var(--color-primary); font-weight: 700; }

/* ── Mobile instructor carousel — native swipe ── */
@media (max-width: 767px) {
  .instr-carousel {
    overflow-x: scroll;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    cursor: default;
    padding-inline: var(--sp-20);
    -webkit-mask: none;
    mask: none;
    /* hide scrollbar */
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .instr-carousel::-webkit-scrollbar { display: none; }

  .instr-track {
    gap: var(--sp-12);
    padding-right: var(--sp-20); /* trailing peek space */
  }

  .instr-card {
    width: 80vw;
    max-width: 300px;
    grid-template-columns: 1fr;          /* stack vertically */
    grid-template-rows: 220px auto;      /* photo | content */
    min-height: unset;
    scroll-snap-align: start;
    flex-shrink: 0;
  }

  .instr-photo {
    min-height: 220px;
    height: 220px;
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,.06);
  }

  .instr-avatar { line-height: 220px; }
}

/* ═══════════════════════════════════════════════════════════════════
   CTA  — EVERVAULT CARD
═══════════════════════════════════════════════════════════════════ */
.ev-wrap { position: relative; max-width: var(--max-width); width: 100%; margin-inline: auto; }

.ev-corner { position: absolute; width: 36px; height: 36px; color: rgba(120,255,0,.4); z-index: 10; pointer-events: none; }
.ev-corner svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; }
.ev-corner-tl { top: -18px; left: -18px; }
.ev-corner-tr { top: -18px; right: -18px; }
.ev-corner-bl { bottom: -18px; left: -18px; }
.ev-corner-br { bottom: -18px; right: -18px; }

.ev-card {
  position: relative; width: 100%; min-height: 460px;
  border: 1px solid rgba(120,255,0,.18);
  border-radius: 28px; overflow: hidden;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center; padding: 100px var(--sp-64); cursor: default;
  box-shadow: 0 0 80px rgba(120,255,0,.06), inset 0 0 120px rgba(120,255,0,.03);
}
.ev-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(to right, transparent, var(--color-primary), transparent);
}
.ev-bg-canvas { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; }
.ev-grad {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2;
  background: radial-gradient(900px circle at 50% 110%, rgba(37,42,61,.9), rgba(37,42,61,.68));
  transition: background 200ms;
}
.ev-content { position: relative; z-index: 5; display: flex; flex-direction: column; align-items: center; gap: var(--sp-24); }
.ev-icon {
  width: 96px; height: 96px; border-radius: 22px;
  background: rgba(120,255,0,.07); border: 1px solid rgba(120,255,0,.2);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-primary); box-shadow: 0 0 40px rgba(120,255,0,.18); margin-bottom: var(--sp-8);
}
.ev-icon__logo { width: 64px; height: auto; display: block; }
.ev-headline {
  font-size: clamp(var(--text-5xl), 8vw, var(--text-8xl));
  font-weight: 800; color: var(--color-text); line-height: 1.05; letter-spacing: -.02em;
}
.ev-headline em { font-style: italic; color: var(--color-primary); text-shadow: 0 0 80px rgba(120,255,0,.6); }
.ev-sub {
  font-size: clamp(var(--text-xl), 2.2vw, var(--text-3xl));
  color: var(--color-muted); line-height: 1.6; max-width: 820px;
}
.ev-actions {
  display: flex; gap: var(--sp-20); flex-wrap: wrap;
  justify-content: center; margin-top: var(--sp-16);
}

@media (max-width: 640px) {
  .ev-card { padding: var(--sp-96) var(--sp-24); min-height: 520px; }
  .ev-icon  { width: 76px; height: 76px; }
  .ev-icon__logo { width: 48px; }
}

/* ═══════════════════════════════════════════════════════════════════
   STATS STRIP
═══════════════════════════════════════════════════════════════════ */
.stats-strip { padding-block: var(--sp-64); }
.stats-eyebrow {
  font-size: var(--text-xl); font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(250,250,250,.55);
  text-align: center; margin-bottom: var(--sp-48);
}
.stats-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--sp-48); }
.stat { display: flex; flex-direction: column; align-items: center; gap: var(--sp-4); }
.stat__num  { font-size: var(--text-4xl); font-weight: 800; color: var(--color-primary); text-shadow: 0 0 20px rgba(120,255,0,.4); }
.stat__lbl  { font-size: var(--text-base); color: rgba(250,250,250,.85); font-weight: 600; }
.stat__desc { font-size: var(--text-base); color: rgba(250,250,250,.6); line-height: 1.5; max-width: 160px; text-align: center; margin-top: var(--sp-4); }
.stat-div   { width: 1px; height: 32px; background: rgba(255,255,255,.08); }
@media (max-width: 767px) {
  .stats-strip .container { padding-inline: 0; }
  .stats-eyebrow          { padding-inline: var(--sp-24); }
  .stats-row {
    flex-wrap: nowrap; justify-content: flex-start; align-items: stretch;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory; scrollbar-width: none;
    gap: var(--sp-12); padding: 4px var(--sp-24) var(--sp-20);
  }
  .stats-row::-webkit-scrollbar { display: none; }
  .stat {
    flex: 0 0 260px; scroll-snap-align: start;
    background: rgba(37,42,61,.5); border: 1px solid rgba(255,255,255,.07);
    border-radius: var(--radius-card); padding: var(--sp-24);
    gap: var(--sp-8); justify-content: center;
  }
  .stat-div { display: none; }
  .stat__desc { max-width: none; }
}

/* ── Stats carousel (replaces stats-row in template-parts) ──────── */
.stats-carousel {
  overflow: hidden; position: relative;
  padding-block: var(--sp-8); cursor: default;
  -webkit-mask: linear-gradient(to right, transparent 0, #fff 96px, #fff calc(100% - 96px), transparent 100%);
  mask: linear-gradient(to right, transparent 0, #fff 96px, #fff calc(100% - 96px), transparent 100%);
}
.stats-track { display: flex; gap: var(--sp-20); width: max-content; will-change: transform; }

.stats-card {
  width: 300px; flex-shrink: 0;
  display: flex; flex-direction: column; gap: var(--sp-4);
  padding: var(--sp-32); position: relative;
  background: rgba(37,42,61,.5); border: 1px solid rgba(120,255,0,.12);
  border-radius: var(--radius-card);
}
.stats-card__num  { font-size: var(--text-4xl); font-weight: 800; color: var(--color-primary); text-shadow: 0 0 20px rgba(120,255,0,.4); line-height: 1; margin-bottom: var(--sp-4); }
.stats-card__lbl  { font-size: var(--text-base); font-weight: 700; color: var(--color-text); }
.stats-card__desc { font-size: var(--text-xl); color: rgba(250,250,250,.6); line-height: 1.7; margin-top: var(--sp-8); }

@media (max-width: 767px) {
  .stats-carousel {
    overflow-x: scroll; overflow-y: visible;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    cursor: default;
    padding-inline: var(--sp-20);
    -webkit-mask: none; mask: none;
    -ms-overflow-style: none; scrollbar-width: none;
  }
  .stats-carousel::-webkit-scrollbar { display: none; }
  .stats-track { gap: var(--sp-12); padding-right: var(--sp-20); }
  .stats-card  { width: 80vw; max-width: 280px; scroll-snap-align: start; flex-shrink: 0; }
}

/* ═══════════════════════════════════════════════════════════════════
   WHY US — TRUST / EXPERIENCE SECTION
═══════════════════════════════════════════════════════════════════ */
.about-row__pills {
  display: flex; flex-wrap: wrap; gap: var(--sp-8); margin-top: var(--sp-4);
}
.about-pill {
  display: inline-flex; align-items: center;
  padding: 5px 14px; border-radius: var(--radius);
  font-size: var(--text-base); font-weight: 600; letter-spacing: .03em;
  background: rgba(120,255,0,.08); border: 1px solid rgba(120,255,0,.2);
  color: rgba(120,255,0,.85);
}

.why-us { display: flex; flex-direction: column; gap: var(--sp-32); }

/* Headline + trust-score card, side by side */
.why-us__main {
  display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--sp-48);
  align-items: center;
  padding: var(--sp-48);
  border-radius: var(--radius-card);
  border: 1px solid rgba(120,255,0,.14);
  background: rgba(37,42,61,.55);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
}
.why-us__title { font-size: var(--text-4xl); font-weight: 800; line-height: 1.2; margin-bottom: var(--sp-16); }
.why-us__body  { font-size: var(--text-xl); color: rgba(250,250,250,.68); line-height: 1.7; }
.why-us__body strong { color: var(--color-primary); font-weight: 700; }
.why-us__main .about-row__pills { margin-top: var(--sp-24); }

.why-us__trust {
  padding: var(--sp-40) var(--sp-32);
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
  border-color: rgba(120,255,0,.25);
}

/* ── Trust score visual (score + stars + review count + badge) ── */
.about-trust__score {
  font-size: var(--text-6xl); font-weight: 800; line-height: 1; letter-spacing: -.04em;
  color: var(--color-primary); text-shadow: 0 0 40px rgba(120,255,0,.55);
}
.about-trust__stars {
  display: flex; gap: 3px; color: var(--color-primary);
  margin-top: 6px; margin-bottom: 14px;
}
.about-trust__stars svg {
  width: 18px; height: 18px;
  filter: drop-shadow(0 0 5px rgba(120,255,0,.6));
}
.about-trust__count {
  font-size: var(--text-base); font-weight: 600;
  color: rgba(250,250,250,.6); margin-bottom: 18px;
}
.about-trust__badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: var(--radius);
  background: rgba(120,255,0,.10); border: 1px solid rgba(120,255,0,.28);
  font-size: 11px; font-weight: 700; letter-spacing: .03em;
  color: var(--color-primary);
  margin-top: var(--sp-4);
}
.about-trust__badge svg {
  width: 10px; height: 10px; stroke: var(--color-primary);
  fill: none; stroke-width: 2.5; flex-shrink: 0;
}

@media (max-width: 860px) {
  .why-us__main { grid-template-columns: 1fr; text-align: center; padding: var(--sp-32); }
  .why-us__main .about-row__pills { justify-content: center; }
}

/* This section only has 2 stat cards (not the usual 3 like Tripla Neon
   Garancia, which also uses .garancia-grid) — override to 2 even columns,
   centered and capped in width so the cards stay proportioned instead of
   stretching edge-to-edge with awkward extra-wide gaps. */
@media (min-width: 769px) {
  .why-us .garancia-grid {
    grid-template-columns: repeat(2, 1fr);
    max-width: 800px;
    margin-inline: auto;
  }
}
@media (max-width: 480px) {
  .about-trust__score { font-size: var(--text-5xl); }
}

/* ═══════════════════════════════════════════════════════════════════
   FAQ v2  (two-column with sticky sidebar)
═══════════════════════════════════════════════════════════════════ */
.faq-layout {
  display: grid; grid-template-columns: 1.5fr 1fr; gap: 80px; align-items: start;
  max-width: 960px; margin-inline: auto;
}
@media (max-width: 700px) {
  .faq-layout { grid-template-columns: 1fr; gap: var(--sp-48); }
}

.faq-sidebar { position: sticky; top: 120px; }
.faq-sidebar__eyebrow {
  font-size: var(--text-base); font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--color-primary); margin-bottom: 14px;
}
.faq-sidebar__title  { font-size: var(--text-3xl); font-weight: 800; line-height: 1.2; margin-bottom: 14px; }
.faq-sidebar__sub    { font-size: var(--text-xl); font-weight: 600; color: var(--color-text); line-height: 1.6; margin-bottom: 24px; }
.faq-sidebar__cta {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: var(--text-base); font-weight: 600; color: var(--color-primary);
  transition: gap 200ms;
}
.faq-sidebar__cta:hover { gap: 11px; }
.faq-sidebar__cta svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2.5; }
.faq-sidebar__contact { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.faq-sidebar__person  { font-size: var(--text-sm); color: var(--color-muted); }

@media (max-width: 700px) { .faq-sidebar { position: static; } }

.faq2 { display: flex; flex-direction: column; }
.faq2-item { border-bottom: 1px solid rgba(120,255,0,.13); position: relative; transition: border-color var(--dur-base); }
.faq2-item:first-child { border-top: 1px solid rgba(120,255,0,.13); }
.faq2-item.open { border-bottom-color: rgba(120,255,0,.28); }
.faq2-item.open::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 2px; background: #78FF00;
  box-shadow: 0 0 10px rgba(120,255,0,.55);
}

.faq2-q {
  width: 100%; display: grid; grid-template-columns: 36px 1fr 30px;
  align-items: center; gap: var(--sp-16); padding: var(--sp-20) 0;
  background: none; border: none; color: var(--color-text);
  font-family: var(--font); font-size: var(--text-xl); font-weight: 700;
  cursor: pointer; text-align: left;
}
.faq2-num {
  font-size: var(--text-base); font-weight: 700; letter-spacing: .06em;
  color: rgba(250,250,250,.3); transition: color var(--dur-base);
}
.faq2-item.open .faq2-num { color: var(--color-primary); }

.faq2-icon {
  width: 28px; height: 28px;
  border: 1.5px solid rgba(250,250,250,.18); border-radius: var(--radius-in);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  font-size: var(--text-lg); font-weight: 300; line-height: 1;
  transition: border-color var(--dur-base), background var(--dur-base), transform 280ms var(--ease-spring);
}
.faq2-item.open .faq2-icon {
  border-color: var(--color-primary); background: rgba(120,255,0,.1); transform: rotate(45deg);
}

.faq2-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 380ms var(--ease); }
.faq2-item.open .faq2-a { grid-template-rows: 1fr; }
.faq2-a-inner  { overflow: hidden; padding-left: 52px; }
.faq2-a-text   { padding-bottom: var(--sp-20); font-size: var(--text-xl); color: rgba(250,250,250,.6); line-height: 1.75; }
.faq2-a-text .hl { color: var(--color-primary); font-weight: 700; }
.faq2-a-text .faq2-a-link { color: var(--color-primary); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* ═══════════════════════════════════════════════════════════════════
   WIZARD
═══════════════════════════════════════════════════════════════════ */
.wizard-wrap { border: 1px solid rgba(250,250,250,.1); border-radius: var(--radius-card); overflow: hidden; }
.wizard-prog { height: 3px; background: rgba(250,250,250,.08); }
.wizard-prog-bar { height: 100%; background: var(--grad-btn); transition: width 400ms var(--ease); }
.wizard-body { padding: var(--sp-48); }

.wizard-step         { display: none; }
.wizard-step.active  { display: block; }

.wizard-step-count { font-size: var(--text-base); color: var(--color-muted); margin-bottom: var(--sp-8); }
.wizard-step-title { font-size: var(--text-4xl); font-weight: 700; line-height: 1.2; }
.wizard-choices {
  display: flex; flex-direction: column; gap: var(--sp-8); margin-top: var(--sp-32);
}
.wizard-choice {
  display: flex; align-items: center; gap: var(--sp-16); padding: var(--sp-16) var(--sp-24);
  background: rgba(255,255,255,.04); border: 1px solid rgba(250,250,250,.08);
  border-radius: var(--radius); cursor: pointer;
  transition: border-color var(--dur-fast), background var(--dur-fast);
  font-size: var(--text-base); font-weight: 600;
}
.wizard-choice:hover,
.wizard-choice.selected { border-color: var(--color-primary); background: rgba(120,255,0,.06); }
.wizard-choice__icon { font-size: var(--text-2xl); flex-shrink: 0; }
.wizard-nav { display: flex; justify-content: space-between; align-items: center; margin-top: var(--sp-32); }
.wizard-count { font-size: var(--text-base); color: var(--color-muted); }

/* ═══════════════════════════════════════════════════════════════════
   APP SHOWCASE (JogsiPlusz — light section)
═══════════════════════════════════════════════════════════════════ */
.app-showcase {
  background: transparent;
  position: relative; overflow: hidden;
  font-family: var(--font);
}

.app-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--sp-20); align-items: stretch;
  position: relative; z-index: 1;
}
.app-grid--full { grid-template-columns: 1fr; }
@media (max-width: 768px) { .app-grid { grid-template-columns: 1fr; } }

/* Device split — phone mockup on mobile, MacBook mockup on desktop.
   Both render in the DOM; only one is visible per breakpoint (768px),
   matching .jogsi-bento's own single-column/two-column switch below. */
.app-phone-col {
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
@media (min-width: 769px) { .app-phone-col { display: none; } }

.app-phone {
  width: 300px; height: 634px; flex-shrink: 0;
  background: #111; border-radius: 46px;
  border: 8px solid #0a0a0a; position: relative; overflow: hidden;
  box-shadow: 0 24px 64px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.08);
  transition: transform 500ms var(--ease);
}
.app-phone-col:hover .app-phone { transform: scale(1.02); }
@media (max-width: 400px) {
  .app-phone { width: 260px; height: 550px; }
}

/* Physical side buttons — purely decorative realism */
.app-phone__btn { position: absolute; background: #0a0a0a; z-index: 1; }
.app-phone__btn--power { right: -8px; top: 150px; width: 3px; height: 70px; border-radius: 0 3px 3px 0; }
.app-phone__btn--vol1  { left: -8px; top: 120px; width: 3px; height: 32px; border-radius: 3px 0 0 3px; }
.app-phone__btn--vol2  { left: -8px; top: 160px; width: 3px; height: 55px; border-radius: 3px 0 0 3px; }

.app-phone__island {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  width: 90px; height: 28px; background: #000; border-radius: 20px; z-index: 10;
}
.app-phone__screen {
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
  padding: 50px 16px 16px;
}

/* MacBook mockup — desktop only, scales by size via clamp() */
.macbook-col {
  display: none; align-items: center; justify-content: center;
  perspective: 1100px; flex-shrink: 0; min-width: 0;
}
@media (min-width: 769px) { .macbook-col { display: flex; } }

.macbook { width: clamp(280px, 46vw, 760px); transition: transform 400ms var(--ease); }
.macbook-col:hover .macbook { transform: translateY(-4px); }

/* Lid — brushed-aluminum gradient body, thin bezel. Angle is driven directly
   by JS on scroll (rotateX inline style), so no CSS transition here — a
   transition would lag behind and fight the scroll-linked updates. Starts
   shut via this base rotateX until JS takes over on first scroll/load. */
.macbook__lid {
  position: relative;
  background: linear-gradient(155deg, #3a3a3d 0%, #202022 55%, #0c0c0d 100%);
  border-radius: 18px 18px 6px 6px;
  padding: 8px 8px 12px;
  box-shadow: 0 40px 100px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.09);
  transform-origin: 50% 100%;
  transform: rotateX(-112deg);
  transition: transform 1600ms cubic-bezier(.19,1.2,.32,1);
}
.macbook-col.is-open .macbook__lid { transform: rotateX(0deg); }

.macbook__screen {
  position: relative;
  aspect-ratio: 16 / 10; width: 100%; min-height: 480px;
  border-radius: 9px; overflow: hidden;
  display: flex; flex-direction: column;
  background: #000;
}

/* Camera-housing notch cut into the top of the display — modern MacBook look */
.macbook__notch-cut {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 130px; height: 18px;
  background: #000; border-radius: 0 0 11px 11px;
  z-index: 6;
}
.macbook__notch-cut::before {
  content: ''; position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
  width: 5px; height: 5px; border-radius: 50%;
  background: #050505; box-shadow: inset 0 0 0 1px rgba(255,255,255,.15);
}

.macbook__base {
  height: 22px; margin: 0 -14px;
  background: linear-gradient(180deg, #e4e4e8 0%, #c4c4ca 55%, #9d9da3 100%);
  border-radius: 0 0 14px 14px;
  position: relative;
  box-shadow: 0 10px 22px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.5);
}
.macbook__base::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: rgba(0,0,0,.2);
}
.macbook__notch {
  position: absolute; left: 50%; top: 0; transform: translateX(-50%);
  width: 130px; height: 20px;
  background: #a3a3a9; border-radius: 0 0 10px 10px;
  box-shadow: inset 0 2px 3px rgba(0,0,0,.15);
}

/* Fake browser chrome bar */
.jp-browser { display: flex; align-items: center; gap: 7px; padding: 8px 12px; background: rgba(0,0,0,.25); border-bottom: 1px solid rgba(255,255,255,.06); flex-shrink: 0; }
.jp-browser__dot { width: 8px; height: 8px; border-radius: 50%; }
.jp-browser__dot--r { background: #FF5F57; }
.jp-browser__dot--y { background: #FEBC2E; }
.jp-browser__dot--g { background: #28C840; }
.jp-browser__url { margin-left: 6px; font-size: 11px; color: rgba(255,255,255,.35); background: rgba(255,255,255,.06); border-radius: 6px; padding: 3px 10px; font-family: var(--font); }

/* Two-pane app layout — course sidebar + real lesson-content preview */
.jp-app { display: flex; gap: 16px; flex: 1; min-height: 0; padding: 14px 16px 16px; }
.jp-app__sidebar { flex: 0 0 42%; min-width: 0; display: flex; flex-direction: column; min-height: 0; }
.jp-app__preview { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; }
.jp-app__preview-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: rgba(255,255,255,.4); margin-bottom: 8px; flex-shrink: 0; }
@media (max-width: 640px) {
  .jp-app { flex-direction: column; overflow-y: auto; }
  .jp-app__sidebar, .jp-app__preview { flex: none; }
  .jp-app__preview { min-height: 220px; }
}

/* Rotating gallery — desktop MacBook pane only. object-fit: contain on
   purpose — cover was cropping parts of the diagrams off; better to show
   the whole image smaller (letterboxed on the panel's own background)
   than lose content to a crop. */
.jp-gallery { position: relative; flex: 1; min-height: 0; border-radius: 10px; overflow: hidden; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); }
.jp-gallery__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity 600ms ease; }
.jp-gallery__img.is-active { opacity: 1; }
.jp-gallery__dots { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); display: flex; gap: 6px; z-index: 2; }
.jp-gallery__dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.35); border: none; padding: 0; cursor: pointer; transition: background var(--dur-fast), transform var(--dur-fast); }
.jp-gallery__dot.is-active { background: var(--jp-yellow, #F9CF00); transform: scale(1.3); }

/* Mobile-only — native swipeable carousel. overflow-x + scroll-snap does
   all the work; no JS needed for the swipe itself (same pattern as
   .press-carousel elsewhere on this page). Replaces the earlier GSAP
   scroll-jacked version. */
.jp-mobile-carousel { margin-top: var(--sp-16); }
.jp-mobile-carousel__label {
  text-align: center; margin-bottom: var(--sp-12);
  font-size: 16px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: rgba(255,255,255,.55);
}
@media (min-width: 769px) { .jp-mobile-carousel { display: none; } }

.jp-mobile-carousel__track {
  display: flex; overflow-x: scroll; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: none; scrollbar-width: none;
  border-radius: var(--radius-card);
}
.jp-mobile-carousel__track::-webkit-scrollbar { display: none; }
.jp-mobile-carousel__panel {
  flex: 0 0 100%; scroll-snap-align: start;
  aspect-ratio: 3 / 2;
}
.jp-mobile-carousel__panel img {
  width: 100%; height: 100%;
  object-fit: contain;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-card);
}

/* One-shot "flash" reveal on the first panel when the carousel first appears */
@keyframes jp-flash {
  0%   { opacity: 0; filter: brightness(2.6); transform: scale(1.12); }
  45%  { opacity: 1; filter: brightness(1.5); }
  100% { opacity: 1; filter: brightness(1); transform: scale(1); }
}
.jp-mobile-carousel.is-flashed .jp-mobile-carousel__panel:first-child img {
  animation: jp-flash 750ms ease-out;
}

/* ── JogsiPlusz brand system — scoped to the phone-mockup screen only ── */
.jp-screen {
  --jp-blue:   #4484CE;
  --jp-orange: #F19F4D;
  --jp-yellow: #F9CF00;
  --jp-navy:   #262C3A;
  --jp-gray:   #D9D9D9;
  background: var(--jp-navy);
  font-family: 'Montserrat', var(--font);
  overflow: hidden;
}

.jp-hdr { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; flex-shrink: 0; }
.jp-hdr__btn { width: 28px; height: 28px; border-radius: 50%; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.jp-hdr__btn svg { width: 14px; height: 14px; stroke: rgba(255,255,255,.55); fill: none; stroke-width: 1.5; }

/* JogsiPlusz brand lockup — "Jogsi" wordmark + finish-flag mark (final logo) */
.jp-logo { display: inline-flex; align-items: flex-end; gap: 2px; }
.jp-logo__word { font-family: 'Montserrat', var(--font); font-weight: 800; letter-spacing: -0.02em; line-height: .9; color: #FFFFFF; }
.jp-logo__mark { flex-shrink: 0; }
.jp-logo--hdr .jp-logo__word { font-size: 15px; }
.jp-logo--hdr .jp-logo__mark { width: 17px; height: 19px; margin-bottom: -1px; }
.jp-logo--card { margin-bottom: 16px; }
.jp-logo--card .jp-logo__word { font-size: 22px; }
.jp-logo--card .jp-logo__mark { width: 24px; height: 27px; margin-bottom: -1px; margin-left: 2px; }

/* Split layout — full "JogsiPlusz" wordmark top-left, a small "Jogsi" + mark
   lockup floats to the top-right corner instead of everything sitting together */
.jp-logo--split { display: flex; width: 100%; align-items: flex-start; justify-content: space-between; gap: var(--sp-16); margin-bottom: 16px; }
.jp-logo__word--card { font-size: 22px; }
.jp-logo--card-mini { flex-shrink: 0; }
.jp-logo--card-mini .jp-logo__word { font-size: 14px; }
.jp-logo--card-mini .jp-logo__mark { width: 16px; height: 18px; margin-bottom: -1px; margin-left: 2px; }

.jp-titlebar { margin-bottom: 14px; flex-shrink: 0; }
.jp-titlebar__eyebrow { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: rgba(255,255,255,.4); margin-bottom: 5px; }
.jp-titlebar__title {
  display: inline-block;
  font-size: 22px; font-weight: 800; color: var(--jp-blue);
  padding-bottom: 9px; border-bottom: 2px dashed var(--jp-orange);
}

.jp-course-wrap { position: relative; flex: 1; min-height: 0; }
.jp-course-wrap::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 28px;
  background: linear-gradient(to bottom, rgba(38,44,58,0), var(--jp-navy));
  pointer-events: none;
}
.jp-course {
  height: 100%; overflow-y: auto; scrollbar-width: none;
  display: flex; flex-direction: column; gap: 9px;
  margin: 0 -4px; padding: 0 4px 10px;
}
.jp-course::-webkit-scrollbar { display: none; }

.jp-lesson {
  flex-shrink: 0; overflow: hidden;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07);
  border-radius: 10px;
  transition: border-color var(--dur-fast), background var(--dur-fast);
}
.jp-lesson__head {
  width: 100%; display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 12px; background: none; border: none; color: inherit;
  font-family: inherit; text-align: left; cursor: pointer; appearance: none;
}
.jp-lesson--locked .jp-lesson__head { cursor: default; }
.jp-lesson__head:focus-visible { outline: 2px solid var(--jp-blue); outline-offset: -2px; }

.jp-lesson__num {
  flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%;
  background: var(--jp-blue); color: #fff;
  font-size: 10px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.jp-lesson--highlight .jp-lesson__num { background: linear-gradient(180deg, var(--jp-yellow), var(--jp-orange)); color: var(--jp-navy); }

.jp-lesson__title { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; color: #FFFFFF; line-height: 1.4; padding-top: 3px; }
.jp-lesson__count {
  flex-shrink: 0; margin-top: 3px; font-size: 11px; font-weight: 700; color: rgba(255,255,255,.45);
  background: rgba(255,255,255,.06); border-radius: 100px; padding: 2px 8px;
}
.jp-lesson__badge {
  flex-shrink: 0; margin-top: 2px; font-size: 10px; font-weight: 800; color: var(--jp-navy);
  background: linear-gradient(180deg, var(--jp-yellow), var(--jp-orange));
  border-radius: 100px; padding: 3px 9px; white-space: nowrap;
}
.jp-lesson__icon { flex-shrink: 0; width: 16px; height: 16px; margin-top: 3px; }
.jp-lesson__icon--chev { color: var(--jp-blue); transition: transform var(--dur-fast); }
.jp-lesson--open .jp-lesson__icon--chev { transform: rotate(180deg); }
.jp-lesson__icon--lock { color: rgba(255,255,255,.3); }

.jp-lesson--locked { opacity: .55; }
.jp-lesson--locked.jp-lesson--shake { animation: jp-shake 380ms; }
@keyframes jp-shake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-3px); }
  75%      { transform: translateX(3px); }
}

.jp-lesson__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 260ms var(--ease); }
.jp-lesson--open .jp-lesson__body { grid-template-rows: 1fr; }
.jp-lesson__list { overflow: hidden; display: flex; flex-direction: column; gap: 9px; padding: 0 12px 12px 44px; }

.jp-item { display: flex; align-items: center; gap: 8px; }
.jp-item svg { width: 13px; height: 13px; flex-shrink: 0; color: rgba(255,255,255,.35); }
.jp-item span { font-size: 12px; color: rgba(255,255,255,.65); line-height: 1.35; }
.jp-item--quiz svg  { color: var(--jp-blue); }
.jp-item--quiz span { color: var(--jp-blue); font-weight: 600; }

.jp-stats { display: flex; gap: 6px; flex-shrink: 0; margin-top: 10px; }
.jp-stat { flex: 1; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.07); border-radius: 9px; padding: 8px 4px; text-align: center; }
.jp-stat__n { display: block; font-size: 16px; font-weight: 800; color: var(--jp-blue); line-height: 1; }
.jp-stat__l { display: block; font-size: 10px; color: rgba(255,255,255,.4); text-transform: uppercase; letter-spacing: .05em; margin-top: 3px; }

.app-right { display: flex; flex-direction: column; gap: var(--sp-16); }
/* Keep this card at its original size — don't let it stretch just because
   #jogsiplusz's container got wider for the MacBook's sake */
@media (min-width: 769px) { .app-right { max-width: 500px; flex-shrink: 0; } }
.app-card {
  background: rgba(37,42,61,.65); border-radius: 28px;
  border: 1px solid rgba(255,255,255,.07); padding: var(--sp-32);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  color: var(--color-text);
}
.app-card--grow { flex: 1; }
.app-card__eye { font-size: var(--text-base); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(250,250,250,.3); margin-bottom: 14px; }
.app-card__h   { font-size: clamp(var(--text-2xl), 3vw, var(--text-4xl)); font-weight: 800; line-height: 1.1; color: var(--color-text); margin-bottom: 10px; }
.app-card__sub { font-size: var(--text-base); color: rgba(250,250,250,.6); line-height: 1.65; margin-bottom: var(--sp-20); }

.app-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(120,255,0,.1); border: 1px solid rgba(120,255,0,.25);
  border-radius: 100px; padding: 5px 14px;
  font-size: var(--text-base); font-weight: 700; color: var(--color-primary);
  text-decoration: none !important;
  cursor: pointer;
  transition: background var(--dur-fast), border-color var(--dur-fast),
              box-shadow var(--dur-fast), transform var(--dur-fast);
}
/* App-card's badge wraps to 2 lines and was touching its own edges — give it more room */
.app-card .app-badge { padding: 14px 22px; }
/* On narrow screens the wrapped text (3-4 lines) made the 100px pill
   radius blow up into a huge stretched capsule. Full-width banner with a
   normal card radius instead — reads as a callout, not an oversized button. */
@media (max-width: 768px) {
  .app-card .app-badge {
    width: 100%; justify-content: center; text-align: center;
    border-radius: 16px; padding: 16px 20px;
  }
}
.app-badge:hover {
  background: rgba(120,255,0,.18);
  border-color: rgba(120,255,0,.6);
  box-shadow: 0 0 16px rgba(120,255,0,.18);
  transform: scale(.97);
  color: var(--color-primary) !important;
}
.app-badge svg { width: 13px; height: 13px; flex-shrink: 0; transition: transform var(--dur-fast); }
.app-badge:hover svg { transform: translateX(3px); }
.app-badge__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-primary); box-shadow: 0 0 6px rgba(120,255,0,.7); }

.app-feat-list { display: flex; flex-direction: column; }
.app-feat { display: flex; gap: 14px; align-items: flex-start; padding: 15px 0; border-bottom: 1px solid rgba(255,255,255,.07); }
.app-feat:last-child  { border-bottom: none; padding-bottom: 0; }
.app-feat:first-child { padding-top: 0; }
.app-feat__icon { width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); display: flex; align-items: center; justify-content: center; }
.app-feat__icon svg { width: 16px; height: 16px; stroke: rgba(250,250,250,.55); fill: none; stroke-width: 1.6; }
/* Colored per-feature icon accents — reuses the JogsiPlusz brand palette,
   since these three points are all about the JogsiPlusz product. */
.app-feat__icon--1 { background: rgba(68,132,206,.12); border-color: rgba(68,132,206,.3); }
.app-feat__icon--1 svg { stroke: #4484CE; }
.app-feat__icon--2 { background: rgba(241,159,77,.12); border-color: rgba(241,159,77,.3); }
.app-feat__icon--2 svg { stroke: #F19F4D; }
.app-feat__icon--3 { background: rgba(249,207,0,.14); border-color: rgba(249,207,0,.35); }
.app-feat__icon--3 svg { stroke: #F9CF00; }
.app-feat__title { font-size: var(--text-2xl); font-weight: 700; color: var(--color-text); margin-bottom: var(--sp-12); }
.app-feat__desc  { font-size: var(--text-lg); color: rgba(250,250,250,.6); line-height: 1.45; }
.app-feat__desc .hl { color: var(--color-primary); font-weight: 700; }

/* JogsiPlusz bento — MacBook left (bigger, scales with viewport), features right */
/* Flex (not grid) on purpose — a grid's 1fr tracks leave unpredictable
   leftover space once the MacBook (clamped width) and the card (capped
   width) stop growing, which read as "too much gap" on wide screens. Flex
   + a fixed gap keeps the two elements physically close together and lets
   any extra container width become outer margin instead. */
.jogsi-bento {
  display: flex; align-items: center; justify-content: center;
  gap: var(--sp-48); margin-bottom: var(--sp-16); flex-wrap: nowrap;
}
@media (max-width: 768px) {
  .jogsi-bento { flex-direction: column; gap: var(--sp-16); }
  /* Mobile reading order: headline + feature list first, phone mockup after "Kevesebb vezetési óra" */
  .jogsi-bento .app-right          { order: 1; }
  .jogsi-bento .app-phone-col      { order: 2; }
  .jogsi-bento .jp-mobile-carousel { order: 3; }
  .jogsi-bento .macbook-col        { order: 4; }
}

/* Full-width breakout for this section only — gives the MacBook real room on desktop */
#jogsiplusz .container { max-width: 1600px; }

.jogsi-bento__head {
  padding: var(--sp-32);
  display: flex; flex-direction: column; gap: var(--sp-16); justify-content: center;
}

.jogsi-bento__video {
  padding: 0; overflow: hidden; min-height: 320px;
  border: 1px solid rgba(120,255,0,.6) !important;
  box-shadow: 0 0 20px rgba(120,255,0,.18);
}
.jogsi-bento__video .hero-video {
  width: 100%; height: 100%; min-height: 320px;
  aspect-ratio: unset; border-radius: 0; border: none;
}
.jogsi-bento__video .hero-video__thumb {
  width: 100%; height: 100%; object-fit: cover;
}

/* Video feature — standalone horizontal (16:9) video panel */
.video-feature {
  max-width: 860px; margin-inline: auto;
  display: flex; flex-direction: column; align-items: center;
}
.video-feature .hero-video { width: 100%; }

/* Smaller, sentence-length headline — the default .section-head__title size
   is tuned for 2-5 word headlines and wraps a full sentence to 4+ lines.
   No line-clamp here — let it wrap to 3 lines on narrow screens rather
   than ever truncating the sentence. */
.video-feature__title {
  font-size: clamp(var(--text-2xl), 3.2vw, var(--text-4xl));
  max-width: 820px; margin-inline: auto;
}
.video-feature__title .hl { color: var(--color-primary); }

/* ═══════════════════════════════════════════════════════════════════
   SOMA INTRO  (centered column — photo overflows above chat panel)
═══════════════════════════════════════════════════════════════════ */
.soma-intro {
  max-width: 520px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Mobile: wrapper is transparent to layout so avatar-wrap's negative
   margin still pulls .soma-chat up exactly as before; the name/school
   text block stays hidden (it's already shown inside the chat header). */
.soma-intro__side { display: contents; }
.soma-intro__side-info { display: none; }

/* Portrait photo — sits above the chat panel, bottom edge overlaps header */
.soma-intro__avatar-wrap {
  position: relative;
  z-index: 3;
  margin-bottom: -80px;
  width: 200px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 16px 48px rgba(0,0,0,.55);
  flex-shrink: 0;
}

.soma-intro__avatar {
  width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 480px) {
  .soma-intro__avatar-wrap {
    width: 160px;
    margin-bottom: -60px;
  }
}

/* Desktop only: photo + name + school move beside the chat panel instead
   of overlapping above it, so the section is noticeably shorter. */
@media (min-width: 768px) {
  .soma-intro {
    max-width: 860px;
    flex-direction: row;
    justify-content: center;
    gap: var(--sp-48);
  }
  .soma-intro__side {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-16);
    flex-shrink: 0;
  }
  .soma-intro__avatar-wrap { margin-bottom: 0; width: 260px; }
  .soma-intro__side-info { display: block; text-align: center; }
  .soma-intro__side-name   { font-size: var(--text-2xl); font-weight: 700; }
  .soma-intro__side-school { font-size: var(--text-lg); color: var(--color-primary); font-weight: 600; margin-top: 2px; }

  /* Chat header no longer needs to reserve space for an overlapping photo
     or show the name/status — that lives in .soma-intro__side now.
     Extra `.soma-intro` qualifier bumps specificity above the base
     `.soma-chat__header { display: flex; }` rule (same specificity
     otherwise, and that rule sits later in the file, so it was winning). */
  .soma-intro .soma-chat__header--founder { display: none; }
  .soma-chat__thread {
    border-radius: var(--radius-card);
    border-top: 1px solid rgba(255,255,255,.06);
  }
}

/* legacy — kept for back-compat, no longer rendered */
.soma-quote-below {
  font-size: var(--text-base); color: rgba(250,250,250,.8);
  font-style: italic; line-height: 1.65;
  padding: var(--sp-16) var(--sp-20);
  background: rgba(120,255,0,.07);
  border: 1px solid rgba(120,255,0,.22);
  border-radius: 18px;
  max-width: 260px;
}


/* ═══════════════════════════════════════════════════════════════════
   SOMA CHAT  (messenger-style animated section)
═══════════════════════════════════════════════════════════════════ */
.soma-chat {
  max-width: 520px;
  width: 100%;
}

.soma-chat__header {
  display: flex; align-items: center; gap: var(--sp-12);
  padding: var(--sp-16) var(--sp-20);
  background: rgba(37,42,61,.85);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
}

/* Founder variant — photo overflows from above, so header has tall top padding + center align */
.soma-chat__header--founder {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-4);
  padding: 96px var(--sp-20) var(--sp-16);
}

.soma-chat__avatar {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  background: rgba(120,255,0,.1);
  border: 2px solid rgba(120,255,0,.35);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; overflow: hidden;
  box-shadow: 0 0 14px rgba(120,255,0,.18);
}
.soma-chat__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.soma-chat__name   { font-size: var(--text-base); font-weight: 700; line-height: 1.2; }
.soma-chat__status {
  font-size: var(--text-base); font-weight: 600; letter-spacing: .04em;
  color: var(--color-primary); margin-top: 2px; text-transform: uppercase;
}

.soma-chat__thread {
  position: relative;
  display: flex; flex-direction: column; gap: 6px;
  padding: var(--sp-20);
  background: rgba(15,17,28,.6);
  border: 1px solid rgba(255,255,255,.06);
  border-top: none;
  border-radius: 20px var(--radius-card) var(--radius-card);
  min-height: 60px;
}

/* typing indicator — absolutely positioned so it doesn't shift bubbles */
.soma-typing {
  position: absolute; top: var(--sp-20); left: var(--sp-20);
  display: inline-flex; gap: 5px; align-items: center;
  padding: 10px 15px;
  background: rgba(44,50,80,.9);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 18px 18px 18px 4px;
  opacity: 0; pointer-events: none; z-index: 2;
}
.soma-typing__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--color-muted);
  animation: soma-dot-bounce 1.2s infinite ease-in-out;
}
.soma-typing__dot:nth-child(2) { animation-delay: .16s; }
.soma-typing__dot:nth-child(3) { animation-delay: .32s; }

@keyframes soma-dot-bounce {
  0%, 60%, 100% { opacity: .3; transform: translateY(0); }
  30%            { opacity: .9; transform: translateY(-5px); }
}

/* chat bubble base */
.soma-bubble {
  align-self: flex-start;
  max-width: 88%;
  padding: 10px 16px;
  background: rgba(44,50,80,.88);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 18px 18px 18px 4px;
  font-size: var(--text-base); line-height: 1.65;
  color: var(--color-text);
  opacity: 0;
  transform: translateY(10px) scale(.97);
  will-change: transform, opacity;
}
.soma-bubble strong { color: var(--color-text); font-weight: 700; }
.soma-bubble--quote {
  background: rgba(120,255,0,.07);
  border-color: rgba(120,255,0,.2);
  font-style: italic;
}

/* ── keyframes ── */
@keyframes soma-typing-in {
  from { opacity: 0; transform: translateY(8px) scale(.95); }
  to   { opacity: 1; transform: translateY(0)   scale(1);   }
}
@keyframes soma-typing-out {
  to   { opacity: 0; transform: scale(.9); }
}
@keyframes soma-bubble-in {
  from { opacity: 0; transform: translateY(10px) scale(.97); }
  to   { opacity: 1; transform: translateY(0)    scale(1);   }
}

/* ── triggered state (class added by JS) ── */
.soma-chat.is-active .soma-typing {
  animation:
    soma-typing-in  280ms var(--ease)      100ms both,
    soma-typing-out 220ms ease-in          780ms forwards;
}
.soma-chat.is-active .soma-bubble {
  animation: soma-bubble-in 400ms var(--ease-spring) both;
}
.soma-chat.is-active .soma-bubble--1 { animation-delay:  900ms; }
.soma-chat.is-active .soma-bubble--2 { animation-delay: 1650ms; }
.soma-chat.is-active .soma-bubble--3 { animation-delay: 2350ms; }
.soma-chat.is-active .soma-bubble--4 { animation-delay: 2950ms; }
.soma-chat.is-active .soma-bubble--5 { animation-delay: 3500ms; }

@media (max-width: 480px) {
  .soma-bubble { max-width: 92%; font-size: var(--text-base); }
}

/* ═══════════════════════════════════════════════════════════════════
   TRIPLA NEON GARANCIA
═══════════════════════════════════════════════════════════════════ */
.garancia-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-24);
}
@media (max-width: 768px) { .garancia-grid { grid-template-columns: 1fr; } }

.garancia-card {
  padding: var(--sp-48);
  position: relative; overflow: hidden;
  border: 1px solid rgba(120,255,0,.12);
  border-radius: var(--radius-card);
  background: rgba(37,42,61,.6);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  text-align: center;
}
.garancia-card--highlight {
  border-color: rgba(120,255,0,.28);
  background: rgba(37,42,61,.75);
}
.garancia-num {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  font-size: var(--text-5xl); font-weight: 800;
  color: var(--color-text);
  line-height: 1; margin-bottom: var(--sp-20);
}
.garancia-num__dash { font-size: var(--text-2xl); color: var(--color-primary); font-weight: 400; }
.garancia-title {
  font-size: var(--text-2xl); font-weight: 700;
  margin-bottom: var(--sp-16); line-height: 1.25;
}
.garancia-desc { font-size: var(--text-xl); color: rgba(250,250,250,.6); line-height: 1.7; }

/* ═══════════════════════════════════════════════════════════════════
   PRESS MENTIONS
═══════════════════════════════════════════════════════════════════ */
.press-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--sp-16);
}
.press-item {
  padding: var(--sp-24);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: var(--radius-card);
  background: rgba(37,42,61,.4);
}
.press-source {
  font-size: var(--text-base); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--color-primary); margin-bottom: var(--sp-12);
}
.press-quote { font-size: var(--text-base); color: rgba(250,250,250,.6); line-height: 1.7; font-style: italic; }

/* ── Press carousel ─────────────────────────────────────────────── */
.press-carousel {
  overflow: hidden; position: relative;
  padding-block: var(--sp-8); cursor: ew-resize;
  -webkit-mask: linear-gradient(to right, transparent 0, #fff 96px, #fff calc(100% - 96px), transparent 100%);
  mask: linear-gradient(to right, transparent 0, #fff 96px, #fff calc(100% - 96px), transparent 100%);
}
.press-track { display: flex; gap: var(--sp-16); width: max-content; will-change: transform; }

@media (max-width: 767px) {
  .press-carousel {
    overflow-x: scroll; overflow-y: visible;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    cursor: default;
    padding-inline: var(--sp-20);
    -webkit-mask: none; mask: none;
    -ms-overflow-style: none; scrollbar-width: none;
  }
  .press-carousel::-webkit-scrollbar { display: none; }
  .press-track { gap: var(--sp-12); padding-right: var(--sp-20); }
  .press-card  { scroll-snap-align: start; }
}

.press-card {
  width: 260px; flex-shrink: 0;
  display: flex; flex-direction: column; align-items: center;
  text-align: center; padding: 28px 20px 24px; overflow: hidden;
  position: relative;
  border: 1px solid rgba(120,255,0,.10);
  border-radius: var(--radius-card);
  transition: transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s, border-color .25s;
}
.press-card:hover {
  transform: translateY(-4px);
  border-color: rgba(120,255,0,.30);
  box-shadow: 0 16px 48px rgba(0,0,0,.4), 0 0 20px rgba(120,255,0,.08);
}
.press-card__logo {
  width: 160px; height: 60px; border-radius: 12px; flex-shrink: 0;
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(255,255,255,.15);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--text-3xl); font-weight: 900; letter-spacing: -.03em;
  color: var(--color-primary);
  box-shadow: 0 2px 16px rgba(0,0,0,.25);
  margin-bottom: var(--sp-16); position: relative; overflow: hidden;
  padding: 8px 16px;
}
.press-card__logo::before { content: none; }
.press-card__logo span { position: relative; z-index: 1; }
.press-card__name {
  font-size: var(--text-base); font-weight: 800; letter-spacing: -.01em;
  color: rgba(250,250,250,.92); margin-bottom: 10px;
}
.press-card__line {
  height: 2px; width: 28px; border-radius: 2px;
  background: var(--color-primary); opacity: .45;
  margin: 0 auto 12px;
  transition: width .32s cubic-bezier(.22,1,.36,1), opacity .32s;
}
.press-card:hover .press-card__line { width: 56px; opacity: 1; }
.press-card__quote {
  font-size: var(--text-base); color: var(--color-muted); line-height: 1.7; font-style: italic;
}

/* ═══════════════════════════════════════════════════════════════════
   FOOTER  (with map row)
═══════════════════════════════════════════════════════════════════ */
.footer { border-top: 1px solid var(--color-border); padding-block: var(--sp-64); }
.footer__top {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  gap: var(--sp-64); padding-bottom: var(--sp-48);
  border-bottom: 1px solid var(--color-border);
}
@media (max-width: 768px) { .footer__top { grid-template-columns: 1fr 1fr; gap: var(--sp-48); } }
@media (max-width: 480px) { .footer__top { grid-template-columns: 1fr; } }

.footer__tagline    { font-size: var(--text-base); color: var(--color-muted); line-height: 1.6; max-width: 280px; margin-top: 12px; }
.footer__col-title  { font-size: var(--text-base); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--color-muted); margin-bottom: var(--sp-20); }
.footer__links      { display: flex; flex-direction: column; gap: 10px; }
.footer__links a    { font-size: var(--text-base); font-weight: 600; color: rgba(250,250,250,.65); transition: color var(--dur-fast); }
.footer__links a:hover { color: var(--color-text); }

.footer__map-row {
  display: grid; grid-template-columns: 280px 1fr; gap: var(--sp-48); align-items: center;
  padding: var(--sp-48) 0; border-bottom: 1px solid var(--color-border);
}
@media (max-width: 700px) { .footer__map-row { grid-template-columns: 1fr; gap: var(--sp-24); } }

.footer__location-label {
  font-size: var(--text-base); font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--color-primary); display: flex; align-items: center; gap: var(--sp-8); margin-bottom: var(--sp-16);
}
.footer__location-label svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2.5; }
.footer__location-address { font-size: var(--text-base); color: var(--color-muted); line-height: 1.85; margin-bottom: 22px; }
.footer__directions {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: var(--text-base); font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--color-primary); text-decoration: none; transition: gap 200ms;
}
.footer__directions:hover { gap: 11px; }
.footer__directions svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2.5; }

.footer__map-frame {
  border-radius: var(--radius-card); overflow: hidden;
  border: 1px solid rgba(120,255,0,.15); height: 220px;
  box-shadow: 0 0 40px rgba(120,255,0,.06);
}
.footer__map-frame iframe { width: 100%; height: 100%; display: block; filter: grayscale(.25); }

.footer__bottom { display: flex; justify-content: space-between; align-items: center; padding-top: var(--sp-32); flex-wrap: wrap; gap: var(--sp-16); }
.footer__copy   { font-size: var(--text-base); color: var(--color-muted); }

/* JogsiPlusz brand badge — "supported by" credit, reuses the .jp-logo lockup */
.footer__jp { display: inline-flex; align-items: center; gap: 9px; opacity: .8; transition: opacity var(--dur-fast); }
.footer__jp:hover { opacity: 1; }
.footer__jp--socials { margin-top: var(--sp-20); }
.footer__jp__label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--color-muted); }
.jp-logo--footer .jp-logo__word { font-size: 17px; }
.jp-logo--footer .jp-logo__mark { width: 18px; height: 20px; margin-bottom: -1px; margin-left: 1px; }
.footer__socials{ display: flex; gap: var(--sp-12); }
.footer__social {
  width: 40px; height: 40px; background: var(--glass-bg);
  border: 1px solid var(--color-border); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: border-color var(--dur-fast), background var(--dur-fast), color var(--dur-fast);
}
.footer__social:hover { border-color: var(--color-primary); background: rgba(120,255,0,.08); }
.footer__social svg { width: 18px; height: 18px; fill: currentColor; }

/* ═══════════════════════════════════════════════════════════════════
   HERO — SPLIT (2-column with video)
═══════════════════════════════════════════════════════════════════ */
.hero--split {
  padding-block: var(--sp-96);
  display: grid; grid-template-columns: 9fr 11fr;
  gap: var(--sp-48); align-items: center;
  text-align: left;
}
.hero--split .trust         { justify-content: flex-start; }
.hero--split .hero__actions { justify-content: flex-start; }
.hero--split .hero__headline { font-size: clamp(var(--text-5xl), 5.5vw, var(--text-7xl)); margin-bottom: var(--sp-40); }

/* Explicit grid placement — headline+trust and the CTA buttons are now
   separate grid children (needed so mobile can reorder them independently),
   pinned back into the same 2-row left column so desktop is unaffected. */
.hero--split .hero__text-head { grid-column: 1; grid-row: 1; }
.hero--split .hero__actions   { grid-column: 1; grid-row: 2; }
.hero--split .hero-right-col  { grid-column: 2; grid-row: 1 / span 2; }
.hero--split .hero-ticker     { grid-column: 1 / -1; grid-row: 3; }

@media (max-width: 900px) {
  .hero--split {
    grid-template-columns: 1fr; gap: 0;
    padding-block: var(--sp-48) var(--sp-64);
  }

  /* Single column now — reset the desktop placement and use `order` to
     get the requested reading order: headline → buttons → video → trust badge.
     Grid `gap` is 0 here so each block's own margin-bottom controls its
     trailing space individually (needed so the heading→buttons gap can be
     tightened without affecting the other gaps in the stack). */
  .hero--split .hero__text-head,
  .hero--split .hero-right-col,
  .hero--split .hero__actions,
  .hero--split .hero-ticker {
    grid-column: 1; grid-row: auto;
  }
  .hero--split .hero__text-head { order: 1; }
  .hero--split .hero__actions   { order: 2; margin-bottom: var(--sp-64); }
  .hero--split .hero-right-col  { order: 3; margin-bottom: var(--sp-48); }
  .hero--split .hero-ticker     { order: 4; }

  /* Tight gap between the heading and the buttons, per request */
  .hero--split .hero__headline { margin-bottom: var(--sp-16); }

  /* Buttons stretch to fill the full row width, split evenly, so neither
     looks bigger than the other and there's no leftover empty space. */
  .hero--split .hero__actions { flex-wrap: nowrap; gap: var(--sp-12); }
  .hero--split .hero__actions .btn-primary,
  .hero--split .hero__actions .btn-ghost {
    flex: 1 1 0;
    justify-content: center; text-align: center;
    padding: var(--sp-16) var(--sp-12);
    font-size: var(--text-sm);
    white-space: normal;
  }
}

.hero-media { display: flex; flex-direction: column; gap: 12px; }

/* Hero bento — right column of hero--split */
.hero-bento {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-12);
}
.hero-bento__video {
  grid-column: 1 / -1; padding: 0; overflow: hidden;
}
.hero-bento__video .hero-video {
  aspect-ratio: 16/9; border-radius: 0; border: none;
}
.hero-bento__video .hero-video__thumb { border-radius: 0; }

.hero-bento__trust {
  padding: var(--sp-16) var(--sp-20);
  display: flex; flex-direction: column; justify-content: center; gap: var(--sp-8);
}
.hero-bento__stat {
  padding: var(--sp-16) var(--sp-20);
  display: flex; flex-direction: column; justify-content: center; gap: var(--sp-4);
}
.hero-bento__stat-num {
  font-size: var(--text-4xl); font-weight: 800;
  color: var(--color-primary); text-shadow: 0 0 20px rgba(120,255,0,.4); line-height: 1;
}
.hero-bento__stat-lbl { font-size: var(--text-base); color: var(--color-muted); line-height: 1.4; }

/* Cinematic hero wrapper — full-bleed bg behind the split */
.hero-cinematic {
  position: relative; overflow: hidden;
}
.hero-cinematic__bg {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
}
.hero-cinematic__bg img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 70% center;
  opacity: .45; filter: saturate(.65);
}
.hero-cinematic__veil { display: none; }
.hero-cinematic .hero--split {
  position: relative; z-index: 1;
}
.hero-cinematic .hero__headline { text-shadow: 0 2px 40px rgba(0,0,0,.5); }
.hero-cinematic .hero__sub      { text-shadow: 0 1px 20px rgba(0,0,0,.35); }

/* Hero right column — positions the card + floating trust badge */
.hero-right-col { position: relative; }

/* Hero glass card — video-only card */
.hero-glass-card {
  display: flex; flex-direction: column; overflow: hidden; position: relative;
  border: 1px solid rgba(120,255,0,.6) !important;
  box-shadow: 0 0 20px rgba(120,255,0,.18);
}
/* Fixed, definite height — height:100% chains below need a non-auto
   ancestor to resolve against, otherwise the thumb can fail to stretch
   and leave the card's own dark background showing as a gap/stripe. */
.hero-glass-card__video { height: 320px; }
.hero-glass-card__video .hero-video {
  width: 100%; height: 100%; aspect-ratio: unset; border-radius: 0; border: none;
}
.hero-glass-card__video .hero-video__thumb { width: 100%; height: 100%; object-fit: cover; }

.hero-trust-badge {
  margin-top: var(--sp-12);
}

.hero-video {
  position: relative; border-radius: 16px; overflow: hidden;
  background: rgba(15,17,28,.8); border: 1px solid rgba(120,255,0,.6);
  box-shadow: 0 0 16px rgba(120,255,0,.18);
  aspect-ratio: 16/9; cursor: pointer;
}
.hero-video:not(.vimeo-facade) { cursor: default; }
.vimeo-facade iframe {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border: none; display: block;
}
.hero-video__thumb {
  width: 100%; height: 100%; object-fit: cover; opacity: .8; transition: opacity 220ms; display: block;
  -webkit-user-drag: none; user-select: none;
}
.hero-video:hover .hero-video__thumb { opacity: 1; }
.hero-video__play {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
.hero-video__play-btn {
  width: 72px; height: 72px; border-radius: 50%;
  background: var(--color-primary);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 40px rgba(120,255,0,.55);
  transition: transform 220ms var(--ease-spring), box-shadow 220ms;
}
.hero-video:hover .hero-video__play-btn { transform: scale(1.1); box-shadow: 0 0 64px rgba(120,255,0,.75); }
.hero-video__play-btn svg { width: 26px; height: 26px; fill: #0D1117; margin-left: 4px; }

.trustindex-badge {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 12px 18px;
  background: rgba(15,17,28,.85);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px; backdrop-filter: blur(20px);
}
.trustindex-badge__google { font-size: var(--text-base); font-weight: 800; color: #4285F4; letter-spacing: -.01em; }
.trustindex-badge__stars  { display: flex; gap: 2px; }
.trustindex-badge__stars svg { width: 14px; height: 14px; fill: #FBBC05; }
.trustindex-badge__score  { font-size: var(--text-base); font-weight: 800; }
.trustindex-badge__info   { font-size: var(--text-base); color: var(--color-muted); line-height: 1.4; }

/* ── Hero ticker — subtle auto-scrolling selling-point strip ─────── */
.hero-ticker {
  grid-column: 1 / -1;
  overflow: hidden;
  -webkit-mask: linear-gradient(to right, transparent 0, #fff 48px, #fff calc(100% - 48px), transparent 100%);
  mask: linear-gradient(to right, transparent 0, #fff 48px, #fff calc(100% - 48px), transparent 100%);
}
.hero-ticker__track {
  display: flex; align-items: center; gap: var(--sp-16);
  width: max-content;
  animation: hero-ticker-scroll 36s linear infinite;
}
.hero-ticker__item {
  font-size: 17px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; white-space: nowrap;
  color: rgba(250,250,250,.35);
}
.hero-ticker__dot { font-size: 7px; color: rgba(120,255,0,.3); flex-shrink: 0; }

@keyframes hero-ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-ticker__track { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   NUMBERED FEATURE CARDS  (section 2 in design)
═══════════════════════════════════════════════════════════════════ */
.feat-num-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-32);
}
@media (max-width: 768px) { .feat-num-grid { grid-template-columns: 1fr; } }

.feat-num-outer { position: relative; padding-top: 28px; }

.feat-num-badge {
  position: absolute; top: 0; left: 50%;
  transform: translate(-50%, -50%);
  font-size: var(--text-5xl); font-weight: 800;
  color: var(--color-primary);
  text-shadow: 0 0 28px rgba(120,255,0,.55);
  line-height: 1; z-index: 2;
}

.feat-num-card {
  position: relative; overflow: hidden;
  padding: var(--sp-48);
  border: 1px solid rgba(120,255,0,.35);
  border-radius: var(--radius-card);
  background: rgba(37,42,61,.6);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  text-align: center; height: 100%;
  transition: border-color var(--dur-base), box-shadow var(--dur-base);
}
.feat-num-card::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .06;
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.9) 1px, transparent 1px);
  background-size: 14px 14px;
}
.feat-num-card:hover {
  border-color: rgba(120,255,0,.6);
  box-shadow: 0 0 40px rgba(120,255,0,.09);
}
.feat-num-card__glow-line {
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(to right, transparent, rgba(120,255,0,.55), transparent);
  pointer-events: none;
}
.feat-num-card__title {
  font-size: var(--text-2xl); font-weight: 700;
  margin-bottom: var(--sp-16); line-height: 1.25;
}
.feat-num-card__desc { font-size: var(--text-xl); color: rgba(250,250,250,.6); line-height: 1.7; }
.feat-num-card__desc .hl { color: var(--color-primary); }

/* ═══════════════════════════════════════════════════════════════════
   PRICING INFO (JOGOSÍTVÁNY ÁRA) — hero visual redesign
═══════════════════════════════════════════════════════════════════ */
.pricing-hero-section  { position: relative; overflow: hidden; }
.pricing-hero-bg       { position: absolute; inset: 0; z-index: 0; }
.pricing-hero-bg img   {
  width: 100%; height: 100%; object-fit: cover; object-position: center 25%;
  opacity: .15; filter: grayscale(.2);
}
.pricing-hero-bg__veil {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom,
    #1F2335 0%,
    rgba(31,35,53,.55) 18%,
    rgba(31,35,53,.22) 45%,
    rgba(31,35,53,.45) 72%,
    #1F2335 100%);
}
/* Compact quick-facts row */
.price-facts {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-16);
  margin-bottom: var(--sp-48);
}
@media (max-width: 768px) { .price-facts { grid-template-columns: 1fr; } }

.price-fact {
  display: flex; gap: var(--sp-16); align-items: flex-start;
  background: rgba(255,255,255,.03); border: 1px solid var(--color-border);
  border-radius: var(--radius-card); padding: var(--sp-24);
  transition: border-color var(--dur-base);
}
.price-fact:hover { border-color: rgba(120,255,0,.25); }
.price-fact__icon {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: var(--radius-in);
  background: rgba(120,255,0,.08); border: 1px solid rgba(120,255,0,.2);
  display: flex; align-items: center; justify-content: center;
}
.price-fact__icon svg { width: 20px; height: 20px; stroke: var(--color-primary); }
.price-fact__label  { font-size: var(--text-base); color: var(--color-muted); margin-bottom: var(--sp-4); }
.price-fact__amount { font-size: var(--text-2xl); font-weight: 800; color: var(--color-text); margin-bottom: var(--sp-4); }
.price-fact__note   { font-size: var(--text-sm); color: var(--color-muted); line-height: 1.5; }
.price-fact__link   { color: var(--color-primary); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }

/* Price calculator */
.price-calc {
  position: relative;
  background: linear-gradient(145deg, var(--color-surface), var(--color-bg));
  border: 1px solid rgba(120,255,0,.15); border-radius: 20px;
  padding: var(--sp-48) var(--sp-40); margin-bottom: var(--sp-32);
}
.price-calc__logo {
  position: absolute; top: 20px; left: 24px;
  height: 22px; width: auto; opacity: .9;
}
@media (max-width: 600px) { .price-calc__logo { top: 16px; left: 18px; height: 18px; } }
@media (max-width: 600px) { .price-calc { padding: var(--sp-32) var(--sp-20); } }

/* Decorative mascot photo — bleeds off the card's bottom-right corner.
   pointer-events:none is the actual safety guarantee here: even if it
   visually overlaps the card's edge, clicks always pass through to
   whatever pill/button is underneath. Wide screens only — no room for
   it without crowding the pills on tablet/mobile. */
.price-calc__mascot {
  display: none;
  position: absolute; bottom: 0; right: -110px;
  width: clamp(180px, 15vw, 260px); height: auto;
  pointer-events: none; user-select: none; -webkit-user-drag: none;
  filter: drop-shadow(0 24px 40px rgba(0,0,0,.45));
  z-index: 1;
}
@media (min-width: 1300px) { .price-calc__mascot { display: block; } }

/* Below 1300px there's no side room for the bleed — instead show her
   in normal document flow, centered above the title, like she's
   introducing the calculator. .price-calc becomes a flex column purely
   so `order` can move the (DOM-last) image to the top without touching
   the PHP markup; every other child keeps stacking exactly as before. */
@media (max-width: 1299px) {
  .price-calc { display: flex; flex-direction: column; }
  .price-calc__mascot {
    display: block; position: static; order: -1;
    width: clamp(140px, 34vw, 190px); height: auto;
    margin: 0 auto var(--sp-24);
    filter: drop-shadow(0 16px 28px rgba(0,0,0,.4));
  }
}

.price-calc__title { font-size: clamp(var(--text-2xl), 3vw, var(--text-4xl)); font-weight: 800; text-align: center; margin-bottom: var(--sp-32); }
.price-calc__title em { font-style: normal; color: var(--color-primary); }

.price-calc__group { margin-bottom: var(--sp-24); }
.price-calc__label { font-size: var(--text-lg); font-weight: 700; margin-bottom: var(--sp-12); display: block; }
.price-calc__hint  { font-weight: 400; font-size: var(--text-sm); color: var(--color-muted); }

.price-calc__pills { display: flex; flex-wrap: wrap; gap: var(--sp-8); }
.price-calc__pill {
  flex: 1; min-width: 130px;
  background: rgba(255,255,255,.04); border: 1.5px solid rgba(255,255,255,.1);
  border-radius: var(--radius-in); padding: var(--sp-12) var(--sp-16);
  font-family: var(--font); font-size: var(--text-base); font-weight: 600; color: rgba(250,250,250,.7);
  cursor: pointer; text-align: center;
  transition: border-color var(--dur-fast), background var(--dur-fast), color var(--dur-fast);
}
.price-calc__pill span { display: block; font-size: var(--text-sm); font-weight: 400; color: rgba(250,250,250,.35); margin-top: 2px; }
.price-calc__pill:hover { border-color: rgba(120,255,0,.3); background: rgba(120,255,0,.06); color: var(--color-text); }
.price-calc__pill.is-active { border-color: var(--color-primary); background: rgba(120,255,0,.12); color: var(--color-primary); }
.price-calc__pill.is-active span { color: rgba(120,255,0,.6); }
.price-calc__pills--toggle .price-calc__pill { min-width: auto; }
.price-calc__pills.is-locked .price-calc__pill { opacity: .35; pointer-events: none; }
@media (max-width: 600px) { .price-calc__pill { min-width: 100%; } }

.price-calc__hint-note {
  display: none; margin-top: var(--sp-8); font-size: var(--text-sm); color: var(--color-primary);
  background: rgba(120,255,0,.06); border: 1px solid rgba(120,255,0,.15);
  border-radius: var(--radius-in); padding: var(--sp-8) var(--sp-12);
}
.price-calc__hint-note.is-visible { display: block; }

.price-calc__included {
  font-size: var(--text-sm); color: var(--color-muted); line-height: 1.6;
  background: rgba(255,255,255,.02); border-left: 3px solid rgba(120,255,0,.25);
  border-radius: var(--radius-in); padding: var(--sp-12) var(--sp-16); margin: var(--sp-24) 0;
}
.price-calc__included strong { color: var(--color-text); }

.price-calc__result {
  background: linear-gradient(135deg, rgba(120,255,0,.08), rgba(120,255,0,.03));
  border: 1.5px solid rgba(120,255,0,.25); border-radius: var(--radius-card);
  padding: var(--sp-32); text-align: center;
}
.price-calc__placeholder    { font-size: var(--text-lg); color: var(--color-muted); }
.price-calc__result-label   { font-size: var(--text-lg); color: var(--color-muted); margin-bottom: var(--sp-8); }
.price-calc__result-value   { font-size: clamp(var(--text-4xl), 5vw, var(--text-6xl)); font-weight: 800; color: var(--color-primary); }
.price-calc__result-value span { font-size: var(--text-2xl); font-weight: 600; color: rgba(120,255,0,.6); }
.price-calc__result-breakdown  { margin-top: var(--sp-16); font-size: var(--text-sm); color: var(--color-muted); }

.price-calc__smallprint { text-align: center; font-size: var(--text-sm); color: rgba(250,250,250,.4); line-height: 1.7; max-width: 720px; margin-inline: auto; }

/* CTA */
.pricing-info-cta { text-align: center; margin-top: var(--sp-32); }
.btn--wide { min-width: 280px; justify-content: center; }

/* ═══════════════════════════════════════════════════════════════════
   SUPPORT BANNER  (25 000 Ft)
═══════════════════════════════════════════════════════════════════ */
.support-banner {
  padding: var(--sp-64);
  border: 1px solid rgba(120,255,0,.2);
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(120,255,0,.06) 0%, rgba(37,42,61,.8) 100%);
  text-align: center; max-width: 720px; margin-inline: auto;
}
.support-banner__amount {
  display: inline-block;
  font-size: var(--text-sm); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--color-primary);
  background: rgba(120,255,0,.1); border: 1px solid rgba(120,255,0,.28);
  border-radius: var(--radius); padding: 4px 16px;
  margin-bottom: var(--sp-20);
}
.support-banner__title { font-size: var(--text-2xl); font-weight: 700; margin-bottom: var(--sp-16); line-height: 1.25; }
.support-banner__desc  { font-size: var(--text-xl); color: rgba(250,250,250,.6); line-height: 1.75; margin-bottom: var(--sp-32); max-width: 560px; margin-inline: auto; }
.support-banner__info  { margin-top: var(--sp-20); font-size: var(--text-base); color: rgba(250,250,250,.45); display: flex; align-items: center; justify-content: center; gap: 4px; flex-wrap: wrap; }
.support-banner__info a { color: rgba(250,250,250,.7); text-decoration: underline; text-underline-offset: 3px; transition: color .2s; }
.support-banner__info a:hover { color: var(--color-primary); }
.support-banner__info-link { font-size: 12px; }
@media (max-width: 640px) {
  .support-banner { padding: var(--sp-32) var(--sp-24); border-radius: var(--radius-card); }
  .support-banner__title  { font-size: var(--text-xl); }
}

/* ═══════════════════════════════════════════════════════════════════
   LEGAL PAGE  (Impresszum, etc.)
═══════════════════════════════════════════════════════════════════ */
.legal-page  { padding-top: var(--sp-64); padding-bottom: var(--sp-32); }
.legal-grid  { display: flex; flex-direction: column; gap: var(--sp-40); max-width: 780px; margin-inline: auto; }

.legal-block { padding: var(--sp-40) var(--sp-40); }

.legal-block__title {
  font-size: var(--text-xl); font-weight: 700; color: var(--color-primary);
  letter-spacing: .02em;
  padding-bottom: var(--sp-16); margin-bottom: var(--sp-24);
  border-bottom: 1px solid var(--color-border);
}

.legal-table { display: flex; flex-direction: column; }
.legal-row {
  display: grid; grid-template-columns: 240px 1fr; gap: var(--sp-24);
  padding: var(--sp-20) var(--sp-12);
  margin-inline: calc(-1 * var(--sp-12));
  border-bottom: 1px solid var(--color-border);
  border-radius: var(--radius-in);
  transition: background var(--dur-base);
}
.legal-row:first-child { padding-top: var(--sp-12); }
.legal-row:last-child  { border-bottom: none; padding-bottom: var(--sp-12); }
.legal-row:hover        { background: rgba(120,255,0,.04); }

.legal-row dt {
  font-weight: 600; font-size: var(--text-sm);
  color: var(--color-muted); text-transform: uppercase; letter-spacing: .05em;
  padding-top: 3px; /* optically aligns with dd's larger line-height */
}
.legal-row dd   { color: var(--color-text); font-size: var(--text-base); line-height: 1.65; white-space: pre-line; }
.legal-row dd a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 3px; transition: color var(--dur-fast); }
.legal-row dd a:hover { color: var(--color-text); }

/* Flags values still waiting on real data — see IMPRESSZUM_* constants in inc/theme-config.php */
.legal-placeholder { color: #F9CF00; font-weight: 600; }

.legal-note {
  max-width: 780px; margin: var(--sp-48) auto 0;
  padding: var(--sp-20) var(--sp-24);
  background: rgba(249,207,0,.05); border: 1px solid rgba(249,207,0,.18);
  border-radius: var(--radius-in);
  font-size: var(--text-sm); color: var(--color-muted); line-height: 1.65;
}

@media (max-width: 640px) {
  .legal-block { padding: var(--sp-24); }
  .legal-row {
    grid-template-columns: 1fr; gap: var(--sp-4);
    padding: var(--sp-16) 0; margin-inline: 0;
  }
  .legal-row:hover { background: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   "KEZDD EL A VEZETNI TANULÁST" — page-oktatok.php
═══════════════════════════════════════════════════════════════════ */
/* White card, deliberately breaking from the dark design system so the
   form pops off the page instead of blending into it. */
.start-driving__form.card {
  max-width: 720px; margin: 0 auto var(--sp-64); padding: var(--sp-48);
  background: #ffffff;
  border-color: rgba(0,0,0,.06);
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.start-driving__form.card::before { display: none; }

/* Fluent Forms ships its own light-theme CSS by default, which is what we
   want here — these overrides just make sure it reads well against the
   white card (dark text, brand-green focus/submit) regardless of whatever
   Fluent Forms "style" preset is assigned to form #5. Scoped to this
   wrapper so it doesn't leak to any other Fluent Forms embed on the site. */
.start-driving__form .ff-el-input--label label,
.start-driving__form .ff-el-form-check-label { color: #1a1b23 !important; font-family: var(--font) !important; }
.start-driving__form input.ff-el-form-control,
.start-driving__form select.ff-el-form-control,
.start-driving__form textarea.ff-el-form-control {
  background: #f7f7f8 !important;
  border: 1px solid rgba(0,0,0,.12) !important;
  color: #1a1b23 !important;
  border-radius: var(--radius-in) !important;
  font-family: var(--font) !important;
}
.start-driving__form input.ff-el-form-control:focus,
.start-driving__form select.ff-el-form-control:focus,
.start-driving__form textarea.ff-el-form-control:focus {
  border-color: var(--color-primary-dk) !important;
  box-shadow: 0 0 0 3px rgba(120,255,0,.25) !important;
}
.start-driving__form .ff-el-form-check-label { display: flex; align-items: center; gap: var(--sp-8); color: #1a1b23 !important; }
.start-driving__form button[type="submit"] {
  font-family: var(--font) !important; font-weight: 600 !important;
  color: var(--color-text) !important;
  text-shadow: 0 0 2px var(--color-primary-dk);
  background: var(--grad-btn) !important;
  border: none !important; border-radius: var(--radius) !important;
  padding: var(--sp-16) var(--sp-32) !important;
  transition: transform var(--dur-fast) !important;
}
.start-driving__form button[type="submit"]:hover { transform: scale(.96); }

.wait-time { max-width: 900px; margin: 0 auto; }
.wait-time__title {
  text-align: center; font-size: var(--text-3xl); font-weight: 800;
  margin-bottom: var(--sp-32); line-height: 1.25;
}
.wait-time__grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-24);
}
@media (max-width: 768px) { .wait-time__grid { grid-template-columns: 1fr; } }

.wait-time__col { padding: var(--sp-32); }
.wait-time__col-title {
  font-size: var(--text-xl); font-weight: 700; margin-bottom: var(--sp-12);
}
.wait-time__col-body {
  font-size: var(--text-base); color: rgba(250,250,250,.65);
  line-height: 1.65; margin-bottom: var(--sp-20);
}
.wait-time__value { font-size: var(--text-xl); font-weight: 800; color: var(--color-primary); }

/* ═══════════════════════════════════════════════════════════════════
   ÉRDEKLŐDÉS — inquiry form (page-erdeklodes.php)
   Built on the existing .form-bento / .form-group / .form-input kit
   above (defined but unused elsewhere) and the .wizard-choice toggle
   pattern (styling + click handler already wired site-wide in app.js) —
   only the few pieces that don't exist yet are added here.
═══════════════════════════════════════════════════════════════════ */

/* Checkbox + label row (GDPR consent) — .form-group covers text/select
   inputs but not a checkbox-and-label pairing. */
.form-checkbox-row {
  display: flex; align-items: flex-start; gap: var(--sp-8);
  font-size: var(--text-base); color: var(--color-muted); line-height: 1.5;
}
.form-checkbox-row input[type="checkbox"] {
  margin-top: 3px; width: 16px; height: 16px; flex-shrink: 0; accent-color: var(--color-primary);
}
.form-checkbox-row a { color: var(--color-primary); text-decoration: underline; }

/* Honeypot — off-screen but focusable/fillable, catches bots that skip
   display:none fields. */
.hp-field {
  position: absolute; left: -9999px; top: -9999px;
  width: 1px; height: 1px; overflow: hidden;
}

.erdeklodes-form .form-bento__body { display: flex; flex-direction: column; gap: var(--sp-20); }
.erdeklodes-form .form-bento__foot { justify-content: center; }

/* White card, deliberately breaking from the dark design system so the form
   pops off the page — same treatment as .start-driving__form.card
   (page-oktatok.php) applied to the .form-bento kit instead of Fluent
   Forms. Everything below just re-colors that kit's light-on-dark defaults
   to dark-on-light so nothing goes invisible against the white background. */
.erdeklodes-form {
  background: #ffffff;
  border-color: rgba(0,0,0,.06);
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  max-width: 720px;
}
.erdeklodes-form .form-bento__head { border-bottom-color: rgba(0,0,0,.08); }
.erdeklodes-form .form-bento__icon { background: rgba(0,0,0,.04); border-color: rgba(0,0,0,.08); }
.erdeklodes-form .form-bento__icon svg { stroke: var(--color-primary-dk); }
.erdeklodes-form .form-bento__title { color: #1a1b23; }
.erdeklodes-form .form-bento__sub   { color: rgba(26,27,35,.55); }

.erdeklodes-form .form-label { color: rgba(26,27,35,.6); }
.erdeklodes-form .form-input {
  background: #f7f7f8; border: 1px solid rgba(0,0,0,.12); color: #1a1b23;
}
.erdeklodes-form .form-input::placeholder { color: rgba(26,27,35,.32); }
.erdeklodes-form .form-input:focus { border-color: var(--color-primary-dk); box-shadow: 0 0 0 3px rgba(120,255,0,.2); }
.erdeklodes-form select.form-input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='rgba(26,27,35,0.45)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

.erdeklodes-form .wizard-choice { background: #f7f7f8; border-color: rgba(0,0,0,.1); color: #1a1b23; }
.erdeklodes-form .wizard-choice:hover,
.erdeklodes-form .wizard-choice.selected { border-color: var(--color-primary-dk); background: rgba(120,255,0,.1); }

.erdeklodes-form .form-checkbox-row { color: rgba(26,27,35,.6); }

.erdeklodes-form .alert-ok,
.erdeklodes-form .alert-err { background: #f7f7f8; }
.erdeklodes-form .alert__title { color: #1a1b23; }
.erdeklodes-form .alert__body  { color: rgba(26,27,35,.6); }

.wait-time__cta { text-align: center; margin-top: var(--sp-40); }

/* ═══════════════════════════════════════════════════════════════════
   ÁRAINK — per-category pricing (page-arak.php)
═══════════════════════════════════════════════════════════════════ */
.arak-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--sp-24);
}
.arak-card { display: flex; flex-direction: column; padding: var(--sp-24); }
.arak-card__head { margin-bottom: var(--sp-16); }
.arak-card__title { font-size: var(--text-lg); font-weight: 700; }
.arak-card__short { font-size: var(--text-sm); color: var(--color-muted); margin-top: 4px; line-height: 1.4; }

.arak-card__rows { display: flex; flex-direction: column; gap: var(--sp-8); flex: 1; }
.arak-row {
  display: flex; justify-content: space-between; gap: var(--sp-12);
  padding: var(--sp-8) 0; border-bottom: 1px solid var(--color-border);
  font-size: var(--text-sm);
}
.arak-row span:first-child { color: var(--color-muted); }
.arak-row span:last-child  { color: var(--color-text); font-weight: 600; text-align: right; }
.arak-row small { color: var(--color-muted); font-weight: 400; }

.arak-card__total {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: var(--sp-16); padding-top: var(--sp-12);
  border-top: 1px solid rgba(120,255,0,.2);
}
.arak-card__total span   { font-size: var(--text-sm); color: var(--color-muted); }
.arak-card__total strong { font-size: var(--text-xl); font-weight: 800; color: var(--color-primary); }

.arak-card__soon { color: var(--color-muted); font-size: var(--text-sm); flex: 1; }

.arak-card__cta { margin-top: var(--sp-20); justify-content: center; }