/* =========================================================
   2. változat – „Éjszakai égbolt"

   Sötét, antracit alap arany vonalrajzzal, mint egy csillagos
   éjszakai ég: pislákoló szétszórt csillagok, apró porcsillagok,
   lassan forgó nap és horoszkópkerék, tarotkártya-szerű keretek.
   A világos (pergamen, vaj) szakaszok kontrasztként jelennek meg,
   ott a vonalrajz terrakotta. Az alap.css-re épül.

   Tartalom:
     1. Helyi változók (:root)
     2. Általános (fókusz, ikonkészlet, csillagmező, gomb)
     3. Fejléc
     4. Hero: portré + bemutatkozás
     5. Hitvallás
     6. Elemzések
     7. Schőner-módszer
     8. Idézet-szalag
     9. Árak
    10. Vélemények
    11. Kapcsolat
    12. Változatváltó gomb
    13. Reszponzív
   ========================================================= */

/* ---------- 1. Helyi változók ---------- */

:root {
  --gold-45: color-mix(in srgb, var(--gold) 45%, transparent);      /* áttetsző arany: porcsillagok, változatváltó kerete */
  --gold-soft-30: color-mix(in srgb, var(--gold-soft) 30%, transparent);  /* leghalványabb porcsillagok */
  --terra-35: color-mix(in srgb, var(--terra) 35%, transparent);     /* árlista elválasztó vonalai */

  /* A színtémák (css/szintemak.css) ezeket is felülírhatják */
  --foto-szuro: sepia(.22) saturate(.9) contrast(1.03);  /* a portré tónusa */
  --egbolt-kod: none;                                    /* halvány ködfátyol a csillagos háttér mögött */
}

/* ---------- 2. Általános ---------- */

/* Fókuszkeret: az alap.css csak a .section--dark részeken ad aranyat;
   itt a fejléc és a hero is sötét, ezért ott is arany kell */
.site-header :focus-visible,
.hero :focus-visible,
.nav-toggle:focus-visible ~ .nav-burger { outline-color: var(--gold); }

/* Az SVG ikonkészlet ne foglaljon helyet a <body> tetején */
.sprite { position: absolute; }

/* A szakaszok tartalma a díszítések (csillagok, nap, kerék) fölött legyen */
section > .container {
  position: relative;
  z-index: 1;
}

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

/* Csillagmező: a .scatter csillagok itt aranyak, a halványabbak (.is-soft) krémszínűek */
.sky {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.sky .scatter { color: color-mix(in srgb, var(--gold) 85%, transparent); }
.sky .is-soft { color: color-mix(in srgb, var(--gold-soft) 55%, transparent); }

/* Apró, mozdulatlan „porcsillagok" a sötét szakaszok hátterében:
   mindegyik egy 1px-es, éles szélű radial-gradient pötty */
.hero,
.quote-band,
.reviews {
  background-image:
    radial-gradient(circle at 6% 34%, color-mix(in srgb, var(--gold-soft) 50%, transparent) 0 1px, transparent 1.6px),
    radial-gradient(circle at 15% 62%, color-mix(in srgb, var(--gold-soft) 35%, transparent) 0 1px, transparent 1.6px),
    radial-gradient(circle at 24% 8%, color-mix(in srgb, var(--gold-soft) 45%, transparent) 0 1px, transparent 1.6px),
    radial-gradient(circle at 31% 78%, color-mix(in srgb, var(--gold) 50%, transparent) 0 1px, transparent 1.6px),
    radial-gradient(circle at 38% 40%, var(--gold-soft-30) 0 1px, transparent 1.6px),
    radial-gradient(circle at 45% 96%, color-mix(in srgb, var(--gold-soft) 40%, transparent) 0 1px, transparent 1.6px),
    radial-gradient(circle at 53% 22%, var(--gold-45) 0 1px, transparent 1.6px),
    radial-gradient(circle at 60% 66%, var(--gold-soft-30) 0 1px, transparent 1.6px),
    radial-gradient(circle at 67% 4%, color-mix(in srgb, var(--gold-soft) 50%, transparent) 0 1px, transparent 1.6px),
    radial-gradient(circle at 74% 44%, color-mix(in srgb, var(--gold-soft) 35%, transparent) 0 1px, transparent 1.6px),
    radial-gradient(circle at 81% 80%, var(--gold-45) 0 1px, transparent 1.6px),
    radial-gradient(circle at 88% 16%, color-mix(in srgb, var(--gold-soft) 40%, transparent) 0 1px, transparent 1.6px),
    radial-gradient(circle at 92% 52%, var(--gold-soft-30) 0 1px, transparent 1.6px),
    radial-gradient(circle at 98% 88%, color-mix(in srgb, var(--gold-soft) 45%, transparent) 0 1px, transparent 1.6px),
    var(--egbolt-kod);
}

/* Aranyvonalas „szellem" gomb sötét háttérre */
.btn--line {
  border-color: color-mix(in srgb, var(--gold) 70%, transparent);
  color: var(--gold);
  background: transparent;
}
.btn--line:hover {
  border-color: var(--gold);
  color: var(--ejszaka);
  background: var(--gold);
}

/* ---------- 3. Fejléc ---------- */

.site-header {
  border-bottom: 1px solid color-mix(in srgb, var(--gold) 20%, transparent);
  background: color-mix(in srgb, var(--ejszaka) 95%, transparent);
}
.site-header .brand,
.site-header .brand__icon { color: var(--gold); }
.site-header .brand__sub { color: color-mix(in srgb, var(--gold-soft) 72%, transparent); }

.site-header .nav a:not(.btn) {
  color: var(--gold-soft);
  transition: color .3s var(--ease);
}
.site-header .nav a:not(.btn):hover,
.site-header .nav a.is-active { color: var(--gold); }
.site-header .nav a:not(.btn)::after { background: var(--gold); }

.site-header .nav .btn {
  border-color: var(--gold);
  color: var(--gold);
  background: transparent;
}
.site-header .nav .btn:hover {
  color: var(--ejszaka);
  background: var(--gold);
}

/* ---------- 4. Hero: portré + bemutatkozás ---------- */

.hero {
  position: relative;
  overflow: hidden;
  padding: calc(var(--header-h) + clamp(28px, 4vw, 48px)) 0 clamp(52px, 6vw, 76px);
  color: var(--gold-soft);
  background-color: var(--ejszaka);
}

/* Kilógó, lassan forgó nap a jobb felső sarokban; a .hero overflow: hidden-je vágja le */
.hero__sun {
  position: absolute;
  top: -70px;
  right: -120px;
  width: 360px;
  height: 360px;
  color: color-mix(in srgb, var(--gold) 30%, transparent);
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, clamp(240px, 28vw, 380px)) minmax(0, 600px);
  justify-content: center;
  align-items: center;
  gap: clamp(40px, 6.5vw, 88px);
}

/* Tarotkártya-keret: téglalap, kettős vékony arany szegély + belső vaj keret a képen */
.portrait {
  position: relative;
  margin: 0;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--gold) 80%, transparent);
}
.portrait::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent);
  pointer-events: none;
}
.portrait::after {
  content: "";
  position: absolute;
  inset: 24px;
  border: 1px solid color-mix(in srgb, var(--vaj) 45%, transparent);
  pointer-events: none;
}
.portrait img {
  width: 100%;
  aspect-ratio: 10 / 11;
  object-fit: cover;
  object-position: center 22%;
  filter: var(--foto-szuro);
}

/* Jel a keret felső és alsó szélének közepén; a sötét kör kitakarja a keretvonalat */
.portrait__mark {
  position: absolute;
  z-index: 1;
  left: 50%;
  width: 32px;
  height: 32px;
  margin-left: -16px;
  padding: 6px;
  color: var(--gold);
  border-radius: 50%;
  background: var(--ejszaka);
}
.portrait__mark--top { top: -16px; }
.portrait__mark--bottom {
  bottom: -16px;
  padding: 3px;
}

/* Díszsor: csillagfény – nap – csillagfény */
.ornament {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  color: var(--gold);
}
.ornament__burst {
  flex: none;
  width: 26px;
  height: 26px;
}
.ornament__sun {
  flex: none;
  width: 48px;
  height: 48px;
}
.ornament__line {
  width: 34px;
  height: 1px;
  background: color-mix(in srgb, var(--gold) 55%, transparent);
}

.hero .eyebrow { color: var(--gold); }

.hero h1 {
  font-size: clamp(2rem, 1.2rem + 2.2vw, 2.9rem);
  line-height: 1.2;
  color: var(--gold);
}

.hero__title {
  margin: .4rem 0 0;
  font-size: 1.1rem;
  font-weight: 400;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-soft);
}

/* Balra zárt elválasztó (bal oldali vonal nélkül); mobilon középre kerül */
.hero__divider {
  justify-content: flex-start;
  margin: 1.2rem 0;
  color: var(--gold);
}
.hero__divider::before { display: none; }

.hero__hello {
  margin-bottom: .6rem;
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: .04em;
  line-height: 1.2em;
  color: var(--gold);
}

.hero__lead {
  max-width: 530px;
  margin-bottom: 1.8rem;
  color: color-mix(in srgb, var(--gold-soft) 90%, transparent);
}

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

/* ---------- 5. Hitvallás ---------- */

.motto {
  overflow: hidden;
  /*padding: clamp(64px, 8vw, 104px) 0;
  background: var(--vaj);*/
  background-color: var(--ejszaka);
  padding: 0 0 60px;
}
  .motto h2 { color: var(--gold-soft); }

  .text--highlight-extra
  {
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-style: italic;
    font-size: 1.2em;
    letter-spacing: normal;
    text-transform: none;
  }

  .motto-mid
  {
    padding-bottom: 0;
    margin-top: 60px;
  }

/* Kilógó gömb a jobb alsó sarokban */
.motto__orb {
  position: absolute;
  right: -70px;
  bottom: -70px;
  width: 230px;
  height: 230px;
  color: color-mix(in srgb, var(--terra) 30%, transparent);
}

.motto__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  align-items: center;
  gap: clamp(32px, 6vw, 96px);
}

.motto .eyebrow { color: var(--terra-deep); }
.motto .divider { margin-bottom: 0; }

.motto__text p { font-size: 1.08rem; }
.motto__question {
  margin: 1.6rem 0 0;
  padding-left: 20px;
  border-left: 1px solid var(--terra);
}

/* ---------- 6. Elemzések ---------- */

.services { overflow: hidden; }

.cards {
  /*display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.6vw, 32px);*/
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 30px;
  padding: 0 20px;
  text-align: center;
  color: var(--gold-soft);
  transition: translate .5s var(--ease);
}
/*.card:hover { translate: 0 -6px; }*/

/* Kettős belső keret; currentColor miatt a kártya terrakotta színét követi */

.card--pergamen { background: var(--pergamen); }
.card--vaj { background: var(--vaj); }

.card__num {
  font-family: var(--font-display);
  font-size: .95rem;
  letter-spacing: .2em;
  color: var(--terra-deep);
}
.card__icon-box
{
  margin-top: 30px;
  padding: 0 10px;
  position: relative;
}
.card__icon-box::before,
.card__icon-box::after
{
  background-color: var(--gold-soft);
  content: '';
  height: 1px;
  opacity: .4;
  position: absolute;
  right: 100%;
  bottom: 50%;
  width: 100px;
}
.card__icon-box::after
{
  left: 100%;
  right: auto
}
  .card__icon {
    width: 50px;
    height: 50px;
  }
.card__text
{
  flex: 1;
}
.card h3 {
  margin-bottom: 1rem;
}
.card p {
    /*color: var(--ink);*/
}
.card p:last-child { margin-bottom: 0; }

/* A margin-top: auto a kártya aljára tolja; a .card előtag azért kell,
   hogy a betűméret felülírja a .card p szabályt */
.card .card__note {
  margin-top: auto;
  padding-top: 1.1rem;
  border-top: 1px solid color-mix(in srgb, var(--terra) 45%, transparent);
  font-size: .95rem;
  font-style: italic;
}
.card__note span {
  font-size: .78rem;
  font-style: normal;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--terra-deep);
}

#analyzes .card
{
  
}

/* ---------- 7. Schőner-módszer ---------- */

.method {
  overflow: hidden;
  background: var(--pergamen);
}
.method .eyebrow { color: var(--terra-deep); }

.method__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(48px, 7vw, 100px);
}

/* Négyzetes doboz (aspect-ratio: 1): a kerék kitölti, a számláló középre kerül */
.method__visual {
  position: relative;
  display: grid;
  place-items: center;
  justify-self: center;
  width: 100%;
  max-width: 440px;
  aspect-ratio: 1;
}
.method__wheel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: var(--terra);
}

/* Sötét kör a kerék közepén; a két box-shadow egy pergamen rést és egy vékony gyűrűt rajzol köré */
.method__stat {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 44%;
  aspect-ratio: 1;
  text-align: center;
  border-radius: 50%;
  background: var(--ejszaka);
  box-shadow: 0 0 0 6px var(--pergamen), 0 0 0 7px color-mix(in srgb, var(--terra) 50%, transparent);
}
.method__num {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, .9rem + 1.5vw, 2.2rem);
  line-height: 1;
  color: var(--gold);
}
.method__label {
  margin-top: 10px;
  font-size: .7rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-soft);
}

.phases {
  display: flex;
  gap: clamp(24px, 4vw, 48px);
  margin: 2rem 0 0;
  padding: 1.8rem 0 0;
  border-top: 1px solid color-mix(in srgb, var(--terra) 40%, transparent);
  list-style: none;
}
.phases li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.phases svg {
  width: 52px;
  height: 52px;
  color: var(--terra);
}
/* Tükrözött hold = növekvő (Jövő) */
.phases .is-waxing { transform: scaleX(-1); }
.phases span {
  font-family: var(--font-display);
  font-size: .95rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--terra-deep);
}

/* ---------- 8. Idézet-szalag ---------- */

.quote-band {
  position: relative;
  overflow: hidden;
  padding: 0 0 40px;
  text-align: center;
  background-color: var(--ejszaka);
}
.quote-band__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-block: 0;
}
.quote-band blockquote {
  max-width: 900px;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, .8rem + 1.4vw, 1.9rem);
  line-height: 1.5;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold);
}
.quote-band__rule {
  display: block;
  width: clamp(120px, 18vw, 220px);
  height: 1px;
  margin-top: 28px;
  background: var(--gold);
  opacity: .8;
}

/* ---------- 9. Árak ---------- */

.prices {
  overflow: hidden;
  background: var(--pergamen);
}
.prices .eyebrow { color: var(--terra-deep); }

/* Óriási, halvány kerék a szakasz közepén; a translate középre igazítja,
   a kilógó részt a .prices overflow: hidden-je vágja le */
.prices__wheel {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: min(1000px, 150vw);
  height: min(1000px, 150vw);
  color: var(--terra);
  opacity: .09;
}

.frag {
  --fw: 640px;
  position: absolute;
  z-index: 0;
  width: var(--fw);
  height: var(--fw);
  color: var(--terra);
  opacity: .17;
  pointer-events: none;
}

.frag--br {
  right: calc(var(--fw) * -.4);
  bottom: calc(var(--fw) * -.44);
}

.frag--bl {
  bottom: calc(var(--fw) * -.44);
  left: calc(var(--fw) * -.4);
}

.prices__inner { max-width: 820px; }

.price-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.price-list li {
  position: relative;
  padding: 22px 0;
  border-bottom: 1px solid var(--terra-35);
}
.price-list li:first-child { border-top: 1px solid var(--terra-35); }

.price-list__row {
  display: flex;
  align-items: baseline;
  gap: 14px;
}
.price-list__name {
  font-family: var(--font-display);
  font-size: 1.1rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink);
}
/* Pontozott vezetővonal a név és az ár között; a translate a szöveg közepe felé emeli */
.price-list__dots {
  flex: 1;
  min-width: 24px;
  border-bottom: 1px dotted color-mix(in srgb, var(--terra) 80%, transparent);
  translate: 0 -5px;
}
.price-list__price {
  font-size: 1.08rem;
  font-weight: 500;
  letter-spacing: .04em;
  white-space: nowrap;
  color: var(--ink);
}
.price-old 
{
  font-size: .7em;
  opacity: .8;
  text-decoration: line-through;
}
.price-new-label
{
  background-color: var(--terra-deep);
  color: #FFF;
  display: block;
  line-height: 1em;
  padding: 2px 5px;
  text-transform: uppercase;
}
  .price-new-label span 
  {
    font-size: .6em
  }
.price-list__meta {
  margin: 4px 0 0;
  font-size: 1.05rem;
  color: var(--ink-soft);
}
.price-list__meta-top
{
  margin-top: -20px;
}

/* Kiemelt tétel: a negatív oldalmargó miatt a doboz kilóg, a szöveg viszont
   egy vonalban marad a többi tétellel (a padding ugyanannyi) */
.price-list .is-featured {
  margin: 14px -28px;
  padding: 32px 28px 24px;
  border: 1px solid var(--terra);
  background: var(--vaj);
}
.price-list .is-featured::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid var(--terra-35);
  pointer-events: none;
}

/* Címke a kiemelt tétel felső keretvonalán */
.badge {
  position: absolute;
  z-index: 1;
  top: -12px;
  left: 28px;
  padding: 3px 14px;
  font-size: .68rem;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
  border-radius: 999px;
  background: var(--ejszaka);
}

.prices__foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 44px 0 0;
  text-align: center;
  color: var(--ink-soft);
}
.prices__foot svg {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--terra);
}

/* ---------- 10. Vélemények ---------- */

.reviews { overflow: hidden; }

/* Csillagkép-lista: a kártyák felváltva a középvonal bal és jobb oldalán.
   --koz:     a két oldal közti sáv, ebben fut a vonal és ülnek a csillagjelek
   --atfedes: ennyivel csúszik feljebb minden kártya az előző mellé
   --jel:     a csillagjelek mérete */
.review-list {
  --koz: clamp(72px, 9vw, 120px);
  --atfedes: 90px;
  --jel: 34px;
  position: relative;
  display: flex;
  flex-direction: column;
  max-width: 1000px;
  margin: 0 auto;
}

/* A függőleges vonal a lista közepén, a két végén elhalványulva */
.review-list::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: linear-gradient(
    to bottom,
    transparent,
    color-mix(in srgb, var(--gold) 45%, transparent) 8%,
    color-mix(in srgb, var(--gold) 45%, transparent) 92%,
    transparent
  );
}

.review {
  position: relative;
  width: calc(50% - var(--koz) / 2);
  margin: 0;
  padding: 56px 36px 32px;
  border: 1px solid color-mix(in srgb, var(--gold) 25%, transparent);
  background: var(--ejszaka-2);
  /* második, belső keret – mint a portré tarotkártya-keretén */
  outline: 1px solid color-mix(in srgb, var(--gold) 12%, transparent);
  outline-offset: -9px;
}
.review:nth-child(even) { align-self: flex-end; }
.review + .review { margin-top: calc(var(--atfedes) * -1); }

/* Nagy, halvány nyitó idézőjel díszként, félig kilógva a kártya sarkából */
.review::before {
  content: "\201C";
  position: absolute;
  top: -.3em;
  left: 20px;
  font-family: var(--font-display);
  font-size: 7.5rem;
  line-height: 1;
  color: var(--gold);
  opacity: .3;
  pointer-events: none;
}

/* Csillagjel a középvonalon; a háttérszínű kör kitakarja mögötte a vonalat */
.review__node {
  position: absolute;
  top: 36px;
  right: calc(var(--koz) / -2 - var(--jel) / 2);
  width: var(--jel);
  height: var(--jel);
  padding: 5px;
  color: var(--gold);
  border-radius: 50%;
  background: var(--ejszaka);
}
.review:nth-child(even) .review__node {
  right: auto;
  left: calc(var(--koz) / -2 - var(--jel) / 2);
}

/* Rövid összekötő vonal a kártya széle és a csillagjel között */
.review::after {
  content: "";
  position: absolute;
  top: calc(36px + var(--jel) / 2);
  left: 100%;
  width: calc(var(--koz) / 2 - var(--jel) / 2 - 6px);
  height: 1px;
  background: color-mix(in srgb, var(--gold) 45%, transparent);
}
.review:nth-child(even)::after {
  right: 100%;
  left: auto;
}

.review blockquote { margin: 0; }
.review p {
  margin: 0 0 1.4rem;
  font-size: 1.2rem;
  color: var(--gold-soft);
}
.review figcaption {
  font-family: var(--font-display);
  font-size: .9rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
}
/* Rövid vonal a név fölött */
.review figcaption::before {
  content: "";
  display: block;
  width: 32px;
  height: 1px;
  margin-bottom: 14px;
  background: color-mix(in srgb, var(--gold) 60%, transparent);
}
.review figcaption span {
  display: block;
  font-family: var(--font-body);
  font-size: .72rem;
  letter-spacing: .2em;
  color: color-mix(in srgb, var(--gold-soft) 72%, transparent);
}

#statBox
{
  margin: 40px 0 -25px;
  opacity: .5;
}

/* ---------- 11. Kapcsolat ---------- */

/* Nincs .section osztálya, ezért saját, kisebb térközzel */
.contact {
  position: relative;
  overflow: hidden;
  padding: clamp(56px, 6vw, 80px) 0;
  border-top: 1px solid color-mix(in srgb, var(--gold) 18%, transparent);
  background: var(--ejszaka-2);
}

.contact__sun {
  position: absolute;
  top: -90px;
  right: -90px;
  width: 260px;
  height: 260px;
  color: color-mix(in srgb, var(--gold) 16%, transparent);
}

.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(40px, 7vw, 110px);
}

/* Hármas hold: növekvő (tükrözött) – telihold – fogyó; szarvak kifelé */
.triple-moon {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  color: var(--gold);
}
.triple-moon svg {
  flex: none;
  width: 36px;
  height: 36px;
}
.triple-moon .triple-moon__full {
  width: 46px;
  height: 46px;
}
.triple-moon .triple-moon__waxing { transform: scaleX(-1); }

.contact__lead {
  max-width: 440px;
  margin: 1.1rem 0 1.8rem;
  color: var(--gold-soft);
}

.contact__list { margin: 0; }
.contact__list div {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  align-items: baseline;
  gap: 2px 24px;
  padding: 16px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--gold) 22%, transparent);
}
.contact__list div:first-child { border-top: 1px solid color-mix(in srgb, var(--gold) 22%, transparent); }

.contact__list dt {
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gold);
}
.contact__list dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.08rem;
  letter-spacing: .06em;
  color: var(--gold-soft);
}
.contact__list a {
  color: var(--gold-soft);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--gold) 40%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
  transition: color .3s var(--ease), text-decoration-color .3s var(--ease);
}
.contact__list a:hover {
  color: var(--gold);
  text-decoration-color: var(--gold);
}
.contact__phone { font-size: 1.45rem; }
.contact__mail {
  font-family: var(--font-body);
  font-weight: 400;
  letter-spacing: .03em;
  overflow-wrap: anywhere;
}

/* ---------- 12. Változatváltó gomb ---------- */

.inner-site--main-dark
{
  background-color: var(--ejszaka);
  color: var(--gold-soft);
  padding: calc(var(--header-h) + clamp(28px, 4vw, 48px)) 0 clamp(52px, 6vw, 76px);
  position: relative;
}
  .inner-site--main-dark .container,
  .inner-site--main-light .container
  {
    position: relative;
    z-index: 1;
  }
    .inner-site--main-dark h2
    {
      color: var(--gold-soft);
      margin-bottom: 20px;
    }
    .inner-site--main-dark h3, .inner-site--main-light h3 { margin-bottom: 20px; }
    .inner-site--main-dark h3 { color: var(--vaj) }
    
    .inner-site--main-dark h2,
    .inner-site--main-light h2 { font-size: 2em; }
    .inner-site--main-light h2 { margin-bottom: 40px; }

  .inner-site--main-light
  {
    padding: 40px 0;
  }

  .image-box
  {
    border: 1px solid color-mix(in srgb, var(--gold) 80%, transparent);
    margin: 0 auto 40px;
    max-width: 600px;
    padding: 6px;
    position: relative;
    width: 100%;
  }
    .image-box::before
    {
      border: 2px solid color-mix(in srgb, var(--gold) 80%, transparent);
      content: "";
      height: calc(100% - 24px);
      left: 12px;
      position: absolute;
      top: 12px;
      width: calc(100% - 24px);
      z-index: 1;
    }

  .box-article
  {
    background-color: rgba(194, 127, 115, .2);
    border: 1px solid  color-mix(in srgb, var(--gold) 80%, transparent);
    margin: 20px 0;
    padding: 10px 20px;
  }
   

/* Keret, hogy a sötét szakaszokon is kiváljon a háttérből */
.variant-back { border: 1px solid var(--gold-45); }

/* ---------- 13. Reszponzív ---------- */

/* Tablet: sötét mobilmenü, egyoszlopos hitvallás, kártyák és módszer */
@media (max-width: 960px) {
  .site-header .nav {
    border-bottom-color: color-mix(in srgb, var(--gold) 30%, transparent);
    background: var(--ejszaka);
  }
  .site-header .nav-burger span,
  .site-header .nav-burger span::before,
  .site-header .nav-burger span::after { background: var(--gold); }

  .motto__grid,
  .method__grid { grid-template-columns: minmax(0, 1fr); }

  .cards {
    grid-template-columns: minmax(0, 1fr);
    max-width: 640px;
    margin-inline: auto;
  }

  .method__visual { max-width: 380px; }
}

/* Kis tablet: a hero és a kapcsolat egy oszlopba, a hero középre zárva */
@media (max-width: 760px) {
  h2 { font-size: 1.6em; }
  .hero__sun {
    top: -40px;
    right: -90px;
    width: 220px;
    height: 220px;
  }
  .hero__grid {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: 44px;
    text-align: center;
  }
  .portrait { width: min(290px, 82%); }
  .hero__text { max-width: 560px; }
  .ornament { justify-content: center; }
  .hero__divider { justify-content: center; }
  .hero__divider::before { display: block; }
  .hero__lead { margin-inline: auto; }
  .hero__actions { justify-content: center; }

  .contact__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
  }

  .phases { justify-content: center; }

  /* Vélemények: a vonal a bal szélre kerül, a kártyák egymás alatt mellette */
  .review-list { padding-left: 52px; }
  .review-list::before { left: calc(var(--jel) / 2); }
  .review { width: 100%; }
  .review:nth-child(even) { align-self: auto; }
  .review + .review { margin-top: 36px; }
  .review .review__node,
  .review:nth-child(even) .review__node {
    right: auto;
    left: -52px;
  }
  .review::after,
  .review:nth-child(even)::after {
    right: 100%;
    left: auto;
    width: calc(52px - var(--jel) - 6px);
  }
}

/* Mobil: egymás alatti gombok, ritkább csillagmező, keskenyebb dobozok */
@media (max-width: 600px) {
  /* A 13. csillagtól kezdve elrejtjük, hogy ne legyen zsúfolt */
  .hero .sky .scatter:nth-child(n+13) { display: none; }
  .hero__actions {
    flex-direction: column;
    align-items: center;
  }
  .hero__actions .btn {
    width: 100%;
    max-width: 340px;
  }

  .motto__orb {
    right: -60px;
    bottom: -60px;
    width: 160px;
    height: 160px;
  }

  .price-list__row {
    flex-wrap: wrap;
    row-gap: 2px;
  }
  .price-list__dots { display: none; }
  .price-list__price { width: 100%; }
  .price-list .is-featured {
    margin-inline: -12px;
    padding-inline: 12px;
  }
  .badge { left: 12px; }
  .price-list__meta-top { margin-top: 4px; }

  .contact__sun {
    top: -70px;
    right: -70px;
    width: 180px;
    height: 180px;
  }
  .contact__list div { grid-template-columns: minmax(0, 1fr); }
  .contact__phone { font-size: 1.3rem; }
}