/* Viviel Nails Studio — Tatabánya
   Minden vizuális stílus itt van osztályokon keresztül; a HTML csak
   szerkezetet és tartalmat hordoz, inline style nincs benne. */

/* Önhosztolt betűtípusok (korábban Google Fonts CDN-ről @import-tal — GDPR miatt lokálisra váltva) */
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 300; font-display: swap; src: url('assets/fonts/cormorant-garamond-300-italic-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 300; font-display: swap; src: url('assets/fonts/cormorant-garamond-300-italic-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 300; font-display: swap; src: url('assets/fonts/cormorant-garamond-300-normal-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 300; font-display: swap; src: url('assets/fonts/cormorant-garamond-300-normal-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 400; font-display: swap; src: url('assets/fonts/cormorant-garamond-400-normal-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 400; font-display: swap; src: url('assets/fonts/cormorant-garamond-400-normal-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Italiana'; font-style: normal; font-weight: 400; font-display: swap; src: url('assets/fonts/Italiana-Regular.ttf') format('truetype'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('assets/fonts/ibm-plex-mono-400-normal-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('assets/fonts/ibm-plex-mono-400-normal-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 200; font-display: swap; src: url('assets/fonts/jost-200-normal-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 200; font-display: swap; src: url('assets/fonts/jost-200-normal-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 300; font-display: swap; src: url('assets/fonts/jost-300-normal-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 300; font-display: swap; src: url('assets/fonts/jost-300-normal-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 400; font-display: swap; src: url('assets/fonts/jost-400-normal-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 400; font-display: swap; src: url('assets/fonts/jost-400-normal-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; background: #241D19; overflow-x: hidden; overscroll-behavior-x: none; touch-action: pan-y; }
body { margin: 0; background: #241D19; color: #241D19; font-family: 'Jost', system-ui, sans-serif; overflow-x: clip; overscroll-behavior-x: none; touch-action: pan-y; text-wrap: pretty; }
main { background: #FAF7F4; }

/* iOS Safari: a notch/Dynamic Island mögötti sáv áttetsző, a mögötte
   lévő oldaltartalmat mutatja — ez a fix csík biztosítja, hogy ott
   mindig a márka sötét színe (#241D19) legyen, függetlenül a .nav
   görgetéshez kötött navSolid animációjától. */
.status-bar-fill { position: fixed; top: 0; left: 0; right: 0; height: env(safe-area-inset-top); background: #241D19; z-index: 99999999; pointer-events: none; }
a { color: inherit; text-decoration: none; }
a:hover { opacity: 0.65; }
img { max-width: 100%; }
summary { list-style: none; cursor: pointer; }
summary::-webkit-details-marker { display: none; }

/* --- görgetéshez kötött animációk (Chrome / Edge natívan, Safari: script.js) --- */
@keyframes far { from { transform: translate3d(0,-8%,0) scale(1.18); } to { transform: translate3d(0,8%,0) scale(1.18); } }
@keyframes uncrop { from { clip-path: inset(16% 26% 16% 26%); } to { clip-path: inset(0% 0% 0% 0%); } }
@keyframes rise { from { opacity: 0; transform: translate3d(0,44px,0); } to { opacity: 1; transform: none; } }
@keyframes wordUp { from { opacity: 0; transform: translate3d(0,0.55em,0); } to { opacity: 1; transform: none; } }
@keyframes lineGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes navSolid { from { background-color: rgba(36,29,25,0); border-color: rgba(168,92,107,0); } to { background-color: rgba(36,29,25,0.92); border-color: rgba(168,92,107,0.45); } }
/* Árlista: soronkénti beúszás. Vélemények: lágy, elmosódásból élesedő
   beúszás. A drift/markDrift mindkét végállapota LÁTHATÓ — így ha a
   böngésző nem tudja a scroll-vezérelt animációt (régi Safari), a díszítés
   akkor is látszik, csak nem mozog. */
@keyframes priceRow  { from { opacity: 0; transform: translate3d(0,30px,0) rotateX(-32deg); } to { opacity: 1; transform: none; } }
@keyframes fromLeft  { from { transform: translate3d(-18px,0,0); } to { transform: none; } }
@keyframes fromRight { from { transform: translate3d(22px,0,0); } to { transform: none; } }
@keyframes railGrow  { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes reviewIn  { from { opacity: 0; transform: translate3d(0,44px,0) scale(0.985); filter: blur(7px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes drift     { from { transform: translate3d(0,-6%,0); } to { transform: translate3d(0,6%,0); } }
@keyframes markDrift { from { transform: translate3d(0,18px,0); } to { transform: translate3d(0,-18px,0); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* minden időalapú "reveal" animáció (rise/wordUp) ugyanazzal az egységes
   sebességgel fusson végig a fájlban — mint a monday.com marquee__track,
   ahol minden elem egy közös, egységes ütemben mozog */
:root { --reveal-duration: 1s; }

/* ==========================================================================
   Megosztott / utility osztályok
   ========================================================================== */

.container { max-width: 1700px; margin: 0 auto; box-sizing: border-box; }

/* két hasábos, "0.X fr" arányú fejezetrácsok (Bevezető, Rólam, Árlista, GYIK) */
.split { display: grid; gap: 100px; align-items: start; }
.split--125-75 { grid-template-columns: 1.25fr 0.75fr; }
.split--90-110 { grid-template-columns: 0.9fr 1.1fr; }
.split--70-130 { grid-template-columns: 0.7fr 1.3fr; }

/* számozott szakasz-előcímke, pl. "01 / Rólam" */
.eyebrow { font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: #A85C6B; margin-bottom: 22px; }
.eyebrow--light { color: inherit; opacity: 0.8; }

/* nagy, keskeny szerif szakaszcím (h2) */
.section-title { font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: clamp(46px, 5vw, 88px); line-height: 0.92; letter-spacing: -0.04em; margin: 0; color: #6B3341; }

/* arany, uppercase mono szöveglink (pl. "Követés →", "Megnyitás Google Térképen →") */
.link-gold { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; color: #A85C6B; white-space: nowrap; }

/* gomb alap + színváltozatok */
.btn { display: inline-flex; align-items: center; min-height: 56px; padding: 0 28px; font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; }
.btn--dark { background: #241D19; color: #FAF7F4; }
.btn--light { background: #FAF7F4; color: #241D19; min-height: 58px; padding: 0 30px; }
.btn--outline { border: 1px solid rgba(36,29,25,0.2); }
.btn--outline-light { border: 1px solid rgba(250,247,244,0.5); min-height: 58px; padding: 0 30px; }

/* pin-stage + pin-cover: a kép egy ideig "háttérként" fixen áll (sticky),
   utána a következő, tömör hátterű tartalom lekerekített felső éllel
   ráscúszik és eltakarja (Rólam / Kapcsolat) */
.pin-stage { position: relative; }
/* Rólam: a szövegdoboz a fölötte lévő kép KÖZEPÉIG kúszik fel.
   A magasság = 100vh (pin) + 50vh (ráfutás) + 3vh ráhagyás. A két értéket
   mindig együtt kell állítani, különben a szövegdoboz már akkor kilóg a
   képernyő aljára, amikor a kép még fixen áll. Mobilon is ugyanez. */
.pin-stage--about { height: 153vh; }
.pin-stage--20 { height: 120vh; }
.pin-cover { position: relative; z-index: 2; background: #FAF7F4; border-radius: 44px 44px 0 0; box-shadow: 0 -30px 60px rgba(36,29,25,0.22); }
/* A fehér szövegdoboz magassága magától a szövegtől függne (~27vh), a
   ráfutás viszont 50vh — ezért a doboz alja alatt kibukna a fixen álló kép
   alja. A min-height garantálja, hogy a doboz MINDIG túlérjen a kép végén
   (min-height > ráfutás), a padding-bottom pedig fehér sávot hagy a szöveg
   alatt, amire a következő szekció (Idézet) ráúszhat anélkül, hogy a
   szövegbe érne. Ha a ráfutást (-50vh) növeled, a min-height-ot is kell. */
.pin-cover--about { margin-top: -50vh; min-height: 62vh; padding-bottom: 20vh; }
/* kis, biztonságos átfedés a Kapcsolat képére, amin a szöveg alul ül —
   ennyi még nem ér bele a szövegbe/gombba, de már érezhetően "ráfolyik" */
.pin-cover--6 { margin-top: -6vh; }

/* A Hero-ra felcsúszó fehér lap (Bevezető szekció). Szándékosan jóval
   feljebb húzva, mint a Kapcsolatnál: a lap teteje a "A te körmöd, a te
   álmod." felirat tetejéig ér, tehát a görgetés végére rátakar a szövegre
   és a kép aljára is.
   FONTOS: a .hero magassága = 100vh + ennyi (+ pár vh ráhagyás), különben
   a lap már betöltéskor kilógna a képernyő aljára. A kettőt együtt kell
   állítani, mobilon is. */
.pin-cover--hero { margin-top: -45vh; }

/* teljes szélességű, "far" parallax háttérdoboz (Szolgáltatások) */
.parallax { position: relative; overflow: hidden; }
.parallax--108 { height: 108vh; }
.parallax__bg { position: absolute; inset: -12% 0; background-size: cover; background-position: center; filter: brightness(0.78) saturate(0.95); animation: far linear both; animation-timeline: view(); }

/* sticky "pin" doboz: pontosan a viewportot tölti ki, ameddig a
   .pin-stage (vagy a szekció) extra magassága engedi, hogy fixen álljon.
   A kép maga statikus (nincs zoom/pan) — a "parallax" itt magából a
   pinnelésből jön: a kép áll, a következő tartalom csúszik rá görgetéskor. */
.pin { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.pin__bg { position: absolute; inset: 0; background-size: cover; background-position: center; filter: brightness(0.7) saturate(0.95); }

.js-reveal { will-change: opacity, transform; }

/* ==========================================================================
   Navigáció
   ========================================================================== */

.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 80; display: flex; align-items: center; justify-content: space-between; gap: 40px; padding: calc(8px + env(safe-area-inset-top)) 40px 16px; color: #FAF7F4; min-height: 74px; box-sizing: border-box; background-color: #241D19; background-image: linear-gradient(to bottom, rgba(36,29,25,1) 0%, rgba(36,29,25,0.62) env(safe-area-inset-top), rgba(36,29,25,0) 100%); border-bottom: 1px solid rgba(168,92,107,0); backdrop-filter: blur(10px); animation: navSolid linear both; animation-timeline: scroll(); animation-range: 55vh 95vh; }
.nav__brand { display: flex; align-items: center; gap: 10px; white-space: nowrap; font-family: 'Cormorant Garamond', serif; font-size: 27px; letter-spacing: 0.18em; text-transform: uppercase; }
.nav__mark { height: 46px; width: auto; }
.nav__links { display: flex; gap: 26px; white-space: nowrap; font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; }

/* ==========================================================================
   Hero
   ========================================================================== */

.hero { position: relative; height: 148vh; }   /* 100vh pin + 45vh ráfutás + 3vh ráhagyás — lásd .pin-cover--hero */
/* Nagy monitoron (≥1811px) a cím és a logó már nem nő tovább, a 45vh viszont
   igen — így a lap rácsúszott a logó alsó (név) sorára. Itt a ráfutás
   px-ben pontosan a logó aljáig ér: 56px (sor alja) + 334px (2 soros cím,
   190px × 0.88) + 26px (.hero__logo margin-bottom) + 16px (a viviel_logo.png
   alsó üres sávja: 4,6% × 350px). Ha a logó méretét vagy a cím betűméretét
   állítod, ez is kell. */
@media (min-width: 1811px) {
  .hero { height: calc(103vh + 432px); }
  .pin-cover--hero { margin-top: -432px; }
}
/* a kéz/köröm (a lényeg) a fotó jobb oldalán van, ezért a kivágás
   jobbra igazítva marad, sosem a bal oldali polcot részesíti előnyben */
.hero__bg { background-image: url('assets/new/hero_gem2.jpeg'); background-position: right center; }
.hero__scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(36,29,25,0.9) 0%, rgba(36,29,25,0.76) 42%, rgba(36,29,25,0.64) 76%, rgba(36,29,25,0.68)); }
.hero__row { position: absolute; left: 40px; right: 40px; bottom: 56px; color: #FAF7F4; display: flex; align-items: flex-end; justify-content: space-between; gap: 60px; }
/* a Viviel logó magasabb (név-sor), ezért keskenyebb, hogy a magassága a régi logóéval egyezzen */
.hero__logo { width: min(350px, 25vw); height: auto; display: block; margin-bottom: 26px; filter: drop-shadow(0 4px 30px rgba(36,29,25,0.5)); animation: rise var(--reveal-duration) ease-out both; }
.hero__title { font-family: 'Italiana', 'Cormorant Garamond', serif; font-weight: 400; font-size: clamp(80px, 10.5vw, 190px); line-height: 0.88; letter-spacing: -0.01em; margin: 0; color: #FFFFFF; text-shadow: 0 2px 24px rgba(36,29,25,0.35); }
.hero__word { display: block; animation: wordUp var(--reveal-duration) ease-out both; }
.hero__word--1 { animation-delay: 0.05s; }
.hero__word--2 { padding-left: 0.12em; animation-delay: 0.18s; }

/* ==========================================================================
   Bevezető
   ========================================================================== */

/* A fehér lap MINDIG kifut a képernyő széléig (nem .container!), különben
   1700px-nél szélesebb monitoron két oldalt kilátszik a hero-kép. A tartalom
   ettől még 1700px-es sávban marad: az oldalsó padding nő a képernyővel. */
.intro { padding: 130px max(40px, calc((100% - 1620px) / 2)) 120px; }
.intro__lead { font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: clamp(34px, 3.4vw, 60px); line-height: 1.14; letter-spacing: -0.02em; margin: 0; animation: rise var(--reveal-duration) ease-out both; animation-timeline: view(); animation-range: entry 0% entry 100%; }
.stat-row { display: flex; justify-content: space-between; align-items: baseline; padding: 18px 0; border-top: 1px solid rgba(36,29,25,0.18); }
.intro__stats .stat-row:last-child { border-bottom: 1px solid rgba(36,29,25,0.18); }
.stat-row__label { font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: #8A7A70; }
.stat-row__value { font-family: 'Cormorant Garamond', serif; font-size: 32px; }
.intro__cta { display: flex; gap: 10px; margin-top: 28px; }

/* ==========================================================================
   Rólam
   ========================================================================== */

.about { padding: 0 0 130px; background: #FAF7F4; }
.about__frame { animation: uncrop linear both; animation-timeline: view(); animation-range: entry 0% cover 42%; }
.about__bg { background-image: url('assets/work-about.jpg'); }
.about__content { padding: 90px 40px 0; }
.about__text { max-width: 620px; padding-top: 10px; }
.about__text p { font-size: 18px; line-height: 1.8; color: #6B5D54; font-weight: 300; margin: 0 0 22px; }
.about__text p:last-child { margin: 0; }

/* ==========================================================================
   Idézet
   ========================================================================== */

/* Az Idézet ugyanúgy "ráúszik" az előtte lévő fehér lapra, ahogy a Bevezető
   a Hero-ra: negatív margóval feljebb húzva, lekerekített felső éllel és
   felfelé vetett árnyékkal. A z-index azért kell, mert a .pin-cover 2-es. */
.quote { position: relative; height: 133vh; margin-top: -22vh; z-index: 3; }   /* 100vh pin + 30vh ráfutás (Szolgáltatások) + 3vh ráhagyás */
/* a lekerekítés a sticky dobozon van (a szülőre tett overflow:hidden
   elrontaná a sticky-t); amíg a kép fixen áll, a 44px-es sarkok a navbar
   mögé esnek, tehát nem látszanak */
.quote__pin { display: flex; align-items: center; justify-content: center; border-radius: 44px 44px 0 0; box-shadow: 0 -30px 60px rgba(36,29,25,0.22); }
.quote__bg { background-image: url('assets/work-quote.jpg'); }
.quote__scrim { position: absolute; inset: 0; background: rgba(36,29,25,0.32); }
.quote__text { position: relative; z-index: 2; font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 300; font-size: clamp(46px, 5.6vw, 104px); line-height: 1.04; letter-spacing: -0.035em; text-align: center; color: #E3B79C; max-width: 1250px; margin: 0; padding: 0 40px; }
.quote__by { position: absolute; left: 40px; bottom: 40px; font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(250,247,244,0.78); }

/* ==========================================================================
   Szolgáltatások
   ========================================================================== */

/* A Szolgáltatások fehér lapja ugyanúgy ráúszik az Idézet képére, ahogy a
   Bevezető a Hero-ra. A -30vh-t az Idézet szövege korlátozza: az függőlegesen
   középen ül, kb. 64vh-ig tart, a lap teteje pedig 70vh-nál áll meg — így a
   szöveg végig olvasható marad. A .quote magasságát ezzel EGYÜTT kell
   állítani (100vh + ráfutás + ráhagyás). A z-index azért 4, mert a .quote 3. */
.services { padding: 130px 0 0; background: #FAF7F4; position: relative; z-index: 4; margin-top: -30vh; border-radius: 44px 44px 0 0; box-shadow: 0 -30px 60px rgba(36,29,25,0.22); }
.services__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 60px; padding: 0 40px 60px; }
.services__intro { font-size: 16px; line-height: 1.72; color: #6B5D54; font-weight: 300; max-width: 320px; margin: 0; }

.service-card__bg--gel { background-image: url('assets/work-gel.jpg'); }
.service-card__bg--epites { background-image: url('assets/work-epites.jpg'); }
.service-card__bg--toltes { background-image: url('assets/work-toltes.jpg'); }
.service-card__scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(36,29,25,0.76) 0%, rgba(36,29,25,0.56) 34%, rgba(36,29,25,0.3) 72%, rgba(36,29,25,0.42)); }
.service-card__content { position: absolute; left: 40px; right: 40px; bottom: 48px; color: #FAF7F4; }
.service-card__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 60px; border-bottom: 1px solid rgba(250,247,244,0.32); padding-bottom: 18px; }
.service-card__title { font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: clamp(52px, 6vw, 108px); line-height: 0.9; letter-spacing: -0.04em; margin: 0; }
.service-card__price { text-align: right; }
.service-card__price-label { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.22em; }
.service-card__price-value { font-family: 'Cormorant Garamond', serif; font-size: 40px; line-height: 1.1; }
.service-card__desc { font-size: 17px; line-height: 1.7; font-weight: 300; margin: 20px 0 0; max-width: 560px; opacity: 0.88; }
.service-card__num { position: absolute; top: 48px; left: 40px; font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.24em; color: rgba(250,247,244,0.8); }

/* ==========================================================================
   Videó (önálló, automatikusan újrainduló bemutató-klip)
   ========================================================================== */

.showcase { padding: 100px 40px; display: flex; justify-content: center; background: #FAF7F4; }
.showcase__video { width: 100%; max-width: 380px; aspect-ratio: 3 / 4; object-fit: contain; background: #241D19; border: 1px solid rgba(36,29,25,0.18); box-shadow: 0 24px 60px rgba(36,29,25,0.16); }

/* ==========================================================================
   Árlista
   ========================================================================== */

.pricing { position: relative; padding: 130px 40px; background: #FAF7F4; }
.pricing__watermark { position: absolute; top: 70px; right: 0; width: 52%; opacity: 0.11; pointer-events: none; animation: drift linear both; animation-timeline: view(); }
.pricing__intro .section-title { margin: 0 0 26px; }
.pricing__discounts { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; line-height: 2; letter-spacing: 0.18em; text-transform: uppercase; color: #8A7A70; margin: 0; }

.price-row { display: flex; justify-content: space-between; align-items: baseline; gap: 40px; padding: 17px 0; border-top: 1px solid rgba(36,29,25,0.18); position: relative; z-index: 0; transform-origin: top center; animation: priceRow var(--reveal-duration) ease-out both; animation-timeline: view(); animation-range: entry 0% entry 62%; }
/* rózsaszín hajszálvonal, ami balról jobbra rárajzolódik a szürke vonalra,
   ahogy a sor a képernyőre ér. A pseudo a TELJES sort lefedi (nem csak az
   1px-et), különben a view() idővonala egy 1px magas dobozra vonatkozna és
   a vonal azonnal "bevillanna" — a vonalat háttér-gradiens rajzolja. */
.price-row::before { content: ''; position: absolute; inset: -1px 0 0 0; pointer-events: none; background: linear-gradient(#A85C6B,#A85C6B) left top / 100% 1px no-repeat; transform: scaleX(0); transform-origin: left center; animation: lineGrow var(--reveal-duration) ease-out both; animation-timeline: view(); animation-range: entry 0% entry 62%; }
/* hover-mosás: a sor mögé kerül (z-index -1), és kilóg oldalra, hogy ne
   tűnjön levágottnak */
.price-row::after { content: ''; position: absolute; inset: 0 -18px; z-index: -1; pointer-events: none; background: linear-gradient(90deg, rgba(168,92,107,0.10), rgba(168,92,107,0)); opacity: 0; transition: opacity 0.3s ease; }
.price-row__name, .price-row__price { transition: transform 0.3s ease, color 0.3s ease; }
@media (hover: hover) {
  .price-row:hover::after { opacity: 1; }
  .price-row:hover .price-row__name { transform: translateX(6px); }
  .price-row:hover .price-row__price { color: #A85C6B; }
}
/* a perspective KELL a soronkénti rotateX-hez: enélkül a bedőlés lapos
   nyújtásnak látszana, nem térbeli mozdulatnak */
.pricing__list { position: relative; perspective: 1400px; }
.pricing__list .price-row:last-child { border-bottom: 1px solid rgba(36,29,25,0.18); }
/* haladás-sín a lista bal oldalán, a grid-résben (a sorok NEM mozdulnak el
   tőle): halvány vezetővonal, amin egy rózsaszín kitöltés nő végig, ahogy
   végiggörgeted az árlistát */
.pricing__list::before { content: ''; position: absolute; left: -30px; top: 0; bottom: 0; width: 1px; background: rgba(36,29,25,0.12); pointer-events: none; }
.pricing__list::after { content: ''; position: absolute; left: -30px; top: 0; bottom: 0; width: 1px; background: #A85C6B; transform: scaleY(0); transform-origin: top center; pointer-events: none; animation: railGrow linear both; animation-timeline: view(); animation-range: cover 8% cover 92%; }
/* a sor két ütemben áll össze: a név balról, az ár jobbról érkezik.
   A from-állapot itt csak eltolás (nem opacity), hogy ha a böngésző nem
   tudja a scroll-vezérelt animációt, akkor is LÁTSZÓDJON minden. */
.price-row__label { display: flex; gap: 20px; align-items: baseline; animation: fromLeft var(--reveal-duration) ease-out both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
.price-row__name { font-size: 19px; font-weight: 300; }
.price-row__tag { font-family: 'IBM Plex Mono', monospace; font-size: 9.5px; letter-spacing: 0.2em; text-transform: uppercase; color: #A85C6B; }
.price-row__price { font-family: 'Cormorant Garamond', serif; font-size: 32px; line-height: 1; white-space: nowrap; animation: fromRight var(--reveal-duration) ease-out both; animation-timeline: view(); animation-range: entry 0% entry 70%; }

/* ==========================================================================
   Vélemények
   ========================================================================== */

.reviews { padding: 0 40px 130px; background: #FAF7F4; }
.reviews .eyebrow { margin-bottom: 40px; }
.review-row { display: flex; justify-content: space-between; align-items: baseline; gap: 80px; padding: 40px 0; border-top: 1px solid rgba(36,29,25,0.18); position: relative; z-index: 0; animation: reviewIn var(--reveal-duration) ease-out both; animation-timeline: view(); animation-range: entry 0% entry 100%; }
/* nagy, halvány dekoratív idézőjel a szöveg mögött, lassan sodródik */
.review-row::before { content: '”'; position: absolute; left: -14px; top: -26px; z-index: -1; font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: clamp(150px, 14vw, 250px); line-height: 1; color: #A85C6B; opacity: 0.10; pointer-events: none; user-select: none; animation: markDrift linear both; animation-timeline: view(); }
/* ugyanaz a rárajzolódó hajszálvonal, mint az árlistában */
.review-row::after { content: ''; position: absolute; inset: -1px 0 0 0; pointer-events: none; background: linear-gradient(#A85C6B,#A85C6B) left top / 100% 1px no-repeat; transform: scaleX(0); transform-origin: left center; animation: lineGrow var(--reveal-duration) ease-out both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
.reviews .review-row:last-child { border-bottom: 1px solid rgba(36,29,25,0.18); }
.review-row__quote { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 300; font-size: clamp(30px, 3.2vw, 54px); line-height: 1.16; letter-spacing: -0.02em; margin: 0; max-width: 1100px; }
.review-row__name { font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: #8A7A70; white-space: nowrap; }

/* ==========================================================================
   Instagram
   ========================================================================== */

.instagram { padding: 0 0 130px; background: #FAF7F4; }
.instagram__head { display: flex; align-items: baseline; justify-content: space-between; gap: 40px; padding: 0 40px 26px; }
.instagram__title { font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: clamp(34px, 3.4vw, 56px); letter-spacing: -0.02em; margin: 0; }
.instagram__grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 2px; }
.instagram__grid--dynamic { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.instagram__item { aspect-ratio: 1; background-color: #E6DAD2; display: block; position: relative; overflow: hidden; }
.instagram__item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.instagram__item:hover img, .instagram__item:focus-visible img { transform: scale(1.12); }

/* ==========================================================================
   GYIK
   ========================================================================== */

.faq { padding: 0 40px 130px; background: #FAF7F4; }
.faq-item { border-top: 1px solid rgba(36,29,25,0.18); }
.faq__list .faq-item:last-child { border-bottom: 1px solid rgba(36,29,25,0.18); }
.faq-item__q { display: flex; justify-content: space-between; align-items: center; gap: 40px; min-height: 78px; font-size: 21px; font-weight: 300; }
.faq-item__icon { font-family: 'IBM Plex Mono', monospace; color: #A85C6B; }
.faq-item__a { font-size: 16.5px; line-height: 1.8; color: #6B5D54; font-weight: 300; margin: 0 0 28px; max-width: 760px; }

/* ==========================================================================
   Kapcsolat
   ========================================================================== */

.contact { position: relative; }
.contact__bg { background-image: url('assets/work-contact.jpg'); }
.contact__scrim { position: absolute; inset: 0; background: rgba(36,29,25,0.34); }
.contact__row { position: absolute; left: 40px; right: 40px; bottom: 56px; color: #FAF7F4; display: flex; align-items: flex-end; justify-content: space-between; gap: 80px; }
.contact__title { font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: clamp(52px, 6.4vw, 120px); line-height: 0.9; letter-spacing: -0.045em; margin: 0; }
.contact__actions { display: flex; flex-wrap: wrap; gap: 10px; padding-bottom: 14px; }   /* wrap: keskeny telefonon a Messenger + Facebook gomb (~321px) nem fér el egymás mellett */
.contact__info { display: grid; grid-template-columns: repeat(3, 1fr); gap: 60px; padding: 70px 40px 0; }
.info-block { border-top: 1px solid rgba(36,29,25,0.18); padding-top: 18px; }
.info-block__label { font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: #8A7A70; }
.info-block__value { font-size: 19px; font-weight: 300; margin-top: 10px; }
.contact__map { padding: 60px 40px 0; }
.contact__map-head { display: flex; align-items: baseline; justify-content: space-between; gap: 40px; border-top: 1px solid rgba(36,29,25,0.18); padding-top: 18px; margin-bottom: 18px; }
.contact__map-frame { display: block; width: 100%; border: 1px solid rgba(36,29,25,0.18); filter: grayscale(0.35) contrast(1.05); }

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer { padding: 120px 40px 40px; background: #FAF7F4; }
.site-footer__inner { text-align: center; }
.site-footer__logo { width: min(300px, 24vw); height: auto; display: block; margin: 0 auto 24px; }
.site-footer__divider { display: flex; align-items: center; gap: 18px; max-width: 760px; margin: 0 auto 34px; }
.site-footer__rule { flex: 1; height: 1px; }
.site-footer__rule--l { background: linear-gradient(to right, rgba(168,92,107,0), #A85C6B); }
.site-footer__rule--r { background: linear-gradient(to left, rgba(168,92,107,0), #A85C6B); }
.site-footer__tagline { font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: #7C3B4A; white-space: nowrap; }
.site-footer__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 30px; font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; color: #8A7A70; }
.site-footer__copyright { text-align: center; font-family: 'IBM Plex Mono', monospace; font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; color: #A8968B; margin-top: 60px; border-top: 1px solid rgba(36,29,25,0.14); padding-top: 20px; }

/* ==========================================================================
   Árlista (megosztható kép-oldal, arlista.html)
   ========================================================================== */

.price-sheet { min-height: 100vh; background: #F1EAE0; }
.price-sheet__inner { min-height: 100vh; display: flex; flex-direction: column; align-items: center; gap: 26px; padding: 34px 18px 54px; box-sizing: border-box; font-family: 'IBM Plex Mono', monospace; color: #241D19; }
.price-sheet__brand { display: flex; align-items: center; gap: 12px; font-family: 'Cormorant Garamond', serif; font-size: 20px; letter-spacing: 0.2em; text-transform: uppercase; }
.price-sheet__mark { height: 40px; width: auto; }
.price-sheet__image { width: 100%; max-width: 620px; height: auto; display: block; box-shadow: 0 24px 60px rgba(36,29,25,0.16); }
.price-sheet__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; width: 100%; max-width: 620px; }
.price-sheet__btn { flex: 1 1 200px; display: flex; align-items: center; justify-content: center; min-height: 54px; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; }
.price-sheet__btn--download { background: #241D19; color: #F1EAE0; }
.price-sheet__btn--back { border: 1px solid #A85C6B; }
.price-sheet__footer { text-align: center; font-size: 10.5px; line-height: 2; letter-spacing: 0.18em; text-transform: uppercase; color: #8A7A70; }

/* --- nyomtatás: az árlista kép A4-en, minden mm-t kitöltve --- */
@media print {
  @page { size: A4 portrait; margin: 0; }
  body { margin: 0; }
  .price-sheet { min-height: 0; background: none; }
  .price-sheet__inner { min-height: 0; padding: 0; gap: 0; width: 210mm; height: 297mm; }
  .price-sheet__brand,
  .price-sheet__actions,
  .price-sheet__footer { display: none; }
  .price-sheet__image { width: 210mm; height: 297mm; max-width: none; box-shadow: none; object-fit: cover; object-position: center bottom; }
}

/* ==========================================================================
   Reszponzív törések
   ========================================================================== */

/* --- tablet --- */
@media (max-width: 1100px) {
  .nav__links { gap: 18px; font-size: 11px; }
  .split { gap: 56px; }
}

/* --- mobil --- */
@media (max-width: 860px) {
  .pin-stage--20 { height: 110vh; }
  .pin-cover--6 { margin-top: -4vh; }
  /* Mobilon a ráfutás NEM vh-ban megy, hanem px-ben — lásd a --hero-lift
     magyarázatát a mobil blokk alatt. */
  .hero { height: calc(103vh + var(--hero-lift, 350px)); }
  .pin-cover--hero { margin-top: calc(-1 * var(--hero-lift, 350px)); }
  .parallax--108 { height: 78vh; }
  /* keskeny, magas mobilnézetben a "right center" már csak a szövet
     ujjrészét mutatná — 72%-nál a köröm is jól látszik */
  .hero__bg { background-position: 72% center; }
  .nav { padding: calc(10px + env(safe-area-inset-top)) 18px 14px; min-height: 58px; }
  .nav__brand { font-size: 19px; gap: 7px; }
  .nav__mark { height: 30px; }
  .nav__links a { display: none; }
  .nav__links a.nav__cta { display: inline-flex; color: #C98194; font-size: 11px; }

  .intro, .pricing, .reviews, .faq, .site-footer, .showcase { padding-left: 18px; padding-right: 18px; }
  .services__head, .instagram__head { padding-left: 18px; padding-right: 18px; }
  .site-footer__links { gap: 12px 18px; }

  .split { grid-template-columns: 1fr; gap: 34px; }
  .contact__info { grid-template-columns: 1fr; gap: 34px; }
  .instagram__grid { grid-template-columns: repeat(3, 1fr); }
  .review-row { gap: 34px; }
  .review-row::before { font-size: 120px; left: -6px; top: -14px; }
  .price-row { flex-direction: column; align-items: flex-start; gap: 4px; }
  /* mobilon nincs grid-rés, a sín közelebb ül a szöveghez */
  .pricing__list::before, .pricing__list::after { left: -12px; }

  h1 { font-size: 46px; line-height: 0.94; }
  h2 { font-size: 38px; }
  h3 { font-size: 40px; }
  .hero__logo { width: 240px; }  /* mobilon van hely felfelé; az alsó sáv így 11px marad */
  .hero__row, .contact__row { flex-direction: column; align-items: flex-start; gap: 20px; }
}

/* ==========================================================================
   Hero ráfutás mobilon — miért px és miért három sáv
   ==========================================================================
   A fehér lapnak a logó ALATT és a felirat teteje FÖLÖTT kell megállnia,
   hogy a logó alsó (név) sora jól látszódjon, de a felirat már el legyen takarva.
   A kettő közti rés mindössze 26px — vh-ban ezt nem lehet eltalálni, mert
   a rés helye a képernyő magasságától függően 45vh és 61vh között vándorol.

   Mobilon viszont a hero felirat MINDEN mérete rögzített px: a betűméret a
   clamp alsó határán ragad (80px), a sormagasság 0.88 -> 70.4px/sor, a logó
   240px széles (=161.6px magas), alatta 26px margó, a sor alja 56px-re van
   a kép aljától. Ezért px-ben pontosan számolható:

       felirat teteje = 100vh - 56px - (sorok * 70.4px)
       logó látható alja = ez - 26px - 11px (a PNG alsó átlátszó sávja)

   Az egyetlen változó a SOROK SZÁMA, ami a képernyő szélességétől függ
   ("A te körmöd," 80px-en ~429px széles, a hely 100vw-80px):

       < 456px  -> mindkét sor tördel   -> 4 sor -> ablak 338..375px
       456-509  -> csak az első tördel  -> 3 sor -> ablak 267..304px
       >= 510px -> egyik sem tördel     -> 2 sor -> ablak 197..234px

   A --hero-lift mindhárom sávban az ablak közepébe céloz. Ha a felirat
   SZÖVEGE változik, ezeket a határokat újra kell mérni:
     convert -font assets/fonts/Italiana-Regular.ttf -pointsize 80 \
             label:"A te körmöd," -format "%w" info:
   ========================================================================== */
@media (max-width: 455px)                        { :root { --hero-lift: 350px; } }
@media (min-width: 456px) and (max-width: 509px) { :root { --hero-lift: 280px; } }
@media (min-width: 510px) and (max-width: 860px) { :root { --hero-lift: 210px; } }

/* ==========================================================================
   Jogi oldalak (Impresszum, Adatkezelési tájékoztató, Felhasználási feltételek)
   ========================================================================== */
.legal { padding: calc(150px + env(safe-area-inset-top)) 40px 120px; max-width: 860px; margin: 0 auto; }
.legal__back { display: inline-block; margin-bottom: 40px; font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: #8A7A70; }
.legal__title { font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: clamp(38px, 5vw, 64px); line-height: 1; letter-spacing: -0.03em; margin: 0 0 8px; }
.legal__updated { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: #8A7A70; margin: 0 0 40px; }
.legal__notice { background: rgba(168,92,107,0.14); border: 1px solid rgba(168,92,107,0.45); border-radius: 10px; padding: 20px 24px; font-size: 15px; line-height: 1.7; color: #6B5D54; margin-bottom: 50px; }
.legal__notice strong { color: #241D19; }
.legal h2 { font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: clamp(26px, 2.6vw, 34px); letter-spacing: -0.02em; margin: 48px 0 16px; color: #6B3341; }
.legal p { font-size: 16px; line-height: 1.8; color: #6B5D54; font-weight: 300; margin: 0 0 18px; }
.legal ul { margin: 0 0 18px; padding-left: 22px; }
.legal li { font-size: 16px; line-height: 1.8; color: #6B5D54; font-weight: 300; margin-bottom: 8px; }
.legal table { width: 100%; border-collapse: collapse; margin: 0 0 30px; font-size: 15px; }
.legal table td { padding: 10px 0; border-bottom: 1px solid rgba(36,29,25,0.1); vertical-align: top; }
.legal table td:first-child { color: #8A7A70; width: 42%; padding-right: 20px; }
.legal table td:first-child { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; }
.legal strong { color: #241D19; font-weight: 400; }
.legal a { color: #241D19; text-decoration: underline; text-decoration-color: rgba(168,92,107,0.6); text-underline-offset: 3px; }