/* Fekete Tinta – extra animált tetováló minta (10-28). Sötét, tinta-vörös kiemelés, Inter + Bodoni. */
@font-face{font-family:Inter;font-weight:300;font-display:swap;src:url(fonts/Inter-300-latin-ext.woff2) format('woff2');unicode-range:U+0100-024F,U+1E00-1EFF}
@font-face{font-family:Inter;font-weight:300;font-display:swap;src:url(fonts/Inter-300-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+2000-206F,U+20AC}
@font-face{font-family:Inter;font-weight:400;font-display:swap;src:url(fonts/Inter-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-024F,U+1E00-1EFF}
@font-face{font-family:Inter;font-weight:400;font-display:swap;src:url(fonts/Inter-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+2000-206F,U+20AC}
@font-face{font-family:Inter;font-weight:600;font-display:swap;src:url(fonts/Inter-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-024F,U+1E00-1EFF}
@font-face{font-family:Inter;font-weight:600;font-display:swap;src:url(fonts/Inter-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+2000-206F,U+20AC}
@font-face{font-family:'Bodoni Moda';font-weight:400;font-display:swap;src:url(fonts/BodoniModa-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-024F,U+1E00-1EFF}
@font-face{font-family:'Bodoni Moda';font-weight:400;font-display:swap;src:url(fonts/BodoniModa-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+2000-206F,U+20AC}
@property --m{syntax:'<percentage>';inherits:false;initial-value:0%}

:root{--bg:#0a0909;--bg2:#121010;--card:#171414;--ink:#efe9e1;--muted:#9c938a;--line:#2a2523;--acc:#b3232b;--acc2:#e04a3f;--stencil:#7b6cff;
  --pad:clamp(18px,4vw,56px);--e:cubic-bezier(.2,.8,.2,1)}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--bg)}
html.lenis,html.lenis body{height:auto}.lenis.lenis-smooth{scroll-behavior:auto!important}
body{margin:0;background:var(--bg);color:var(--ink);font:300 17px/1.65 Inter,system-ui,sans-serif;overflow-x:hidden}
img{max-width:100%;display:block}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.03em;line-height:.98}
h2{font-size:clamp(40px,6.4vw,92px);text-transform:uppercase;margin:12px 0 26px}
h3{font-size:22px;letter-spacing:-.01em}
.wrap{max-width:1240px;margin:0 auto;padding:0 var(--pad)}
section{padding:130px 0;position:relative}
.cimke{font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--acc2);font-weight:600}
.bev{color:var(--muted);max-width:60ch;margin:0 0 40px}
.megj{font-size:13px;color:var(--muted)}
.gomb{display:inline-flex;align-items:center;gap:8px;padding:16px 26px;background:var(--acc);color:#fff;border:0;border-radius:2px;font-weight:600;font-size:15px;letter-spacing:.02em;transition:background .3s}
.gomb:hover{background:var(--acc2)}
.gomb.szellem{background:transparent;box-shadow:inset 0 0 0 1px rgba(239,233,225,.35)}
.gomb.szellem:hover{box-shadow:inset 0 0 0 1px var(--ink)}

/* 6. REZGŐ GOMBOK – mint a tetoválógép */
.rezeg:hover{animation:rezeg .09s linear infinite}
@keyframes rezeg{0%{transform:translate(0,0)}25%{transform:translate(.6px,-.5px)}50%{transform:translate(-.5px,.6px)}75%{transform:translate(.5px,.5px)}100%{transform:translate(0,0)}}

/* betöltő: a logó kirajzolódik, majd felhúzódik */
.betolto{position:fixed;inset:0;z-index:200;background:#050404;display:grid;place-items:center;pointer-events:none}
.betolto svg{width:min(560px,80vw)}
.betolto text{font:600 46px Inter,sans-serif;letter-spacing:.12em;fill:transparent;stroke:var(--ink);stroke-width:.8;stroke-dasharray:420;stroke-dashoffset:420}
.betolto__szaz{position:absolute;bottom:32px;right:var(--pad);font:600 14px Inter;letter-spacing:.2em;color:var(--muted)}

/* 2. TINTA-KURZOR vászon */
.tinta{position:fixed;inset:0;width:100vw;height:100vh;z-index:90;pointer-events:none;mix-blend-mode:screen}
.csik{position:fixed;top:0;left:0;height:2px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:var(--acc2);z-index:120}
.minta{position:relative;z-index:110;background:#000;color:#bbb;font-size:12.5px;text-align:center;padding:7px 12px}
.minta b{color:var(--acc2);letter-spacing:.1em}

.fej{position:fixed;top:32px;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:14px var(--pad);transition:background .4s,top .4s}
.fej.tele{top:0;background:rgba(10,9,9,.82);backdrop-filter:blur(10px)}
.logo{font-weight:600;font-size:20px;letter-spacing:-.02em;text-transform:uppercase}.logo span{color:var(--acc2)}
.menu{display:flex;gap:28px;align-items:center;font-size:14px}.menu a:not(.gomb){opacity:.8}.menu a:not(.gomb):hover{opacity:1}
.menu .gomb{padding:11px 18px}
.hamb{display:none;background:none;border:0;font-size:24px}

/* HERO */
.hero{min-height:100svh;padding:0;display:flex;align-items:flex-end;overflow:hidden}
.hero__kep{position:absolute;inset:-6% 0 0 0}
.hero__kep img{width:100%;height:100%;object-fit:cover;object-position:30% center;filter:grayscale(.35) contrast(1.1) brightness(.75)}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(270deg,rgba(10,9,9,.94) 0%,rgba(10,9,9,.6) 45%,rgba(10,9,9,.05) 80%),linear-gradient(0deg,var(--bg) 0%,transparent 30%)}
.hero__rajz{position:absolute;right:6vw;top:50%;transform:translateY(-50%);height:88vh;width:auto;z-index:1;stroke:rgba(224,74,63,.5);stroke-width:1.3;opacity:.5}
.hero__szoveg{position:relative;z-index:2;margin-left:auto;width:min(640px,100%);padding:0 var(--pad) 120px;text-align:right}
.hero h1{font-size:clamp(46px,7vw,108px);text-transform:uppercase;margin:18px 0 26px}
.hero p{color:#cfc7bd;max-width:44ch;margin:0 0 34px auto}
.hero .gombok{display:flex;gap:12px;justify-content:flex-end;flex-wrap:wrap}
.korbadge{position:absolute;z-index:3;left:var(--pad);bottom:60px;width:120px;height:120px;display:grid;place-items:center}
.korbadge svg{position:absolute;inset:0;animation:forog 14s linear infinite}
.korbadge text{font:600 9.6px Inter;letter-spacing:.22em;fill:var(--ink)}
.korbadge span{font-size:26px;color:var(--acc2)}
@keyframes forog{to{transform:rotate(360deg)}}
.gorgess{position:absolute;z-index:3;left:50%;bottom:26px;transform:translateX(-50%);font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted)}
.gorgess::after{content:"";display:block;width:1px;height:38px;margin:10px auto 0;background:linear-gradient(var(--acc2),transparent);animation:csorog 1.8s var(--e) infinite}
@keyframes csorog{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* 4. LEFOLYÓ CÍMEK: betűnként */
[data-csepp] .szo{display:inline-block;white-space:nowrap}
[data-csepp] .betu{display:inline-block;position:relative;transform-origin:50% 0}
.csepp{opacity:0;position:absolute;left:46%;top:88%;width:.09em;height:0;background:var(--acc2);border-radius:0 0 .06em .06em;pointer-events:none}
.csepp::after{content:"";position:absolute;left:50%;bottom:-.06em;width:.16em;height:.16em;margin-left:-.08em;border-radius:50%;background:inherit}

.futo{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:26px 0;background:var(--bg)}
.futo__belso{display:flex;gap:56px;width:max-content;animation:fut 32s linear infinite}
.futo span{font-size:clamp(34px,5vw,70px);font-weight:600;text-transform:uppercase;letter-spacing:-.02em;color:transparent;-webkit-text-stroke:1px rgba(239,233,225,.5)}
.futo span:nth-child(3n){color:var(--acc);-webkit-text-stroke:0}
@keyframes fut{to{transform:translateX(-50%)}}

/* 1. KIRAJZOLÓDÓ MINTA */
.rajz{padding:0}
.rajz__belso{height:100vh;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:40px;max-width:1240px;margin:0 auto;padding:0 var(--pad)}
.rajz__lepesek{list-style:none;padding:0;margin:0;counter-reset:l}
.rajz__lepesek li{padding:16px 0;border-top:1px solid var(--line);opacity:.32;transition:opacity .5s}
.rajz__lepesek li.akt{opacity:1}
.rajz__lepesek b{display:block;font-weight:600;font-size:18px;text-transform:uppercase;letter-spacing:.02em}
.rajz__lepesek li.akt b{color:var(--acc2)}
.rajz__lepesek span{color:var(--muted);font-size:15px}
.rajz__svg{height:84vh;width:100%}
.rajz__stencil{stroke:var(--stencil);stroke-width:1.2;opacity:.75}
.rajz__tinta{stroke:var(--ink);stroke-width:2}
.rajz__arnyek{fill:var(--acc);opacity:0}
.rajz__pontok circle{fill:var(--muted)}
.rajz__haladas{position:absolute;left:var(--pad);right:var(--pad);bottom:36px;height:1px;background:var(--line)}
.rajz__haladas i{display:block;height:100%;background:var(--acc2);transform-origin:0 50%;transform:scaleX(0)}

/* 3. LÁMPAFÉNY */
.lampa{min-height:100vh;padding:0;overflow:hidden;display:flex;align-items:center;cursor:none;--x:60%;--y:45%;--r:240px}
.lampa img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lampa__alap{filter:grayscale(1) brightness(.16) contrast(1.2)}
.lampa__feny{-webkit-mask-image:radial-gradient(circle var(--r) at var(--x) var(--y),#000 0%,#000 30%,transparent 72%);
  mask-image:radial-gradient(circle var(--r) at var(--x) var(--y),#000 0%,#000 30%,transparent 72%);filter:saturate(1.1)}
.lampa__szoveg{position:relative;z-index:2;padding:0 var(--pad);max-width:640px;pointer-events:none}
.lampa__szoveg p{color:#cfc7bd}

/* 5. TINTAFOLTOS GALÉRIA */
.galeria{padding:0;overflow:hidden}
.galeria__fej{padding:120px var(--pad) 30px;max-width:1240px;margin:0 auto}
.galeria__sav{display:flex;gap:4vw;padding:0 var(--pad) 120px;width:max-content}
.folt{margin:0;width:min(34vw,460px)}
.folt:nth-child(even){margin-top:80px}
.folt__kep{aspect-ratio:4/5;overflow:hidden;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath d='M100 8c22 2 30 22 50 26s44 8 42 34-24 30-20 52 26 38 6 56-40 4-60 14-28 12-50 4-22-26-40-38S2 132 10 108s26-26 22-50S36 18 58 12s20 6 42-4z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath d='M100 8c22 2 30 22 50 26s44 8 42 34-24 30-20 52 26 38 6 56-40 4-60 14-28 12-50 4-22-26-40-38S2 132 10 108s26-26 22-50S36 18 58 12s20 6 42-4z'/%3E%3C/svg%3E");
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:var(--m) var(--m);mask-size:var(--m) var(--m);transition:--m 1.6s var(--e)}
.folt.nyit .folt__kep{--m:290%}
.folt__kep img{width:100%;height:100%;object-fit:cover;filter:grayscale(.6) contrast(1.1);transform:scale(1.15);transition:filter .6s,transform 1.6s var(--e)}
.folt.nyit .folt__kep img{transform:scale(1)}
.folt:hover .folt__kep img{filter:none}
.folt figcaption{display:flex;justify-content:space-between;gap:10px;padding-top:14px;border-top:1px solid var(--line);margin-top:16px}
.folt figcaption b{font-weight:600}.folt figcaption span{color:var(--muted);font-size:14px}

/* tetoválók */
.mesterek__racs{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.mester{position:relative;overflow:hidden;border-radius:2px;transform-style:preserve-3d;transition:transform .2s}
.mester img{width:100%;aspect-ratio:4/5;object-fit:cover;filter:grayscale(1) contrast(1.15) brightness(.8);transition:filter .6s}
.mester:hover img{filter:grayscale(.2) contrast(1.05) brightness(.9)}
.mester__szoveg{position:absolute;left:0;right:0;bottom:0;padding:28px;background:linear-gradient(0deg,rgba(0,0,0,.85),transparent)}
.mester__szoveg b{display:block;font-size:28px;font-weight:600;text-transform:uppercase;letter-spacing:-.02em}
.mester__szoveg span{color:#cfc7bd;font-size:14px}

/* KVÍZ */
.kviz{background:var(--bg2)}
.kviz__doboz{background:var(--card);border:1px solid var(--line);padding:clamp(24px,4vw,48px);max-width:820px;position:relative}
.kviz__jel{display:flex;gap:8px;margin-bottom:28px}.kviz__jel i{flex:1;height:3px;background:var(--line);transition:background .4s}.kviz__jel i.kesz{background:var(--acc2)}
.kviz__kerdes,.kviz__eredmeny{display:none}.kviz__kerdes.akt,.kviz__eredmeny.akt{display:block;animation:be .6s var(--e)}
@keyframes be{from{opacity:0;transform:translateY(18px)}}
.kviz__kerdes h3{font-size:clamp(24px,3vw,34px);margin-bottom:24px}
.kviz__valaszok{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.kviz__valaszok button{padding:18px;text-align:left;background:transparent;border:1px solid var(--line);font-size:16px;transition:border-color .3s,background .3s}
.kviz__valaszok button:hover{border-color:var(--acc2);background:rgba(179,35,43,.08)}
.kviz__stilus{font-size:clamp(34px,5vw,60px);text-transform:uppercase;color:var(--acc2);margin:12px 0}
.kviz__miert{color:#cfc7bd;max-width:56ch}
.kviz__ujra{background:none;border:0;color:var(--muted);text-decoration:underline;margin-left:14px}

/* ÁRBECSLŐ */
.arbecslo__racs{display:grid;grid-template-columns:minmax(220px,340px) 1fr;gap:clamp(30px,6vw,90px);align-items:center}
.test{width:100%;max-height:640px}
.test__fej,.test__csipo{fill:#1d1918;stroke:var(--line)}
.tr{fill:#1d1918;stroke:#3a3330;stroke-width:1;cursor:pointer;transition:fill .3s}
.tr:hover{fill:#3a1a1b}.tr.be{fill:var(--acc);stroke:var(--acc2)}
.arbecslo__panel{background:var(--card);border:1px solid var(--line);padding:clamp(22px,3.4vw,40px)}
.arbecslo__hely{font-size:clamp(28px,3.4vw,44px);font-weight:600;text-transform:uppercase;letter-spacing:-.02em;margin-bottom:16px}
.fajdalom small,.becsles small{display:block;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.fajdalom__sav{display:flex;gap:6px;margin-bottom:24px}.fajdalom__sav i{width:36px;height:6px;background:var(--line);transition:background .3s}
.fajdalom__sav i.be{background:var(--acc2)}
.csuszka{display:block;margin-bottom:18px}.csuszka input{width:100%;accent-color:var(--acc2);margin-top:10px}
.stilusok{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}
.stilusok button{padding:10px 16px;background:none;border:1px solid var(--line);font-size:14px}.stilusok button.be{border-color:var(--acc2);color:#fff;background:rgba(179,35,43,.18)}
.becsles{border-top:1px solid var(--line);padding-top:20px;margin-bottom:14px}
.becsles__ar{display:block;font-size:clamp(32px,4vw,52px);font-weight:600;letter-spacing:-.03em}
.becsles__ido{color:var(--muted);font-size:15px}

/* GYÓGYULÁS */
.idovonal{position:relative;padding-left:56px;max-width:760px}
.idovonal__vonal{position:absolute;left:12px;top:6px;bottom:6px;width:2px;background:var(--line)}
.idovonal__vonal i{display:block;width:100%;height:100%;background:linear-gradient(var(--acc2),var(--acc));transform-origin:50% 0;transform:scaleY(0)}
.nap{position:relative;padding:0 0 54px;opacity:.3;transition:opacity .6s}
.nap.lat{opacity:1}
.nap::before{content:"";position:absolute;left:-51px;top:4px;width:14px;height:14px;border-radius:50%;background:var(--bg);border:2px solid var(--line);transition:all .5s}
.nap.lat::before{border-color:var(--acc2);background:var(--acc);box-shadow:0 0 0 6px rgba(224,74,63,.15)}
.nap b{font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--acc2)}
.nap h3{margin:8px 0 8px;font-size:clamp(22px,2.6vw,30px)}.nap p{color:var(--muted);margin:0}

.szamok{padding:90px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.szamok__racs{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.szamok b{font-size:clamp(46px,6vw,84px);font-weight:600;letter-spacing:-.04em}.szamok span{font-size:28px;color:var(--acc2);font-weight:600}
.szamok small{display:block;color:var(--muted);font-size:14px}

.gyik details{border-top:1px solid var(--line);padding:22px 0;max-width:860px}
.gyik summary{cursor:pointer;font-size:19px;font-weight:600;list-style:none;display:flex;justify-content:space-between}
.gyik summary::after{content:"+";color:var(--acc2);font-size:24px;transition:transform .3s}.gyik details[open] summary::after{transform:rotate(45deg)}
.gyik p{color:var(--muted);margin:12px 0 0}

/* FOGLALÁS */
.naptar{background:var(--card);border:1px solid var(--line);padding:clamp(18px,3vw,32px);margin-bottom:40px}
.naptar__napok{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px}
.naptar__napok button{flex:0 0 auto;min-width:76px;padding:12px 10px;background:none;border:1px solid var(--line);text-align:center;font-size:13px;line-height:1.3}
.naptar__napok button b{display:block;font-size:22px;font-weight:600}
.naptar__napok button.be{border-color:var(--acc2);background:rgba(179,35,43,.18)}
.naptar__savok{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0}
.naptar__savok button{padding:10px 16px;background:none;border:1px solid var(--line);font-size:15px}
.naptar__savok button[disabled]{opacity:.3;text-decoration:line-through;cursor:not-allowed}
.naptar__savok button.be{border-color:var(--acc2);color:#fff;background:var(--acc)}
.naptar__lent{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:18px}
.naptar__valasztott{color:var(--muted)}
.kapcs{display:grid;grid-template-columns:1fr 1.3fr;gap:30px}
.kapcs__adat div{padding:14px 0;border-top:1px solid var(--line)}
.kapcs__adat small{display:block;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.terkep iframe{width:100%;height:100%;min-height:300px;border:0;filter:grayscale(1) invert(.92) contrast(.9)}
.ragados{display:none}
.lab{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:30px var(--pad);border-top:1px solid var(--line);color:var(--muted);font-size:13px}

@media (max-width:900px){
  .menu{display:none;position:fixed;top:60px;left:0;right:0;flex-direction:column;background:rgba(10,9,9,.97);padding:24px}.menu.nyit{display:flex}
  .hamb{display:block}
  .hero__rajz{right:-30vw;opacity:.45;height:70vh}
  .hero__szoveg{text-align:left;margin:0;padding-bottom:110px}.hero p{margin-left:0}.hero .gombok{justify-content:flex-start}
  .hero::after{background:linear-gradient(0deg,rgba(10,9,9,.96) 0%,rgba(10,9,9,.7) 45%,rgba(10,9,9,.1) 80%)}
  .korbadge{display:none}
  .rajz__belso{grid-template-columns:1fr;grid-template-rows:auto 1fr;gap:10px;padding-top:80px}
  .rajz__svg{height:42vh}.rajz h2{font-size:34px;margin-bottom:12px}.rajz__lepesek li{padding:8px 0}.rajz__lepesek li:not(.akt) span{display:none}
  .galeria__sav{width:auto;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:80px}
  .folt{width:78vw;flex:0 0 auto;scroll-snap-align:center}.folt:nth-child(even){margin-top:0}
  .mesterek__racs,.arbecslo__racs,.kapcs{grid-template-columns:1fr}
  .test{max-height:420px}
  .kviz__valaszok{grid-template-columns:1fr}
  .szamok__racs{grid-template-columns:1fr 1fr}
  .lampa{cursor:auto;--r:170px}
  .ragados{display:flex;position:fixed;left:12px;right:12px;bottom:12px;z-index:95;gap:8px}
  .ragados a{flex:1;text-align:center;padding:14px;background:rgba(23,20,20,.95);border:1px solid var(--line);font-weight:600}.ragados a.fo{background:var(--acc);border-color:var(--acc)}
  .lab{padding-bottom:90px}
  section{padding:90px 0}
}
@media (prefers-reduced-motion:reduce){.futo__belso,.korbadge svg,.gorgess::after{animation:none}.rezeg:hover{animation:none}}