/* ==========================================================================
   HUMAC KVÍZ V3 — gazdag, tudományos, erős offer
   Brand: humac-brand skill (Montserrat, narancs #f28a1a, arany #c9a226,
   homok #f6eadb, sötétbarna #26241e). Világos kérdések + sötét STUDY FACT panelek.
   ========================================================================== */
:root{
  --orange:#f28a1a; --orange-d:#e6520f;
  --gold:#c9a226; --gold-l:#f6c241; --gold-dk:#a8861a;
  --sand:#d9c3a9; --cream:#f6eadb; --offwhite:#faf9f6;
  --ink:#26241e; --ink2:#3f332a; --charcoal:#333333; --near:#121212;
  --muted:#8a7f6b; --line:#e7ddca;
  --green:#2e9c5b; --green-dk:#074834; --red:#e05a3a;
  --card:#ffffff;
  --maxw:440px;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{font-family:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:var(--offwhite); color:var(--ink); min-height:100dvh}
img{max-width:100%}
.app{max-width:var(--maxw); margin:0 auto; min-height:100dvh; display:flex; flex-direction:column;
  padding:0 18px calc(104px + env(safe-area-inset-bottom)); position:relative}

/* header */
header{display:flex; align-items:center; gap:10px; padding:15px 0 10px; position:sticky; top:0;
  background:var(--offwhite); z-index:20}
.logoimg{height:34px; width:auto}
.hbadge{margin-left:auto; font-size:10px; font-weight:700; letter-spacing:.4px; color:var(--gold-dk);
  border:1px solid var(--line); border-radius:20px; padding:4px 10px; background:#fff}
/* progress with segment checkmarks (Dr Kegel style) */
.prog{display:flex; gap:6px; align-items:center; margin:4px 0 2px}
.prog .seg{flex:1; height:6px; border-radius:6px; background:var(--line); overflow:hidden; position:relative}
.prog .seg i{position:absolute; inset:0; width:0%; background:linear-gradient(90deg,var(--gold),var(--gold-l)); transition:width .5s ease}
.prog .dot{width:22px; height:22px; border-radius:50%; background:var(--line); flex:none; display:flex;
  align-items:center; justify-content:center; font-size:11px; font-weight:800; color:#fff; transition:all .3s}
.prog .dot.done{background:var(--green)}
.prog .dot.active{background:var(--ink)}
.seclab{font-size:10px; letter-spacing:1.6px; text-transform:uppercase; color:var(--muted);
  font-weight:700; margin:8px 0 0; min-height:13px}

/* screen anim */
.screen{flex:1; display:flex; flex-direction:column; animation:slide .34s cubic-bezier(.2,.7,.3,1)}
@keyframes slide{from{opacity:0; transform:translateX(24px)} to{opacity:1; transform:none}}
.screen.back{animation:slideb .34s cubic-bezier(.2,.7,.3,1)}
@keyframes slideb{from{opacity:0; transform:translateX(-24px)} to{opacity:1; transform:none}}

h1{font-size:26px; line-height:1.2; margin:14px 0 8px; font-weight:800; letter-spacing:-.3px}
h2{font-size:21px; line-height:1.28; margin:16px 0 6px; font-weight:700}
.sub{color:var(--muted); font-size:14px; line-height:1.55; margin:0 0 14px; font-weight:500}
.gold{color:var(--gold-dk)} .grn{color:var(--green)} .org{color:var(--orange-d)}

/* options */
.opts{display:flex; flex-direction:column; gap:10px; margin-top:4px}
.opt{background:#fff; border:1.5px solid var(--line); border-radius:15px; padding:15px 16px; font-size:15px;
  font-weight:600; display:flex; align-items:center; gap:12px; cursor:pointer; user-select:none; line-height:1.32;
  transition:border-color .14s, background .14s, transform .06s; box-shadow:0 1px 2px rgba(60,50,30,.03)}
.opt:active{transform:scale(.985)}
.opt .ico{font-size:21px; width:27px; text-align:center; flex:none}
.opt small{display:block; color:var(--muted); font-size:12px; margin-top:2px; font-weight:500}
.opt.sel{border-color:var(--gold); background:#fdf6e6; box-shadow:0 0 0 1px var(--gold)}
.opt .chk{margin-left:auto; width:22px; height:22px; border:2px solid #d3c6ab; border-radius:50%; flex:none; position:relative; transition:all .14s}
.opt.multi .chk{border-radius:6px}
.opt.sel .chk{background:var(--gold); border-color:var(--gold)}
.opt.sel .chk:after{content:"✓"; color:#fff; font-size:13px; font-weight:800; position:absolute; inset:0; display:flex; align-items:center; justify-content:center}
input[type=text],input[type=email]{width:100%; font-size:16.5px; padding:15px 16px; border:1.5px solid var(--line);
  border-radius:15px; background:#fff; color:var(--ink); outline:none; font-family:inherit}
input:focus{border-color:var(--gold)} input::placeholder{color:#b8ab90}

/* buttons */
.btnbar{position:fixed; left:0; right:0; bottom:0; max-width:var(--maxw); margin:0 auto;
  padding:12px 18px calc(14px + env(safe-area-inset-bottom)); display:flex; gap:10px;
  background:linear-gradient(to top,var(--offwhite) 74%,transparent)}
.back{width:52px; border:1.5px solid var(--line); background:#fff; border-radius:14px; font-size:20px; color:var(--muted); cursor:pointer; visibility:hidden}
.btn{flex:1; padding:16px; font-size:16.5px; font-weight:800; color:#fff; background:var(--orange); border:none;
  border-radius:14px; cursor:pointer; opacity:.32; pointer-events:none; transition:opacity .2s, transform .06s;
  font-family:inherit; letter-spacing:.3px; box-shadow:0 6px 18px rgba(242,138,26,.28)}
.btn.on{opacity:1; pointer-events:auto}
.btn:active{transform:translateY(1px); background:var(--orange-d)}

/* trust badges + stats */
.badges{display:flex; gap:7px; flex-wrap:wrap; margin-top:16px}
.badges span{font-size:10.5px; border:1px solid var(--line); color:var(--ink2); border-radius:14px; padding:5px 10px; font-weight:600; background:#fff}
.statrow{display:flex; gap:8px; margin-top:16px}
.stat{flex:1; background:#fff; border:1px solid var(--line); border-radius:14px; padding:13px 8px; text-align:center}
.stat b{display:block; font-size:19px; color:var(--gold-dk); font-weight:800}
.stat span{font-size:9.5px; color:var(--muted); letter-spacing:.2px; display:block; margin-top:3px; line-height:1.3; font-weight:600}

/* ---- STUDY FACT (dark panel) ---- */
.studyfull{flex:1; margin:0 -18px; padding:24px 20px calc(30px); background:var(--near); color:#fff;
  display:flex; flex-direction:column; border-radius:0}
.sf-badge{align-self:flex-start; background:var(--orange); color:#fff; font-size:11px; font-weight:800;
  letter-spacing:1px; padding:7px 14px; border-radius:20px; display:flex; align-items:center; gap:6px; text-transform:uppercase}
.sf-h{font-size:22px; font-weight:800; line-height:1.3; margin:16px 0 6px}
.sf-h u{text-decoration-color:var(--gold); text-underline-offset:3px}
.sf-sub{color:#c9c1b2; font-size:13.5px; line-height:1.55; font-weight:500; margin:0 0 6px}
/* bar chart */
.chart{margin:18px 0 8px; background:#1c1a16; border-radius:16px; padding:18px 16px 14px}
.chart .ct{font-size:12px; color:#a89f8d; font-weight:700; letter-spacing:.5px; display:flex; align-items:center; gap:6px; margin-bottom:14px}
.bars{display:flex; align-items:flex-end; gap:26px; height:150px; padding:0 8px}
.bar{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%}
.bar .col{width:100%; border-radius:8px 8px 0 0; height:0; transition:height 1s cubic-bezier(.2,.8,.2,1)}
.bar.a .col{background:linear-gradient(180deg,#e58a6a,var(--red))}
.bar.b .col{background:linear-gradient(180deg,#5fd08a,var(--green))}
.bar .bl{font-size:11px; color:#a89f8d; margin-top:8px; font-weight:600; text-align:center; line-height:1.25}
.bar .bv{font-size:13px; color:#fff; font-weight:800; margin-bottom:5px}
.sf-source{margin-top:16px; background:#2a2620; border-radius:12px; padding:11px 14px; display:flex; align-items:center; gap:10px}
.sf-source .sicon{width:30px; height:30px; border-radius:8px; background:#3a352c; display:flex; align-items:center; justify-content:center; font-size:15px; flex:none}
.sf-source .stx{font-size:11.5px; color:#c9c1b2; line-height:1.4; font-weight:500}
.sf-source .stx b{color:#fff}
.sf-stat{margin:18px 0; text-align:center}
.sf-stat .big{font-size:52px; font-weight:900; color:var(--gold-l); line-height:1; letter-spacing:-1px}
.sf-stat .cap{font-size:13px; color:#c9c1b2; margin-top:6px; font-weight:600; line-height:1.4}

/* insight panel (light) */
.insight{flex:1; display:flex; flex-direction:column; justify-content:center; padding:8px 0 24px}
.insight .pico{font-size:38px}
.insight h2{font-size:22px; margin:12px 0 10px}
.insight p{font-size:14.5px; line-height:1.65; color:var(--ink2); margin:0 0 12px; font-weight:500}
.insight .hl{background:#fdf6e6; border-left:4px solid var(--gold); border-radius:12px; padding:13px 15px; font-size:13.5px; font-weight:700; line-height:1.5; color:var(--ink)}

/* testimonial */
.testi{flex:1; display:flex; flex-direction:column; justify-content:center; padding:6px 0 24px}
.testi .qm{font-size:60px; color:var(--gold); line-height:.5; font-weight:900}
.testi .stars{color:var(--gold-l); letter-spacing:2px; font-size:15px; margin-bottom:8px}
.testi .tq{font-size:19px; font-weight:800; line-height:1.4; margin:0 0 12px}
.testi .tb{font-size:14.5px; color:var(--ink2); line-height:1.6; margin:0 0 14px; font-weight:500}
.testi .who{display:flex; align-items:center; gap:11px}
.testi .ava{width:44px; height:44px; border-radius:50%; background:#fdf6e6; border:1.5px solid var(--gold); display:flex; align-items:center; justify-content:center; font-size:21px}
.testi .who b{font-size:13.5px; display:block} .testi .who span{font-size:11.5px; color:var(--muted)}

/* social proof */
.social{flex:1; display:flex; flex-direction:column; justify-content:center; text-align:center; padding:10px 0 24px}
.social h2{font-size:22px; margin:6px 0 16px}
.mosaic{display:grid; grid-template-columns:repeat(8,1fr); gap:3px; margin:0 auto 18px; max-width:320px;
  -webkit-mask-image:radial-gradient(circle at center, #000 55%, transparent 78%); mask-image:radial-gradient(circle at center, #000 55%, transparent 78%)}
.mosaic i{aspect-ratio:1; border-radius:4px; background:var(--sand)}
.laurel{display:flex; justify-content:center; align-items:center; gap:12px; font-weight:800}
.laurel .n{font-size:30px; color:var(--ink); font-weight:900} .laurel .l{font-size:34px; color:var(--gold)}
.social .cap{font-size:12.5px; color:var(--muted); font-weight:600; margin-top:6px}

/* loading */
.load{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:20px}
.spin{width:56px; height:56px; border:5px solid var(--line); border-top-color:var(--gold); border-radius:50%; animation:sp 1s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.load .lsteps{display:flex; flex-direction:column; gap:8px; margin-top:4px; text-align:left}
.load .lstep{font-size:13px; color:var(--muted); font-weight:600; display:flex; gap:8px; align-items:center; opacity:.4; transition:opacity .3s}
.load .lstep.on{opacity:1; color:var(--ink)} .load .lstep .c{color:var(--green); font-weight:800}

/* email gate */
.gate{text-align:center; padding-top:14px}
.gate .gico{font-size:38px}
.consent{display:flex; gap:10px; align-items:flex-start; text-align:left; background:#fff; border:1px solid var(--line);
  border-radius:12px; padding:12px 14px; margin-top:12px; font-size:12px; color:var(--ink2); line-height:1.5; font-weight:500}
.consent input{width:20px; height:20px; flex:none; accent-color:var(--gold); margin-top:1px}
.micro{font-size:11.5px; color:var(--muted); margin-top:10px; line-height:1.55}
.micro a{color:inherit}

/* ===== RESULT ===== */
.pill{display:inline-block; background:var(--gold); color:var(--ink); font-size:10.5px; font-weight:800;
  padding:5px 13px; border-radius:20px; letter-spacing:1.2px; text-transform:uppercase; margin-top:12px}
.gauge-wrap{text-align:center; margin:14px 0 4px}
.gauge-wrap svg{width:210px; height:130px}
.gauge-wrap svg{width:200px; height:120px}
.gnum{font-size:32px; font-weight:900; color:var(--green); margin-top:-6px; position:relative; line-height:1}
.gnum small{font-size:14px; color:var(--muted); font-weight:700; margin-left:1px}
.glab{font-size:11px; letter-spacing:1.2px; text-transform:uppercase; color:var(--muted); font-weight:700; margin-top:6px}
/* projection */
.proj{margin:16px 0; background:#fff; border:1px solid var(--line); border-radius:16px; padding:16px 14px}
.proj .pt{font-size:13px; font-weight:800; text-align:center; margin-bottom:2px}
.proj .pd{text-align:center; font-size:20px; font-weight:900; color:var(--orange-d); margin-bottom:10px}
.proj svg{width:100%; height:auto; display:block}
.proj .illus{font-size:10px; color:var(--muted); text-align:center; margin-top:6px; font-style:italic}
.mirror{font-size:14.5px; color:var(--ink2); line-height:1.6; font-weight:500}
.mirror .note{color:var(--muted); font-size:12px}
.bullets{margin:14px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:9px}
.bullets li{display:flex; gap:10px; font-size:13.5px; line-height:1.5; background:#fff; border:1px solid var(--line);
  border-radius:13px; padding:12px 14px; font-weight:500}
.bullets .c{color:var(--green); font-weight:900; flex:none} .bullets b{font-weight:800}
.dose{margin-top:13px; background:linear-gradient(135deg,#fdf6e6,#fff); border:1px solid var(--gold); border-radius:13px;
  padding:13px 15px; font-size:14px; font-weight:800; color:var(--gold-dk); text-align:center}
.dose small{display:block; font-weight:600; font-size:11px; color:var(--muted); margin-top:4px}
.vetflag{margin-top:12px; background:#fff3e2; border:1px solid var(--orange); border-radius:13px; padding:12px 14px; font-size:13px; line-height:1.5; color:var(--ink2); font-weight:500}

/* ===== OFFER ===== */
.offer{margin:18px -18px 0; padding:22px 18px calc(24px); background:var(--cream); border-radius:20px 20px 0 0}
.offer h2{font-size:22px; text-align:center; margin:0 0 4px; font-weight:900}
.offer .osub{text-align:center; color:var(--muted); font-size:13px; font-weight:600; margin-bottom:14px}
.coupon{background:#fff; border:2px dashed var(--orange); border-radius:14px; padding:13px; text-align:center; margin-bottom:14px}
.coupon .cbig{font-size:16px; font-weight:900; color:var(--orange-d)}
.coupon .csm{font-size:12px; color:var(--muted); font-weight:600; margin-top:3px}
.prod{background:#fff; border:1.5px solid var(--line); border-radius:16px; padding:15px; display:flex; gap:13px; align-items:center}
.prod .pimg{width:76px; height:76px; border-radius:12px; overflow:hidden; flex:none; background:#faf9f6; display:flex; align-items:center; justify-content:center}
.prod .pimg img{width:100%; height:100%; object-fit:cover}
.prod b{font-size:14.5px; line-height:1.3; display:block}
.prod .prow{display:flex; align-items:baseline; gap:8px; margin-top:6px}
.prod .pnew{font-size:19px; font-weight:900; color:var(--ink)}
.prod .pold{font-size:13px; color:var(--muted); text-decoration:line-through}
.prod .ptags{margin-top:6px; display:flex; gap:5px; flex-wrap:wrap}
.prod .ptag{font-size:9.5px; background:var(--offwhite); border:1px solid var(--line); padding:3px 7px; border-radius:11px; color:var(--muted); font-weight:600}
.guarantee{display:flex; align-items:center; justify-content:center; gap:8px; margin:14px 0; font-size:13px; font-weight:700; color:var(--ink2)}
.guarantee .g{color:var(--green); font-size:18px}
.cta{display:block; width:100%; padding:17px; text-align:center; background:var(--orange); color:#fff; font-weight:900;
  font-size:17px; border:none; border-radius:15px; cursor:pointer; font-family:inherit; letter-spacing:.3px;
  box-shadow:0 8px 22px rgba(242,138,26,.35); text-decoration:none; animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 8px 22px rgba(242,138,26,.35)} 50%{box-shadow:0 8px 30px rgba(242,138,26,.55)}}
.cta:active{transform:translateY(1px)}
.offer-reviews{margin-top:20px}
.offer-reviews .orh{text-align:center; font-size:16px; font-weight:800; margin-bottom:4px}
.offer-reviews .orstars{text-align:center; color:var(--gold-l); font-size:14px; margin-bottom:12px}
.rev{background:#fff; border:1px solid var(--line); border-radius:13px; padding:13px 14px; margin-bottom:9px}
.rev .rtop{display:flex; justify-content:space-between; align-items:center; margin-bottom:5px}
.rev .rstars{color:var(--gold-l); font-size:12px; letter-spacing:1px}
.rev .rname{font-size:11px; color:var(--muted); font-weight:600}
.rev .rtx{font-size:13px; line-height:1.5; color:var(--ink2); font-weight:500}
.disclaimer{font-size:10.5px; color:var(--muted); text-align:center; margin:14px 4px 0; line-height:1.55}
.softlink{display:block; text-align:center; color:var(--gold-dk); font-weight:800; font-size:15px; margin:20px auto 0; background:none; border:none; cursor:pointer; font-family:inherit}

/* dark theme variant of study-fact button on dark screens handled by JS btn styling */
.btn.dark-cta{background:var(--orange)}

/* ====== HOVER-ÁLLAPOTOK (csak egérrel — érintésen nem ragad be) ====== */
@media (hover:hover) and (pointer:fine){
  .opt:hover{border-color:var(--gold); background:#fffdf7; box-shadow:0 3px 10px rgba(201,162,38,.14); transform:translateY(-1px)}
  .opt.sel:hover{background:#fbf1d8}
  .btn.on:hover{background:var(--orange-d); box-shadow:0 8px 24px rgba(230,82,15,.4); transform:translateY(-1px)}
  .back:hover{border-color:var(--gold); color:var(--ink); background:#fffdf7}
  .cta:hover{background:var(--orange-d); transform:translateY(-2px); box-shadow:0 12px 30px rgba(230,82,15,.45)}
  .prod:hover{border-color:var(--gold)}
  .rev:hover{border-color:var(--gold-l)}
  a:hover{opacity:.85}
  input[type=text]:hover, input[type=email]:hover{border-color:#d3c6ab}
  .consent:hover{border-color:var(--gold)}
}
/* fókusz billentyűzethez (akadálymentesség) */
.btn:focus-visible, .cta:focus-visible, .opt:focus-visible, .back:focus-visible{outline:3px solid var(--gold); outline-offset:2px}

/* ========================================================================
   V4 ÚJDONSÁGOK — kabala, profil-kártya, tünet-chipek, állatorvos-blokk
   ======================================================================== */
/* animált kabala (finoman billegő paw-korong; nem tolakodó) */
.mascot{position:fixed; right:14px; bottom:calc(96px + env(safe-area-inset-bottom)); width:52px; height:52px; z-index:30; pointer-events:none;
  border-radius:50%; background:radial-gradient(circle at 35% 30%, #fff, var(--cream)); border:2px solid var(--gold);
  display:flex; align-items:center; justify-content:center; font-size:26px; box-shadow:0 6px 16px rgba(60,50,30,.18);
  animation:mascotBob 2.4s ease-in-out infinite}
.mascot.hide{display:none}
@keyframes mascotBob{0%,100%{transform:translateY(0) rotate(-4deg)} 50%{transform:translateY(-7px) rotate(4deg)}}
.mascot .spk{position:absolute; right:60px; bottom:12px; background:var(--ink); color:#fff; font-size:11px; font-weight:700;
  white-space:nowrap; padding:6px 10px; border-radius:12px; opacity:0; transform:translateX(8px); transition:all .3s; pointer-events:none}
.mascot .spk:after{content:""; position:absolute; right:-5px; bottom:9px; border-left:6px solid var(--ink); border-top:5px solid transparent; border-bottom:5px solid transparent}
.mascot.talk .spk{opacity:1; transform:translateX(0)}

/* eredmény: profil-kártya */
.profile{display:flex; gap:12px; align-items:center; background:#fff; border:1.5px solid var(--line); border-radius:16px; padding:14px; margin-top:10px}
.profile .pav{width:52px; height:52px; border-radius:50%; background:var(--cream); border:2px solid var(--gold); display:flex; align-items:center; justify-content:center; font-size:26px; flex:none}
.profile .pinfo b{font-size:16px; display:block; line-height:1.2}
.profile .pmeta{display:flex; gap:6px; flex-wrap:wrap; margin-top:6px}
.profile .pmeta span{font-size:11px; background:var(--offwhite); border:1px solid var(--line); border-radius:10px; padding:3px 9px; color:var(--ink2); font-weight:600}

/* tünet-chipek (a válaszok visszatükrözve) */
.chips{display:flex; gap:7px; flex-wrap:wrap; margin-top:12px}
.chips .chip{font-size:12px; font-weight:600; background:#fdf6e6; border:1px solid var(--gold); color:var(--gold-dk);
  border-radius:20px; padding:6px 12px; opacity:0; transform:translateY(6px); animation:chipIn .4s ease forwards}
.chips-label{font-size:11px; letter-spacing:1.2px; text-transform:uppercase; color:var(--muted); font-weight:700; margin:16px 0 0}
@keyframes chipIn{to{opacity:1; transform:translateY(0)}}

/* állatorvos-tekintély blokk */
.vetblock{margin-top:16px; background:linear-gradient(135deg,#1c1a16,#2a2620); color:#fff; border-radius:16px; padding:18px 16px; text-align:center}
.vetblock .vlabel{font-size:10.5px; letter-spacing:1.5px; text-transform:uppercase; color:var(--gold-l); font-weight:800}
.vetblock .vh{font-size:16px; font-weight:800; margin:8px 0 6px; line-height:1.35}
.vetblock .vp{font-size:12.5px; color:#c9c1b2; line-height:1.55; font-weight:500; margin:0}
.vetblock .vbadges{display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-top:12px}
.vetblock .vbadge{font-size:10px; background:#3a352c; border:1px solid #4a4436; color:var(--beige); border-radius:12px; padding:5px 10px; font-weight:600}

/* count-up szám (stabil szélesség, hogy ne ugráljon) */
.countup{font-variant-numeric:tabular-nums}