/* narrative.css — a brief szerinti új narratív szakaszok rétege. Csak layout és keret; a színek/tipó a colors_and_type.css tokenjeiből. */
.nr-img{position:relative;overflow:hidden;background:var(--ink-900);border:1px solid var(--line-strong);aspect-ratio:var(--nr-ar,16/9)}
.nr-img img{width:100%;height:100%;display:block;object-fit:cover;object-position:var(--nr-pos,50% 50%);filter:saturate(.9) contrast(1.03) brightness(.98)}
.nr-img::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(to top,rgba(16,18,23,.42),transparent 58%)}
.nr-img.plain::after{display:none}
.nr-cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:clamp(14px,2vw,26px);display:flex;flex-direction:column;gap:7px}
.nr-cap .k{font-family:var(--font-sans);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-bright)}
.nr-cap .t{font-family:var(--font-display);font-weight:300;font-size:clamp(1.15rem,2vw,1.7rem);line-height:1.25;color:var(--bone-100);margin:0;text-wrap:pretty}
.nr-grid{display:grid;gap:clamp(14px,1.6vw,24px)}
.nr-reasons{grid-template-columns:repeat(3,1fr);grid-auto-flow:dense}
.nr-reasons>div{min-width:0}
.nr-c1,.nr-c3{grid-column:span 2}
.nr-c5{grid-column:span 3}
.nr-pair{grid-template-columns:1fr 1fr}
.nr-hero{position:relative;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);align-items:stretch;border:1px solid var(--line-strong);background:var(--bg-panel)}
.nr-hero-txt{position:relative;display:flex;flex-direction:column;justify-content:center;gap:clamp(14px,1.5vw,22px);padding:clamp(26px,3.4vw,56px)}
.nr-hero-img{position:relative;order:-1;min-height:clamp(300px,46vh,560px)}
.nr-hero-img img{width:100%;height:100%;display:block;object-fit:cover;object-position:62% 50%;filter:saturate(.9) contrast(1.03)}
.nr-hero-bp{position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(198,168,104,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(198,168,104,.13) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:linear-gradient(270deg,#000,transparent 62%);mask-image:linear-gradient(270deg,#000,transparent 62%)}
.nr-sil{display:grid;grid-template-columns:repeat(6,1fr);gap:0;border-top:1px solid rgba(198,168,104,.28);border-bottom:1px solid rgba(198,168,104,.28)}
.nr-sil-cell{position:relative;container-type:inline-size;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:12px;padding:clamp(20px,2.2vw,30px) 6px clamp(16px,1.8vw,24px);border-left:1px solid rgba(198,168,104,.16);background:transparent;cursor:pointer;text-align:center;transition:background 380ms var(--ease-out,ease)}
.nr-sil-cell:first-child{border-left:none}
.nr-sil-cell:hover,.nr-sil-cell:focus-visible{background:rgba(198,168,104,.05)}
.nr-sil-shot{flex:none;display:flex;align-items:flex-end;justify-content:center;width:100%;height:min(190px,86cqw);padding-bottom:10px;border-bottom:1px solid rgba(198,168,104,.3);transition:transform 520ms var(--ease-out,ease)}
.nr-sil-cell:hover .nr-sil-shot,.nr-sil-cell:focus-visible .nr-sil-shot{transform:translateY(-6px)}
.nr-sil-cell img{height:100%;width:auto;max-width:100%;object-fit:contain;object-position:bottom;filter:saturate(.92) drop-shadow(0 0 16px rgba(198,168,104,.3)) drop-shadow(0 0 44px rgba(198,168,104,.16));opacity:1;transition:filter 600ms var(--ease-out,ease)}
.nr-sil-cell:hover img,.nr-sil-cell:focus-visible img{filter:saturate(1) drop-shadow(0 0 20px rgba(198,168,104,.5)) drop-shadow(0 0 60px rgba(198,168,104,.26))}
.nr-sil-meta{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:8px;width:100%;transition:transform 420ms var(--ease-out,ease)}
.nr-sil-cell:hover .nr-sil-meta,.nr-sil-cell:focus-visible .nr-sil-meta{transform:translateY(-2px)}
.nr-sil-bar{width:26px;height:1px;background:var(--accent)}
.nr-sil-name{font-family:var(--font-sans);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:rgba(233,227,214,.6);line-height:1.35}
.nr-sil-wish{font-family:var(--font-display);font-style:italic;font-weight:300;font-size:clamp(1.05rem,1.5vw,1.5rem);line-height:1.25;color:var(--gold-bright);text-wrap:pretty}
.nr-sil-cell i{position:absolute;left:50%;bottom:0;width:1px;height:7px;margin-left:-.5px;background:rgba(198,168,104,.5);transition:height 380ms var(--ease-out,ease),background 380ms ease}
.nr-sil-cell:hover i,.nr-sil-cell:focus-visible i{height:14px;background:var(--accent)}
.ps-strip{grid-template-columns:repeat(auto-fit,minmax(184px,1fr))!important}
.ps-strip-item .ps-strip-name{font-size:9.5px;letter-spacing:.2em;color:var(--fg-3)}
.ps-strip-item.on .ps-strip-name{color:var(--fg-2)}
.nr-wish{font-family:var(--font-display);font-style:italic;font-weight:300;font-size:clamp(1.15rem,1.6vw,1.55rem);line-height:1.24;color:var(--fg-bright);text-align:center;text-wrap:pretty;padding:2px 0 4px;transition:color 280ms ease}
.ps-strip-item:hover:not(:disabled) .nr-wish{color:var(--gold-bright)}
.ps-strip-item.on .nr-wish{color:var(--accent)}
.nr-slip-wrap{animation:psFadeUp 700ms var(--ease-out,ease) both}
.nr-slip{position:relative;background:var(--bone-100);color:var(--ink-900);padding:clamp(26px,3vw,40px) clamp(22px,2.6vw,36px);display:flex;flex-direction:column;gap:14px;box-shadow:0 24px 60px -30px rgba(0,0,0,.75)}
.nr-slip::before,.nr-slip::after{content:"";position:absolute;left:clamp(14px,1.6vw,22px);right:clamp(14px,1.6vw,22px);height:1px;background:rgba(16,18,23,.16)}
.nr-slip::before{top:clamp(10px,1.2vw,15px)}
.nr-slip::after{bottom:clamp(10px,1.2vw,15px)}
.nr-slip-k{font-family:var(--font-sans);font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:rgba(16,18,23,.5);margin-top:6px}
.nr-slip-q{font-family:var(--font-sans);font-size:11px;letter-spacing:.06em;color:rgba(16,18,23,.6);margin:0}
.nr-slip-f{font-family:var(--font-display);font-weight:300;font-size:clamp(1.25rem,2.1vw,1.7rem);line-height:1.32;color:var(--ink-900);margin:0;text-wrap:pretty}
.nr-slip-rule{width:34px;height:1px;background:var(--gold-deep)}
.nr-slip-e{font-family:var(--font-sans);font-size:.98rem;line-height:1.6;color:rgba(16,18,23,.78);margin:0;text-wrap:pretty}
.nr-slip-t{font-family:var(--font-sans);font-size:9.5px;letter-spacing:.22em;color:rgba(16,18,23,.38);margin-bottom:6px}
.nr-card{position:relative;display:flex;flex-direction:column;gap:12px;min-height:190px;padding:clamp(20px,2vw,30px);background:var(--bg-panel);border:1px solid var(--line-strong);cursor:pointer;text-align:left;transition:border-color 280ms var(--ease,ease),transform 300ms var(--ease-out,ease),background 280ms ease}
.nr-card:hover{border-color:var(--line-gold);transform:translateY(-6px)}
.nr-card.on{border-color:var(--accent);background:rgba(198,168,104,.07)}
.nr-card .n{font-family:var(--font-sans);font-size:10.5px;letter-spacing:.2em;color:var(--fg-3)}
.nr-card.on .n{color:var(--accent)}
.nr-card .h{font-family:var(--font-display);font-weight:300;font-size:clamp(1.25rem,1.7vw,1.6rem);line-height:1.2;color:var(--fg-bright);margin:0}
.nr-card .d{font-family:var(--font-sans);font-size:.95rem;line-height:1.55;color:var(--fg-2);margin:0}
.nr-card .go{margin-top:auto;font-family:var(--font-sans);font-size:10.5px;letter-spacing:.18em;color:var(--fg-3);transition:color 280ms ease}
.nr-card:hover .go,.nr-card.on .go{color:var(--accent)}
.nr-opt{font-family:var(--font-sans);font-size:.94rem;letter-spacing:.02em;line-height:1.4;color:var(--fg-2);background:transparent;border:1px solid var(--line-strong);padding:15px 18px;min-height:48px;cursor:pointer;text-align:left;transition:border-color 280ms ease,color 280ms ease,background 280ms ease}
.nr-opt:hover{border-color:var(--line-gold);color:var(--fg-bright)}
.nr-opt.on{border-color:var(--accent);background:rgba(198,168,104,.09);color:var(--fg-bright)}
.nr-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.nr-quiet{font-family:var(--font-sans);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-3);background:transparent;border:none;border-bottom:1px solid var(--line-strong);padding:0 0 5px;cursor:pointer;transition:color 280ms ease,border-color 280ms ease}
.nr-quiet:hover{color:var(--accent);border-color:var(--line-gold)}
.nr-chip{display:inline-flex;align-items:center;gap:12px;font-family:var(--font-sans);font-size:10.5px;letter-spacing:.16em;color:var(--accent);border:1px solid var(--line-gold);background:rgba(198,168,104,.07);padding:8px 12px}
.nr-chip button{font:inherit;color:var(--fg-3);background:transparent;border:none;cursor:pointer;letter-spacing:.1em}
.nr-chip button:hover{color:var(--accent)}
.nr-roles{width:100%;border-collapse:collapse;font-family:var(--font-sans)}
.nr-roles td{border-top:1px solid var(--line);padding:13px 10px;font-size:.92rem;line-height:1.5;color:var(--fg-2);vertical-align:top}
.nr-roles td:first-child{white-space:nowrap;color:var(--fg-bright);letter-spacing:.04em}
.nr-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:13px}
.nr-list li{position:relative;padding-left:22px;font-family:var(--font-sans);font-size:1rem;line-height:1.55;color:var(--fg-2)}
.nr-list li::before{content:"＋";position:absolute;left:0;top:1px;font-size:.72rem;color:var(--accent)}
.nr-list.no li::before{content:"—";color:var(--fg-faint)}
.nr-list.no li{color:var(--fg-3)}
.nr-echo{border:1px solid var(--line-gold);background:rgba(198,168,104,.07);padding:clamp(18px,2vw,26px);animation:psFadeUp 700ms var(--ease-out,ease) both}
button:focus-visible,a:focus-visible{outline:1px solid var(--accent);outline-offset:3px}
@media (max-width:1024px){.nr-sil{grid-template-columns:repeat(3,1fr)}.nr-sil-cell:nth-child(4){border-left:none}.nr-reasons{grid-template-columns:1fr 1fr}.nr-c5{grid-column:span 2}.nr-c1{order:1}.nr-c2{order:2}.nr-c4{order:3}.nr-c3{order:4}.nr-c5{order:5}.nr-sil-cell{padding:clamp(14px,1.8vw,24px) 4px clamp(12px,1.4vw,18px)}}
@media (max-width:1080px){.nr-hero{grid-template-columns:1fr}.nr-hero-img{min-height:0;aspect-ratio:16/9}.nr-hero-img img{object-position:46% 52%}.nr-hero-bp{-webkit-mask-image:linear-gradient(0deg,#000,transparent 70%);mask-image:linear-gradient(0deg,#000,transparent 70%)}}
@media (max-width:900px){.ps-label{white-space:normal!important;flex-wrap:wrap;max-width:100%}.ps-label>span:first-child{flex:0 0 18px}}
@media (max-width:820px){.nr-hero-img{aspect-ratio:4/5}.nr-hero-img img{object-position:40% 46%}.nr-pair{grid-template-columns:1fr}.nr-img{aspect-ratio:var(--nr-ar-m,var(--nr-ar,16/9))}.nr-img img{object-position:var(--nr-pos-m,var(--nr-pos,50% 50%))}}
@media (max-width:640px){.nr-reasons{grid-template-columns:1fr}.nr-c1,.nr-c3,.nr-c5{grid-column:span 1}.nr-sil{grid-template-columns:repeat(3,1fr)}.nr-sil-cell:nth-child(4){border-left:none}.nr-sil-cell{padding:16px 4px 12px}.nr-sil{grid-template-columns:repeat(3,1fr)}.nr-opts{grid-template-columns:1fr}.nr-roles td{display:block;padding:6px 0}.nr-roles td:first-child{padding-top:14px;border-top:1px solid var(--line)}.nr-roles td+td{border-top:none}}
@media (hover:none){.nr-sil-cell{background:rgba(198,168,104,.03)}}
@media (prefers-reduced-motion:reduce){.nr-card:hover{transform:none}.nr-echo,.nr-slip-wrap{animation:none}.nr-sil-cell:hover .nr-sil-shot,.nr-sil-cell:hover .nr-sil-meta{transform:none}}
/* Hero — a termékek a hősök: nagy termékfotó sötét háttéren, a szöveg a kép saját üres bal oldalán. */
.nr-hero-photo{position:relative;display:flex;align-items:center;min-height:clamp(560px,86vh,880px);background-image:url('assets/hero-products.jpg');background-size:cover;background-position:74% center;background-repeat:no-repeat}
.nr-hero-photo::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,9,7,.9) 0,rgba(10,9,7,.82) 600px,rgba(10,9,7,.42) 880px,rgba(10,9,7,.06) 1120px,transparent 1280px)}
.nr-hero-copy{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-start;gap:clamp(14px,1.6vw,22px);max-width:680px;padding:clamp(40px,5vw,86px) var(--gutter);text-align:left}
.nr-hero-h{margin:0;font-family:var(--font-display);font-weight:300;font-size:clamp(2rem,4.6vw,3.7rem);line-height:1.12;color:rgba(233,227,214,.8);text-wrap:pretty}
.nr-hero-h span{color:var(--bone-100)}
.nr-hero-pull{margin:0;font-family:var(--font-display);font-style:italic;font-weight:300;font-size:clamp(1.3rem,2.6vw,2.15rem);line-height:1.28;color:var(--gold-bright);text-wrap:pretty}
.nr-hero-calm{margin:0;max-width:560px;font-family:var(--font-sans);font-size:1rem;line-height:1.65;color:rgba(233,227,214,.8);text-wrap:pretty}
.nr-count{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 16px;width:100%;padding-top:clamp(14px,1.6vw,20px);border-top:1px solid rgba(198,168,104,.32)}
.nr-count-k{width:100%;margin-bottom:4px;font-family:var(--font-sans);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-bright)}
.nr-count-v{font-family:var(--font-display);font-weight:300;font-size:clamp(1.5rem,2.8vw,2.3rem);line-height:1;color:var(--bone-100);font-variant-numeric:tabular-nums}
.nr-count-u{margin-left:-10px;font-family:var(--font-sans);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:rgba(233,227,214,.72)}
.nr-count-clock{color:var(--gold-bright);letter-spacing:.02em}
.nr-hero-act{margin-top:6px}
.nr-sil-name{color:rgba(233,227,214,.72)!important;font-size:9.5px!important;letter-spacing:.18em!important}
.nr-sil-tag{font-family:var(--font-sans);font-size:10.5px;letter-spacing:.09em;line-height:1.45;color:rgba(233,227,214,.66);text-wrap:pretty;transition:color 320ms ease}
.nr-sil-cell:hover .nr-sil-tag,.nr-sil-cell:focus-visible .nr-sil-tag{color:var(--gold-bright)}
/* Termékszűrő — a régi kapu helyett, a termékszakaszon belül. */
.nr-lens{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 var(--sp-6)}
.nr-lens-b{font-family:var(--font-sans);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-3);background:transparent;border:1px solid var(--line-strong);padding:10px 16px;cursor:pointer;transition:border-color 280ms ease,color 280ms ease,background 280ms ease}
.nr-lens-b:hover{border-color:var(--line-gold);color:var(--gold-deep)}
.nr-lens-b.on{border-color:var(--accent);color:var(--gold-deep);background:rgba(198,168,104,.09)}
/* Mélységi réteg — zárva marad, amíg a látogató ki nem nyitja. */
.nr-depth-b{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:clamp(14px,2vw,26px);width:100%;padding:clamp(18px,2vw,26px);background:var(--bg-panel);border:1px solid var(--line-strong);cursor:pointer;text-align:left;transition:border-color 280ms ease,background 280ms ease}
.nr-depth-b:hover{border-color:var(--line-gold)}
.nr-depth-b.on{border-color:var(--accent);background:rgba(198,168,104,.06)}
.nr-depth-b .k{font-family:var(--font-sans);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);white-space:nowrap}
.nr-depth-b .t{font-family:var(--font-display);font-weight:300;font-size:clamp(1.02rem,1.5vw,1.35rem);line-height:1.3;color:var(--fg-bright);text-wrap:pretty}
.nr-depth-b .c{font-family:var(--font-sans);font-size:1.3rem;line-height:1;color:var(--accent)}
.nr-depth-body{animation:psFadeUp 620ms var(--ease-out,ease) both}
@media (max-width:1150px){.nr-hero-photo{min-height:clamp(600px,88vh,820px);align-items:flex-end;background-position:64% 28%}.nr-hero-photo::before{background:linear-gradient(0deg,rgba(10,9,7,.98) 0%,rgba(10,9,7,.95) 42%,rgba(10,9,7,.66) 64%,rgba(10,9,7,.28) 83%,rgba(10,9,7,.1) 100%)}.nr-hero-copy{max-width:100%;padding-bottom:clamp(32px,6vw,54px)}}
@media (max-width:900px){.nr-depth-b{grid-template-columns:1fr auto;gap:10px 14px}.nr-depth-b .k{grid-column:1/-1}}
@media (max-width:640px){.nr-hero-h{font-size:clamp(1.6rem,7.4vw,2.2rem)}.nr-hero-pull{font-size:clamp(1.1rem,5.2vw,1.45rem)}.nr-count-v{font-size:clamp(1.3rem,6vw,1.7rem)}}
@media (prefers-reduced-motion:reduce){.nr-depth-body{animation:none}}
/* A LÁNC — termék → bizalom → közösség → jövedelem. Görgetésre húzódik ki az aranyvonal. */
.nr-chain{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:0;padding-top:38px}
.nr-chain-line{position:absolute;left:5px;right:5px;top:5px;height:1px;background:rgba(198,168,104,.22);overflow:hidden}
.nr-chain-line i{display:block;width:100%;height:100%;background:var(--accent);transform-origin:left center;transform:scaleX(0);transition:transform 2200ms var(--ease-out,ease) 180ms}
.nr-chain.on .nr-chain-line i{transform:scaleX(1)}
.nr-chain-step{position:relative;display:flex;flex-direction:column;gap:10px;padding:0 clamp(16px,2vw,34px) 0 0;opacity:0;transform:translateY(18px);transition:opacity 760ms var(--ease-out,ease) var(--d,0ms),transform 760ms var(--ease-out,ease) var(--d,0ms)}
.nr-chain.on .nr-chain-step{opacity:1;transform:none}
.nr-chain-node{position:absolute;left:0;top:-38px;width:11px;height:11px;border-radius:50%;background:var(--ink-900);border:1px solid var(--accent);box-shadow:0 0 0 4px rgba(198,168,104,.14)}
.nr-chain-k{font-family:var(--font-sans);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-bright)}
.nr-chain-t{margin:0;font-family:var(--font-display);font-weight:300;font-size:clamp(1.15rem,1.8vw,1.62rem);line-height:1.26;color:var(--bone-100);text-wrap:pretty}
.nr-chain-d{margin:0;font-family:var(--font-sans);font-size:.9rem;line-height:1.6;color:rgba(233,227,214,.7);text-wrap:pretty}
@media (max-width:900px){.nr-chain{grid-template-columns:1fr;gap:36px;padding:0 0 0 34px}.nr-chain-line{left:5px;right:auto;top:6px;bottom:6px;width:1px;height:auto}.nr-chain-line i{transform-origin:top center;transform:scaleY(0);transition:transform 1800ms var(--ease-out,ease) 180ms}.nr-chain.on .nr-chain-line i{transform:scaleY(1)}.nr-chain-node{left:-34px;top:5px}.nr-chain-step{padding-right:0}}
@media (prefers-reduced-motion:reduce){.nr-chain-step{opacity:1;transform:none;transition:none}.nr-chain-line i{transform:none!important;transition:none}}