/* B) Stratégia — HŰVÖS, ÉLES EDITORIAL
   Hideg fehér + oxvérvörös (burgundy). Playfair Display (Didone), szögletes, magazinos. */
:root{
  --bg:#FCFBF8; --surface:#FFFFFF; --ink:#15151A; --ink-soft:#56565E;
  --line:#E4E1D9; --accent:#7C2233; --accent-ink:#FFFFFF; --chosen:#7C2233;
  --radius:5px; --maxw:560px;
  --font-display:"Playfair Display",Georgia,serif; --font-body:"Inter",system-ui,sans-serif;
}
.b-split{display:grid;grid-template-columns:minmax(0,42%) 1fr;min-height:100vh}
#app{min-height:100vh}

/* bal panel: oxvérvörös, nagy Didone állítás, index-szám */
.b-aside{
  position:relative;overflow:hidden;color:#F4E6E2;
  padding:clamp(34px,4vw,64px);display:flex;flex-direction:column;justify-content:space-between;
  background:linear-gradient(160deg,#7C2233,#5A1726 70%,#42101C);
}
.b-aside::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:
    linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px) 0 0/100% 38px,
    radial-gradient(60% 50% at 90% 110%, rgba(0,0,0,.4), transparent 60%);
  mask:linear-gradient(#000,transparent 94%);
}
.b-aside-top{position:relative;z-index:2;display:flex;align-items:baseline;justify-content:space-between}
.b-aside-brand{font-family:var(--font-display);font-weight:600;font-size:21px;letter-spacing:-.01em;color:#F4E6E2;text-decoration:none}
.b-aside-brand span{color:#E9B7A6}
.b-aside-quote{
  position:relative;z-index:2;font-family:var(--font-display);font-weight:500;
  font-size:clamp(26px,3vw,40px);line-height:1.14;letter-spacing:-.01em;margin:24px 0}
.b-aside-quote em{color:#F0C9B6;font-style:italic}
.b-aside-foot{position:relative;z-index:2;font-size:12.5px;color:#D9B7AE;letter-spacing:.06em;
  text-transform:uppercase;line-height:1.8}
.b-villa{position:absolute;right:-24px;bottom:7%;width:60%;max-width:330px;opacity:.42;z-index:1}
.b-villa path,.b-villa line,.b-villa rect,.b-villa polygon{stroke:#E9B7A6;stroke-width:1.1;fill:none;vector-effect:non-scaling-stroke}

/* jobb oldal: editorial tipográfia, szögletes opciók bal akcent-sávval */
.q-eyebrow,.q-kicker{color:var(--accent);letter-spacing:.2em}
.q-title{font-weight:600;letter-spacing:-.01em;line-height:1.04}
.q-q{font-family:var(--font-display);font-weight:600;letter-spacing:-.005em}
.q-bar{background:var(--accent)}
.q-opt{border-radius:5px;border-color:var(--line);padding-left:19px;position:relative}
.q-opt::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent);
  transform:scaleY(0);transform-origin:bottom;transition:transform .25s var(--ease)}
.q-opt:hover{border-color:#C9C4B8;transform:none;box-shadow:0 12px 30px -22px rgba(0,0,0,.45)}
.q-opt:hover::before,.q-opt.is-chosen::before{transform:scaleY(1)}
.q-opt.is-chosen{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 5%,#fff)}
.q-opt-mark{border-radius:3px}                 /* szögletes jelölő = magazinos */
.q-opt-mark::after{border-radius:1px}
.q-cta{border-radius:4px;background:var(--accent);letter-spacing:.01em}
.q-cta:hover{box-shadow:0 16px 34px -18px var(--accent)}
.q-input{border-radius:5px}
.q-check{border-radius:6px;background:var(--accent)}
.q-step-n{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 35%,var(--line));border-radius:5px}

@media (max-width:880px){
  .b-split{grid-template-columns:1fr}
  .b-aside{padding:22px clamp(20px,5vw,32px);min-height:auto;flex-direction:row;align-items:center;justify-content:space-between}
  .b-aside-quote,.b-villa,.b-aside-foot{display:none}
  #app{min-height:auto}
}

/* ─── B) SIGNATURE ÁTMENET: editorial „lap-csúsztatás" (clip-wipe) ─── */
.q-screen{transition:opacity .52s cubic-bezier(.76,0,.24,1),transform .52s cubic-bezier(.76,0,.24,1),clip-path .52s cubic-bezier(.76,0,.24,1)}
.q-screen.is-entering{opacity:0;transform:translateX(52px);clip-path:inset(0 0 0 28%)}
.q-screen.is-leaving{opacity:0;transform:translateX(-40px);clip-path:inset(0 28% 0 0)}
/* opciók balról, lépcsőzve (statikus opacity:1, hogy választáskor se tűnjön el) */
.q-opt{opacity:1;transform:none;animation:bOptIn .5s var(--ease) both;animation-delay:var(--d,0ms)}
@keyframes bOptIn{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:translateX(0)}}
/* választáskor: burgundy akcent-sáv villanása */
.q-opt.is-chosen{animation:bFlash .5s var(--ease)}
@keyframes bFlash{0%{background:color-mix(in srgb,var(--accent) 16%,#fff)}100%{background:color-mix(in srgb,var(--accent) 5%,#fff)}}