/* v54.2 local preview: sharp existing finale, subtle 2D movement, no orbit video. */
.v54-toggle{display:none}
.v54-orbit,.v54-motion-toggle{display:none}
@media(min-width:1024px){
 .track{height:100vh!important;height:100svh!important}
 .stage{position:relative!important}
 #nf-hero,#nf-veil{transition:opacity .55s ease,transform .7s ease}
 .v54-orbit{display:block;position:absolute;z-index:3;left:42%;right:18px;top:calc(var(--hdr) + 20px);bottom:80px;opacity:0;pointer-events:none;transition:opacity 1s ease,left 1.3s cubic-bezier(.2,.7,.2,1),bottom 1.3s ease;background:#120822}
 .v54-orbit video{width:100%;height:100%;object-fit:contain;display:block}
 .v54-orbit-ready .v54-orbit{opacity:1}
 .v54-orbit-ready .v52-hint{display:none!important}
 .v54-idle #nf-hero{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(8px)}
 .v54-idle #nf-veil{opacity:0}
 .v54-idle .v54-orbit{left:18px;bottom:18px}
 .v54-motion-toggle{position:absolute;z-index:8;right:32px;top:calc(var(--hdr) + 32px);padding:9px 14px;background:#120822db;color:#fff;border:1px solid #77c8d0;border-radius:8px;font:600 13px Arial,sans-serif;cursor:pointer}
 .v54-orbit-ready .v54-motion-toggle{display:block}
 .v54-motion-toggle:focus-visible,.v54-toggle:focus-visible{outline:3px solid #00b8d9;outline-offset:4px}
 #nf-main>.v54-section{padding-top:18px!important;padding-bottom:18px!important;min-height:0!important;scroll-margin-top:85px}
 .v54-toggle{display:flex;align-items:center;justify-content:space-between;gap:22px;width:100%;border:0;background:transparent;color:inherit;padding:16px 0;text-align:left;font:700 clamp(22px,2.1vw,30px)/1.2 var(--f);cursor:pointer}
 .v54-toggle::after{content:'+';font-size:32px;color:#00b8d9;flex:none}
 .v54-toggle[aria-expanded=true]::after{content:'−'}
 .v54-panel[hidden]{display:none!important}
 .v54-panel{padding:18px 0 32px}
 .v54-panel .mc-head{display:none!important}
 .v54-panel .mo-up,.v54-panel .mo-l,.v54-panel .mo-r,.v54-panel .mo-k,.v54-panel .mo-card{opacity:1!important;transform:none!important}
 #kapcsolat{padding-top:48px;padding-bottom:56px;scroll-margin-top:85px}
 .nf-sec .bp-svg{pointer-events:none}
}
@media(max-width:1023px){
 #nf-hero h1>span{width:fit-content;max-width:100%;padding:7px 10px!important;border-left:2px solid #83eaf6;background:rgba(12,8,26,.88);color:#a9f3ff!important;text-shadow:0 1px 3px #000;box-decoration-break:clone;-webkit-box-decoration-break:clone}
 .v52-hint{display:none!important}
}
@media(hover:none),(pointer:coarse){.v52-hint{display:none!important}}
@media(prefers-reduced-motion:reduce){
 .v54-orbit,.v54-motion-toggle{display:none!important}
 #nf-hero,#nf-veil,.v54-orbit{transition:none!important;transform:none!important}
 .v54-idle #nf-hero{opacity:1!important;visibility:visible!important}
}

/* v54.1: polished compact disclosure units; no draft-video overlay. */
@media(min-width:1024px){
 .stage #gl,.stage #neon{transition:left 1.3s cubic-bezier(.2,.7,.2,1)}
 .v54-idle .stage #gl,.v54-idle .stage #neon{left:0!important}
 #nf-static{transition:left 1.3s ease}.v54-idle #nf-static{left:0}
 #nf-main>.v54-section{padding-top:8px!important;padding-bottom:8px!important;background:#120d20!important}
 .v54-section>.nf-w{display:block!important}
 .v54-toggle{border:1px solid #3e334f;border-radius:12px;padding:19px 24px;background:linear-gradient(120deg,#20172e,#181122);color:#f6f2fc;gap:18px;min-height:100px;box-shadow:0 6px 20px #00000017}
 .v54-toggle:hover{background:#2b203b;border-color:#65c4d5}
 .v54-toggle[aria-expanded=true]{border-color:#65c4d5;background:#251a34;border-bottom-left-radius:0;border-bottom-right-radius:0}
 .v54-toggle::after{content:none}
 .v54-title{flex:1;min-width:0;display:grid;gap:7px}
 .v54-title strong{font:700 20px/1.2 var(--f)}
 .v54-summary{color:#c6bfd3;font:400 15px/1.4 var(--f)}
 .v54-action{flex:none;font:700 13px/1.2 var(--f);color:#a2edfa;border:1px solid #55717d;border-radius:6px;padding:9px 12px}
 .v54-chevron{font:700 25px/1 Arial;color:#a2edfa;transition:transform .2s ease}
 .v54-toggle[aria-expanded=true] .v54-chevron{transform:rotate(180deg)}
 .v54-panel{padding:30px 26px 34px;border:1px solid #3e334f;border-top:0;border-radius:0 0 12px 12px;background:#181122}
 .v54-section>.bp-svg,#kapcsolat>.bp-svg,.v54-section .nf49-idx,#kapcsolat .nf49-idx{display:none!important}
 .v54-section::before{display:none!important}
 #rolunk{background:#120d20!important;color:#f6f2fc!important}
 #rolunk .nf-kick,#rolunk .v50-pf figcaption,#rolunk .v50-sig small{color:#9ce4ef!important}
 #rolunk h2,#rolunk .v50-lead1,#rolunk .nf-faq summary{color:#f6f2fc!important}
 #rolunk .v50-intro p,#rolunk .nf-faq .a{color:#d0c9dc!important}
 #rolunk .nf-faq details{border-color:#4a3c5b!important;background:transparent}
 #rolunk .v50-sig img{background:#f7f5f0;border-radius:6px;padding:8px 12px;box-sizing:content-box;max-width:calc(100% - 24px)}
 #rolunk .v54-panel{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);gap:32px}
 #rolunk .v54-panel[hidden]{display:none!important}
 #kapcsolat{padding-top:38px!important;padding-bottom:44px!important}
}
@media(prefers-reduced-motion:reduce){.stage #gl,.stage #neon,#nf-static,.v54-chevron{transition:none!important}}

/* v54.2: small native-browser 2D movement of the existing painted finale. */
@media(min-width:1024px){
 .stage #gl,.stage #neon,#nf-static{transform:scale(1.05);transform-origin:50% 50%;will-change:transform}
}
@media(max-width:1023px){.stage #gl,.stage #neon,#nf-static{transform:scale(1.025)}}
@media(prefers-reduced-motion:reduce){.stage #gl,.stage #neon,#nf-static{transform:none!important;will-change:auto}}

.v54-build-complete .v52-hint{display:none!important}

/* v54.3 premium disclosure treatment and authentic transparent cyan signature. */
#rolunk .v50-sig img{background:transparent!important;padding:0!important;border:0!important;box-shadow:none!important;filter:none!important;width:min(280px,100%);height:auto!important;max-width:100%!important}
.v543-tilt[hidden],.v543-preview-notice[hidden]{display:none!important}
.v543-tilt{position:absolute;right:14px;top:calc(var(--hdr) + 54px);z-index:10;padding:8px 11px;border:1px solid #56828e;border-radius:7px;background:#181223e8;color:#c2f2fb;font:600 12px/1.3 Arial,sans-serif;cursor:pointer}
.v543-tilt:disabled{cursor:default;color:#c6c5d1;border-color:#484551}
.v543-sensor-status{position:absolute;z-index:10;right:14px;top:calc(var(--hdr) + 95px);max-width:230px;color:#d5e5e9;font:12px/1.35 Arial,sans-serif}
.v543-preview-notice{position:absolute;z-index:12;left:14px;bottom:14px;max-width:min(430px,calc(100% - 28px));padding:9px 12px;border:1px solid #55737f;border-radius:8px;background:#161220eb;color:#e4ecf2;font:12px/1.4 Arial,sans-serif}
.v543-tilt:focus-visible{outline:3px solid #8be6f4;outline-offset:3px}
@media(min-width:1024px){
 #nf-main>.v54-section{padding-top:10px!important;padding-bottom:10px!important}
 .v54-toggle{display:grid;grid-template-columns:36px minmax(0,1fr) auto 30px;gap:20px;min-height:122px;padding:25px 28px;border:1px solid #41364e;border-radius:14px;background:radial-gradient(ellipse at 0 0,#16303c44,transparent 58%),linear-gradient(120deg,#241b30,#171120);box-shadow:0 9px 28px #00000020;text-align:left;position:relative;transition:border-color .2s,background-color .2s,box-shadow .2s}
 .v54-toggle:hover{border-color:#68828c;box-shadow:0 10px 32px #00000038}
 .v543-index{font:500 12px/1 var(--m);color:#7eb5c2;align-self:start;padding-top:6px}
 .v54-title{gap:9px}.v54-title strong{font:650 clamp(20px,1.8vw,25px)/1.18 var(--f);letter-spacing:-.015em}
 .v54-summary{font:400 14px/1.45 var(--f);color:#b9b3c7;max-width:58ch}
 .v54-action{padding:9px 13px;border:1px solid #4f6671;background:#19333e40;color:#b1e9f3;font-size:12px;letter-spacing:.02em;border-radius:7px}
 .v54-chevron{border:1px solid #4b6572;border-radius:50%;width:28px;height:28px;display:grid;place-items:center;font-size:19px;color:#a8dfeb;line-height:1;padding-bottom:4px}
 .v54-toggle[aria-expanded=true]{background:linear-gradient(120deg,#252036,#19222d);border-color:#6aa9b6;border-bottom-color:#ffffff12}
 .v543-open .v543-index{color:#b4eff8}
 .v54-panel{border-color:#6aa9b6;padding:32px 32px 38px;border-radius:0 0 14px 14px;background:linear-gradient(140deg,#1d1729,#15111e)}
 .v54-toggle:focus-visible{outline:2px solid #a9e7f1;outline-offset:4px;box-shadow:0 0 0 6px #16313a55}
}
@media(prefers-reduced-motion:reduce){.stage #gl,.stage #neon,#nf-static{transform:none!important}.v543-tilt{display:none!important}.v54-toggle{transition:none!important}}

#rolunk{background:#120d20!important;color:#f6f2fc!important}#rolunk h2,#rolunk .v50-lead1,#rolunk .nf-faq summary,#rolunk .mc-head{color:#f6f2fc!important}#rolunk .mc-head{background:transparent!important}#rolunk .nf-kick,#rolunk .v50-pf figcaption{color:#9ce4ef!important}#rolunk .v50-intro p,#rolunk .nf-faq .a{color:#d0c9dc!important}#rolunk .nf-faq details{background:transparent!important;border-color:#4a3c5b!important}#rolunk .mc-chev::before{border-color:#9ce4ef!important}

/* v54.4 audited fixes: contrast and heading semantics, no visual redesign. */
#rolunk .mc-sum{color:#D0C9DC!important}
@media(min-width:1024px){.v54-section>.nf-w>.v544-disclosure-heading{margin:0!important;padding:0!important;font:inherit!important;line-height:inherit!important;letter-spacing:normal!important;text-wrap:initial!important}}

/* ===== v54.6 (2026-11-09, local preview): quiet studio chapter after the hero =====
   Desktop accordion only (root.v546-acc is set by v54.js while the five disclosure cards exist, >=1024px).
   Mobile/tablet (<1024px) never gets .v546-acc, so none of this applies there. */
.v546-chapter{display:none}
@media(min-width:1024px){
 /* C) hero drawing-sheet frame + title block (logo, TÁRGY/FÁZIS) fades once the visitor scrolls toward the chapter */
 #nf49-sheet{transition:opacity .45s ease}
 .v546-past-hero #nf49-sheet{opacity:0}

 /* one continuous, faint studio grid behind the chapter opener and all five cards (fixed, so it never breaks between sections) */
 .v546-acc .v546-chapter,.v546-acc #nf-main>.v54-section{
  background-color:#110c1b!important;
  background-image:linear-gradient(rgba(150,220,235,.034) 1px,transparent 1px),linear-gradient(90deg,rgba(150,220,235,.034) 1px,transparent 1px)!important;
  background-size:48px 48px!important;background-attachment:fixed!important;background-position:0 0!important}
 .v546-acc #nf-main>.v54-section{padding-top:9px!important;padding-bottom:9px!important}
 .v546-acc #nf-main>#rolunk.v54-section{padding-bottom:clamp(64px,7vw,96px)!important}

 /* chapter opener: the "how we work" principles as the spine of the chapter */
 .v546-acc .v546-chapter{display:block;position:relative;z-index:10;padding:clamp(76px,8vw,116px) var(--gut) 30px}
 .v546-chapter-w{position:relative;max-width:1180px;margin:0 auto;padding-left:84px}
 .v546-chapter-w::before{content:'';position:absolute;left:40px;top:4px;width:11px;height:11px;border:1px solid rgba(0,184,217,.7);border-radius:50%;background:#110c1b}
 .v546-chapter-w::after{content:'';position:absolute;left:46px;top:17px;bottom:-30px;width:1px;background:linear-gradient(180deg,rgba(0,184,217,.55),rgba(0,184,217,.24))}
 .v546-chapter-k{margin:0 0 16px;font:500 12px/1.2 var(--m);letter-spacing:.18em;text-transform:uppercase;color:#7fc9d6}
 .v546-chapter-t{margin:0;font:600 clamp(28px,2.7vw,42px)/1.1 var(--f);letter-spacing:-.022em;color:#f5f2f9}
 .v546-chapter-l{margin:16px 0 0;max-width:40em;font:400 17px/1.6 var(--f);color:#aaa4b8}

 /* station rail: one hairline linking the five cards through the gaps between them */
 .v546-acc #nf-main>.v54-section>.nf-w{position:relative}
 .v546-acc #nf-main>.v54-section>.nf-w::before{content:'';position:absolute;z-index:-1;left:46px;top:-9px;bottom:-9px;width:1px;background:rgba(0,184,217,.24);pointer-events:none}
 .v546-acc #nf-main>#rolunk.v54-section>.nf-w::before{bottom:auto;height:9px}

 /* B) the disclosure heading is never width-capped (v48 "#eszkozok h2{max-width:15em}" squeezed card 04) */
 .v54-section>.nf-w>.v544-disclosure-heading{max-width:none!important;width:100%!important;text-wrap:initial!important}

 /* closed card: calm, precise studio panel */
 .v546-acc .v54-toggle{grid-template-columns:36px minmax(0,1fr) auto 36px;gap:0 22px;align-items:center;min-height:0;padding:24px 28px;
  border:1px solid rgba(170,215,230,.13);border-radius:10px;background:linear-gradient(180deg,#1a1426,#151020);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 18px 40px -30px rgba(0,0,0,.75);transition:border-color .25s ease,background .25s ease,box-shadow .25s ease}
 .v546-acc .v54-toggle:hover{border-color:rgba(0,184,217,.36);background:linear-gradient(180deg,#1d1729,#171222);box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 22px 44px -30px rgba(0,0,0,.85)}
 .v546-acc .v54-toggle:focus-visible{outline:2px solid #8fe3f0;outline-offset:3px;box-shadow:none}
 .v546-acc .v543-index{justify-self:center;align-self:center;width:30px;height:30px;padding:0;display:grid;place-items:center;border:1px solid rgba(0,184,217,.34);border-radius:50%;background:#120d1c;font:500 11px/1 var(--m);letter-spacing:.04em;color:#7fc0ce;transition:background .25s,color .25s,border-color .25s}
 .v546-acc .v54-title{display:grid;gap:6px;min-width:0}
 .v546-eyebrow{font:500 11px/1.2 var(--m);letter-spacing:.16em;text-transform:uppercase;color:#77bccb}
 .v546-acc .v54-title strong{font:600 clamp(19px,1.6vw,24px)/1.2 var(--f);letter-spacing:-.012em;color:#f5f2f9}
 .v546-acc .v54-summary{max-width:68ch;font:400 15px/1.5 var(--f);color:#a8a2b6}
 /* "Megnyitás / Bezárás" + chevron: a quiet instrument-style control instead of an admin pill */
 .v546-acc .v54-action{padding:0;border:0;border-radius:0;background:none;font:500 11px/1 var(--m);letter-spacing:.16em;text-transform:uppercase;color:#8fd3df;white-space:nowrap;transition:color .2s}
 .v546-acc .v54-chevron{position:relative;width:36px;height:36px;padding:0;border:1px solid rgba(0,184,217,.3);border-radius:50%;font-size:0;line-height:0;color:transparent;transition:transform .3s cubic-bezier(.2,.7,.2,1),border-color .2s,background .2s}
 .v546-acc .v54-chevron::before{content:'';position:absolute;left:50%;top:50%;width:7px;height:7px;border-right:1.5px solid #a8e6f0;border-bottom:1.5px solid #a8e6f0;transform:translate(-50%,-70%) rotate(45deg)}
 .v546-acc .v54-toggle:hover .v54-action{color:#d2f6fb}
 .v546-acc .v54-toggle:hover .v54-chevron{border-color:rgba(0,184,217,.7);background:rgba(0,184,217,.08)}
 .v546-acc .v54-toggle:hover .v543-index{border-color:rgba(0,184,217,.6);color:#bdeff7}

 /* open card: header and panel read as one panel, no nested frames */
 .v546-acc .v54-toggle[aria-expanded=true]{border-color:rgba(0,184,217,.42);border-bottom-color:rgba(255,255,255,.06);border-radius:10px 10px 0 0;background:linear-gradient(180deg,#1d1729,#181323)}
 .v546-acc .v543-open .v543-index{background:rgba(0,184,217,.14);border-color:rgba(0,184,217,.7);color:#d5f7fc}
 .v546-acc .v54-toggle[aria-expanded=true] .v54-chevron{border-color:rgba(0,184,217,.6)}
 .v546-acc .v54-panel{border:1px solid rgba(0,184,217,.42);border-top:0;border-radius:0 0 10px 10px;background:linear-gradient(180deg,#181323,#140f1d);padding:36px 36px 44px}
 /* never repeat the card title inside the open panel */
 .v546-acc .v54-panel .mc-head,.v546-acc .v54-panel>h2,.v546-acc .v54-panel>.nf-kick,.v546-acc .v54-panel>div>.nf-kick:first-child+h2{display:none!important}
 /* v48 Gantt line-art is positioned for the old open section; inside a panel it would overlap the header, so it is not used here */
 .v546-acc .v54-panel .tl-bp{display:none!important}
 .v546-acc .v54-panel .nf-lead{margin-top:0;max-width:44em;font-size:18px;line-height:1.6;color:#d6d0e0}
 .v546-acc #miertmi .v54-panel .v52-pipe{margin-top:36px;padding:28px 0 0;border:0;border-top:1px solid rgba(0,184,217,.2);border-radius:0;background:none;box-shadow:none}
 .v546-acc #menete .v54-panel .nf-steps{margin-top:4px;padding:0;border:0;border-radius:0;background:none;box-shadow:none}
 .v546-acc #eszkozok .v54-panel .tl-grid{margin-top:32px}
 .v546-acc #segitunk .v54-panel .nf-list{margin-top:0}
}
@media(min-width:1280px){.v546-acc .v54-panel{padding:40px 48px 52px 86px}}
@media(prefers-reduced-motion:reduce){#nf49-sheet,.v546-acc .v54-toggle,.v546-acc .v54-chevron,.v546-acc .v543-index,.v546-acc .v54-action{transition:none!important}}


/* ===== v54.7 (2026-11-09, local preview): the chapter belongs to the landing's night studio =====
   Desktop accordion only (root.v546-acc). Motion only with root.v547-fx (set by v54.js when prefers-reduced-motion is off). */
.v547-field,.v547-seam{display:none}
@media(min-width:1024px){
 /* one fixed field behind the opener and the five cards: hero-navy base, faint blueprint grid, a soft light that follows the pointer */
 .v546-acc .v547-field{display:block;position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;visibility:hidden;
  background:radial-gradient(120% 70% at 72% -12%,rgba(0,140,180,.13),transparent 62%),linear-gradient(180deg,#04061a 0%,#070a1f 48%,#0a0c22 100%)}
 .v546-acc.v547-field-on .v547-field{visibility:visible}
 .v547-grid{position:absolute;inset:-96px;will-change:transform;
  background-image:linear-gradient(rgba(140,210,232,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(140,210,232,.055) 1px,transparent 1px),
   linear-gradient(rgba(140,210,232,.024) 1px,transparent 1px),linear-gradient(90deg,rgba(140,210,232,.024) 1px,transparent 1px);
  background-size:240px 240px,240px 240px,48px 48px,48px 48px;background-position:-1px -1px;
  -webkit-mask-image:radial-gradient(120% 95% at 55% 30%,#000 30%,rgba(0,0,0,.35) 70%,transparent 100%);mask-image:radial-gradient(120% 95% at 55% 30%,#000 30%,rgba(0,0,0,.35) 70%,transparent 100%)}
 .v547-light{position:absolute;left:0;top:0;width:min(1100px,90vw);aspect-ratio:1;border-radius:50%;will-change:transform;
  transform:translate3d(calc(68vw - 50%),calc(18vh - 50%),0);
  background:radial-gradient(closest-side,rgba(0,184,217,.085),rgba(0,184,217,.035) 45%,transparent 100%)}

 /* the chapter and the five cards become transparent onto that field; the older per-section grids (44px band grid, 48px fixed grid) are retired here */
 html.v546-acc #nf-main>.v546-chapter,html.v546-acc #nf-main>.v54-section{background:transparent!important;background-image:none!important}
 html.v546-acc #nf-main>.v54-section.nf-band::before{display:none!important}
 html.v546-acc #nf-main>.v54-section{scroll-margin-top:calc(var(--hdr) + 18px)}

 /* water-light wash bleeding down from the hero, plus a hairline horizon that draws in when the chapter arrives */
 .v546-acc .v546-chapter::before{content:'';position:absolute;left:0;right:0;top:0;height:min(560px,70vh);pointer-events:none;z-index:0;
  background:radial-gradient(70% 100% at 64% 0,rgba(0,184,217,.11),transparent 70%),linear-gradient(180deg,#03051a 0%,rgba(3,5,26,0) 100%)}
 .v546-acc .v546-chapter::after{content:'';position:absolute;left:50%;top:0;width:min(1180px,88vw);height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(0,184,217,.5) 35%,rgba(160,236,248,.7) 60%,transparent);transform:translateX(-50%)}
 .v546-acc .v546-chapter-w{z-index:1}
 .v546-acc .v546-chapter-w::before{background:#060920}
 .v546-acc .v543-index{background:#080b20}
 /* cards: same navy family as the landing instead of a purple shift */
 .v546-acc .v54-toggle{background:linear-gradient(180deg,rgba(16,22,44,.78),rgba(10,14,32,.78));border-color:rgba(150,215,235,.13);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
 .v546-acc .v54-toggle:hover{background:linear-gradient(180deg,rgba(19,27,52,.86),rgba(12,17,37,.86))}
 .v546-acc .v54-toggle[aria-expanded=true]{background:linear-gradient(180deg,rgba(19,27,52,.9),rgba(14,19,40,.9))}
 .v546-acc .v54-panel{background:linear-gradient(180deg,rgba(14,19,40,.9),rgba(9,12,28,.92))}
 .v546-acc .v546-chapter-l,.v546-acc .v54-summary{color:#a9b3c6}

 /* the hero's lower edge melts into the chapter navy while the sticky stage leaves (opacity driven by scroll in v54.js) */
 .v546-acc .v547-seam{display:block;position:absolute;left:0;right:0;bottom:0;height:46vh;z-index:7;pointer-events:none;opacity:0;will-change:opacity;
  background:linear-gradient(180deg,rgba(4,6,26,0) 0%,rgba(4,6,26,.55) 45%,#04061a 100%)}

 /* entrance: opener lines and the five card headers rise in on a short stagger, expo-out (no bounce) */
 .v547-fx .v547-rise{opacity:0;transform:translate3d(0,22px,0);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform 1s cubic-bezier(.16,1,.3,1);transition-delay:var(--v547-d,0ms)}
 .v547-fx .v547-rise.v547-in{opacity:1;transform:none}
 .v547-fx .v546-chapter::after{transform:translateX(-50%) scaleX(0);transition:transform 1.4s cubic-bezier(.16,1,.3,1) .1s}
 .v547-fx .v546-chapter.v547-in::after{transform:translateX(-50%) scaleX(1)}
 .v547-fx .v546-chapter-w::after{transform:scaleY(0);transform-origin:top;transition:transform 1.2s cubic-bezier(.16,1,.3,1) .35s}
 .v547-fx .v546-chapter.v547-in .v546-chapter-w::after{transform:none}
 .v547-fx .v546-chapter-w::before{opacity:0;transition:opacity .6s ease .2s}
 .v547-fx .v546-chapter.v547-in .v546-chapter-w::before{opacity:1}
}
@media(prefers-reduced-motion:reduce){
 .v547-seam{display:none!important}
 .v547-grid,.v547-light{transform:none!important}
 .v547-light{left:68vw!important;top:18vh!important;translate:-50% -50%}
 .v547-rise{opacity:1!important;transform:none!important;transition:none!important}
 .v546-chapter::after,.v546-chapter-w::after,.v546-chapter-w::before{transition:none!important}
}


/* ===== v54.8 (2026-11-09, local preview): two seams washed out, Megnyitás as a floating pill button =====
   Desktop accordion only (html.v546-acc, >=1024px). Mobile/tablet never get .v546-acc, so nothing here applies there
   except the photo feather on #kapcsolat::after (mask only) and the static hero foot feather (desktop-only too). */
.v548-feather{display:none}
@media(min-width:1024px){
 /* root cause of both "slabs": html and body both paint #170B2E, and body's in-flow background is drawn ABOVE the fixed
    z-index:-1 v54.7 field, so the field never showed; the chapter and Rólunk sat on flat purple, Kapcsolat on another flat block.
    In accordion mode the page canvas becomes the field's navy and body is transparent, so everything shares one surface. */
 html.v546-acc{background:#05071b!important}
 html.v546-acc body{background:transparent!important}
 html.v546-acc .v547-field{visibility:visible;background:radial-gradient(120% 70% at 72% -12%,rgba(0,140,180,.12),transparent 62%),linear-gradient(180deg,#04061a 0%,#060920 48%,#080b21 100%)}

 /* A) hero -> chapter: longer, eased scroll seam (opacity driven in v54.js), a static foot feather under the HUD/veil (z 3), and no hairline */
 .v546-acc .v547-seam{height:68vh;background:linear-gradient(180deg,rgba(4,6,26,0) 0%,rgba(4,6,26,.06) 18%,rgba(4,6,26,.2) 36%,rgba(4,6,26,.44) 54%,rgba(4,6,26,.7) 70%,rgba(4,6,26,.9) 85%,#04061a 100%)}
 .v546-acc .v548-feather{display:block;position:absolute;left:0;right:0;bottom:0;height:12vh;z-index:3;pointer-events:none;
  background:linear-gradient(180deg,rgba(4,6,26,0) 0%,rgba(4,6,26,.16) 50%,rgba(4,6,26,.42) 100%)}
 .v546-acc .v546-chapter::after{display:none!important}
 .v546-acc .v546-chapter{padding-top:clamp(92px,9vw,132px)}
 .v546-acc .v546-chapter::before{height:min(760px,88vh);
  background:radial-gradient(64% 60% at 62% 0,rgba(0,150,190,.1),transparent 72%),
   linear-gradient(180deg,#04061a 0%,rgba(4,6,26,.9) 10%,rgba(4,6,26,.66) 26%,rgba(4,6,26,.38) 46%,rgba(4,6,26,.14) 70%,rgba(4,6,26,0) 100%)}
 .v546-acc .v546-chapter-w::before{background:#04061a}

 /* B) Rólunk -> Kapcsolat: same field under both, the contact photo is feathered on all four sides, a soft water-light glow bridges the join */
 html.v546-acc #nf-main>#rolunk.v54-section{padding-bottom:clamp(36px,4vw,56px)!important}
 html.v546-acc #kapcsolat{background:transparent!important;padding-top:clamp(84px,8vw,124px)!important;padding-bottom:clamp(64px,6vw,96px)!important}
 html.v546-acc #kapcsolat::before{content:'';position:absolute;left:0;right:0;top:0;height:70%;pointer-events:none;z-index:0;
  background:radial-gradient(48% 70% at 80% 26%,rgba(0,140,180,.1),transparent 72%),radial-gradient(70% 40% at 50% 0,rgba(4,6,26,.55),transparent 80%)}
 html.v546-acc #kapcsolat::after{width:54%;opacity:.3!important}
 /* the footer joins in the same navy instead of a purple block; its hairline stays */
 html.v546-acc #nf-foot{background:linear-gradient(180deg,#05071b,#04051a)!important;border-top-color:rgba(0,184,217,.12)}

 /* 2) Megnyitás / Bezárás: a small floating pill that lifts off the card */
 html.v546-acc .v54-toggle{grid-template-columns:36px minmax(0,1fr) auto;gap:0 28px}
 html.v546-acc .v54-chevron{display:none!important}
 .v548-fab{display:inline-flex;justify-self:end;align-self:center}
 .v548-fab-btn{position:relative;display:inline-flex;align-items:center;gap:11px;padding:6px 17px 6px 6px;border-radius:999px;overflow:hidden;
  border:1px solid rgba(0,184,217,.6);background:linear-gradient(180deg,rgba(20,46,70,.95),rgba(9,24,42,.95));color:#e9fbff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 12px 24px -12px rgba(0,184,217,.6),0 6px 14px -6px rgba(0,0,0,.7);
  transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s ease,border-color .2s ease,background .2s ease}
 .v548-fab-btn::after{content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(105deg,transparent 30%,rgba(190,245,255,.2) 50%,transparent 70%);transform:translateX(-130%)}
 .v548-fab-ico{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  background:radial-gradient(circle at 34% 28%,#7beaf8 0%,#00b8d9 52%,#0093b2 100%);color:#03131f;
  box-shadow:0 0 0 3px rgba(0,184,217,.14),0 0 16px rgba(0,184,217,.42)}
 .v548-fab-ico svg{display:block;width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.3;stroke-linecap:round;transition:transform .4s cubic-bezier(.2,.8,.2,1)}
 html.v546-acc .v548-fab .v54-action{padding:0;border:0;border-radius:0;background:none;font:650 14px/1 var(--f);letter-spacing:.005em;text-transform:none;color:#e9fbff;white-space:nowrap}
 @media(hover:hover){
  html.v546-acc .v54-toggle:hover .v548-fab-btn{transform:translate3d(0,-2px,0);border-color:rgba(130,232,247,.95);background:linear-gradient(180deg,rgba(22,62,88,.97),rgba(10,34,54,.97));
   box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 18px 32px -12px rgba(0,184,217,.8),0 8px 18px -8px rgba(0,0,0,.75)}
  html.v546-acc .v54-toggle:hover .v548-fab-btn::after{transform:translateX(130%);transition:transform .8s cubic-bezier(.2,.7,.2,1)}
  html.v546-acc .v54-toggle[aria-expanded=false]:hover .v548-fab-ico svg{transform:rotate(90deg)}
  html.v546-acc .v54-toggle:hover .v548-fab .v54-action{color:#fff}
 }
 html.v546-acc .v54-toggle:focus-visible .v548-fab-btn{border-color:#a9eef9;box-shadow:0 0 0 3px rgba(0,184,217,.3),0 12px 24px -12px rgba(0,184,217,.7)}
 html.v546-acc .v54-toggle:active .v548-fab-btn{transform:translate3d(0,0,0) scale(.97);transition-duration:.08s}
 /* open: the same pill becomes the close control (icon turns into a cross), calmer fill, still clearly a button */
 html.v546-acc .v54-toggle[aria-expanded=true] .v548-fab-ico svg{transform:rotate(45deg)}
 html.v546-acc .v54-toggle[aria-expanded=true] .v548-fab-btn{background:linear-gradient(180deg,rgba(12,30,48,.95),rgba(7,18,32,.95));border-color:rgba(0,184,217,.45);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 8px 18px -10px rgba(0,184,217,.45)}
 /* entrance: the pill arrives a beat after its card (card header rise is v54.7's .v547-rise) */
 .v547-fx .v547-rise .v548-fab{opacity:0;transform:translate3d(0,10px,0) scale(.86);transition:opacity .5s cubic-bezier(.16,1,.3,1),transform .75s cubic-bezier(.3,1.35,.6,1)}
 .v547-fx .v547-rise.v547-in .v548-fab{opacity:1;transform:none;transition-delay:calc(var(--v547-d,0ms) + 280ms)}
}
@media(min-width:1024px) and (max-width:1199px){
 html.v546-acc .v54-toggle{gap:0 18px}
 .v548-fab-btn{gap:8px;padding:5px 13px 5px 5px}
 .v548-fab-ico{width:26px;height:26px}
 html.v546-acc .v548-fab .v54-action{font-size:13px}
}
/* contact photo: feathered top and bottom too (was only feathered from the left), so it never starts on a hard horizontal edge */
#kapcsolat::after{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 55%),linear-gradient(180deg,transparent 0,rgba(0,0,0,.4) 16%,#000 40%,#000 74%,transparent 100%);-webkit-mask-composite:source-in;
 mask-image:linear-gradient(90deg,transparent 0,#000 55%),linear-gradient(180deg,transparent 0,rgba(0,0,0,.4) 16%,#000 40%,#000 74%,transparent 100%);mask-composite:intersect}
@media(prefers-reduced-motion:reduce){
 .v548-fab{opacity:1!important;transform:none!important;transition:none!important}
 .v548-fab-btn,.v548-fab-btn::after,.v548-fab-ico svg{transition:none!important;animation:none!important}
 .v548-fab-btn::after{display:none}
 html.v546-acc .v54-toggle:hover .v548-fab-btn,html.v546-acc .v54-toggle:active .v548-fab-btn{transform:none!important}
}


/* ===== v54.9 (2026-11-09, local preview): no photo strips anywhere; one continuous field into the footer; travelling cyan border on Megnyitás =====
   Colour path at every join: photo/section -> wash into near-black (--v549-black) -> ease into the (minimally livelier) navy field.
   Desktop accordion only (html.v546-acc, >=1024px). Mobile/tablet never get .v546-acc; the only >=1024 rule outside it is the contact-photo mask. */
@property --v549-a{syntax:'<angle>';inherits:false;initial-value:0deg}
@media(min-width:1024px){
 html.v546-acc{background:#020309!important}
 /* the field: same hues, a touch more vivid than v54.8 (bluer navy, slightly stronger water-light), no new colour, no pattern change */
 html.v546-acc .v547-field{background:
   radial-gradient(120% 70% at 72% -12%,rgba(0,150,190,.14),transparent 62%),
   radial-gradient(90% 60% at 10% 110%,rgba(40,70,150,.10),transparent 70%),
   linear-gradient(180deg,#050a1e 0%,#071029 50%,#09122d 100%)}

 /* A) hero -> chapter. The strip came from the scroll seam's partial opacity: mid-scroll the photo's bottom edge showed through at ~50%.
    Now a static foot wash sits directly above #nf-veil (also above its purple left band) and below the drawing sheet / hero text,
    and its last rows are fully opaque near-black, so the stage's bottom edge is black at every scroll position (reduced motion too). */
 .v546-acc .v548-feather{height:22vh;z-index:4;
  background:linear-gradient(180deg,rgba(2,3,9,0) 0%,rgba(2,3,9,.08) 22%,rgba(2,3,9,.26) 42%,rgba(2,3,9,.52) 60%,rgba(2,3,9,.78) 76%,rgba(2,3,9,.94) 88%,#020309 96%,#020309 100%)}
 .v546-acc .v547-seam{height:72vh;background:linear-gradient(180deg,rgba(2,3,9,0) 0%,rgba(2,3,9,.05) 16%,rgba(2,3,9,.18) 32%,rgba(2,3,9,.4) 50%,rgba(2,3,9,.66) 66%,rgba(2,3,9,.88) 82%,#020309 94%,#020309 100%)}
 /* chapter starts on the same near-black and eases (long, many stops, no visible band) into the livelier field */
 .v546-acc .v546-chapter::before{height:min(900px,100vh);
  background:radial-gradient(60% 55% at 62% 0,rgba(0,150,190,.07),transparent 72%),
   linear-gradient(180deg,#020309 0%,rgba(2,3,9,.97) 6%,rgba(2,3,9,.88) 14%,rgba(2,3,9,.72) 24%,rgba(2,3,9,.52) 36%,rgba(2,3,9,.32) 50%,rgba(2,3,9,.16) 66%,rgba(2,3,9,.05) 82%,rgba(2,3,9,0) 100%)}
 .v546-acc .v546-chapter-w::before{background:#03050f}

 /* B) Kapcsolat: the lower part washes into near-black, so the band never ends on a photo or a flat cut */
 html.v546-acc #kapcsolat{padding-bottom:clamp(96px,9vw,140px)!important}
 html.v546-acc #kapcsolat::before{height:auto;bottom:0;
  background:radial-gradient(48% 50% at 80% 22%,rgba(0,140,180,.1),transparent 72%),
   radial-gradient(70% 28% at 50% 0,rgba(2,3,9,.5),transparent 80%),
   linear-gradient(180deg,rgba(2,3,9,0) 0%,rgba(2,3,9,0) 58%,rgba(2,3,9,.18) 70%,rgba(2,3,9,.45) 81%,rgba(2,3,9,.76) 91%,rgba(2,3,9,.94) 97%,#020309 100%)}
 html.v546-acc #kapcsolat .nf-w{z-index:1}

 /* C) footer: no box, no hairline. It starts on the same near-black, eases back into the field (grid faintly visible), and the grid dies out toward the page end */
 html.v546-acc #nf-foot{background:linear-gradient(180deg,#020309 0%,rgba(2,3,9,.9) 10%,rgba(2,3,9,.62) 26%,rgba(2,3,9,.34) 44%,rgba(4,8,24,.3) 62%,rgba(6,11,32,.62) 82%,rgba(7,12,34,.9) 100%)!important;
  border-top:0!important;box-shadow:none!important;padding-top:clamp(56px,5vw,80px)}
 html.v546-acc #nf-foot::before,html.v546-acc #nf-foot::after{display:none!important}
 html.v546-acc #nf-foot .ft-bot{border-top:0;background:linear-gradient(90deg,transparent,rgba(247,245,240,.1) 22%,rgba(247,245,240,.1) 78%,transparent) top/100% 1px no-repeat}

 /* Megnyitás: the pill's border is a ring painted by a conic gradient on border-box (no mask-composite needed);
    a short bright cyan segment travels around the perimeter over a calm cyan base ring */
 html.v546-acc .v548-fab-btn,
 html.v546-acc .v54-toggle:hover .v548-fab-btn,
 html.v546-acc .v54-toggle:focus-visible .v548-fab-btn,
 html.v546-acc .v54-toggle[aria-expanded=true] .v548-fab-btn{border:1.5px solid transparent!important;
  --v549-fill:linear-gradient(180deg,rgba(20,46,70,.97),rgba(9,24,42,.97));
  --v549-ring:conic-gradient(from var(--v549-a),rgba(0,184,217,.5) 0deg,rgba(0,184,217,.5) 220deg,rgba(0,184,217,.75) 270deg,#7beaf8 316deg,#e9fdff 334deg,#7beaf8 344deg,rgba(0,184,217,.5) 360deg);
  background:var(--v549-fill) padding-box,var(--v549-ring) border-box!important}
 @media(hover:hover){
  html.v546-acc .v54-toggle:hover .v548-fab-btn{--v549-fill:linear-gradient(180deg,rgba(22,62,88,.98),rgba(10,34,54,.98))}
 }
 html.v546-acc .v54-toggle:focus-visible .v548-fab-btn{--v549-ring:linear-gradient(#a9eef9,#a9eef9)}
 /* open (Bezárás): calm, static, fully cyan ring; the chase is the invitation on closed cards only */
 html.v546-acc .v54-toggle[aria-expanded=true] .v548-fab-btn{--v549-fill:linear-gradient(180deg,rgba(12,30,48,.97),rgba(7,18,32,.97));--v549-ring:linear-gradient(rgba(0,184,217,.62),rgba(0,184,217,.62))}
 .v547-fx .v54-toggle[aria-expanded=false] .v548-fab-btn{animation:v549-chase 4.2s linear infinite}
 /* five pills, five phases: never one synchronised blink down the page */
 #miertmi .v548-fab-btn{animation-delay:-.84s!important}
 #menete .v548-fab-btn{animation-delay:-1.68s!important}
 #eszkozok .v548-fab-btn{animation-delay:-2.52s!important}
 #rolunk .v548-fab-btn{animation-delay:-3.36s!important}
 /* outer halo so the travelling light also reads off the card */
 html.v546-acc .v54-toggle[aria-expanded=false] .v548-fab-btn{box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 0 0 1px rgba(0,184,217,.1),0 0 18px -4px rgba(0,184,217,.45),0 12px 24px -12px rgba(0,184,217,.6),0 6px 14px -6px rgba(0,0,0,.7)}
 @media(hover:hover){html.v546-acc .v54-toggle[aria-expanded=false]:hover .v548-fab-btn{box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 0 0 1px rgba(0,184,217,.16),0 0 24px -4px rgba(0,184,217,.6),0 18px 32px -12px rgba(0,184,217,.8),0 8px 18px -8px rgba(0,0,0,.75)}}
 html.v546-acc .v54-toggle[aria-expanded=false]:focus-visible .v548-fab-btn{box-shadow:0 0 0 3px rgba(0,184,217,.3),0 12px 24px -12px rgba(0,184,217,.7)}
}
@keyframes v549-chase{to{--v549-a:360deg}}
/* contact photo (desktop only): one elliptical mask, fading on top, bottom and left; no mask-composite, so no engine can fall back to a hard edge */
@media(min-width:1024px){
 #kapcsolat::after{-webkit-mask-image:radial-gradient(110% 56% at 100% 46%,#000 0%,rgba(0,0,0,.82) 34%,rgba(0,0,0,.42) 60%,rgba(0,0,0,.12) 76%,transparent 86%)!important;
  mask-image:radial-gradient(110% 56% at 100% 46%,#000 0%,rgba(0,0,0,.82) 34%,rgba(0,0,0,.42) 60%,rgba(0,0,0,.12) 76%,transparent 86%)!important;
  -webkit-mask-composite:source-over!important;mask-composite:add!important;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
}
@media(prefers-reduced-motion:reduce){
 .v548-fab-btn{animation:none!important}
 /* static, clearly visible cyan border instead of the chase */
 html.v546-acc .v54-toggle[aria-expanded=false] .v548-fab-btn{--v549-ring:linear-gradient(rgba(0,184,217,.9),rgba(0,184,217,.9))}
}


/* ===== v54.10 (2026-11-09, local preview) =====
   A) Desktop (html.v546-acc, >=1024px): the hero -> chapter strip is removed at its source.
      v54.9 laid an opaque near-black 22vh foot wash (+ an opaque scroll seam) on the hero's lower edge; that slab WAS the strip,
      visible at rest and from the first scroll tick. Both are gone. Instead the hero image layers themselves (#gl, #neon, #nf-static)
      fade to transparent over their lower ~45% on a long eased alpha curve, so the real water dissolves into the fixed navy field
      that also carries the chapter. Nothing opaque is drawn over the photo; there is no edge left to see.
   B) Phone/tablet (<1024px, no accordion): the desktop colour world (near-black -> slightly livelier navy field, faint grid,
      soft cyan light) under the open mobile layout; navy studio cards; softer joins. Existing mobile structure and icons unchanged. */
@media(min-width:1024px){
 html.v546-acc .v548-feather,html.v546-acc .v547-seam{display:none!important}
 /* ends at 0 by 94% of the layer height: the layers are scaled ~1.05 around their centre, so their last ~2.5% sits below the stage clip */
 html.v546-acc .stage #gl,html.v546-acc .stage #neon,html.v546-acc #nf-static{
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 50%,rgba(0,0,0,.97) 56%,rgba(0,0,0,.91) 62%,rgba(0,0,0,.82) 67%,rgba(0,0,0,.7) 72%,rgba(0,0,0,.56) 76.5%,rgba(0,0,0,.42) 80.5%,rgba(0,0,0,.29) 84%,rgba(0,0,0,.18) 87%,rgba(0,0,0,.09) 90%,rgba(0,0,0,.03) 92.5%,transparent 94%);
  mask-image:linear-gradient(180deg,#000 0%,#000 50%,rgba(0,0,0,.97) 56%,rgba(0,0,0,.91) 62%,rgba(0,0,0,.82) 67%,rgba(0,0,0,.7) 72%,rgba(0,0,0,.56) 76.5%,rgba(0,0,0,.42) 80.5%,rgba(0,0,0,.29) 84%,rgba(0,0,0,.18) 87%,rgba(0,0,0,.09) 90%,rgba(0,0,0,.03) 92.5%,transparent 94%);
  -webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
 /* the left typography veil keeps the text panel, but its foot also melts into the field (no purple block meeting the navy) */
 html.v546-acc #nf-veil{
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 70%,rgba(0,0,0,.93) 78%,rgba(0,0,0,.78) 85%,rgba(0,0,0,.55) 91%,rgba(0,0,0,.3) 96%,rgba(0,0,0,.12) 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 70%,rgba(0,0,0,.93) 78%,rgba(0,0,0,.78) 85%,rgba(0,0,0,.55) 91%,rgba(0,0,0,.3) 96%,rgba(0,0,0,.12) 100%)}
 /* drawing-sheet frame: no bottom hairline across the dissolving water (corner marks stay); the whole frame still fades on the first scroll tick (v54.js) */
 html.v546-acc #nf49-sheet{border-bottom-color:transparent}
 /* the chapter no longer starts on an opaque black slab: it is the same fixed field, with only a soft water-light glow */
 html.v546-acc .v546-chapter::before{height:min(760px,90vh);background:radial-gradient(60% 55% at 62% 0,rgba(0,150,190,.07),transparent 72%)!important}
 html.v546-acc .v546-chapter-w::before{background:#060b20}
 html.v546-acc .v543-index{background:#070c22}
 /* overscroll / pre-paint canvas in the field's colour, not near-black */
 html.v546-acc{background:#070f27!important}
}

/* ----- B) phone + tablet (<1024px): premium colour world on the existing open layout ----- */
@media(max-width:1023px){
 /* one palette swap: the purple surface tokens become the desktop field's navy family */
 html:not(.v546-acc){--ink:#070c22;--v49-deep:#050a1e;--v49-surf:#0d1532;background:#070f27}
 html:not(.v546-acc) body{background:transparent!important}
 /* the field: same layers as desktop, static (no pointer light, no parallax on touch) */
 html:not(.v546-acc) .v547-field{display:block;position:fixed;left:0;right:0;top:0;height:100vh;height:100lvh;z-index:-1;pointer-events:none;overflow:hidden;
  background:radial-gradient(130% 60% at 78% -8%,rgba(0,150,190,.15),transparent 62%),radial-gradient(100% 50% at 6% 108%,rgba(40,70,150,.12),transparent 70%),linear-gradient(180deg,#050a1e 0%,#071029 50%,#09122d 100%)}
 html:not(.v546-acc) .v547-grid{position:absolute;inset:0;transform:none!important;
  background-image:linear-gradient(rgba(140,210,232,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(140,210,232,.05) 1px,transparent 1px),linear-gradient(rgba(140,210,232,.022) 1px,transparent 1px),linear-gradient(90deg,rgba(140,210,232,.022) 1px,transparent 1px);
  background-size:160px 160px,160px 160px,32px 32px,32px 32px;background-position:-1px -1px;
  -webkit-mask-image:radial-gradient(140% 90% at 60% 25%,#000 25%,rgba(0,0,0,.35) 70%,transparent 100%);mask-image:radial-gradient(140% 90% at 60% 25%,#000 25%,rgba(0,0,0,.35) 70%,transparent 100%)}
 html:not(.v546-acc) .v547-light{position:absolute;left:78vw;top:22vh;width:120vw;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%)!important;
  background:radial-gradient(closest-side,rgba(0,184,217,.08),rgba(0,184,217,.03) 45%,transparent 100%)}

 /* hero: photo layers dissolve at their foot (their bottom edge sits at ~86svh, under the text panel) */
 html:not(.v546-acc) .stage #gl,html:not(.v546-acc) .stage #neon,html:not(.v546-acc) #nf-static{
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 58%,rgba(0,0,0,.82) 68%,rgba(0,0,0,.52) 78%,rgba(0,0,0,.24) 87%,rgba(0,0,0,.06) 94%,transparent 98%);
  mask-image:linear-gradient(180deg,#000 0%,#000 58%,rgba(0,0,0,.82) 68%,rgba(0,0,0,.52) 78%,rgba(0,0,0,.24) 87%,rgba(0,0,0,.06) 94%,transparent 98%)}
 /* text panel: near-black navy (not purple) behind the type, then a longer, many-stop rise into the photo instead of v54.9's 50%->64% step.
    Opaque enough (>=.9) across the type area; the fade lives above the type, not across half the photo. */
 html:not(.v546-acc) #nf-veil{background:linear-gradient(0deg,rgba(4,8,24,.97) 0%,rgba(4,8,24,.95) 36%,rgba(4,8,24,.9) 43%,rgba(4,8,24,.78) 49%,rgba(4,8,24,.6) 54.5%,rgba(4,8,24,.4) 60%,rgba(4,8,24,.22) 66%,rgba(4,8,24,.09) 72%,rgba(4,8,24,.02) 78%,rgba(4,8,24,0) 82%)!important}
 html:not(.v546-acc) #nf-hero h1>span{background:rgba(5,9,26,.86)}
 /* the stage itself is transparent onto the field, so its lower edge and the first section share one surface */
 html:not(.v546-acc) .stage{background:transparent}

 /* sections: transparent onto the field; the older per-section grids are retired (the field carries the grid) */
 html:not(.v546-acc) #nf-main{background:transparent!important}
 html:not(.v546-acc) #nf-main>.nf-sec{background:transparent!important;background-image:none!important}
 html:not(.v546-acc) #nf-main>.nf-sec.nf-band::before{display:none!important}
 html:not(.v546-acc) #nf-main{background:radial-gradient(90% 420px at 70% 0,rgba(0,150,190,.07),transparent 75%) no-repeat!important}

 /* components: quiet navy panels with soft borders instead of purple slabs */
 html:not(.v546-acc) .tl-card{background:linear-gradient(180deg,rgba(16,24,50,.8),rgba(9,14,34,.84))!important;border:1px solid rgba(150,215,235,.12)}
 html:not(.v546-acc) .v50-card{background:linear-gradient(150deg,rgba(16,28,58,.92),rgba(7,12,30,.94));border-color:rgba(0,184,217,.3)}
 html:not(.v546-acc) #miertmi .v52-pipe,html:not(.v546-acc) #menete .nf-steps{border-color:rgba(150,215,235,.14);background:linear-gradient(180deg,rgba(0,184,217,.06),rgba(8,13,32,.5))}
 html:not(.v546-acc) #rolunk{background:transparent!important}

 /* Kapcsolat foot (the contact photo is desktop-only): the section washes toward near-black */
 html:not(.v546-acc) #nf-main>#kapcsolat.nf-sec{background:linear-gradient(180deg,rgba(2,3,9,0) 0%,rgba(2,3,9,0) 55%,rgba(2,3,9,.22) 72%,rgba(2,3,9,.5) 88%,rgba(2,3,9,.62) 100%)!important}
 /* footer: no box, no top hairline; it rises out of the same dark and returns to the field */
 html:not(.v546-acc) #nf-foot{background:linear-gradient(180deg,rgba(2,3,9,.62) 0%,rgba(2,3,9,.48) 22%,rgba(2,3,9,.3) 48%,rgba(6,11,32,.42) 78%,rgba(7,12,34,.7) 100%)!important;border-top:0!important;box-shadow:none!important}
 html:not(.v546-acc) #nf-foot::before,html:not(.v546-acc) #nf-foot::after{display:none!important}
 html:not(.v546-acc) #nf-foot .ft-bot{border-top:0;background:linear-gradient(90deg,transparent,rgba(247,245,240,.1) 22%,rgba(247,245,240,.1) 78%,transparent) top/100% 1px no-repeat}
}

/* phone (<768, .nf-m card layout): same open structure, same folds and icons as before, desktop studio-card finish */
@media(max-width:767px){
 html.nf-m:not(.v546-acc) #nf-main>.nf-sec{
  background:linear-gradient(180deg,rgba(16,24,50,.74),rgba(9,14,34,.8))!important;border:1px solid rgba(150,215,235,.13);border-radius:20px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 24px 44px -30px rgba(0,0,0,.85)}
 /* contact card: its lower part washes toward near-black and its lower border fades, so it dissolves instead of ending on a cut */
 html.nf-m:not(.v546-acc) #nf-main>#kapcsolat.nf-sec{background:linear-gradient(180deg,rgba(16,24,50,.74) 0%,rgba(9,14,34,.78) 50%,rgba(4,7,20,.82) 80%,rgba(2,3,9,.7) 100%)!important;
  border-bottom-color:transparent;box-shadow:inset 0 1px 0 rgba(255,255,255,.045)}
 html.nf-m:not(.v546-acc) #nf-main{background:radial-gradient(100% 360px at 70% 0,rgba(0,150,190,.08),transparent 75%) no-repeat!important}
 /* existing widget icons (unchanged SVGs): a quieter cyan tile with a hairline ring and soft glow, like the desktop index discs */
 .nf-m .mc-head .mc-ico{background:radial-gradient(circle at 32% 26%,rgba(0,184,217,.2),rgba(0,184,217,.07) 70%);box-shadow:inset 0 0 0 1px rgba(0,184,217,.28),0 0 20px -8px rgba(0,184,217,.55)}
 .nf-m .mc-chev{border-color:rgba(0,184,217,.55);background:rgba(0,184,217,.07);box-shadow:0 0 16px -6px rgba(0,184,217,.5)}
 .nf-m .mc-head .nf-kick{color:#86d3e0}
 .nf-m .mc-head .mc-sum{color:#a9b3c6}
 /* the six situation tiles: studio tiles; the open one gets the desktop's open-card cyan */
 .nf-m .nf-list details{border-color:rgba(150,215,235,.12);background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012))}
 .nf-m .nf-list details[open]{border-color:rgba(0,184,217,.45);background:linear-gradient(180deg,rgba(0,184,217,.07),rgba(8,13,32,.4));box-shadow:0 0 0 1px rgba(0,184,217,.08),0 14px 30px -20px rgba(0,184,217,.45)}
 /* sticky contact bar in the navy family */
 .nf-m .mc-bar{background:rgba(6,11,30,.92);border-color:rgba(0,184,217,.3);box-shadow:0 12px 30px rgba(0,0,0,.45),0 0 0 1px rgba(0,184,217,.06)}
 /* footer on the phone: the gap after the contact card stays on the field, the footer then rises out of the same dark */
 html.nf-m:not(.v546-acc) #nf-foot{background:linear-gradient(180deg,rgba(2,3,9,0) 0%,rgba(2,3,9,.4) 18%,rgba(2,3,9,.34) 50%,rgba(6,11,32,.45) 80%,rgba(7,12,34,.7) 100%)!important}
}
/* reduced motion: the mobile field is static anyway; nothing here animates */
@media(prefers-reduced-motion:reduce){html:not(.v546-acc) .v547-grid,html:not(.v546-acc) .v547-light{transition:none!important;animation:none!important}}

/* tilt UI removed in v54.10 (Csabi): never shown, even if an older script created it */
.v543-tilt,.v543-sensor-status{display:none!important}