/* Kampány-landing oldalak közös stílusa (Miami event, Four Seasons konzultáció).
   Ezek az oldalak sehonnan nincsenek linkelve, ezért külön fájlban élnek: a fő
   stíluslapot nem terhelik. A színeket, a betűtípust és a rácsot a styles.css
   :root változói adják. A .mia- előtag történeti: az első ilyen oldal a Miami
   event volt, azóta közös alap. */

.mia{--mia-dark:#08171b;}
.mia body{background:#fff;}
/* A fő stíluslap minden <section>-nek ad egy --section-gap margót; ezen az
   oldalon a szekciók maguk hozzák a térközt (padding), ezért itt nullázzuk –
   különben a hero is elcsúszik lefelé, és dupla lesz a szekciók közti rés. */
.mia main section{margin:0;}

/* ---------- fejléc ---------- */
.mia-header{
  position:fixed; inset:0 0 auto 0; z-index:50;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:16px var(--pad);
  transition:background .3s ease, box-shadow .3s ease, padding .3s ease;
}
/* Görgetéskor ugyanaz a mély teal sáv, mint az ingatlanoldal fejlécén
   (.site-header--solid): márka-sötét átló, cián derengéssel. */
.mia-header.is-stuck{
  background:
    radial-gradient(85% 210% at 16% 0%, rgba(102,216,255,.22), transparent 58%),
    linear-gradient(100deg, #005c7c 0%, #004258 52%, #002e3d 100%);
  border-bottom:1px solid rgba(102,216,255,.18);
  padding-block:10px;
}
.mia-logo{display:inline-flex; align-items:center;}
/* a főoldali fejléc logójával azonos méret; görgetés után kicsit kisebb */
.mia-logo img{
  height:clamp(68px, 6.2vw, 100px); width:auto; display:block;
  transition:filter .3s ease, height .3s ease;
}
.mia-header.is-stuck .mia-logo img{height:clamp(54px, 4.6vw, 72px);}
.mia-logo img{filter:brightness(0) invert(1);}
.mia-nav{display:flex; align-items:center; gap:26px;}
.mia-nav a{
  font-size:14px; font-weight:500; color:#fff; opacity:.9;
  transition:opacity .2s ease, color .2s ease;
}
.mia-nav a:hover{opacity:1;}
.mia-header.is-stuck .mia-nav a{color:#fff; opacity:.82;}
.mia-header.is-stuck .mia-nav a:hover{color:var(--brand-light); opacity:1;}
.mia-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border-radius:999px; padding:13px 26px; font-size:14.5px; font-weight:600;
  border:1px solid transparent; cursor:pointer; text-align:center;
  transition:background .25s ease, color .25s ease, border-color .25s ease, transform .2s ease;
}
.mia-btn--primary{background:var(--brand); color:#fff;}
.mia-btn--primary:hover{background:var(--accent); color:#fff;}
.mia-btn--ghost{border-color:rgba(255,255,255,.55); color:#fff;}
.mia-btn--ghost:hover{background:rgba(255,255,255,.12);}
.mia-btn--dark{border-color:var(--line); color:var(--ink); background:#fff;}
.mia-btn--dark:hover{border-color:var(--accent); color:var(--accent);}
.mia-btn:focus-visible{outline:2px solid var(--brand-light); outline-offset:3px;}
@media(max-width:860px){
  .mia-nav{display:none;}
  .mia-header{padding-inline:20px;}
}

/* ---------- hero ---------- */
.mia-hero{
  position:relative;
  /* A banner 2,33:1 – minél magasabb a hero, annál többet kell oldalt vágni
     belőle, és annál inkább a szöveg alá csúszik a skyline. Ezért laposabb. */
  min-height:min(86vh, 820px);
  display:flex; align-items:center;
  padding:140px var(--pad) 90px; color:#fff; overflow:hidden;
}
/* A banner már eleve kékórás és sötét, ezért csak annyit sötétítünk rajta,
   amennyi a fehér szöveghez kell: bal oldalt fátyol, fent a fejléc alá egy
   sáv, lent egy enyhe lezárás. A jobb oldali skyline érintetlen marad. */
.mia-hero-bg{
  position:absolute; inset:0; z-index:0;
  background:url('/images/miami-hero.jpg') 45% center / cover no-repeat;
}
/* A banner világos, napfényes, ezért a fehér szöveghez határozott fátyol kell
   balra és fent – a jobb oldali skyline viszont tiszta marad. */
.mia-hero::after{
  content:''; position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(100deg, rgba(4,20,34,.86) 0%, rgba(4,20,34,.66) 32%, rgba(4,20,34,.3) 58%, rgba(4,20,34,.06) 82%, rgba(4,20,34,0) 100%),
    linear-gradient(180deg, rgba(4,20,34,.5) 0%, rgba(4,20,34,.14) 24%, rgba(4,20,34,0) 52%, rgba(4,20,34,.34) 100%);
}
.mia-hero-inner{position:relative; z-index:2; max-width:min(860px, 58vw);}
.mia-eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--brand-light); margin-bottom:18px;
}
.mia-eyebrow::before{content:''; width:26px; height:1px; background:currentColor;}
.mia-hero h1{
  font-size:clamp(34px, 4.6vw, 70px); line-height:1.06; letter-spacing:-.02em;
  /* a bevezető bekezdés lekerült a heróról, ezért a cím alatt nagyobb a levegő */
  margin:0 0 34px; text-shadow:0 2px 24px rgba(10,9,7,.45);
}
.mia-hero-lead{
  font-size:clamp(16px, 1.3vw, 19px); line-height:1.65; max-width:56ch;
  margin:0 0 34px; color:rgba(255,255,255,.9);
}
/* A banner Dubait mutatja, az esemény viszont négy piacról szól – ezért a
   cím alatt ki is írjuk őket, ahogy a főoldal hero-ja is teszi. */
.mia-hero-markets{
  margin:-18px 0 30px;
  font-size:clamp(13px, 1.1vw, 15px); font-weight:600;
  letter-spacing:.12em; text-transform:uppercase;
  color:rgba(255,255,255,.88);
  text-shadow:0 1px 14px rgba(10,9,7,.5);
}
.mia-count{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:22px;}
.mia-count div{
  min-width:86px; padding:14px 18px; text-align:center;
  border:1px solid rgba(255,255,255,.28); border-radius:14px;
  background:rgba(255,255,255,.08); backdrop-filter:blur(6px);
}
.mia-count strong{
  display:block; font-size:clamp(24px, 2.4vw, 34px); font-weight:600; line-height:1.1;
  font-variant-numeric:tabular-nums;
  /* a fő stíluslap a <strong>-ot aranyra festi – itt fehér kell */
  color:#fff;
}
.mia-count span{
  display:block; margin-top:4px;
  font-size:11px; letter-spacing:.12em; text-transform:uppercase; opacity:.8;
}
.mia-when{
  display:flex; flex-wrap:wrap; gap:8px 22px; margin:0 0 30px;
  font-size:14.5px; color:rgba(255,255,255,.88);
}
.mia-when li{display:flex; align-items:center; gap:9px;}
.mia-when svg{
  width:17px; height:17px; flex:none; fill:none; stroke:var(--brand-light);
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
}
.mia-hero-cta{display:flex; flex-wrap:wrap; gap:12px;}
/* Mobilon a kép keskeny, magas kivágásba kerül, és a szöveg ráül a skyline-ra:
   ott vízszintesen beljebb toljuk, és felülről lefelé erősebben sötétítünk. */
@media(max-width:700px){
  .mia-hero-bg{background-position:58% 50%;}
  /* az 58vw-os oszlop csak asztalon hagy helyet a skyline-nak; mobilon a
     szöveg úgyis ráül a képre, ott a teljes szélesség kell a számlálónak */
  .mia-hero-inner{max-width:none;}
  .mia-hero::after{
    background:linear-gradient(180deg,
      rgba(4,20,34,.8) 0%, rgba(4,20,34,.66) 42%, rgba(4,20,34,.42) 70%, rgba(4,20,34,.55) 100%);
  }
}
/* mobilon a négy számláló doboz egy sorban fér el */
@media(max-width:560px){
  .mia-count{display:grid; grid-template-columns:repeat(4, 1fr); gap:8px;}
  .mia-count div{min-width:0; padding:12px 6px;}
  .mia-count span{font-size:9.5px; letter-spacing:.08em;}
}
/* a legkeskenyebb telefonokon (320 px) a „Seconds” épp csak kifér – itt szűkebb betűköz */
@media(max-width:360px){
  .mia-count span{letter-spacing:.03em;}
}

/* ---------- általános szekció ---------- */
.mia-section{padding-block:clamp(64px, 7vw, 120px);}
/* Az oldal végig fehér. Ahol el kell választani vagy ki kell emelni egy
   blokkot, ott a főoldali kapcsolati panel mintájára egy lekerekített teal
   kártya csinálja – nem egy teljes szélességű sötét vagy homokszínű sáv. */
.mia-panel{
  border-radius:26px; padding:clamp(30px, 3.6vw, 60px); color:#fff;
  background:
    radial-gradient(115% 90% at 8% 4%, rgba(102,216,255,.18), transparent 56%),
    linear-gradient(120deg, #005c7c 0%, #005976 32%, #00465e 70%, #00384c 100%);
  box-shadow:0 24px 60px rgba(0,56,76,.22);
}
.mia-panel--center{text-align:center;}
.mia-panel--center .mia-head{margin-inline:auto;}
/* Kampányoldalon szűkebb a tartalom, mint a fő oldalon: a levegő a széleken
   adja a „landing page” érzetet, és egyben fókuszálja a tekintetet. */
.mia-wrap{max-width:1240px; margin-inline:auto; padding-inline:var(--pad);}
.mia-head{max-width:860px; margin-bottom:clamp(30px, 3.5vw, 54px);}
.mia-head .mia-eyebrow{color:var(--accent);}
.mia-panel .mia-head .mia-eyebrow, .mia-panel .mia-eyebrow{color:var(--brand-light);}
.mia-head h2{
  font-size:clamp(26px, 3vw, 44px); line-height:1.15; letter-spacing:-.01em;
  margin:0 0 16px; color:var(--gold);
}
.mia-panel .mia-head h2{color:#fff;}
.mia-head p{margin:0; font-size:16.5px; line-height:1.7; color:var(--muted); max-width:62ch;}
.mia-head p + p{margin-top:16px;}
.mia-head--center{margin-inline:auto; text-align:center;}
.mia-head--tight{margin-bottom:0;}
.mia-panel .mia-head p{color:rgba(255,255,255,.76);}
.mia-section-cta{margin-top:clamp(28px, 3vw, 44px);}

/* ---------- Block 1: Discover beyond Miami ---------- */
.mia-split{
  display:grid; grid-template-columns:1.05fr .95fr; align-items:center;
  gap:clamp(28px, 4vw, 70px);
}
.mia-split-media{
  border-radius:20px; overflow:hidden; aspect-ratio:4/3;
  background:var(--bg-soft) center/cover no-repeat;
}
@media(max-width:860px){ .mia-split{grid-template-columns:1fr;} }

/* ---------- Block 2: piacok ---------- */
/* Fotó nélküli színblokkok: a négy piac négy különböző mélységű márkakék
   kártya. Ezek adják az oldal „esemény” ritmusát a fehér szekciókon belül. */
.mia-markets{display:grid; grid-template-columns:repeat(5, 1fr); gap:var(--gap);}
.mia-market{
  position:relative; border-radius:18px; overflow:hidden;
  display:flex; flex-direction:column; justify-content:flex-end;
  min-height:260px; padding:clamp(22px, 2.2vw, 30px); color:#fff;
  background:
    radial-gradient(120% 110% at 8% 0%, rgba(102,216,255,.26), transparent 62%),
    linear-gradient(150deg, #009ace 0%, #0080ad 55%, #00627f 100%);
  box-shadow:0 16px 38px rgba(0,110,150,.22);
}
.mia-market:nth-child(2){
  background:
    radial-gradient(120% 110% at 8% 0%, rgba(102,216,255,.22), transparent 62%),
    linear-gradient(150deg, #0089b8 0%, #006e95 55%, #00526d 100%);
}
.mia-market:nth-child(3){
  background:
    radial-gradient(120% 110% at 8% 0%, rgba(102,216,255,.20), transparent 62%),
    linear-gradient(150deg, #00769f 0%, #005c7c 55%, #00465e 100%);
}
.mia-market:nth-child(4){
  background:
    radial-gradient(120% 110% at 8% 0%, rgba(102,216,255,.18), transparent 62%),
    linear-gradient(150deg, #006589 0%, #004d68 55%, #00384c 100%);
}
.mia-market:nth-child(5){
  background:
    radial-gradient(120% 110% at 8% 0%, rgba(102,216,255,.16), transparent 62%),
    linear-gradient(150deg, #00597a 0%, #00425a 55%, #002f40 100%);
}
.mia-market h3{font-size:24px; font-weight:600; margin:0 0 8px; color:#fff;}
.mia-market span{
  display:block; font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--brand-light); margin-bottom:10px;
}
.mia-market p{margin:0; font-size:14px; line-height:1.55; color:rgba(255,255,255,.88);}
/* Öt piac: asztalon egy sorban, közepes szélességen 3 + 2 (hatoszlopos rács:
   felül három kettes, alul két hármas szélességű kártya), mobilon egymás alatt. */
@media(max-width:1180px){
  .mia-markets{grid-template-columns:repeat(6, 1fr);}
  .mia-market{grid-column:span 2;}
  .mia-market:nth-child(n+4){grid-column:span 3;}
}
@media(max-width:560px){ .mia-markets{grid-template-columns:1fr;} .mia-market, .mia-market:nth-child(n+4){grid-column:auto; min-height:0;} }

/* ---------- Block 3: szakértők ---------- */
/* Kompakt névjegyek: a portré kicsi, kör alakú – az egész alakos, egy méteres
   fotó elvitte a szekciót, pedig itt a név és a szerep a lényeg. */
.mia-experts{display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--gap);}
.mia-expert{
  background:#fff; border:1px solid var(--line); border-radius:16px;
  display:flex; align-items:center; gap:16px; padding:16px 20px;
}
.mia-expert img{
  width:76px; height:76px; flex:none;
  border-radius:50%; object-fit:cover; object-position:center 18%; display:block;
}
.mia-expert-body{min-width:0;}
.mia-expert h3{font-size:16.5px; font-weight:600; margin:0 0 3px; color:var(--gold); line-height:1.3;}
.mia-expert .mia-role{font-size:13px; color:var(--accent); font-weight:600;}
.mia-expert .mia-focus{
  display:block; margin-top:10px; padding-top:10px;
  border-top:1px solid var(--line);
  font-size:12.5px; color:var(--ink); line-height:1.5;
}
.mia-expert .mia-langs{display:block; margin-top:4px; font-size:12px; color:var(--muted);}
@media(max-width:1100px){ .mia-experts{grid-template-columns:repeat(2, 1fr);} }
@media(max-width:620px){ .mia-experts{grid-template-columns:1fr;} }
/* Asztali gépen van hely: a hat névjegy egy sorba fér, portréval felül.
   Így a fotó nagyobb, és nem marad üres a kártyák jobb fele. */
@media(min-width:1101px){
  /* Négy oszlop: felül középen a két alapító, alattuk a másik négy szakértő.
     Hatan egy sorban túl szűkek voltak, és a rangsor sem látszott. */
  .mia-experts{grid-template-columns:repeat(4, 1fr);}
  .mia-expert:first-child{grid-column:2;}
  /* a harmadik kártya új sort kezd, különben felcsúszna az alapítók mellé */
  .mia-expert:nth-child(3){grid-column:1;}
  .mia-expert{flex-direction:column; align-items:stretch; gap:0; padding:0; overflow:hidden;}
  .mia-expert img{
    width:100%; height:auto; aspect-ratio:4/5; border-radius:0;
    object-position:center 16%;
  }
  .mia-expert-body{padding:16px 18px 20px;}
  .mia-expert h3{font-size:17px;}
}

/* ---------- Block 4: előnyök ---------- */
.mia-perks{display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--gap);}
.mia-perk{
  border:1px solid rgba(255,255,255,.14); border-radius:18px;
  padding:26px 24px; background:rgba(255,255,255,.04);
}
.mia-perk svg{
  width:26px; height:26px; margin-bottom:16px; display:block;
  fill:none; stroke:var(--brand-light); stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round;
}
.mia-perk h3{font-size:17px; font-weight:600; margin:0 0 8px; color:#fff;}
.mia-perk p{margin:0; font-size:14px; line-height:1.6; color:rgba(255,255,255,.72);}
@media(max-width:1000px){ .mia-perks{grid-template-columns:repeat(2, 1fr);} }
@media(max-width:620px){ .mia-perks{grid-template-columns:1fr;} }

/* ---------- Block 6: program ---------- */
.mia-agenda{display:grid; grid-template-columns:repeat(2, 1fr); gap:var(--gap);}
.mia-session{
  background:#fff; border:1px solid var(--line); border-radius:20px;
  padding:clamp(24px, 3vw, 38px);
}
.mia-session h3{font-size:19px; font-weight:600; margin:0 0 4px; color:var(--gold);}
.mia-session .mia-hours{
  display:block; font-size:14px; font-weight:600; color:var(--accent); margin-bottom:22px;
}
.mia-slots{list-style:none; margin:0; padding:0; display:grid; gap:1px; background:var(--line);
  border-radius:12px; overflow:hidden;}
.mia-slots li{
  display:grid; grid-template-columns:92px 1fr; gap:14px; align-items:baseline;
  background:#fff; padding:14px 16px; font-size:14.5px; line-height:1.5;
}
.mia-slots time{font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums;}
.mia-slots span{color:var(--muted);}
@media(max-width:860px){ .mia-agenda{grid-template-columns:1fr;} }
/* Egyetlen program: egy kártya, nem fél szélességű oszlop, és időpont nélküli sorok. */
.mia-agenda--single{grid-template-columns:1fr; max-width:760px;}
.mia-slots--plain li{grid-template-columns:10px 1fr; align-items:center;}
.mia-slots--plain li::before{
  content:''; width:8px; height:8px; border-radius:50%; background:var(--brand-light);
}
@media(max-width:480px){ .mia-slots li{grid-template-columns:1fr; gap:4px;} }

/* ---------- Block 7: regisztráció ---------- */
.mia-reg{display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(28px, 4vw, 64px); align-items:start;}
.mia-form{
  background:#fff; border:1px solid var(--line); border-radius:22px;
  padding:clamp(24px, 3vw, 40px); display:grid; gap:16px;
  box-shadow:0 18px 44px rgba(12,11,9,.07);
}
.mia-row{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.mia-field{display:grid; gap:6px;}
.mia-field span{font-size:13.5px; font-weight:600; color:var(--muted);}
.mia-field input, .mia-field select{
  border:1px solid var(--line); border-radius:12px; padding:13px 16px;
  /* közös sormagasság: appearance:none után a select másképp számolna,
     és egy pixellel alacsonyabb lenne a beviteli mezőknél */
  font:inherit; font-size:15.5px; line-height:1.5; color:var(--ink); background:#fff;
  transition:border-color .2s ease;
}
.mia-field input:focus, .mia-field select:focus{outline:none; border-color:var(--accent);}
/* A natív select a Safariban saját, régies kinézetet kap (belső él, apró
   fel-le nyilacskák), ezért ugyanazt a saját chevront kapja, mint az oldal
   többi legördülője. */
.mia-field select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  cursor:pointer; padding-right:46px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b6b66' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 17px center;
  background-size:12px 8px;
}
.mia-field select:hover{border-color:#cfcdc7;}
.mia-field select:focus{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23006f95' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.mia-field select option{color:var(--ink);}
.mia-choices{display:flex; flex-wrap:wrap; gap:8px;}
.mia-choices label{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid var(--line); border-radius:999px; padding:9px 16px;
  font-size:13.5px; color:var(--muted); cursor:pointer;
  transition:border-color .2s ease, color .2s ease, background .2s ease;
}
.mia-choices label:has(input:checked){border-color:var(--accent); color:var(--accent); background:#f1f9fd;}
.mia-choices input{accent-color:var(--accent);}
.mia-consent{
  display:flex; gap:11px; align-items:flex-start;
  font-size:13px; line-height:1.55; color:var(--muted);
}
.mia-consent input{margin-top:3px; flex:none; accent-color:var(--accent);}
.mia-consent a{color:var(--accent); text-decoration:underline;}
.mia-form-note{margin:0; font-size:12.5px; color:var(--muted);}
.mia-msg{margin:0; font-size:14px; border-radius:12px; padding:12px 16px;}
.mia-msg--bad{background:#fdeceb; color:#a5342a;}
.mia-msg--ok{background:#eef8ee; color:#2c6b34;}
.mia-reg-points{list-style:none; margin:24px 0 0; padding:0; display:grid; gap:14px;}
.mia-reg-points li{display:flex; gap:12px; align-items:flex-start; font-size:15px; line-height:1.6; color:var(--muted);}
.mia-reg-points svg{
  width:18px; height:18px; flex:none; margin-top:3px;
  fill:none; stroke:var(--accent); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;
}
/* az első pont – az ingyenes részvétel – kiemelve: ez a legerősebb érv */
.mia-reg-points .is-lead{
  align-items:center;
  border:1px solid rgba(0,111,149,.28); border-radius:12px;
  background:#f1f9fd; padding:14px 16px; margin-bottom:4px;
}
.mia-reg-points .is-lead svg{margin-top:0; stroke-width:2.1;}
.mia-reg-points .is-lead strong{color:var(--accent); font-weight:600; font-size:15.5px;}
@media(max-width:860px){ .mia-reg{grid-template-columns:1fr;} .mia-row{grid-template-columns:1fr;} }

/* ---------- Block 8: GYIK ---------- */
.mia-faq{max-width:880px; margin:0 auto; display:grid; gap:10px;}
/* A nyitható kérdések színes blokként ülnek az oldalon – nem fehér sorok
   vékony kerettel, hanem márkakék tónusú kártyák, élénk nyitógombbal. */
.mia-faq details{
  border:1px solid rgba(0,154,206,.26); border-radius:16px; background:#f4fbfe;
  overflow:hidden; transition:border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.mia-faq details:hover{border-color:rgba(0,154,206,.5);}
.mia-faq summary{
  list-style:none; cursor:pointer; padding:20px 22px;
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  font-size:16px; font-weight:600; color:var(--accent-dark);
}
.mia-faq summary::-webkit-details-marker{display:none;}
.mia-faq summary::after{
  content:''; flex:none; width:30px; height:30px; border-radius:50%;
  background:var(--brand-light) no-repeat center /
    12px 8px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2304202b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  transition:transform .25s ease, background-color .25s ease;
}
.mia-faq details[open] summary::after{transform:rotate(180deg);}
.mia-faq p{margin:0; padding:0 22px 22px; font-size:15px; line-height:1.7; color:var(--muted);}

/* ---------- Block 9: lábléc ---------- */
.mia-final h2{font-size:clamp(26px, 3vw, 44px); line-height:1.15; margin:0 0 16px; color:#fff;}
.mia-final p{
  margin:0 auto 30px; max-width:60ch; font-size:16.5px; line-height:1.7;
  color:rgba(255,255,255,.76);
}
.mia-final .mia-hero-cta{justify-content:center;}
/* a lábléc is fehér, csak egy hajszálvonal választja el */
.mia-foot{
  background:#fff; color:var(--muted); font-size:13.5px;
  border-top:1px solid var(--line);
  padding:26px var(--pad);
  display:flex; flex-wrap:wrap; gap:12px 26px; align-items:center; justify-content:space-between;
}
.mia-foot a{color:var(--accent);}
.mia-foot a:hover{color:var(--accent-dark);}

@media(prefers-reduced-motion:reduce){
  .mia-btn, .mia-header, .mia-faq details{transition:none;}
}

/* ---------- köszönőoldal ---------- */
.mia-hero--thanks{
  min-height:min(74vh, 660px);
  /* a pipa eddig majdnem a logó alá ért – itt több hely kell a fejléc alatt */
  padding-top:clamp(180px, 17vw, 240px);
}
/* zöld: első ránézésre látszódjon, hogy sikerült */
.mia-thanks-check{
  display:grid; place-items:center; width:64px; height:64px; margin-bottom:22px;
  border-radius:50%;
  background:rgba(52,185,116,.22);
  border:1px solid rgba(126,232,173,.7);
  box-shadow:0 0 0 8px rgba(52,185,116,.12);
}
.mia-thanks-check svg{
  width:30px; height:30px;
  fill:none; stroke:#7fe6ab; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round;
}
.mia-steps{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--gap);
  counter-reset:step;
}
.mia-steps li{
  background:#fff; border:1px solid var(--line); border-radius:18px;
  padding:clamp(22px, 2.4vw, 32px);
}
.mia-step-n{
  display:grid; place-items:center; width:34px; height:34px; margin-bottom:16px;
  border-radius:50%; background:#f1f9fd; color:var(--accent);
  font-size:14px; font-weight:600;
}
.mia-steps h3{font-size:17.5px; font-weight:600; margin:0 0 8px; color:var(--gold); line-height:1.35;}
.mia-steps p{margin:0; font-size:14.5px; line-height:1.65; color:var(--muted);}
@media(max-width:860px){ .mia-steps{grid-template-columns:1fr;} }

/* ---------- Four Seasons konzultációs oldal ---------- */
/* világos, napfényes kép – az eredeti oldal sötét enteriőrje helyett */
.fs-hero .mia-hero-bg{
  background-image:url('/images/hero-8.jpg');
  background-position:center 42%;
}
.fs-hero{min-height:min(72vh, 660px);}
.fs-hero h1{max-width:20ch;}
.fs-grid{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(28px, 4vw, 70px); align-items:start;
}
/* mobilon az űrlap jön előbb, ahogy az eredeti oldalon is */
@media(max-width:900px){
  .fs-grid{grid-template-columns:1fr;}
  .fs-form-col{order:-1;}
}
.fs-benefits{list-style:none; margin:0; padding:0; display:grid; gap:14px;}
.fs-benefits li{
  display:flex; gap:14px; align-items:flex-start;
  font-size:15.5px; line-height:1.6; color:var(--muted);
}
.fs-benefits strong{color:var(--ink); font-weight:600;}
.fs-benefits svg{
  width:20px; height:20px; flex:none; margin-top:2px;
  fill:none; stroke:var(--accent); stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
}
.fs-free{
  display:flex; align-items:center; gap:12px; margin-top:26px;
  border:1px solid rgba(0,111,149,.28); border-radius:14px;
  background:#f1f9fd; padding:16px 18px;
  font-size:16px; font-weight:600; color:var(--accent);
}
.fs-free svg{
  width:20px; height:20px; flex:none;
  fill:none; stroke:var(--accent); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round;
}

/* ---------- Esemény-hangulat: élénk színblokkok fehér alapon ---------- */
/* Tény-sáv a hero alatt: a dátum, a helyszín és a részvétel egy erős
   márkakék blokkban – ez adja az első „esemény” jelzést az oldalon. */
.ev-strip-wrap{padding-block:clamp(26px, 3vw, 44px);}
.ev-strip{
  list-style:none; margin:0; padding:clamp(20px, 2.4vw, 30px) clamp(22px, 2.6vw, 38px);
  display:grid; grid-template-columns:repeat(3, 1fr); gap:clamp(18px, 2.4vw, 40px);
  border-radius:20px; color:#fff;
  background:
    radial-gradient(120% 140% at 4% 0%, rgba(102,216,255,.32), transparent 60%),
    linear-gradient(110deg, #009ace 0%, #0080ad 45%, #005c7c 100%);
  box-shadow:0 18px 44px rgba(0,110,150,.28);
}
.ev-strip li{display:flex; align-items:flex-start; gap:14px;}
.ev-strip svg{
  width:22px; height:22px; flex:none; margin-top:2px;
  fill:none; stroke:#fff; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round;
}
.ev-strip strong{
  display:block; font-size:16px; font-weight:600; line-height:1.3; margin-bottom:3px; color:#fff;
}
.ev-strip span{font-size:13.5px; line-height:1.5; color:rgba(255,255,255,.84);}
@media(max-width:860px){
  .ev-strip{grid-template-columns:1fr; gap:16px; border-radius:18px;}
}

/* A visszaszámláló kiemelve: ciánkeret és derengés, hogy a heróban ez üssön. */
.mia-count div{
  border-color:rgba(102,216,255,.6);
  background:rgba(0,154,206,.24);
  box-shadow:0 0 0 1px rgba(102,216,255,.14), 0 10px 30px rgba(0,60,90,.28);
}
.mia-count span{color:var(--brand-light); opacity:1;}

/* Program: a két sessiont színes fejléc választja el – délelőtt cián, délután mély kék. */
.mia-session h3{
  display:inline-block; margin:0 0 12px;
  padding:9px 16px; border-radius:999px;
  color:#04202b; background:var(--brand-light);
}
.mia-session:last-child h3{background:var(--brand); color:#fff;}
.mia-session .mia-hours{font-size:15px;}

/* GYIK: a nyitott kérdés színes blokként emelkedik ki. */
.mia-faq details[open]{
  background:#e8f5fc; border-color:var(--brand);
  box-shadow:0 12px 30px rgba(0,110,150,.14);
}

/* Zászló a piackártyán: a viewBox-os SVG mindenhol ugyanúgy néz ki,
   szemben az emoji zászlókkal, amiket a Windows betűkké alakít. */
.mia-flag{
  display:block; width:30px; height:20px; margin-bottom:14px;
  border-radius:3px; overflow:hidden;
  box-shadow:0 0 0 1px rgba(255,255,255,.35), 0 2px 6px rgba(0,0,0,.25);
}
.mia-flag svg{display:block; width:100%; height:100%;}

/* ---------- Beágyazott GoHighLevel űrlap ---------- */
/* Az iframe a saját tartalmához méretezi magát (form_embed.js), de amíg
   betölt, kell egy magasság, különben összeugrik az oldal. */
.mia-embed{
  background:#fff; border:1px solid var(--line); border-radius:22px;
  padding:clamp(12px, 1.4vw, 20px);
  box-shadow:0 18px 44px rgba(12,11,9,.07);
  overflow:hidden;
}
.mia-embed iframe{
  display:block; width:100%; min-height:666px; border:0; border-radius:14px;
}