/* Önhostolt betűk. Egészségügyi oldalon a Google Fonts CDN hozzájárulás nélkül
   küldene látogatói IP-t harmadik félnek, ezért a fájlok nálunk vannak.
   Változó betűk, latin-ext készlettel (ő, ű ellenőrizve). */
@font-face{font-family:"Archivo";font-style:normal;font-weight:400 700;font-display:swap;
  src:url("../fonts/archivo-latin-ext.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+2000-206F,U+20A0-20AB,U+2113,U+2C60-2C7F}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400 700;font-display:swap;
  src:url("../fonts/instrument-sans-latin-ext.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+2000-206F,U+20A0-20AB,U+2113,U+2C60-2C7F}

/* A leendő weboldal világos vizuális világa (DESIGN.md, A · Aqua rendelő). Szándékosan egy téma. */
:root{
  color-scheme: light;
  --canvas:#F2F8F9; --edge:#D9ECEF; --s1:#FFFFFF; --s2:#D3EAEE;
  --h1:#E8F4F6; --h2:#D2E8EC; --h3:#B7DAE0; --icon-to:#BFE0E5;
  --ink:#0F2327; --mute:#4A6166; --line:#D3DFE2;
  --acc:#23737E; --acc-h:#1A5D66;
  --display:"Archivo", "Helvetica Neue", Arial, sans-serif;
  --body:"Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --ease-reveal:cubic-bezier(.16,1,.3,1); --ease-out:cubic-bezier(.23,1,.32,1);
  --gut:14px;
  --shadow-card:0 22px 40px -30px rgba(15,35,39,.45);
  --shadow-float:0 24px 44px -28px rgba(15,35,39,.5);
}
*{box-sizing:border-box}
body{margin:0; padding:0; color:var(--ink); font-family:var(--body); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:clip;
  background:linear-gradient(180deg,var(--edge) 0%,var(--canvas) 30%,var(--canvas) 72%,var(--edge) 100%), var(--canvas)}
img{max-width:100%; display:block}
/* A téma képei <picture>-ben (kepek.php): a csomagoló ne változtasson az elrendezésen. */
picture{display:contents}
picture > source{display:none}
a{color:inherit}
p{margin:0}
h1,h2,h3{margin:0; font-family:var(--display); color:var(--ink); text-wrap:balance}
ul,ol{margin:0; padding:0}
li{list-style:none}
figure{margin:0}
button,select,input{font:inherit}
:focus-visible{outline:2px solid var(--acc); outline-offset:3px; border-radius:8px}
.num{font-variant-numeric:tabular-nums lining-nums}
.ico{width:20px; height:20px; flex:none; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* ---------- közös komponensek ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:52px; padding:0 26px; border-radius:999px; border:0; cursor:pointer;
  background:var(--acc); color:#fff; text-decoration:none; white-space:nowrap; font:600 16px/1 var(--body); transition:background .15s var(--ease-out)}
.btn:hover{background:var(--acc-h)}
.btn:active{transform:translateY(1px)}
.btn-sm{min-height:44px; padding:0 20px; font-size:15px}
.btn-ghost{background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1px rgba(15,35,39,.18)}
.btn-ghost:hover{background:rgba(255,255,255,.6)}
.btn-block{width:100%}
.link{display:inline-flex; align-items:center; gap:8px; font-weight:600; text-decoration:none; white-space:nowrap; color:var(--acc)}
.link .ico{transition:transform .2s var(--ease-out)}
.link:hover .ico{transform:translateX(3px)}
.glass{background:rgba(255,255,255,.55); border:1px solid rgba(255,255,255,.85);
  -webkit-backdrop-filter:blur(14px) saturate(1.3); backdrop-filter:blur(14px) saturate(1.3)}
.card{background:rgba(255,255,255,.8); border:1px solid rgba(255,255,255,.95); box-shadow:var(--shadow-card), inset 0 1px 0 #fff}
.actions{display:flex; flex-wrap:wrap; align-items:center; gap:12px}
.display{font-weight:600; font-size:clamp(2.9rem,5.7vw,5.3rem); line-height:1.02; letter-spacing:-.03em}
.h2{font-weight:500; font-size:clamp(2rem,3.4vw,3rem); line-height:1.08; letter-spacing:-.02em}
.lead{font-size:clamp(20px,1.8vw,25px); line-height:1.3}
.muted{color:var(--mute)}
.label{font-size:13.5px; font-weight:600; letter-spacing:.01em}

.brand{text-decoration:none; white-space:nowrap; line-height:1.1; font-family:var(--display); font-weight:600; font-size:19px; letter-spacing:-.01em}
.brand small{display:block; font-family:var(--body); font-weight:500; font-size:12.5px; color:var(--mute); letter-spacing:.01em; margin-top:3px}
.links{display:flex; gap:26px; font-size:15px; font-weight:500}
.links a{text-decoration:none; white-space:nowrap}
.links a:hover, .links a.on{color:var(--acc)}
.nav-r{display:flex; align-items:center; gap:10px}
.menu-btn{display:none; align-items:center; gap:8px; min-height:44px; padding:0 16px; border-radius:999px; border:0; background:rgba(255,255,255,.75); color:var(--ink); font-weight:600; font-size:15px}
.nav-pill{position:relative; z-index:4; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:10px 10px 10px 24px; border-radius:999px; box-shadow:0 12px 30px -20px rgba(15,35,39,.45)}
@media (max-width:1340px){ .links{display:none} .menu-btn{display:inline-flex} }
@media (max-width:560px){ .nav-r .btn-sm{display:none} }

/* fotó színkezelés: minden fotón ugyanaz */
.tone{position:relative; overflow:hidden}
.tone img{width:100%; height:100%; object-fit:cover; filter:saturate(.8) contrast(.97)}
.tone::after{content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,rgba(150,205,214,.22),rgba(120,190,200,.34)); mix-blend-mode:multiply}

/* foglaló mezők */
.sel{appearance:none; -webkit-appearance:none; width:100%; min-height:48px; border:0; border-radius:14px; padding:0 40px 0 14px; cursor:pointer;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%230F2327' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 12px center;
  font-weight:500; font-size:15.5px; color:var(--ink); text-overflow:ellipsis; box-shadow:inset 0 0 0 1px rgba(15,35,39,.08)}
.field{display:flex; flex-direction:column; gap:7px; min-width:0}
.readout{min-height:48px; border-radius:14px; background:#fff; padding:6px 14px; display:flex; flex-direction:column; justify-content:center; line-height:1.2; box-shadow:inset 0 0 0 1px rgba(15,35,39,.08)}
.readout b{font-family:var(--display); font-weight:600; font-size:20px}
.readout small{font-size:12px; color:var(--mute)}
.flip{animation:flip .38s ease-out}
@keyframes flip{from{opacity:0; transform:translateY(30%)} to{opacity:1; transform:none}}
.chip{display:inline-flex; align-items:center; gap:8px; padding:7px 12px; border-radius:999px; background:var(--h1); color:var(--ink); font-size:14px; font-weight:600; white-space:nowrap}
.chip .ico{width:16px; height:16px; color:var(--acc)}
.ic{width:52px; height:52px; border-radius:16px; display:grid; place-items:center; color:var(--acc); flex:none;
  background:linear-gradient(145deg,var(--h1),var(--icon-to)); box-shadow:inset 0 1px 0 #fff, 0 10px 20px -14px rgba(35,115,126,.6)}
.ic .ico{width:26px; height:26px; stroke-width:1.6}

/* belépő mozgás */
@keyframes load-in{from{opacity:0; transform:translateY(18px)} to{opacity:1; transform:none}}
.in{animation:load-in .9s var(--ease-reveal) both; animation-delay:calc(var(--d,0) * 1ms)}
[data-reveal]{opacity:.999}
@supports (animation-timeline: view()){
  .native-reveal [data-reveal]{animation:rise linear both; animation-timeline:view(); animation-range:entry 0% entry 55%}
}
@keyframes rise{from{opacity:0; transform:translateY(26px)} to{opacity:1; transform:none}}
.io [data-reveal]{opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease-reveal), transform .8s var(--ease-reveal); transition-delay:calc(var(--i,0) * 80ms)}
.io [data-reveal].is-in{opacity:1; transform:none}

/* mobil hívássáv */
.callbar{display:none; position:fixed; z-index:40; left:12px; right:12px; bottom:calc(12px + env(safe-area-inset-bottom, 0px));
  padding:8px; border-radius:999px; gap:8px; box-shadow:var(--shadow-float)}
.callbar .btn{flex:1; min-height:48px; padding:0 14px}
@media (max-width:900px){ .callbar{display:flex} }

/* ---------- tervező keret: terv, fejléc, kapcsoló ---------- */
.plan{margin:16px var(--gut) 0; padding:22px 24px; border-radius:22px; background:rgba(255,255,255,.72); border:1px solid rgba(255,255,255,.95)}
.plan h2{font-weight:600; font-size:20px}
.plan p{font-size:14.5px; color:var(--mute); margin-top:6px; max-width:90ch}
.arc{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; margin-top:16px}
.arc li{border-radius:16px; padding:12px 14px; background:var(--canvas); font-size:13.5px; line-height:1.4; color:var(--mute)}
.arc li b{display:block; color:var(--ink); font-size:14.5px; margin-bottom:4px}
.arc li.now{background:var(--acc); color:#E3F2F4}
.arc li.now b{color:#fff}
.photos{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px; margin-top:12px}
.photos li{display:flex; flex-direction:column; gap:6px; font-size:12.5px; line-height:1.35; color:var(--mute)}
.photos li b{color:var(--ink); font-size:13px}
.photos img{width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:12px}
.photos .miss{display:grid; place-items:center; aspect-ratio:4/3; border-radius:12px; background:var(--canvas); box-shadow:inset 0 0 0 1px var(--line); color:var(--mute); font-size:12px; text-align:center; padding:6px}
.plan h3{font-family:var(--body); font-weight:600; font-size:15px; margin-top:18px}
@media (max-width:900px){ .photos{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:900px){ .arc{grid-template-columns:1fr} }
.vhead{margin:12px var(--gut) 0; padding:16px 22px; border-radius:18px; background:rgba(255,255,255,.72); border:1px solid rgba(255,255,255,.95);
  display:grid; grid-template-columns:minmax(0,260px) minmax(0,1fr) minmax(0,.9fr); gap:8px 28px; font-size:14.5px; line-height:1.5}
.vhead .name{font-family:var(--display); font-weight:600; font-size:20px; line-height:1.15}
.vhead .ids{display:block; font-size:12.5px; color:var(--mute); margin-top:4px}
.vhead .fit{color:var(--mute)}
@media (max-width:900px){ .vhead{grid-template-columns:1fr} }
.switch{position:fixed; z-index:50; left:50%; transform:translateX(-50%); bottom:calc(16px + env(safe-area-inset-bottom, 0px));
  display:flex; gap:4px; padding:5px; border-radius:999px; background:rgba(15,35,39,.9);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); max-width:calc(100vw - 32px); overflow-x:auto; scrollbar-width:none; box-shadow:0 12px 30px -12px rgba(0,0,0,.45)}
.switch::-webkit-scrollbar{display:none}
.switch button{border:0; background:transparent; color:#CFE3E6; cursor:pointer; white-space:nowrap; font-weight:600; font-size:14px; padding:11px 16px; border-radius:999px}
.switch button[aria-selected="true"]{background:#fff; color:var(--ink)}
@media (max-width:900px){ .switch{bottom:calc(84px + env(safe-area-inset-bottom, 0px))} }
.v{display:none}
.v.is-active{display:block}
.drbado-page{display:flex; flex-direction:column; gap:var(--gut); padding:var(--gut) var(--gut) 180px}

/* ---------- 2. csoport, 2. kör: több levegő, kép, háttérforma ---------- */
:root{ --deep:#1F5961; --deep-2:#174A51; --on-deep:#FFFFFF; --on-deep-mute:#C3DFE3; --outline:#CFE2E6 }
.ctx{margin:0 4px; padding:10px 16px; border-radius:14px; font-size:13.5px; color:var(--mute); background:rgba(255,255,255,.5); border:1px dashed rgba(15,35,39,.18)}
.zone{position:relative; isolation:isolate; overflow:hidden; overflow:clip; border-radius:34px; padding:clamp(72px,9vw,136px) clamp(12px,4vw,64px)}
.blob{position:absolute; z-index:-1; pointer-events:none}
.blob{fill:url(#blobfill); height:auto}
.eyebrow{font-size:13px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--acc)}
.h2x{font-weight:600; font-size:clamp(2.2rem,3.8vw,3.4rem); line-height:1.06; letter-spacing:-.025em; margin-top:14px}
.leadx{font-size:clamp(18px,1.4vw,20px); color:var(--mute); margin-top:22px; max-width:40ch; line-height:1.6}
.photo{border-radius:30px; position:relative; overflow:hidden; box-shadow:0 30px 60px -40px rgba(15,35,39,.55)}
.photo img{position:absolute; inset:0}
.photo .tag{position:absolute; left:16px; bottom:16px; right:16px; max-width:280px; padding:12px 16px; border-radius:18px; font-size:15px; font-weight:600; line-height:1.35}
.photo .tag small{display:block; font-weight:400; color:var(--mute); font-size:13px; margin-top:2px}
.ocard{background:rgba(255,255,255,.72); border:1px solid var(--outline); border-radius:26px; transition:border-color .2s var(--ease-out), box-shadow .2s var(--ease-out)}
.ocard:hover{border-color:#9FC9D0; box-shadow:0 20px 40px -32px rgba(15,35,39,.5)}
.oic{width:60px; height:60px; border-radius:50%; display:grid; place-items:center; color:var(--acc); background:#fff; box-shadow:inset 0 0 0 1px var(--outline); flex:none}
.oic .ico{width:28px; height:28px; stroke-width:1.5}
.band{border-radius:34px; background:linear-gradient(135deg,var(--deep) 0%,var(--deep-2) 100%); color:var(--on-deep); position:relative; overflow:hidden; isolation:isolate;
  padding:clamp(48px,6vw,88px) clamp(24px,5vw,80px)}
.band h2{color:#fff}
.band .eyebrow{color:#9FD6DE}
.band .blob{fill:rgba(255,255,255,.07)}
.chipx{display:inline-flex; align-items:center; gap:8px; padding:9px 14px; border-radius:999px; background:#fff; box-shadow:inset 0 0 0 1px var(--outline); font-size:14.5px; font-weight:600; white-space:nowrap}

/* =====================================================================
   2A · KÉP ÉS KÖRVONALAS KÁRTYÁK
   ===================================================================== */
.a3-top{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:48px clamp(40px,6vw,104px); align-items:center}
.a3-top .photo{height:clamp(360px,34vw,470px)}
.a3-top .photo img{object-position:50% 30%}
.a3-cards{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; margin-top:clamp(64px,7vw,104px)}
.a3-card{padding:clamp(28px,3vw,36px); display:grid; grid-template-columns:minmax(0,1fr); gap:14px; align-content:start}
.a3-card .oic{grid-row:span 3}
.a3-card h3{font-weight:600; font-size:clamp(24px,2vw,30px); line-height:1.15; letter-spacing:-.015em}
.a3-card p{color:var(--mute); max-width:36ch; margin-top:4px}
.a3-card .link{margin-top:14px}
.a3-band ol{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(24px,4vw,64px); margin-top:clamp(40px,5vw,64px)}
.a3-band li{border-top:1px solid rgba(255,255,255,.22); padding-top:24px}
.a3-band .n{font-family:var(--display); font-weight:500; font-size:clamp(48px,5vw,72px); line-height:1; color:#9FD6DE; letter-spacing:-.03em}
.a3-band h3{color:#fff; font-weight:600; font-size:22px; margin-top:18px}
.a3-band p{color:var(--on-deep-mute); margin-top:8px; max-width:30ch}
@media (max-width:900px){
  .a3-top{grid-template-columns:1fr}
  .a3-cards{grid-template-columns:1fr}
  .a3-band ol{grid-template-columns:1fr}
}

/* =====================================================================
   2B · NAGY KÉP, KIMONDOTT MONDAT
   ===================================================================== */
.b3-top{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:48px clamp(40px,6vw,104px); align-items:center}
.b3-top .photo{height:clamp(380px,38vw,540px)}
.b3-top .photo img{object-position:50% 60%}
.b3-quote{font-family:var(--display); font-weight:500; font-size:clamp(2rem,3.4vw,3.2rem); line-height:1.12; letter-spacing:-.025em; margin:18px 0 0; max-width:16ch}
.b3-sig{display:flex; align-items:center; gap:14px; margin-top:32px}
.b3-sig .line{width:48px; height:2px; background:var(--acc)}
.b3-sig b{font-weight:600}
.b3-sig span{color:var(--mute)}
.b3-pair{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px; margin-top:clamp(72px,8vw,120px)}
.b3-card{padding:clamp(32px,3.6vw,52px); display:flex; flex-direction:column; gap:20px}
.b3-card .oic{width:68px; height:68px}
.b3-card h3{font-weight:600; font-size:clamp(26px,2.4vw,34px); line-height:1.1; letter-spacing:-.02em}
.b3-card p{color:var(--mute); max-width:34ch}
.b3-card .chips{margin-top:4px}
.b3-card .link{margin-top:auto; padding-top:10px}
.b3-band{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:40px clamp(40px,6vw,96px); align-items:end}
.b3-band p.sub{color:var(--on-deep-mute); margin-top:18px; max-width:36ch}
.steps3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; align-items:end}
.steps3 li{border-radius:22px 22px 8px 8px; padding:20px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); display:flex; flex-direction:column; justify-content:flex-end; gap:6px}
.steps3 li:nth-child(1){height:150px}
.steps3 li:nth-child(2){height:210px}
.steps3 li:nth-child(3){height:270px; background:rgba(255,255,255,.16)}
.steps3 .n{font-family:var(--display); font-size:14px; font-weight:600; color:#9FD6DE}
.steps3 b{font-weight:600; font-size:17px; line-height:1.25}
@media (max-width:900px){
  .b3-top, .b3-pair, .b3-band{grid-template-columns:1fr}
  .steps3 li:nth-child(n){height:auto; min-height:120px}
}

/* =====================================================================
   2D · KÉRDÉSEK KÉPPEL
   ===================================================================== */
.d3-top{display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:48px clamp(40px,6vw,96px); align-items:center}
.d3-top .photo{min-height:clamp(380px,34vw,480px)}
.d3-top .photo img{object-position:50% 25%}
.d3-band{display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:48px clamp(40px,6vw,96px); align-items:start}
.line3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:40px; position:relative}
.line3::before{content:""; position:absolute; left:12px; right:12px; top:11px; height:2px; background:rgba(255,255,255,.25)}
.line3 li{position:relative; padding-top:40px; padding-right:20px}
.line3 li::before{content:""; position:absolute; left:0; top:0; width:24px; height:24px; border-radius:50%; background:var(--deep); box-shadow:inset 0 0 0 6px #9FD6DE}
.line3 b{display:block; font-weight:600; font-size:18px; line-height:1.3}
.line3 span{display:block; color:var(--on-deep-mute); font-size:15px; margin-top:6px}
.d3-opts h3{color:#fff; font-weight:600; font-size:20px}
.d3-opts .chips{margin-top:18px}
.d3-opts .chipx{background:rgba(255,255,255,.1); color:#fff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.d3-opts .btn{margin-top:28px; background:#fff; color:var(--deep)}
.d3-opts .btn:hover{background:#E3F2F4}
@media (max-width:900px){
  .d3-top, .d3-band{grid-template-columns:1fr}
  .d3-top .photo{min-height:380px}
  .line3{grid-template-columns:1fr; gap:22px}
  .line3::before{left:11px; right:auto; top:12px; bottom:12px; width:2px; height:auto}
  .line3 li{padding:0 0 0 44px}
}

/* =====================================================================
   3. CSOPORT: BIZALOM
   ===================================================================== */
.ph-portrait{border-radius:30px; position:relative; overflow:hidden; display:grid; place-items:center; text-align:center;
  background:radial-gradient(120% 90% at 30% 20%, #F4FAFB 0%, var(--h2) 55%, var(--h3) 100%); box-shadow:inset 0 0 0 1px rgba(255,255,255,.9), 0 30px 60px -40px rgba(15,35,39,.55)}
.ph-portrait .in-ph{display:flex; flex-direction:column; align-items:center; gap:10px; color:var(--acc); padding:24px}
.ph-portrait .in-ph .ico{width:72px; height:72px; stroke-width:1.1}
.ph-portrait .in-ph b{color:var(--ink); font-size:16px}
.ph-portrait .in-ph span{font-size:13.5px; color:var(--mute); max-width:24ch}
.facts{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-top:34px; list-style:none; padding:0}
.fact{padding:20px 20px 18px; display:flex; flex-direction:column; gap:6px}
.fact b{font-family:var(--display); font-weight:600; font-size:clamp(26px,2.4vw,34px); line-height:1; color:var(--acc); letter-spacing:-.02em}
.fact span{font-size:14.5px; color:var(--mute); line-height:1.4}
.surg-list li{display:grid; grid-template-columns:44px minmax(0,1fr); gap:4px 16px; padding:18px 0; border-top:1px solid var(--line)}
.surg-list li:first-child{border-top:0}
.surg-list .oic{width:44px; height:44px; grid-row:span 2}
.surg-list .oic .ico{width:22px; height:22px}
.surg-list b{font-weight:600; font-size:18px; line-height:1.3}
.surg-list span{color:var(--mute); font-size:15.5px}
.svc-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-top:40px}
.svc{padding:28px; display:flex; flex-direction:column; gap:14px}
.svc h3{font-weight:600; font-size:21px; line-height:1.2}
.svc p{color:var(--mute); font-size:15.5px; line-height:1.5}

/* 3A */
.a4-top{display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:48px clamp(40px,6vw,104px); align-items:start}
.a4-text{margin-top:22px; display:flex; flex-direction:column; gap:14px}
.a4-text p{color:var(--mute); font-size:16.5px; line-height:1.62; max-width:66ch}
.a4-top .ph-portrait{min-height:clamp(440px,40vw,560px)}
.a4-surg{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:48px clamp(40px,6vw,104px); align-items:center; margin-top:clamp(88px,9vw,140px)}
.a4-surg .photo{height:clamp(360px,34vw,460px)}
.a4-surg .photo img{object-position:50% 40%}
.a4-svc{margin-top:clamp(88px,9vw,140px)}
@media (max-width:900px){
  .a4-top, .a4-surg{grid-template-columns:1fr}
  .a4-surg .photo{order:-1}
  .facts{grid-template-columns:1fr}
  .svc-grid{grid-template-columns:1fr}
}
@media (min-width:901px) and (max-width:1100px){ .svc-grid{grid-template-columns:1fr 1fr} }

/* 3B */
.b4-panel{border-radius:34px; padding:clamp(32px,4.4vw,64px); display:grid; grid-template-columns:minmax(0,.7fr) minmax(0,1.1fr) minmax(0,1fr); gap:32px clamp(32px,4vw,64px); align-items:start}
.b4-panel .ph-portrait{min-height:360px}
.b4-quote{font-family:var(--display); font-weight:500; font-size:clamp(22px,2vw,28px); line-height:1.3; letter-spacing:-.01em; margin:22px 0 0}
.tl{position:relative; padding-left:6px}
.tl::before{content:""; position:absolute; left:11px; top:8px; bottom:8px; width:2px; background:linear-gradient(180deg,var(--acc),rgba(35,115,126,.15))}
.tl li{position:relative; padding:0 0 22px 38px}
.tl li:last-child{padding-bottom:0}
.tl li::before{content:""; position:absolute; left:0; top:3px; width:12px; height:12px; border-radius:50%; background:#fff; box-shadow:0 0 0 2px var(--acc); margin-left:0}
.tl b{display:block; font-family:var(--display); font-weight:600; font-size:15px; color:var(--acc)}
.tl span{display:block; font-size:15.5px; line-height:1.45; margin-top:2px}
.b4-band{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:40px clamp(40px,6vw,96px); align-items:center}
.b4-band .photo{height:clamp(320px,30vw,420px); box-shadow:none}
.b4-band .surg-list li{border-color:rgba(255,255,255,.16)}
.b4-band .surg-list .oic{background:rgba(255,255,255,.1); color:#fff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
.b4-band .surg-list span{color:var(--on-deep-mute)}
.b4-svc{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:40px clamp(40px,6vw,96px)}
.cols{display:grid; grid-template-columns:1fr 1fr; gap:10px 40px}
.cols div{padding:18px 0; border-top:1px solid var(--line)}
.cols h3{display:flex; align-items:center; gap:10px; font-weight:600; font-size:18px}
.cols h3 .ico{color:var(--acc)}
.cols p{color:var(--mute); font-size:15.5px; margin-top:6px}
@media (max-width:1000px){
  .b4-panel{grid-template-columns:1fr 1fr}
  .b4-panel .tl-wrap{grid-column:1 / -1}
}
@media (max-width:900px){
  .b4-panel, .b4-band, .b4-svc{grid-template-columns:1fr}
  .cols{grid-template-columns:1fr}
}

/* 3C bento */
.c4{display:grid; gap:var(--gut); grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);
  grid-template-areas:"por intro intro intro" "por f1 f2 f3" "surg surg svc svc"}
.c4 > *{border-radius:30px}
.c4 .por{grid-area:por; min-height:520px}
.c4 .intro{grid-area:intro; padding:clamp(32px,4vw,56px); position:relative; overflow:hidden; isolation:isolate;
  background:linear-gradient(135deg,var(--h1) 0%,var(--h2) 60%,var(--h3) 100%)}
.c4 .intro .blob{fill:rgba(255,255,255,.45)}
.c4 .f1{grid-area:f1} .c4 .f2{grid-area:f2} .c4 .f3{grid-area:f3}
.c4 .fact{padding:26px; justify-content:flex-end}
.c4 .surg{grid-area:surg; min-height:420px; position:relative; overflow:hidden}
.c4 .surg img{position:absolute; inset:0}
.c4 .surg .over{position:absolute; left:16px; right:16px; bottom:16px; border-radius:22px; padding:22px 24px}
.c4 .surg .over h3{font-weight:600; font-size:24px; line-height:1.15}
.c4 .surg .over p{color:var(--mute); font-size:15px; margin-top:6px}
.c4 .svc-t{grid-area:svc; padding:clamp(28px,3vw,40px); display:flex; flex-direction:column; gap:18px}
.c4 .svc-t h3{font-weight:600; font-size:24px}
.c4 .svc-t .rows{display:grid; grid-template-columns:1fr 1fr; gap:4px 24px}
.c4 .svc-t .rows p{display:flex; align-items:center; gap:10px; padding:10px 0; border-top:1px solid var(--line); font-size:15.5px; font-weight:500}
.c4 .svc-t .rows .ico{color:var(--acc); width:18px; height:18px}
.c4 .svc-t .link{margin-top:auto}
@media (max-width:1000px){
  .c4{grid-template-columns:1fr 1fr; grid-template-areas:"por intro" "por intro" "f1 f2" "f3 f3" "surg surg" "svc svc"}
}
@media (max-width:640px){
  .c4{grid-template-columns:1fr; grid-template-areas:"intro" "por" "f1" "f2" "f3" "surg" "svc"}
  .c4 .por{min-height:420px}
  .c4 .svc-t .rows{grid-template-columns:1fr}
}

/* =====================================================================
   3. CSOPORT, ÖSSZERAKVA + ILLUSZTRÁLT IKONOK
   ===================================================================== */
.ill{position:relative; aspect-ratio:1; border-radius:24px; background:#fff; border:1px solid var(--outline); display:grid; place-items:center;
  transition:border-color .2s var(--ease-out), box-shadow .2s var(--ease-out)}
.ill .disc{position:relative; width:74%; aspect-ratio:1; border-radius:50%; display:grid; place-items:center;
  background:radial-gradient(circle at 38% 32%, #F4FAFB 0%, #DDEEF1 70%, #CFE6EA 100%); transition:transform .3s var(--ease-out)}
.ill .disc::after{content:""; position:absolute; inset:-8%; border-radius:50%; border:1.5px dashed #B3D5DB}
.ill svg{width:66%; height:66%; overflow:visible}
.ill .back{color:#BCDDE3}
.ill .front{color:#3B7E88}
a.svc-i:hover .ill, .svc-i:focus-within .ill{border-color:#9FC9D0; box-shadow:0 20px 40px -30px rgba(15,35,39,.45)}
a.svc-i:hover .disc{transform:scale(1.04)}

.s1-head{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.8fr); gap:20px 64px; align-items:end}
.s1-row{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:20px; margin-top:48px}
.svc-i{display:flex; flex-direction:column; gap:14px; text-decoration:none; color:inherit}
.svc-i h3{font-weight:600; font-size:17px; line-height:1.25}
.svc-i p{color:var(--mute); font-size:14.5px; line-height:1.45; margin-top:-8px}
@media (max-width:1100px){ .s1-row{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:560px){ .s1-row{grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px} }

.s2-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-top:44px}
.s2-card{display:grid; grid-template-columns:104px minmax(0,1fr); gap:20px; align-items:center; padding:18px 22px 18px 18px; text-decoration:none; color:inherit}
.s2-card .ill{border:0; background:transparent; border-radius:20px}
.s2-card .ill .disc{width:100%}
.s2-card h3{font-weight:600; font-size:19px; line-height:1.2}
.s2-card p{color:var(--mute); font-size:15px; margin-top:6px; line-height:1.45}
.s2-card .link{margin-top:10px; font-size:14.5px}
@media (max-width:1100px){ .s2-grid{grid-template-columns:1fr 1fr} }
@media (max-width:640px){ .s2-grid{grid-template-columns:1fr} }

/* ikonok a sötét sebészeti sávban */
.oic.hi{background:rgba(255,255,255,.1); box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
.oic.hi svg{width:28px; height:28px; color:#fff}
.gap-top{margin-top:clamp(88px,9vw,136px)}

/* =====================================================================
   4. CSOPORT: HOGYAN ZAJLIK
   ===================================================================== */
.mini{position:relative; width:64px; height:64px; flex:none; display:grid; place-items:center}
.mini .disc{width:100%; height:100%; border-radius:50%; display:grid; place-items:center; position:relative;
  background:radial-gradient(circle at 38% 32%, #F4FAFB 0%, #DDEEF1 70%, #CFE6EA 100%)}
.mini .disc::after{content:""; position:absolute; inset:-6px; border-radius:50%; border:1.5px dashed #B3D5DB}
.mini svg{width:62%; height:62%; overflow:visible}
.mini .back, .ill .back{color:#BCDDE3}
.mini .front, .ill .front{color:#3B7E88}
.note{display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:600; color:var(--acc)}

/* árlista közös */
.menu4 li{display:flex; align-items:baseline; gap:14px; padding:15px 0; border-top:1px solid var(--line)}
.menu4 li:first-child{border-top:0}
.menu4 .nm{min-width:0; font-weight:500}
.menu4 .nm small{display:block; color:var(--mute); font-size:13.5px; font-weight:400}
.menu4 .ld{flex:1; min-width:24px; border-bottom:1px dotted #A9C7CC; transform:translateY(-5px)}
.menu4 .pr{font-family:var(--display); font-weight:600; font-size:21px; white-space:nowrap; font-variant-numeric:tabular-nums}
.more{margin-top:6px; border-top:1px solid var(--line)}
.more summary{list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 0; font-weight:600; color:var(--acc)}
.more summary::-webkit-details-marker{display:none}
.more summary .pm{width:34px; height:34px; border-radius:50%; display:grid; place-items:center; box-shadow:inset 0 0 0 1px var(--outline); transition:transform .2s var(--ease-out)}
.more[open] summary .pm .ico{transform:rotate(45deg); transition:transform .2s var(--ease-out)}
.pay{display:flex; flex-wrap:wrap; gap:10px; margin-top:22px}
.pay > span{display:inline-flex; align-items:center; gap:10px; padding:8px 14px 8px 8px; border-radius:999px; background:#fff; box-shadow:inset 0 0 0 1px var(--outline); font-size:14.5px; font-weight:600}
.pay .mini{width:34px; height:34px}
.pay .mini .disc::after{display:none}

/* 4A */
.a5-top{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:48px clamp(40px,6vw,104px); align-items:center}
.a5-top .photo{min-height:clamp(480px,44vw,600px)}
.a5-top .photo img{object-position:30% 45%}
.steps5{margin-top:34px; display:flex; flex-direction:column; gap:10px}
.steps5 li{display:grid; grid-template-columns:64px minmax(0,1fr); gap:4px 20px; align-items:center; padding:14px 18px 14px 14px; border-radius:22px}
.steps5 li b{font-weight:600; font-size:18px; line-height:1.25; display:block}
.steps5 li b i{font-style:normal; color:var(--acc); margin-right:8px; font-family:var(--display)}
.steps5 li span{color:var(--mute); font-size:15px}
.a5-bring{margin-top:clamp(80px,8vw,120px); border-radius:34px; padding:clamp(32px,4vw,56px); background:rgba(211,234,238,.6); border:1px solid rgba(255,255,255,.85)}
.bring4{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-top:32px}
.bring4 li{padding:24px; display:flex; flex-direction:column; gap:16px; background:#fff; border-radius:24px; border:1px solid var(--outline)}
.bring4 b{font-weight:600; font-size:17px; line-height:1.3}
.bring4 span{color:var(--mute); font-size:14.5px; margin-top:-8px}
.a5-price{margin-top:clamp(80px,8vw,120px); display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:40px clamp(40px,6vw,96px); align-items:start}
.a5-price .list{padding:clamp(20px,3vw,36px) clamp(24px,3vw,40px)}
@media (max-width:900px){
  .a5-top, .a5-price{grid-template-columns:1fr}
  .bring4{grid-template-columns:1fr 1fr}
}
@media (max-width:520px){ .bring4{grid-template-columns:1fr} }

/* 4B */
.b5-band{position:relative; margin-top:40px; border-radius:30px; height:clamp(300px,32vw,440px); overflow:hidden}
.b5-band img{position:absolute; inset:0; object-position:50% 55%}
.b5-band .chips{position:absolute; left:18px; bottom:18px; right:18px}
.b5-band .chipx{background:rgba(255,255,255,.72); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); box-shadow:inset 0 0 0 1px rgba(255,255,255,.9)}
.hsteps{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-top:-56px; position:relative; z-index:2; padding:0 clamp(12px,2vw,28px)}
.hsteps li{padding:22px; border-radius:24px; display:flex; flex-direction:column; gap:14px; background:rgba(255,255,255,.92); border:1px solid var(--outline); box-shadow:0 24px 44px -32px rgba(15,35,39,.5)}
.hsteps .top{display:flex; align-items:center; justify-content:space-between}
.hsteps .n{font-family:var(--display); font-weight:600; font-size:28px; color:#A9CDD3}
.hsteps b{font-weight:600; font-size:18px; line-height:1.25}
.hsteps span{color:var(--mute); font-size:14.5px; margin-top:-6px}
.b5-two{display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:16px; margin-top:clamp(64px,7vw,104px)}
.b5-two > div{border-radius:30px; padding:clamp(28px,3.4vw,44px)}
.rows5 li{display:grid; grid-template-columns:48px minmax(0,1fr); gap:16px; align-items:center; padding:12px 0; border-top:1px solid var(--line)}
.rows5 li:first-child{border-top:0}
.rows5 .mini{width:48px; height:48px}
.rows5 .mini .disc::after{inset:-4px}
.rows5 span{font-size:16px; line-height:1.4}
.hl3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-top:36px}
.hl{border-radius:26px; padding:28px; display:flex; flex-direction:column; gap:10px}
.hl .pr{color:var(--ink); font-family:var(--display); font-weight:600; font-size:clamp(36px,3.4vw,46px); line-height:1; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.hl b{font-weight:600; font-size:17px; line-height:1.3}
.hl span{color:var(--mute); font-size:14.5px}
.hl.feat{background:linear-gradient(150deg,#fff 0%,var(--h1) 60%,var(--h2) 100%)}
.tabs4{margin-top:28px; border-radius:30px; padding:clamp(20px,3vw,32px)}
.tabs4 .tabs{margin-bottom:10px}
.tabs4 [role="tabpanel"][hidden]{display:none}
@media (max-width:900px){
  .hsteps{grid-template-columns:1fr 1fr; margin-top:-40px}
  .b5-two, .hl3{grid-template-columns:1fr}
}
@media (max-width:520px){ .hsteps{grid-template-columns:1fr; margin-top:16px} }

/* 4C */
.c5-top{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:48px clamp(40px,6vw,96px); align-items:start}
.mosaic{position:relative; min-height:clamp(480px,46vw,620px)}
.mosaic .m1{position:absolute; left:0; top:0; width:78%; height:74%}
.mosaic .m1 img{object-position:30% 45%}
.mosaic .m2{position:absolute; right:0; bottom:0; width:52%; height:48%; border:8px solid #fff}
.mosaic .m2 img{object-position:50% 50%}
.mosaic .badge5{position:absolute; left:6%; bottom:6%; padding:14px 18px; border-radius:20px; max-width:220px; font-size:14px; line-height:1.35; color:var(--mute)}
.mosaic .badge5 b{display:block; font-family:var(--display); font-size:26px; color:var(--ink); line-height:1.1}
.cards5{display:flex; flex-direction:column; gap:12px; margin-top:30px}
.cards5 li{display:grid; grid-template-columns:auto minmax(0,1fr) 64px; gap:6px 18px; align-items:center; padding:18px 18px 18px 24px; border-radius:22px}
.cards5 .n{font-family:var(--display); font-weight:600; font-size:34px; color:#A9CDD3; line-height:1; letter-spacing:-.02em}
.cards5 b{font-weight:600; font-size:18px; display:block}
.cards5 span{color:var(--mute); font-size:15px}
.c5-mid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-top:clamp(72px,8vw,112px)}
.c5-mid > div{border-radius:28px; padding:28px; display:flex; flex-direction:column; gap:14px}
.c5-mid h3{font-weight:600; font-size:21px}
.qa b{display:block; font-weight:600; font-size:15.5px}
.qa span{display:block; color:var(--mute); font-size:14.5px; margin-top:2px}
.qa div{padding:10px 0; border-top:1px solid var(--line)}
.qa div:first-child{border-top:0; padding-top:0}
.ptable{margin-top:clamp(72px,8vw,112px); border-radius:34px; padding:clamp(28px,4vw,56px)}
.ptable .cols4{display:grid; grid-template-columns:1fr 1fr; gap:10px clamp(32px,5vw,72px); margin-top:30px}
.ptable h3{display:flex; align-items:center; gap:10px; font-weight:600; font-size:15px; letter-spacing:.06em; text-transform:uppercase; color:var(--acc); margin:22px 0 4px}
.ptable .cols4 > div > h3:first-child{margin-top:0}
.ptable .foot{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:16px; margin-top:26px; padding-top:22px; border-top:1px solid var(--line)}
@media (max-width:900px){
  .c5-top, .c5-mid, .ptable .cols4{grid-template-columns:1fr}
  .cards5 li{grid-template-columns:auto minmax(0,1fr)}
  .cards5 .mini{display:none}
}

.tabs{display:inline-flex; gap:4px; padding:5px; border-radius:999px; background:var(--canvas); box-shadow:inset 0 0 0 1px rgba(15,35,39,.06); max-width:100%; overflow-x:auto; scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{border:0; background:transparent; cursor:pointer; border-radius:999px; padding:11px 18px; font-weight:600; font-size:15px; color:var(--mute); white-space:nowrap}
.tabs button[aria-selected="true"]{background:var(--acc); color:#fff}
.b5-band .chips{top:18px; bottom:auto; display:flex; flex-wrap:wrap; gap:8px}
.pay .mini svg{width:70%; height:70%}
.ptable, .a5-price .list{background:#fff}
@media (max-width:520px){ .b5-band img{object-position:22% 55%} .b5-band .chips{gap:6px; left:12px; top:12px} .b5-band .chipx{font-size:12.5px; padding:6px 10px} }

/* =====================================================================
   4B KIEGÉSZÍTÉS: KIEMELT FOGLALÁS + 5. CSOPORT: LEZÁRÁS
   ===================================================================== */
.sec-head{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.8fr); gap:14px 64px; align-items:end}
.sec-head .muted{max-width:56ch}
.btn-lg{min-height:60px; padding:0 30px; font-size:17px; box-shadow:0 18px 32px -20px rgba(35,115,126,.95)}
.btn-lg .ico{width:22px; height:22px}
.head-cta{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:24px 48px; align-items:end}
.head-cta .muted{margin-top:12px; max-width:52ch}
.cta-box{display:flex; flex-direction:column; align-items:flex-end; gap:12px}
.cta-box .link{font-size:15px}
.hl .btn{margin-top:auto; align-self:flex-start}
.hl b + span{margin-bottom:10px}
.hl .btn-ghost{background:#fff}
.foot4{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px 24px; margin-top:18px; padding:22px 24px; border-radius:22px;
  background:linear-gradient(120deg,var(--h1) 0%,var(--h2) 100%)}
@media (max-width:900px){
  .sec-head, .head-cta{grid-template-columns:1fr}
  .cta-box{align-items:stretch}
  .cta-box .btn, .foot4 .btn{width:100%}
}

/* közös: foglaló, visszahívás, GYIK, helyszín, lábléc */
.bk{background:#fff; border-radius:28px; border:1px solid var(--outline); padding:clamp(20px,2.6vw,30px); box-shadow:var(--shadow-float); display:flex; flex-direction:column; gap:16px}
.bk-top{display:flex; align-items:center; justify-content:space-between; gap:12px}
.bk-top h3{font-weight:600; font-size:21px}
.bk-top .chip{background:var(--h1)}
.seg{display:grid; grid-template-columns:1fr 1fr; gap:4px; padding:5px; border-radius:16px; background:var(--canvas); box-shadow:inset 0 0 0 1px rgba(15,35,39,.06)}
.seg button{border:0; background:transparent; cursor:pointer; border-radius:12px; padding:10px 8px; font-weight:600; font-size:15px; color:var(--mute); line-height:1.25}
.seg button small{display:block; font-weight:500; font-size:12.5px; color:inherit; opacity:.85}
.seg button[aria-selected="true"]{background:#fff; color:var(--ink); box-shadow:0 6px 14px -10px rgba(15,35,39,.5), inset 0 0 0 1px var(--outline)}
.bk [role="tabpanel"][hidden]{display:none}
.bk .lbl{font-size:13px; font-weight:600; color:var(--mute)}
.slots{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin-top:8px}
.slots button{border:0; cursor:pointer; min-height:44px; border-radius:12px; background:var(--h1); color:var(--ink); font-weight:600; font-size:15px; font-variant-numeric:tabular-nums}
.slots button:hover{background:var(--h2)}
.slots button[aria-pressed="true"]{background:var(--acc); color:#fff}
.slots button:disabled{background:transparent; color:#9DB3B7; text-decoration:line-through; cursor:default; box-shadow:inset 0 0 0 1px var(--line)}
.bk .sum{display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding-top:14px; border-top:1px solid var(--line); font-size:15px}
.bk .sum b{font-family:var(--display); font-size:22px; font-weight:600; white-space:nowrap}

.cb{display:flex; flex-direction:column; gap:12px}
.cb .row2{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.inp{width:100%; min-height:48px; border:0; border-radius:14px; padding:0 14px; background:#fff; color:var(--ink); font-size:15.5px; box-shadow:inset 0 0 0 1px rgba(15,35,39,.14)}
.inp::placeholder{color:#7C9296}
.rchips{display:flex; flex-wrap:wrap; gap:8px; border:0; margin:0; padding:0}
.rchips legend{font-size:13px; font-weight:600; color:var(--mute); margin-bottom:8px; padding:0}
.rchips label{position:relative; cursor:pointer}
.rchips input{position:absolute; opacity:0; inset:0}
.rchips span{display:inline-flex; padding:9px 14px; border-radius:999px; background:#fff; box-shadow:inset 0 0 0 1px var(--outline); font-size:14.5px; font-weight:600}
.rchips input:checked + span{background:var(--ink); color:#fff; box-shadow:none}
.rchips input:focus-visible + span{outline:2px solid var(--acc); outline-offset:2px}
.consent{display:flex; gap:10px; align-items:flex-start; font-size:13.5px; color:var(--mute); line-height:1.45}
.consent input{width:18px; height:18px; margin:2px 0 0; accent-color:var(--acc); flex:none}
.consent a{color:var(--acc)}

.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:18px; padding:22px 0; font-family:var(--display); font-weight:600; font-size:clamp(18px,1.6vw,21px); line-height:1.3}
.faq summary::-webkit-details-marker{display:none}
.faq .pm{width:40px; height:40px; flex:none; border-radius:50%; display:grid; place-items:center; color:var(--acc); background:#fff; box-shadow:inset 0 0 0 1px var(--outline); transition:transform .25s var(--ease-out), background .2s}
.faq .pm .ico{transition:transform .25s var(--ease-out)}
.faq details[open] .pm{background:var(--acc); color:#fff; box-shadow:none}
.faq details[open] .pm .ico{transform:rotate(45deg)}
.faq details p{padding:0 56px 24px 0; color:var(--mute); max-width:64ch}

.loc-media{position:relative; overflow:hidden; border-radius:22px; background:#E3F1F3}
.loc-media img{width:100%; height:100%; object-fit:cover}
.mapill{display:block; width:100%; height:100%}
.pinlab{position:absolute; left:50%; top:44%; transform:translate(-50%,-100%); display:flex; flex-direction:column; align-items:center; gap:6px; pointer-events:none}
.pinlab .tag{padding:8px 12px; border-radius:14px; background:#fff; box-shadow:var(--shadow-card); font-size:13.5px; font-weight:600; white-space:nowrap; text-align:center; line-height:1.3}
.pinlab .tag small{display:block; font-weight:500; color:var(--mute); font-size:12px}
.pinlab .dot{width:44px; height:44px; border-radius:50% 50% 50% 0; transform:rotate(-45deg); background:var(--acc); display:grid; place-items:center; box-shadow:0 10px 18px -8px rgba(35,115,126,.9)}
.pinlab .dot::after{content:""; width:14px; height:14px; border-radius:50%; background:#fff}
.facts5{display:flex; flex-direction:column}
.facts5 li{display:grid; grid-template-columns:40px minmax(0,1fr); gap:14px; align-items:center; padding:12px 0; border-top:1px solid var(--line); font-size:15.5px; line-height:1.4}
.facts5 li:first-child{border-top:0}
.facts5 .oic{width:40px; height:40px}
.facts5 .oic .ico{width:19px; height:19px; stroke-width:1.7}
.facts5 small{display:block; color:var(--mute); font-size:13.5px}
.acts{display:flex; flex-wrap:wrap; gap:10px 18px; align-items:center}

.foot{border-radius:34px; padding:clamp(40px,5vw,72px) clamp(24px,4vw,64px) 28px; position:relative; overflow:hidden; isolation:isolate}
.foot .fcols{display:grid; grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr)); gap:36px 40px}
.foot h4{margin:0 0 14px; font-family:var(--body); font-size:13px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--acc)}
.foot .fbrand b{display:block; font-family:var(--display); font-weight:600; font-size:26px; line-height:1.1; letter-spacing:-.01em}
.foot .fbrand span{display:block; color:var(--mute); margin-top:6px; font-size:15px}
.foot ul li{padding:5px 0; font-size:15px}
.foot ul a{text-decoration:none}
.foot ul a:hover{color:var(--acc)}
.foot .nap li{padding:0 0 14px; line-height:1.45}
.foot .nap small{display:block; color:var(--mute); font-size:13.5px}
.foot .bar{display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px 24px; margin-top:44px; padding-top:22px; border-top:1px solid rgba(15,35,39,.12); font-size:13.5px; color:var(--mute)}
.foot .bar nav{display:flex; flex-wrap:wrap; gap:6px 20px}
.foot .bar a{text-decoration:none}
.foot .bar a:hover{color:var(--ink)}
.foot .fnote{margin-top:18px; font-size:13px; color:var(--mute); max-width:60ch}
@media (max-width:1000px){ .foot .fcols{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .foot .fcols{grid-template-columns:1fr} .cb .row2{grid-template-columns:1fr} .slots{grid-template-columns:repeat(3,minmax(0,1fr))} }

/* 5B */
.b6-book{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:40px clamp(40px,6vw,96px); align-items:stretch}
.b6-book .photo{min-height:clamp(520px,50vw,700px)}
.b6-book .photo img{position:absolute; inset:0; object-position:40% 60%}
.b6-book .photo .chipx{position:absolute; left:16px; bottom:16px; background:rgba(255,255,255,.72); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); box-shadow:inset 0 0 0 1px rgba(255,255,255,.9)}
.b6-right{display:flex; flex-direction:column; justify-content:center}
.nways{display:flex; flex-direction:column; margin-top:32px; counter-reset:w}
.nway{display:grid; grid-template-columns:56px minmax(0,1fr); gap:6px 22px; padding:26px 0; border-top:1px solid var(--line)}
.nway:last-child{border-bottom:1px solid var(--line)}
.nway .n{font-family:var(--display); font-weight:600; font-size:40px; line-height:1; color:#A9CDD3; letter-spacing:-.02em}
.nway h3{font-weight:600; font-size:22px; line-height:1.2}
.nway p{color:var(--mute); font-size:15.5px; margin-top:4px}
.nway .acts{margin-top:16px}
.nway .tel{font-family:var(--display); font-weight:600; font-size:clamp(26px,2.6vw,34px); letter-spacing:-.01em; text-decoration:none; color:var(--ink)}
.nway .cb{margin-top:16px; max-width:520px}
.b6-loc{margin-top:clamp(88px,9vw,136px)}
.b6-loc .tabs{margin-top:28px}
.b6-panel{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr); gap:16px; margin-top:18px}
.b6-panel[hidden]{display:none}
.b6-panel .loc-media{min-height:clamp(340px,34vw,460px); border-radius:30px}
.b6-panel .info{border-radius:30px; padding:clamp(24px,3vw,36px); display:flex; flex-direction:column; gap:16px}
.b6-panel .info h3{font-weight:600; font-size:clamp(26px,2.4vw,32px); line-height:1.1}
.b6-panel .info .acts{margin-top:auto; padding-top:8px}
.b6-faq{margin:clamp(88px,9vw,136px) auto 0; max-width:880px}
.b6-faq .sec-c{text-align:center}
.b6-faq .faq{margin-top:36px}
.b6-faq .after{margin-top:26px; text-align:center; color:var(--mute)}
.b6-faq .after a{color:var(--acc); font-weight:600; text-decoration:none; white-space:nowrap}
.b6-cta{margin-top:clamp(88px,9vw,136px); border-radius:34px 34px 0 0; padding:clamp(36px,5vw,64px); position:relative; overflow:hidden; isolation:isolate;
  background:linear-gradient(135deg,var(--h1) 0%,var(--h2) 60%,var(--h3) 100%); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:24px}
.b6-cta .blob{fill:rgba(255,255,255,.45)}
.b6-cta h2{font-weight:600; font-size:clamp(28px,3.2vw,44px); line-height:1.05; letter-spacing:-.02em; max-width:18ch}
.b6-foot{border-radius:0 0 34px 34px; background:#fff; border:1px solid var(--outline); border-top:0}
@media (max-width:900px){
  .b6-book, .b6-panel{grid-template-columns:1fr}
  .b6-book .photo{min-height:420px}
  .nway{grid-template-columns:44px minmax(0,1fr)}
  .nway .n{font-size:32px}
  .b6-cta .btn{width:100%}
}

/* Google Térkép (5B) */
.gmap{background:#E5E3DF}
.gmap .gshot{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:0% 0%}
.gmap iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.gmap.is-live .gshot{visibility:hidden}
.b6-panel .info .thumb{position:relative; border-radius:18px; overflow:hidden; height:150px; margin:4px 0 0}
.b6-panel .info .thumb img{width:100%; height:100%; object-fit:cover; object-position:30% 45%}
.b6-panel .info .thumb figcaption{position:absolute; left:10px; bottom:10px; z-index:1; padding:5px 10px; border-radius:999px; background:rgba(255,255,255,.85); font-size:12.5px; font-weight:600}
@media (max-width:900px){ .b6-panel .loc-media{min-height:360px} .gmap .gshot{object-position:50% 50%} }

/* =====================================================================
   1A · BEOLVADÓ FOTÓ
   ===================================================================== */
.a-hero{position:relative; border-radius:34px; overflow:hidden; min-height:700px; padding:16px; display:flex; flex-direction:column;
  background:linear-gradient(115deg,var(--h1) 0%,var(--h2) 42%,var(--h3) 100%)}
.a-hero .ph{position:absolute; top:0; right:0; bottom:0; width:66%;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 34%); mask-image:linear-gradient(90deg,transparent 0%,#000 34%)}
.a-hero .ph img{object-position:46% 28%}
.a-copy{position:relative; z-index:2; max-width:590px; padding:clamp(56px,7vw,104px) clamp(10px,3vw,40px) 0}
.a-copy .lead{margin-top:18px; max-width:24ch}
.a-copy .muted{margin-top:14px; max-width:40ch}
.a-book{position:relative; z-index:3; margin-top:auto; max-width:1040px; display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.5fr) minmax(0,.8fr) auto;
  gap:14px; align-items:end; padding:18px; border-radius:26px; box-shadow:var(--shadow-float)}
.a-book .btn{min-height:48px}
.a-locs{display:grid; grid-template-columns:minmax(0,.86fr) repeat(3,minmax(0,1fr)); gap:var(--gut); align-items:stretch; margin-top:clamp(40px,5vw,72px)}
/* A harmadik rendelés belépésével négy hasáb lenne; szűkebb képernyőn a
   bevezető külön sorba kerül, hogy a kártyák ne préselődjenek össze. */
@media (max-width:1280px){
  .a-locs{grid-template-columns:repeat(3,minmax(0,1fr))}
  .a-locs .intro{grid-column:1/-1}
}
/* Készülő rendelés: nincs cím és időpont, ezért halványabb és nem hivatkozható. */
.loc.is-keszul{opacity:.78}
.loc.is-keszul .chip{color:var(--mute)}
.a-locs .intro{padding:10px clamp(10px,2vw,28px)}
.a-locs .intro p{margin-top:12px}
.loc{border-radius:28px; padding:28px; display:flex; flex-direction:column; gap:12px}
.loc .city{font-family:var(--display); font-weight:500; font-size:clamp(30px,2.6vw,38px); line-height:1.05; letter-spacing:-.02em}
.loc .addr{color:var(--mute)}
.loc .row{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin-top:auto; padding-top:16px; border-top:1px solid var(--line)}
@media (max-width:900px){
  .a-hero{min-height:0}
  .a-hero .ph{width:100%; bottom:auto; height:380px; -webkit-mask-image:linear-gradient(180deg,#000 55%,transparent 100%); mask-image:linear-gradient(180deg,#000 55%,transparent 100%)}
  .a-copy{padding-top:290px}
  .a-book{grid-template-columns:1fr; margin-top:30px}
  .a-locs{grid-template-columns:1fr}
  .a-locs .intro{grid-column:auto}
}


/* =====================================================================
   TELJES OLDAL: ritmus és horgonyok
   ===================================================================== */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }
[id]{scroll-margin-top:24px}
.drbado-page{padding-bottom:40px}
.drbado-page > .zone{padding-top:clamp(64px,7.5vw,112px); padding-bottom:clamp(64px,7.5vw,112px)}
.drbado-page > .band{margin:clamp(8px,1.2vw,16px) 0}
.drbado-page > .a-locs{margin-bottom:clamp(8px,1.5vw,24px)}
.nav-pill .links a{text-decoration:none; color:var(--ink)}
.nav-pill .links a:hover, .nav-pill .links a.on{color:var(--acc)}
.a4-top .facts{grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:28px}
.a4-top .fact{display:flex; flex-direction:column; gap:6px; padding:18px 20px}
.a4-top .fact b{font-size:clamp(22px,2vw,28px)}
@media (max-width:640px){ .a4-top .facts{grid-template-columns:1fr} }
.nway .oic{width:52px; height:52px}
.nway .oic .ico{width:24px; height:24px}
.head-cta .h2x, .b6-right .h2x, .b6-loc .h2x{margin-top:0}
@media (max-width:900px){
  .drbado-page{padding-bottom:110px}
  .s1-head{grid-template-columns:1fr}
  .steps3{grid-template-columns:1fr; gap:10px}
  .steps3 li:nth-child(n){height:auto; min-height:0; padding:16px 18px; border-radius:18px}
  .steps3 li:nth-child(2){margin-left:12%}
  .steps3 li:nth-child(3){margin-left:24%}
}
@media (max-width:560px){
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important; animation-delay:0s !important; animation-iteration-count:1 !important; animation-timeline:auto !important; transition-duration:.01ms !important}
  [data-reveal]{opacity:1 !important; transform:none !important}
}

/* ==========================================================================
   WordPress-specifikus kiegészítések. A mockup egy önálló HTML volt; ezek
   azok a darabok, amik az éles oldalon kellenek: térkép-hozzájárulás,
   mobil menü, tapadó menü, és a JavaScript nélküli tartalék.
   ========================================================================== */

/* A WordPress admin sáv ne takarja a tapadó menüt. */
body.admin-bar .nav-pill.is-stuck{top:calc(var(--gut) + 32px)}

/* Tapadó menü: görgetéskor a lap tetejére ül, és átlátszatlanabb lesz. */
.nav-sentinel{position:absolute; top:0; left:0; width:1px; height:1px}
.nav-pill{transition:background .2s var(--ease-out), box-shadow .2s var(--ease-out)}
.nav-pill.is-stuck{position:fixed; top:var(--gut); left:var(--gut); right:var(--gut); z-index:30;
  background:rgba(255,255,255,.8); box-shadow:0 18px 40px -26px rgba(15,35,39,.5)}
@media (prefers-reduced-motion: reduce){ .nav-pill{transition:none} }

/* Mobil menü. */
.drbado-mobil-menu{position:relative; z-index:5; display:flex; flex-direction:column; gap:4px;
  margin:10px 0 0; padding:14px; border-radius:22px;
  background:rgba(255,255,255,.9); border:1px solid rgba(255,255,255,.95); box-shadow:var(--shadow-card)}
.drbado-mobil-menu[hidden]{display:none}
.drbado-mobil-menu a{padding:12px 10px; text-decoration:none; font-weight:500; border-radius:12px}
.drbado-mobil-menu a:hover{background:rgba(35,115,126,.08); color:var(--acc)}
.drbado-mobil-menu .btn{margin-top:8px}
@media (min-width:1341px){ .drbado-mobil-menu{display:none !important} }

/* Google Térkép: állókép és gomb, amíg a látogató nem kéri a betöltést. */
.gmap{position:relative}
.gmap .gshot{width:100%; height:100%; object-fit:cover; display:block}
.gmap iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.gmap.is-live .gshot, .gmap.is-live .gmap-load{display:none}
.gmap-load{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:2;
  box-shadow:0 14px 30px -18px rgba(15,35,39,.6)}
.gmap::before{content:""; position:absolute; inset:0; background:rgba(242,248,249,.45); pointer-events:none}
.gmap.is-live::before{display:none}

/* JavaScript nélkül: minden kategória és panel egymás alatt látszik. */
html:not(.js) [role="tabpanel"][hidden]{display:block !important}
html:not(.js) [role="tablist"]{display:none}
html:not(.js) .gmap-load{display:none}
html:not(.js) .menu-btn{display:none}
@media (max-width:1340px){
  html:not(.js) .drbado-mobil-menu[hidden]{display:flex}
}

/* A blokkszerkesztőben a szekciók egymás alatt, teljes szélességben. */
.editor-styles-wrapper .a-hero{min-height:auto}

/* ==========================================================================
   Foglaló párbeszédablak. Bármelyik „Időpontot foglalok” gomb ezt nyitja,
   így a látogató nem hagyja el az oldalt, a lapon viszont nem marad üres
   keret, amíg a külső foglaló betölt.
   ========================================================================== */
.foglalo-modal{width:min(1040px, calc(100vw - 2 * var(--gut))); max-width:none; height:min(880px, calc(100vh - 2 * var(--gut)));
  padding:0; border:0; border-radius:34px; overflow:hidden; background:var(--s1); color:var(--ink);
  box-shadow:0 40px 90px -40px rgba(15,35,39,.65)}
.foglalo-modal::backdrop{background:rgba(15,35,39,.5); backdrop-filter:blur(3px)}
.foglalo-modal[open]{display:flex; flex-direction:column}

.foglalo-modal__head{display:flex; align-items:flex-start; justify-content:space-between; gap:18px;
  padding:22px clamp(18px,2.4vw,28px); border-bottom:1px solid var(--line)}
.foglalo-modal__head h2{font-family:var(--display); font-weight:600; font-size:clamp(20px,2.2vw,26px); letter-spacing:-.02em; margin:0}
.foglalo-modal__head .muted{font-size:15px; margin-top:4px}
.foglalo-modal__act{display:flex; align-items:center; gap:14px; flex:none}
.foglalo-modal__close{display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px;
  border:0; border-radius:999px; background:var(--canvas); color:var(--ink); cursor:pointer}
.foglalo-modal__close:hover{background:#E3F0F2}

.foglalo-modal__body{position:relative; flex:1; min-height:0; background:#fff}
.foglalo-modal__frame{display:block; width:100%; height:100%; border:0}
.foglalo-modal__load{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  margin:0; color:var(--mute); font-size:15px; pointer-events:none}
.foglalo-modal.is-loaded .foglalo-modal__load{display:none}

/* DokiRex mód: helyszínválasztó, ha a helyszín nem ismert (foglalo-dokirex.php). */
.foglalo-modal__frame[hidden], .foglalo-modal__nav[hidden], .foglalo-valaszto[hidden], .foglalo-valaszto__hmv[hidden]{display:none}
.foglalo-modal__nav{display:inline-flex; align-items:center; gap:14px}
.foglalo-modal__valt{border:0; background:none; padding:0; cursor:pointer; font:inherit}
.foglalo-valaszto{position:absolute; inset:0; overflow:auto; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:22px;
  padding:clamp(24px,4vw,48px) clamp(18px,2.4vw,28px); text-align:center}
.foglalo-valaszto__cim{font-weight:600; font-size:clamp(20px,2.2vw,26px); letter-spacing:-.02em}
.foglalo-valaszto__gombok{display:grid; grid-template-columns:repeat(2,minmax(0,260px)); gap:14px; width:100%; justify-content:center}
.foglalo-valaszto__gomb{display:flex; align-items:center; gap:12px; padding:18px 20px; border:1px solid var(--outline); border-radius:22px;
  background:var(--canvas); color:var(--ink); text-align:left; cursor:pointer; transition:border-color .2s var(--ease-out), box-shadow .2s var(--ease-out)}
.foglalo-valaszto__gomb:hover{border-color:var(--acc); box-shadow:var(--shadow-card)}
.foglalo-valaszto__gomb .ico{color:var(--acc); flex:none}
.foglalo-valaszto__gomb b{display:block; font-family:var(--display); font-weight:600; font-size:20px; letter-spacing:-.01em}
.foglalo-valaszto__gomb small{display:block; font-size:14px; color:var(--mute); line-height:1.4}
.foglalo-valaszto__hmv{order:-1; display:flex; align-items:flex-start; gap:10px; max-width:540px; padding:14px 18px; border-radius:18px; background:var(--h1); text-align:left; font-size:15px}
.foglalo-valaszto__hmv .ico{color:var(--acc); flex:none; margin-top:3px}
.foglalo-valaszto__hmv .tel{font-weight:600; white-space:nowrap}
@media (max-width:520px){
  .foglalo-valaszto__gombok{grid-template-columns:1fr}
}

@media (max-width:640px){
  .foglalo-modal{width:100vw; height:100dvh; max-height:none; border-radius:0}
  .foglalo-modal__head{padding:16px}
  .foglalo-modal__head .muted{display:none}
  /* Telefonon a fejléc nem fér ki egy sorban: a „Külön ablakban” csak ikon
     (új ablak), a „Másik rendelő” a cím alá kerül. */
  .foglalo-modal__head{display:grid; grid-template-columns:minmax(0,1fr) auto auto; column-gap:10px; row-gap:4px; align-items:center}
  .foglalo-modal__act{display:contents}
  .foglalo-modal__head > div:first-child{grid-column:1; grid-row:1}
  .foglalo-modal__nav{grid-column:1 / -1; grid-row:2; justify-self:start; gap:18px}
  .foglalo-modal__kulon{grid-column:2; grid-row:1; justify-content:center; width:44px; height:44px; border-radius:999px; background:var(--canvas)}
  .foglalo-modal__kulon > span, .foglalo-modal__kulon > .ico:not(.foglalo-modal__uj){display:none}
  .foglalo-modal__close{grid-column:3; grid-row:1}
}
.foglalo-modal__uj{display:none}
@media (max-width:640px){
  .foglalo-modal__kulon .foglalo-modal__uj{display:block}
  .link.foglalo-modal__kulon:hover .ico{transform:none}
}
@media (prefers-reduced-motion: no-preference){
  .foglalo-modal[open]{animation:modalBe .28s var(--ease-reveal)}
  @keyframes modalBe{from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:none}}
}

/* A visszahívás űrlap robotcsapdája. A szabály eddig csak az aloldalak
   stíluslapjában volt meg, ezért a főoldalon látszott egy üres mező. */
.drbado-trap{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.drbado-form__error{color:#A4231F; margin-top:10px; font-size:15px}
.drbado-form__error:empty{display:none}

/* A legkeskenyebb kijelzőkön a H1 egy hajszállal kisebb. Az önhostolt Archivo
   kb. 3%-kal szélesebben szed, mint a mockupban használt Google-változat, és
   „felszabadultan.” enélkül túlérne a panel szélén. A DESIGN.md skálájától
   csak 390px alatt térünk el, és csak ennyivel. */
@media (max-width:420px){
  .display{font-size:44px}
}

/* Nagyon keskeny kijelzőn (320px) a fejléc tartalma ne lógjon ki: a név
   zsugorodhat, a „Menü” gomb pedig sosem törik. */
@media (max-width:400px){
  .nav-pill{padding-left:16px; gap:10px}
  .brand{min-width:0; overflow:hidden; text-overflow:ellipsis}
  .brand small{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
}

/* Az évszám ne törjön két sorba („2024-től”). */
.fact b{white-space:nowrap}