/* ==========================================================================
   LélekKépző Landing — közös CSS
   Tipó: Body = Karla, Címek = Recia-Regular (font.css-ből)
   ========================================================================== */

/* sticky elrejtése állapottal */

@media (max-width: 840px){
  .lpsop-sticky{
    opacity: 1;
    transform: translate3d(0,0,0);
    visibility: visible;

    transition: opacity 220ms ease, transform 220ms ease, visibility 0s;
    will-change: opacity, transform;
  }

  /* Fade-out: először opacity/transform animál, majd a végén elrejti (focus/tab miatt is) */
  .lpsop-sticky.is-hidden{
    opacity: 0;
    transform: translate3d(0,10px,0);
    pointer-events: none;
    visibility: hidden;

    transition: opacity 220ms ease, transform 220ms ease, visibility 0s linear 220ms;
  }
}

@media (prefers-reduced-motion: reduce){
  .lpsop-sticky{ transition: none !important; }
}


@media (max-width:840px){
  .lpsop-wrap{ padding-bottom: calc(78px + env(safe-area-inset-bottom)); }
}

@media (hover:hover){
  .lpsop-btn:hover{
    transform: translateY(-1px);
  }
  .lpsop-show-item:hover{
    transform: translateY(-2px);
  }
}

@media (max-width: 680px){
  .lpsop-topbar,
  .lpsop-sticky{
    backdrop-filter: none;
    background: rgb(255 255 255 / 98%);
  }

  /* árnyékok picit vissza */
  .lpsop-wrap{ --lpsop-shadow: 0 10px 24px rgb(31 26 51 / 10%); }
}

/* szebb sortörés modern mobilokon */
.lpsop-h1, .lpsop-h2{ text-wrap: balance; }

@media (max-width: 520px){
  .lpsop-hero-sub{ font-size: 16px; }
  .lpsop-hero-sub strong{ font-weight: 650; } /* ne legyen “kiabálós” */
  .lpsop-section{ padding: 22px 16px; }
}


.lpsop-form .lpsop-legal{ align-items:flex-start; }
.lpsop-form .lpsop-legal input[type="checkbox"]{
  width: 20px;
  height: 20px;
  margin-top: 2px;
  accent-color: var(--lpsop-accent);
}
.lpsop-form .lpsop-legal label{ flex: 1; }


/* ==========================================================================
   0) Design tokens + reset
   ========================================================================== */
:root{
  --lpsop-deep:#1f1a33;
  --lpsop-text:#3f3f46;
  --lpsop-soft:#ede9fe;
  --lpsop-mid:#d8b4fe;
  --lpsop-accent:#a78bfa;
  --lpsop-bg:#faf8ff;

  --lpsop-ok:#28a745;
  --lpsop-err:#c0392b;

  --lpsop-max:1200px;
  --lpsop-radius:16px;
  --lpsop-shadow:0 12px 30px rgba(31,26,51,.15);
}

*,
*::before,
*::after{ box-sizing:border-box; }

html,body{ margin:0; padding:0; }

img{ max-width:100%; height:auto; display:block; }

a{ color:inherit; }

/* ==========================================================================
   1) Base + tipográfia
   ========================================================================== */
.lpsop-wrap{
  background:
    radial-gradient(1200px 600px at 10% -20%, rgba(167,139,250,.18), transparent 60%),
    radial-gradient(900px 500px at 110% 0%, rgba(216,180,254,.20), transparent 55%),
    linear-gradient(180deg,var(--lpsop-bg),#fff);
  color:var(--lpsop-text);
  font-family:"Karla", system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:17px;
  line-height:1.75;
}

.lpsop-section{
  max-width:var(--lpsop-max);
  margin:0 auto;
  padding:28px 20px;
}

.lpsop-h1,.lpsop-h2,.lpsop-h3{
  color:var(--lpsop-deep);
  line-height:1.2;
  margin:0 0 12px;
  font-family:"Recia-Regular","Times New Roman",serif;
  font-weight:400; /* Recia-Regular */
}

.lpsop-h1{
  font-size:clamp(30px,4.5vw,44px);
  text-align:center;
}

.lpsop-h2{
  font-size:clamp(24px,3vw,32px);
  text-align:center;
}

.lpsop-h3{
  font-size:20px;
  margin-top:0;
}

.lpsop-muted{ color:#6a6a6a; }
.lpsop-center{ text-align:center; }

.lpsop-hr{
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(0,0,0,.08),transparent);
  margin:18px 0;
}

.lpsop-dash{
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(0,0,0,.08),transparent);
  margin:16px 0;
}

/* ==========================================================================
   2) Gombok
   ========================================================================== */
.lpsop-btn{
  appearance:none;
  border:0;
  border-radius:14px;
  padding:14px 22px;
  cursor:pointer;
  transition:.25s;
  box-shadow:0 8px 22px rgba(0,0,0,.18);
  background:linear-gradient(135deg,var(--lpsop-accent),var(--lpsop-mid));
  color:#fff;
  text-decoration:none;
  display:inline-block;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.3px;
}

.lpsop-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 12px 28px rgba(0,0,0,.25);
}

.lpsop-btn:focus-visible{
  outline:3px solid rgba(167,139,250,.45);
  outline-offset:2px;
}

.lpsop-btn--ghost{
  background:#fff;
  color:var(--lpsop-deep);
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 8px 22px rgba(0,0,0,.10);
}

.lpsop-cta-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:center;
  margin-top:18px;
}

.lpsop-cta-row--section{
  margin-top:18px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:12px;
}

.lpsop-cta-row--section .lpsop-btn{ min-width:180px; }

/* ==========================================================================
   3) Topbar (sticky fejléc)
   ========================================================================== */
.lpsop-topbar{
  position:sticky;
  top:0;
  z-index:50;
background: rgb(255 255 255 / 88%);
  backdrop-filter:saturate(150%) blur(6px);
border-bottom: 1px solid rgb(0 0 0 / 6%);
}

.lpsop-topbar-inner{
  max-width:var(--lpsop-max);
  margin:0 auto;
  padding:10px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.lpsop-logo{ font-weight:900; letter-spacing:.4px; color:var(--lpsop-deep); }

.lpsop-topbar .lpsop-logo .lpsop-logo-link{
  text-decoration:none;
  font-weight:900;
  letter-spacing:.2px;
  color:var(--lpsop-deep);
}

.lpsop-topbar .lpsop-logo .lpsop-logo-link:hover{ color:var(--lpsop-accent); }

.lpsop-nav{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}

.lpsop-nav a{
  color:var(--lpsop-deep);
  text-decoration:none;
  font-weight:800;
  position:relative;
}

.lpsop-nav a::after{
  content:"";
  position:absolute;
  left:0; right:0;
  bottom:-6px;
  height:2px;
  background:linear-gradient(90deg,var(--lpsop-accent),transparent);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .25s;
}

.lpsop-nav a:hover::after{ transform:scaleX(1); }

/* Mobil: ne “középen lebegjen” */
@media (max-width:680px){
  .lpsop-topbar-inner{
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    flex-wrap:nowrap;
  }

  /* Bal oldalt: Győri Betti */
  .lpsop-logo{
    flex:0 0 auto;
    max-width:44%;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  /* Jobb oldalt: rövid cím */
  .lpsop-nav{
    flex:1 1 auto;
    width:auto;
    justify-content:flex-end;
    min-width:0; /* fontos az ellipsishez */
  }

  .lpsop-nav a{
    display:block;
    max-width:100%;
    text-align:right;
    font-size:13px;
    line-height:1.2;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
}


/* ==========================================================================
   4) Hero
   ========================================================================== */
.lpsop-hero{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:24px;
  align-items:center;
}
@media (max-width:980px){ .lpsop-hero{ grid-template-columns:1fr; } }

.lpsop-hero img{
  width:100%;
  height:auto;
  border-radius:18px;
  box-shadow:var(--lpsop-shadow);
  background:#fff;
  outline:1px solid rgba(0,0,0,.06);
}

.lpsop-hero-sub{
  margin-top:8px;
  color:#6a6a6a;
  font-size:18px;
}

/* ==========================================================================
   5) Kártyák + rács-elemek (általános)
   ========================================================================== */
.lpsop-card{
  background:linear-gradient(135deg,#ffffff,#f7f5ff);
  border:1px solid rgba(0,0,0,.06);
  border-radius:14px;
  padding:18px;
  box-shadow:var(--lpsop-shadow);
}

.lpsop-p22{ padding:22px; }

/* ==========================================================================
   6) “Miben mutatkozik meg…” + “Mikor való neked…” (Show grid)
   ========================================================================== */
.lpsop-show-head,
.lpsop-flow-head,
.lpsop-benefit-head{
  height:3px;
  width:140px;
  margin:12px auto 20px;
  background:linear-gradient(90deg,var(--lpsop-accent),var(--lpsop-mid));
  border-radius:999px;
}

.lpsop-show-head--wide{ width:190px; }

.lpsop-show-wrap{ max-width:1000px; margin:0 auto; }

.lpsop-show-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
}

/* Ez a landing 2 oszlopos verziót használ desktopon */
.lpsop-show-grid.lpsop-show-grid--2col{ grid-template-columns:1fr; }
@media (min-width:980px){
  .lpsop-show-grid.lpsop-show-grid--2col{ grid-template-columns:repeat(2,1fr); }
}

.lpsop-show-item{
  display:flex;
  gap:12px;
  align-items:flex-start;
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  border-radius:14px;
  padding:14px 16px;
  box-shadow:0 10px 24px rgba(0,0,0,.12);
  min-height:72px;
  transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}
.lpsop-show-item:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 36px rgba(0,0,0,.14);
  border-color:rgba(0,0,0,.08);
}

.lpsop-show-icon{
  position:relative;
  flex:0 0 auto;
  width:36px;
  height:36px;
  border-radius:999px;
  display:grid;
  place-items:center;
  color:var(--lpsop-accent);
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.9) 0%, rgba(255,255,255,.6) 35%, transparent 70%),
    linear-gradient(135deg,var(--lpsop-soft),#fff);
  box-shadow:0 6px 14px rgba(0,0,0,.10);
  outline:1px solid rgba(0,0,0,.05);
}
.lpsop-show-icon::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:999px;
  padding:2px;
  background:conic-gradient(from 120deg, var(--lpsop-accent), var(--lpsop-mid), var(--lpsop-accent));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  opacity:.9;
}
.lpsop-show-icon svg{
  width:18px;
  height:18px;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.15));
}

.lpsop-show-item p{
  margin:0;
  color:var(--lpsop-deep);
  font-weight:700;
  line-height:1.6;
  overflow-wrap:anywhere;
}

/* “mark” kiemelés (a szövegben) */
.lpsop-mark{
  background:
    linear-gradient(180deg, rgba(167,139,250,.16), rgba(216,180,254,.20)) 0 100% / 100% .62em no-repeat,
    linear-gradient(90deg, var(--lpsop-accent), var(--lpsop-mid)) 0 calc(100% + 2px) / 100% 2px no-repeat;
  border-radius:6px;
  padding:0 .08em;
  font-weight:900;
  color:var(--lpsop-deep);
}

/* ==========================================================================
   7) “Mi az a csoportos meditációs oldás?” (About) — (CSS-be költöztetve)
   ========================================================================== */
#lpsop-mi-az-oldas{ scroll-margin-top:100px; }

#lpsop-mi-az-oldas .lpsop-about-head{
  height:4px;
  width:min(180px,36vw);
  margin:14px auto 28px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--lpsop-accent),var(--lpsop-mid));
  filter:drop-shadow(0 8px 18px rgba(31,26,51,.18));
}

/* Üveg-kártya, kétoszlopos layout */
#lpsop-mi-az-oldas .lpsop-about-oldas{
  max-width:1180px;
  margin:0 auto;
  display:grid;
  gap:24px;
  align-items:start;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.35fr);
  background:linear-gradient(135deg,#ffffff,var(--lpsop-soft));
  border:1px solid rgba(0,0,0,.06);
  border-radius:18px;
  padding:22px;
  position:relative;
  overflow:hidden;
  isolation:isolate;
  box-shadow:0 16px 38px rgba(31,26,51,.14);
}

@media (max-width:980px){
  #lpsop-mi-az-oldas .lpsop-about-oldas{
    grid-template-columns:1fr;
    padding:18px;
  }
}

#lpsop-mi-az-oldas .lpsop-about-oldas::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:18px;
  padding:1px;
  z-index:0;
  background:conic-gradient(from 180deg at 50% 50%,var(--lpsop-accent),var(--lpsop-mid),var(--lpsop-accent));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  opacity:.22;
}

#lpsop-mi-az-oldas .lpsop-about-oldas::after{
  content:"";
  position:absolute;
  right:-180px;
  top:-220px;
  width:560px;
  height:560px;
  z-index:0;
  background:radial-gradient(closest-side,rgba(167,139,250,.34),rgba(216,180,254,.18),transparent 70%);
  filter:blur(22px);
}

/* Bal hasáb: orb + lead chip */
#lpsop-mi-az-oldas .lpsop-about-side{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:64px 1fr;
  gap:14px;
  align-items:center;
}

#lpsop-mi-az-oldas .lpsop-orb{
  width:64px;
  height:64px;
  border-radius:999px;
  position:relative;
  overflow:hidden;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,#fff,rgba(247,246,255,.92));
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 10px 22px rgba(31,26,51,.12), inset 0 1px 0 rgba(255,255,255,.8);
}
#lpsop-mi-az-oldas .lpsop-orb::after{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(135deg,var(--lpsop-accent),var(--lpsop-mid));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  opacity:.5;
}
#lpsop-mi-az-oldas .lpsop-orb svg{
  width:30px;
  height:30px;
  color:var(--lpsop-accent);
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.12));
}

#lpsop-mi-az-oldas .lpsop-lead{
  margin:0;
  padding:14px 16px;
  border-radius:14px;
  background:linear-gradient(135deg,#ffffff,rgba(247,246,255,.95));
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 10px 22px rgba(31,26,51,.10);
  color:var(--lpsop-deep);
  font-weight:700;
  letter-spacing:.2px;
  line-height:1.65;
  font-size:18.5px;
}

/* Jobb hasáb: bekezdés-kártyák */
#lpsop-mi-az-oldas .lpsop-about-body{
  position:relative;
  z-index:1;
  display:grid;
  gap:12px;
}
#lpsop-mi-az-oldas .lpsop-about-body p{
  position:relative;
  margin:0;
  padding:18px 16px;
  background:linear-gradient(135deg,#ffffff,rgba(247,246,255,.9));
  border:1px solid rgba(0,0,0,.06);
  border-radius:14px;
  color:var(--lpsop-deep);
  font-weight:500;
  line-height:1.8;
  box-shadow:0 10px 22px rgba(31,26,51,.10);
}

/* Ha a szövegben használsz <strong>-ot, az maradjon kiemelés */
#lpsop-mi-az-oldas .lpsop-about-body p strong{
  font-weight:800;
}

@media (hover:hover){
  #lpsop-mi-az-oldas .lpsop-about-body p{
    transition:transform .22s ease, box-shadow .22s ease;
  }
  #lpsop-mi-az-oldas .lpsop-about-body p:hover{
    transform:translateY(-2px);
    box-shadow:0 18px 36px rgba(31,26,51,.18);
  }
}

/* ==========================================================================
   8) Folyamat
   ========================================================================== */
.lpsop-flow-wrap{ max-width:1000px; margin:0 auto; }

.lpsop-steps{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:16px;
}
@media (max-width:860px){ .lpsop-steps{ grid-template-columns:1fr; } }

.lpsop-step{
  display:flex;
  gap:14px;
  align-items:flex-start;
  padding:18px;
  border-radius:16px;
  background:linear-gradient(135deg,#ffffff,var(--lpsop-soft));
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 12px 26px rgba(0,0,0,.12);
}

.lpsop-step .lpsop-ico{
  flex:0 0 auto;
  width:40px;
  height:40px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:#fff;
  outline:1px solid rgba(0,0,0,.06);
  box-shadow:0 8px 18px rgba(0,0,0,.10);
  color:var(--lpsop-accent);
}

.lpsop-step p{
  margin:0;
  color:var(--lpsop-deep);
  font-weight:700;
  line-height:1.6;
}

/* ==========================================================================
   9) Szerző blokk
   ========================================================================== */
#lpsop-author{ scroll-margin-top:110px; }

.lpsop-author-pro{
  max-width:1000px;
  margin:18px auto 0;
  padding:20px;
  background:linear-gradient(135deg,#ffffff,#f7f5ff);
  border:1px solid rgba(0,0,0,.06);
  border-radius:18px;
  box-shadow:0 12px 28px rgba(0,0,0,.14);
}

.lpsop-author-grid{
  display:grid;
  grid-template-columns:140px 1fr;
  gap:18px;
  align-items:start;
}
@media (max-width:680px){
  .lpsop-author-grid{ grid-template-columns:1fr; text-align:left; }
}

.lpsop-portrait{
  position:relative;
  width:140px;
  height:140px;
  border-radius:999px;
  overflow:hidden;
  box-shadow:0 12px 28px rgba(0,0,0,.2);
}

.lpsop-portrait::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:999px;
  padding:2px;
  background:linear-gradient(135deg,var(--lpsop-accent),var(--lpsop-mid));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
}

.lpsop-portrait img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:999px;
}

/* ==========================================================================
   10) Benefit grid
   ========================================================================== */
.lpsop-benefit-wrap{ max-width:1000px; margin:0 auto; }

.lpsop-benefit-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}
@media (max-width:900px){ .lpsop-benefit-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .lpsop-benefit-grid{ grid-template-columns:1fr; } }

.lpsop-benefit{
  display:flex;
  gap:12px;
  align-items:flex-start;
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  border-radius:14px;
  padding:14px 16px;
  box-shadow:0 10px 24px rgba(0,0,0,.12);
}

.lpsop-benefit-icon{
  position:relative;
  flex:0 0 auto;
  width:36px;
  height:36px;
  border-radius:999px;
  display:grid;
  place-items:center;
  color:var(--lpsop-accent);
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.9) 0%, rgba(255,255,255,.6) 35%, transparent 70%),
    linear-gradient(135deg,var(--lpsop-soft),#fff);
  box-shadow:0 6px 14px rgba(0,0,0,.10);
  outline:1px solid rgba(0,0,0,.05);
}
.lpsop-benefit-icon::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:999px;
  padding:2px;
  background:conic-gradient(from 120deg, var(--lpsop-accent), var(--lpsop-mid), var(--lpsop-accent));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  opacity:.9;
}
.lpsop-benefit-icon svg{
  width:18px;
  height:18px;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.15));
}

.lpsop-benefit p{
  margin:0;
  color:var(--lpsop-deep);
  font-weight:700;
  line-height:1.5;
}

/* ==========================================================================
   11) Vélemények
   ========================================================================== */
#lpsop-reviews .lpsop-revgrid{
  display:grid;
  gap:16px;
  max-width:1200px;
  margin:0 auto;
  grid-template-columns:1fr;
}
@media (min-width:640px){  #lpsop-reviews .lpsop-revgrid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:900px){  #lpsop-reviews .lpsop-revgrid{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:1200px){ #lpsop-reviews .lpsop-revgrid{ grid-template-columns:repeat(4,1fr); } }

#lpsop-reviews .lpsop-revcard{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  border-radius:16px;
  padding:18px 18px 16px;
  background:linear-gradient(135deg,#ffffff,var(--lpsop-soft));
  box-shadow:0 12px 28px rgba(0,0,0,.10);
}
#lpsop-reviews .lpsop-revcard::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:16px;
  padding:1px;
  z-index:0;
  background:linear-gradient(135deg,var(--lpsop-accent),var(--lpsop-mid));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  opacity:.28;
}
#lpsop-reviews .lpsop-revcard::after{
  content:"\201E";
  position:absolute;
  left:10px;
  top:-10px;
  z-index:0;
  font-size:72px;
  font-weight:900;
  line-height:1;
  letter-spacing:-.02em;
  background:linear-gradient(135deg,var(--lpsop-accent),var(--lpsop-mid));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  opacity:.16;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.10));
}

#lpsop-reviews .lpsop-revquote{ position:relative; z-index:1; }
#lpsop-reviews .lpsop-revquote p{
  margin:0;
  color:var(--lpsop-deep);
  line-height:1.7;
  font-weight:800;
  font-size:clamp(15.5px,1.85vw,18px);
  font-style:italic;
  white-space:pre-wrap;
}

@media (hover:hover){
  #lpsop-reviews .lpsop-revcard{ transition:transform .25s ease, box-shadow .25s ease; }
  #lpsop-reviews .lpsop-revcard:hover{
    transform:translateY(-3px);
    box-shadow:0 22px 46px rgba(31,26,51,.18);
  }
}

/* ==========================================================================
   12) Info kártyák (Időpont · Helyszín · Ár)
   ========================================================================== */
.lpsop-info-cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}
@media (max-width:900px){ .lpsop-info-cards{ grid-template-columns:1fr; } }

.lpsop-info-card{
  position:relative;
  display:flex;
  gap:12px;
  align-items:flex-start;
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  border-radius:16px;
  padding:16px;
  box-shadow:0 12px 28px rgba(0,0,0,.10);
  min-height:92px;
}

.lpsop-icon{
  width:32px;
  height:32px;
  flex:0 0 auto;
  color:var(--lpsop-accent);
  background:linear-gradient(135deg,var(--lpsop-soft),#fff);
  border-radius:999px;
  padding:6px;
  box-shadow:0 8px 18px rgba(0,0,0,.08);
  outline:1px solid rgba(0,0,0,.05);
}

/* ==========================================================================
   13) GYIK (accordion)
   ========================================================================== */
.lpsop-faq-head{
  height:3px;
  width:140px;
  margin:12px auto 20px;
  background:linear-gradient(90deg,var(--lpsop-accent),var(--lpsop-mid));
  border-radius:999px;
}

.lpsop-faq{ max-width:1000px; margin:0 auto; }

.lpsop-accordion{ display:grid; gap:12px; }

.lpsop-faq-item{
  position:relative;
  border:1px solid rgba(0,0,0,.06);
  border-radius:14px;
  background:linear-gradient(135deg,#ffffff,var(--lpsop-soft));
  box-shadow:var(--lpsop-shadow);
  overflow:hidden;
}
.lpsop-faq-item::before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width:4px;
  background:linear-gradient(180deg,var(--lpsop-accent),var(--lpsop-mid));
  opacity:.35;
}

.lpsop-faq-item summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:16px 18px;
  font-weight:900;
  color:var(--lpsop-deep);
}
.lpsop-faq-item summary::-webkit-details-marker{ display:none; }

.lpsop-faq-item summary::after{
  content:"▾";
  font-size:18px;
  line-height:1;
  transform:rotate(0deg);
  transition:transform .25s ease, opacity .25s ease;
  opacity:.7;
}
.lpsop-faq-item[open] summary::after{
  transform:rotate(-180deg);
  opacity:1;
}

.lpsop-faq-a{
  padding:0 18px 16px;
  border-top:1px dashed rgba(0,0,0,.08);
  color:var(--lpsop-deep);
  font-weight:700;
  line-height:1.65;
}
.lpsop-faq-a p{ margin:12px 0 0; }

/* ==========================================================================
   14) Űrlap
   ========================================================================== */
.lpsop-form{ max-width:760px; margin:0 auto; }

.lpsop-form .lpsop-field{ margin-bottom:12px; }

.lpsop-form label{
  display:block;
  font-weight:800;
  margin-bottom:6px;
  color:var(--lpsop-deep);
}

.lpsop-form input[type="text"],
.lpsop-form input[type="email"],
.lpsop-form input[type="tel"],
.lpsop-form textarea{
  width:100%;
  padding:12px;
  border-radius:10px;
  border:1px solid rgba(200,200,255,.6);
  background:rgba(255,255,255,.95);
  box-shadow:inset 0 2px 5px rgba(0,0,0,.06);
  font-size:16px;
  transition:border-color .2s, box-shadow .2s;
  font-family:"Karla", system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

.lpsop-form input:focus,
.lpsop-form textarea:focus{
  outline:none;
  border-color:var(--lpsop-accent);
  box-shadow:0 0 0 4px rgba(167,139,250,.25);
}

.lpsop-form textarea{ min-height:120px; resize:vertical; }

.lpsop-form small{ color:#6a6a6a; }

.lpsop-form .lpsop-legal{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:14px;
}
.lpsop-form .lpsop-legal input{ margin-top:4px; }

.lpsop-success,
.lpsop-error{
  display:none;
  margin:12px 0;
  padding:14px;
  border-radius:10px;
  font-weight:800;
  box-shadow:0 10px 20px rgba(0,0,0,.15);
}
.lpsop-success{
  background:linear-gradient(135deg,#e0f7da,#a5d6a7);
  color:var(--lpsop-ok);
}
.lpsop-error{
  background:linear-gradient(135deg,#ffebee,#ef5350);
  color:#fff;
  text-align:center;
}

.lpsop-hide{ display:none !important; }

/* Sublead a form cím alatt */
.lpsop-sublead{
  max-width:760px;
  margin:6px auto 16px;
  text-align:center;
}
.lpsop-subrule{
  height:3px;
  width:160px;
  margin:8px auto 10px;
  background:linear-gradient(90deg,var(--lpsop-accent),var(--lpsop-mid));
  border-radius:999px;
}
.lpsop-sublead p{
  margin:0;
  color:var(--lpsop-deep);
  font-weight:700;
  line-height:1.6;
}
.lpsop-sublead a{
  color:var(--lpsop-accent);
  font-weight:900;
  text-decoration:none;
}
.lpsop-sublead a:hover{ text-decoration:underline; }

.lpsop-form-actions{ margin-top:10px; }

/* ===== Űrlap "Jelentkezem" gomb nagyobb / esztétikusabb ===== */
.lpsop-form-actions .lpsop-btn{
  display:block;
  width:100%;
  max-width:520px;
  margin:0 auto;

  padding:18px 26px;
  min-height:56px;

  font-size:18px;
  line-height:1.1;
  border-radius:16px;

  /* ha kevésbé "kiabálósat" szeretnél a formon */
  text-transform:none;
  letter-spacing:.2px;
}

/* mobilon picit finomhangolva */
@media (max-width:520px){
  .lpsop-form-actions .lpsop-btn{
    font-size:17px;
    padding:16px 22px;
    min-height:54px;
  }
}



.lpsop-form-hint{ margin-top:6px; }

/* ==========================================================================
   15) Lábléc
   ========================================================================== */
.lpsop-foot{
  font-size:14px;
  color:#7a7a7a;
  text-align:center;
  padding:14px 0 28px;
}
.lpsop-foot a{ color:inherit; }

/* ==========================================================================
   16) Sticky mobil CTA (alsó sáv)
   ========================================================================== */
.lpsop-sticky{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:60;
  background:rgba(255,255,255,.96);
  backdrop-filter:saturate(160%) blur(8px);
  border-top:1px solid rgba(0,0,0,.08);
  display:none;
  padding-bottom:env(safe-area-inset-bottom);
}

.lpsop-sticky-inner{
  max-width:var(--lpsop-max);
  margin:0 auto;
  padding:10px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

@media (max-width:840px){
  .lpsop-sticky{ display:block; }
  .lpsop-wrap{ padding-bottom:78px; } /* hogy ne lógjon a tartalom alá */
}

.lpsop-sticky-title{ max-width:70%; }
.lpsop-sticky-title strong{
  display:block;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  color:var(--lpsop-deep);
}
@media (max-width:420px){ .lpsop-sticky-title{ max-width:62%; } }

/* ==========================================================================
   17) Anchor offset + reveal animáció
   ========================================================================== */
#lpsop-form,
#snm-miert,
#snm-mikor,
#snm-folyamat,
#lpsop-info-2,
#lpsop-faq{
  scroll-margin-top:100px;
}

.lpsop-reveal{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .5s ease, transform .5s ease;
}
.lpsop-reveal.is-in{
  opacity:1;
  transform:translateY(0);
}

@media (prefers-reduced-motion: reduce){
  .lpsop-reveal{
    transition:none !important;
    opacity:1 !important;
    transform:none !important;
  }
}





/* =========================================================
   Szekciókép – ALAP + Premium tónus: #lpsop-mi-az-oldas
   (Ez a blokk VÁLTJA a korábbi .lpsop-section-media és
   a "Premium tónus" CSS-eidet – csak ezt használd.)
   ========================================================= */

/* ---- Alap szekciókép komponens ---- */
.lpsop-section-media{
  max-width: 1180px;
  margin: 0 auto 18px;

  /* a kerekítés és vágás itt dől el */
  border-radius: 18px;
  overflow: hidden;

  /* stabil vágás pseudo-elemekre is */
  -webkit-mask-image: -webkit-radial-gradient(white, black); /* iOS/SAFARI fix */
  clip-path: inset(0 round 18px);

  background: #fff;
  box-shadow: var(--lpsop-shadow);

  position: relative; /* hogy a pseudo rétegek ehhez igazodjanak */
}

.lpsop-section-media img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lpsop-section-media--43{ aspect-ratio: 4 / 3; }
.lpsop-section-media--169{ aspect-ratio: 16 / 9; }

@media (max-width: 520px){
  .lpsop-section-media{
    margin-bottom: 14px;
    border-radius: 16px;
    clip-path: inset(0 round 16px);
  }
}



/* Csak mobilon látszódjanak ezek a szekcióképek */
.lpsop-mobile-only{
  display: none;
}

@media (max-width: 680px){
  .lpsop-mobile-only{
    display: block;
  }
}