/* ==========================================================================
   Hellófotó — „Ovifotózás újragondolva" bemutatóoldal
   A brosúra színei és tipográfiája, görgetésre mozgó (Apple-szerű) jelenetek.
   Betűk: Barlow Condensed (a DIN Condensed webes megfelelője) + Rubik,
   saját tárhelyről (latin + latin-ext, az ő/ű miatt).
   ========================================================================== */

@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/barlow-condensed-600-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:'Barlow Condensed';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/barlow-condensed-600-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:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/barlow-condensed-700-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:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/barlow-condensed-700-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:'Barlow Condensed';font-style:normal;font-weight:800;font-display:swap;src:url(fonts/barlow-condensed-800-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:'Barlow Condensed';font-style:normal;font-weight:800;font-display:swap;src:url(fonts/barlow-condensed-800-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:'Rubik';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/rubik-400-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:'Rubik';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/rubik-400-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:'Rubik';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/rubik-500-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:'Rubik';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/rubik-500-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:'Rubik';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/rubik-700-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:'Rubik';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/rubik-700-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;}

:root{
  --cream:#fff7e8; --ink:#111111; --pink:#e6007a; --yellow:#ffd33d; --purple:#4b1d72;
  --pink-deep:#c2006a; --purple-deep:#36124f;
  --head:"Barlow Condensed","Arial Narrow","Helvetica Neue",Arial,sans-serif;
  --body:"Rubik",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --pop:cubic-bezier(.34,1.56,.64,1);
  --pad:clamp(20px,5vw,64px);
  --maxw:1180px;
  --nav-h:64px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; overflow-x:hidden; overflow-x:clip}
html.reduce{scroll-behavior:auto}
body.hf-landing{
  margin:0; background:var(--cream); color:var(--ink);
  font-family:var(--body); font-size:17px; line-height:1.55;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden; overflow-x:clip;
}
img{max-width:100%; height:auto; display:block}
picture{display:block}
a{color:inherit}
::selection{background:var(--pink); color:var(--cream)}
[id]{scroll-margin-top:calc(var(--nav-h) + 12px)}

/* ---------- olvasási folyamatjelző ---------- */
.hf-prog{
  position:fixed; top:0; left:0; right:0; height:4px; z-index:120;
  background:linear-gradient(90deg,var(--pink),var(--yellow));
  transform:scaleX(0); transform-origin:0 50%;
}
body.admin-bar .hf-prog{top:32px}

/* ---------- navigáció ---------- */
.hf-nav{
  position:fixed; top:0; left:0; right:0; z-index:110; height:var(--nav-h);
  display:flex; align-items:center; gap:24px; padding:0 var(--pad);
  transition:background .4s, box-shadow .4s;
}
.hf-nav.scrolled{
  background:rgba(255,247,232,.86);
  backdrop-filter:saturate(160%) blur(16px); -webkit-backdrop-filter:saturate(160%) blur(16px);
  box-shadow:0 1px 0 rgba(17,17,17,.08);
}
.hf-nav__logo{display:flex; align-items:center; opacity:0; transform:translateY(-8px); transition:opacity .5s var(--ease), transform .5s var(--ease)}
.hf-nav__logo img{height:30px; width:auto}
.hf-nav.past-hero .hf-nav__logo{opacity:1; transform:none}
.hf-nav__links{display:flex; gap:clamp(14px,2.4vw,28px); margin:0 auto}
.hf-nav__links a{
  font-family:var(--head); font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  font-size:17px; text-decoration:none; color:var(--ink); opacity:.7; transition:opacity .3s;
}
.hf-nav__links a:hover{opacity:1}
.hf-nav__cta{margin-left:auto}
body.admin-bar .hf-nav{top:32px}
@media (max-width:900px){ .hf-nav__links{display:none} }
@media (max-width:782px){ body.admin-bar .hf-nav{top:46px} body.admin-bar .hf-prog{top:46px} }

/* ---------- gombok ---------- */
.hf-btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--head); font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  font-size:19px; line-height:1; padding:15px 24px 13px; border-radius:999px;
  background:var(--pink); color:var(--cream); text-decoration:none; white-space:nowrap;
  box-shadow:0 10px 26px -12px rgba(230,0,121,.7);
  transition:transform .35s var(--ease), background .3s, box-shadow .3s, color .3s;
}
.hf-btn:hover{transform:translateY(-2px); background:var(--pink-deep); box-shadow:0 14px 30px -12px rgba(230,0,121,.8)}
.hf-btn--ghost{background:transparent; color:inherit; box-shadow:inset 0 0 0 2px currentColor}
.hf-btn--ghost:hover{background:rgba(17,17,17,.06); color:inherit; box-shadow:inset 0 0 0 2px currentColor}
.sec--black .hf-btn--ghost:hover, .sec--purple .hf-btn--ghost:hover{background:rgba(255,247,232,.1)}
.hf-btn--sm{font-size:16px; padding:12px 18px 10px}

/* ---------- általános elrendezés ---------- */
.sec{position:relative; padding:clamp(80px,12vh,160px) var(--pad); overflow:clip}
.sec--pin{padding:0}
.sec--cream{background:var(--cream); color:var(--ink)}
.sec--pink{background:var(--pink); color:var(--cream)}
.sec--black{background:var(--ink); color:var(--cream)}
.sec--yellow{background:var(--yellow); color:var(--ink)}
.sec--purple{background:var(--purple); color:var(--cream)}
.wrap{max-width:var(--maxw); margin:0 auto; position:relative}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,6vw,96px); align-items:center}
@media (max-width:900px){ .grid2{grid-template-columns:1fr} }

p{margin:0 0 1em}
.sec p{font-size:clamp(16px,1.3vw,19px); line-height:1.6; max-width:58ch}
.lead{font-size:clamp(20px,2.3vw,30px) !important; line-height:1.3 !important; font-weight:700; margin:0 0 .9em}
.lead--purple{color:var(--purple)}
strong{font-weight:700}

/* ---------- matrica (a brosúra címkéi) ---------- */
.stk{
  display:inline-block; font-family:var(--head); font-weight:700; text-transform:uppercase;
  line-height:1; letter-spacing:.01em; padding:.16em .42em .1em;
  background:var(--stk-bg,var(--yellow)); color:var(--stk-ink,var(--ink));
  transform:rotate(var(--tilt,-2deg)); box-shadow:0 .1em 0 rgba(0,0,0,.08);
  text-decoration:none;
}
.stk--y{--stk-bg:var(--yellow); --stk-ink:var(--ink)}
.stk--yp{--stk-bg:var(--yellow); --stk-ink:var(--purple)}
.stk--m{--stk-bg:var(--pink); --stk-ink:var(--cream)}
.stk--p{--stk-bg:var(--purple); --stk-ink:var(--cream)}
.stk--py{--stk-bg:var(--purple); --stk-ink:var(--yellow)}
.stk--k{--stk-bg:var(--ink); --stk-ink:var(--cream)}
.stk--c{--stk-bg:var(--cream); --stk-ink:var(--ink)}
.stk--cp{--stk-bg:var(--cream); --stk-ink:var(--purple)}
.tag{font-size:clamp(22px,2.3vw,32px); margin:0 0 14px}

.ttl{margin:0 0 .45em; font-size:clamp(40px,6.4vw,96px); line-height:1.02; font-weight:700}
.ttl--md{font-size:clamp(34px,4.8vw,70px)}
.ttl--sm{font-size:clamp(26px,3.2vw,46px)}
.ttl--xl{font-size:clamp(52px,9vw,150px)}
.ttl .ln{display:block; margin:.06em 0; padding:.06em 0}
.ttl .stk{padding:.14em .4em .08em}

/* ---------- képkeretek ---------- */
.frame{
  position:relative; display:block; --fc:var(--yellow); background:var(--fc);
  padding:clamp(8px,1.1vw,14px); transform:rotate(var(--tilt,2deg));
  box-shadow:0 34px 70px -24px rgba(0,0,0,.45);
}
.frame--yellow{--fc:var(--yellow)} .frame--pink{--fc:var(--pink)} .frame--cream{--fc:var(--cream)} .frame--purple{--fc:var(--purple)}
.frame img{width:100%; height:auto}

.feats{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,56px) clamp(28px,5vw,72px); margin-top:clamp(40px,7vh,90px)}
.feats--col{grid-template-columns:1fr; margin-top:10px; gap:clamp(18px,3vh,30px)}
.feat .stk{display:inline-block}
.feat p{margin-bottom:0}
@media (max-width:640px){ .feats{grid-template-columns:1fr} }

/* ---------- feltárulás görgetésre ---------- */
.rv{opacity:0; transform:translateY(30px); transition:opacity .9s var(--ease), transform 1s var(--ease); transition-delay:var(--d,0s)}
.rv.in{opacity:1; transform:none}
.rv--l{transform:translateX(-48px)}
.rv--r{transform:translateX(48px)}
.rv--rot-l{transform:translate(-70px,40px) rotate(-10deg)}
.rv--rot-r{transform:translate(70px,40px) rotate(10deg)}
.rv--zoom{transform:scale(.82)}
.rv--photo{transform:none; clip-path:inset(14% round 8px); transition:opacity .9s var(--ease), clip-path 1.1s var(--ease)}
.rv--photo.in{clip-path:inset(0 round 0)}
.slap{
  opacity:0; transform:scale(1.25) rotate(-8deg);
  transition:opacity .5s var(--ease), transform .75s var(--pop); transition-delay:var(--d,0s);
}
.slap.in{opacity:1; transform:none}
html.reduce .rv, html.reduce .slap{opacity:1; transform:none; clip-path:none; transition:none}

/* szavankénti kivilágosodás */
[data-words] span{opacity:.32; transition:opacity .35s}
[data-words] span.lit{opacity:1}
html.reduce [data-words] span{opacity:1}

/* firkák (dekoráció) */
.doodle{position:absolute; pointer-events:none; width:clamp(26px,3.6vw,60px); z-index:0; opacity:.9}
.doodle svg{width:100%; height:auto; display:block}
.doodle--spin{animation:spin 14s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
html.reduce .doodle--spin{animation:none}

/* ==========================================================================
   1. Nyitókép
   ========================================================================== */
.hero{min-height:100vh; min-height:100svh; display:grid; align-items:center; padding-top:calc(var(--nav-h) + 30px); padding-bottom:90px}
.hero__grid{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(24px,5vw,72px); align-items:center}
.hero__logo{width:clamp(220px,30vw,400px); margin-bottom:clamp(24px,4vh,48px)}
.hero .ttl{font-size:clamp(46px,7.4vw,116px); margin-bottom:.15em}
.hero .ttl--sm{font-size:clamp(26px,3.4vw,50px); margin-bottom:.4em}
.hero__tag{font-family:var(--body); font-weight:700; color:var(--purple); font-size:clamp(20px,2.4vw,31px) !important; line-height:1.25 !important; margin:0 0 30px}
.hero__cta{display:flex; flex-wrap:wrap; gap:14px}
.hero__art{position:relative}
.hero__majom{position:relative; z-index:1; opacity:0; transform:translateY(40px) scale(.9); transition:opacity 1s var(--ease) .3s, transform 1.2s var(--ease) .3s}
html.ready .hero__majom{opacity:1; transform:none}
.hero__majom img{width:100%; max-width:600px; margin:0 auto; animation:bob 7s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0) rotate(0)} 50%{transform:translateY(-16px) rotate(1.2deg)}}
html.reduce .hero__majom img{animation:none}
.hero__badge{position:absolute; right:2%; bottom:-2%; z-index:2; font-size:clamp(22px,2.6vw,36px)}
.hero__hint{
  position:absolute; left:50%; bottom:22px; transform:translateX(-50%);
  font-family:var(--head); text-transform:uppercase; letter-spacing:.16em; font-size:13px; opacity:.55;
  display:flex; flex-direction:column; align-items:center; gap:8px;
}
.hero__hint i{width:2px; height:40px; background:var(--ink); display:block; transform-origin:top; animation:hint 1.9s var(--ease) infinite}
@keyframes hint{0%{transform:scaleY(0); transform-origin:top} 45%{transform:scaleY(1); transform-origin:top} 55%{transform:scaleY(1); transform-origin:bottom} 100%{transform:scaleY(0); transform-origin:bottom}}
html.ready .hero .slap, html.ready .hero .rv{opacity:1; transform:none}
@media (max-width:900px){
  .hero{padding-top:calc(var(--nav-h) + 16px); padding-bottom:70px}
  .hero__grid{grid-template-columns:1fr}
  .hero__logo{width:min(64vw,300px)}
  .hero__majom img{max-width:min(78vw,420px)}
  .hero__art{margin-top:28px}
  .hero__badge{right:0; bottom:0}
  .hero__hint{display:none}
}

/* ==========================================================================
   Rögzített („pin") jelenetek — csak széles képernyőn és mozgás-engedéllyel
   ========================================================================== */
.pin{position:relative; height:var(--pin-h,300vh)}
.pin__stage{position:sticky; top:0; height:100vh; overflow:hidden; display:flex; flex-direction:column; justify-content:center; padding:calc(var(--nav-h) + 44px) var(--pad) 36px}
body.admin-bar .pin__stage{padding-top:calc(var(--nav-h) + 76px)}
.pin__stage .ttl--md{font-size:clamp(30px,4.2vw,60px)}
html.pin-on .pin .rv{transition:none} /* a pin-jeleneteket a görgetés vezérli, késleltetés nélkül */
html.no-pin .pin{height:auto}
html.no-pin .pin__stage{position:static; height:auto; overflow:visible; padding:clamp(80px,12vh,160px) var(--pad)}

/* ---------- 2. Kik vagyunk mi? ---------- */
.who .lead{max-width:22ch}

/* ---------- 3. Nehézségek: a kártyák egymás után repülnek be ---------- */
.probs .pin{--pin-h:360vh}
.probs__stage{gap:clamp(16px,3vh,36px)}
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.8vw,24px); max-width:var(--maxw); margin:0 auto; width:100%}
.card{padding:clamp(20px,2.2vw,30px); border-radius:8px; min-height:150px; will-change:transform,opacity}
.card h3{font-family:var(--head); font-weight:700; text-transform:uppercase; font-size:clamp(24px,2.3vw,34px); line-height:1; margin:0 0 10px; letter-spacing:.01em}
.card p{margin:0; font-size:clamp(15px,1.15vw,18px) !important; max-width:none}
.card--cream{background:var(--cream); color:var(--ink)}
.card--yellow{background:var(--yellow); color:var(--ink)}
.card--pink{background:var(--pink); color:var(--cream)}
.card--purple{background:var(--purple); color:var(--cream)}
html.pin-on .card{
  --q:clamp(0, calc(var(--p,0) * 7 - var(--i,0)), 1);
  opacity:var(--q);
  transform:translate3d(0, calc((1 - var(--q)) * 70vh), 0) rotate(calc((1 - var(--q)) * -7deg));
}
.probs__after{text-align:center; margin:clamp(10px,2vh,24px) 0 0; font-size:clamp(24px,3vw,44px)}
html.pin-on .probs__after{--q:clamp(0, calc(var(--p,0) * 7 - 6), 1); opacity:var(--q); transform:translateY(calc((1 - var(--q)) * 40px))}
@media (max-width:900px){ .cards{grid-template-columns:1fr} }
@media (min-width:640px) and (max-width:900px){ .cards{grid-template-columns:1fr 1fr} }

/* ---------- 4. Adminisztráció: a laptop marad, a pontok váltják egymást ---------- */
.admin .pin{--pin-h:330vh}
.admin__stage{gap:clamp(14px,3vh,36px)}
.admin__ttl{margin-bottom:0}
.admin__body{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(30px,5vw,80px); align-items:center; max-width:var(--maxw); margin:0 auto; width:100%}
.admin__laptop img{max-height:58vh; width:auto; max-width:100%; margin:0 auto; filter:drop-shadow(0 30px 40px rgba(75,28,114,.25))}
html.pin-on .admin__laptop{
  transform:scale(calc(.8 + .2 * min(1, calc(var(--p,0) * 3)))) rotate(calc(-4deg + 4deg * min(1, calc(var(--p,0) * 3))));
  transform-origin:50% 60%;
}
.feat-list{list-style:none; margin:0; padding:0; display:grid; gap:clamp(18px,3vh,34px)}
.feat-list .feat{transition:opacity .5s, transform .7s var(--ease)}
html.pin-on .feat-list .feat{opacity:.2; transform:translateX(22px)}
html.pin-on .pin[data-step="0"] .feat-list .feat:nth-child(1),
html.pin-on .pin[data-step="1"] .feat-list .feat:nth-child(2),
html.pin-on .pin[data-step="2"] .feat-list .feat:nth-child(3){opacity:1; transform:none}
@media (max-width:900px){ .admin__body{grid-template-columns:1fr} .admin__laptop img{max-height:none; width:min(100%,520px)} }

/* ---------- 5. Digitálisan azonnal ---------- */
.band{margin:clamp(60px,10vh,120px) calc(-1 * var(--pad)) calc(-1 * clamp(80px,12vh,160px)); padding:clamp(36px,6vh,64px) var(--pad)}
.band--purple{background:var(--purple); color:var(--cream)}
.band__in{display:grid; grid-template-columns:auto 1fr; gap:clamp(24px,5vw,72px); align-items:center}
.band__stk{font-size:clamp(30px,4vw,58px)}
.band p{margin:0}
@media (max-width:760px){ .band__in{grid-template-columns:1fr} }

/* ---------- 6. Csoportképek: vízszintes szalag a függőleges görgetésből ---------- */
.groups .pin{--pin-h:380vh}
.groups__stage{padding-left:0; padding-right:0; gap:clamp(18px,3vh,40px)}
.groups__head{padding:0 var(--pad); max-width:var(--maxw); margin:0 auto; width:100%}
.groups__head p{margin:0}
.strip{display:flex; gap:clamp(22px,3vw,48px); padding:20px var(--pad) 30px; align-items:center; will-change:transform}
.strip .frame{flex:0 0 auto}
.strip .frame img{height:clamp(220px,40vh,420px); width:auto}
.strip__end{flex:0 0 auto; padding:0 var(--pad) 0 clamp(10px,3vw,40px); font-size:clamp(30px,4.4vw,64px)}
html.no-pin .strip{overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; margin:0 calc(-1 * var(--pad)); padding-left:var(--pad)}
html.no-pin .strip::-webkit-scrollbar{display:none}
html.no-pin .strip > *{scroll-snap-align:center}
html.no-pin .strip .frame img{height:clamp(240px,52vw,400px)}
html.no-pin .groups__stage{padding-left:var(--pad); padding-right:var(--pad)}
html.no-pin .groups__head{padding:0}

/* ---------- 7. Varázsdoboz: a doboz „kinyílik" ---------- */
.box .pin{--pin-h:280vh}
.box__stage{gap:clamp(14px,3vh,30px)}
.box__wrap{position:relative; width:100%; max-width:880px; margin:0 auto}
.box__media{
  position:relative; height:min(52vh,500px); width:100%; overflow:hidden; border-radius:24px;
  box-shadow:0 40px 80px -30px rgba(75,28,114,.45);
}
.box__media img{width:100%; height:100%; object-fit:cover}
html.pin-on .box__media{
  --o:min(1, calc(var(--p,0) * 1.5));
  transform:scale(calc(.72 + .28 * var(--o)));
  clip-path:inset(calc((1 - var(--o)) * 16%) round calc(24px + (1 - var(--o)) * 30px));
}
.box__copy{
  position:absolute; left:clamp(16px,3vw,40px); bottom:clamp(16px,3vw,40px); z-index:2;
  display:grid; grid-template-columns:1fr auto; gap:20px; align-items:end; max-width:min(92%,760px);
  background:rgba(255,247,232,.94); padding:clamp(18px,2.4vw,30px); border-radius:14px;
  box-shadow:0 20px 50px -20px rgba(0,0,0,.4);
}
.box__copy p{margin:0}
.box__copy .lead{margin-bottom:.4em}
.box__badge{font-size:clamp(20px,2.2vw,30px)}
html.pin-on .box__copy{
  --c:clamp(0, calc(var(--p,0) * 3 - 1.7), 1);
  opacity:var(--c); transform:translateY(calc((1 - var(--c)) * 40px));
}
.box__after{padding:clamp(50px,8vh,100px) 0 0}
.box__after .lead{max-width:34ch}
@media (max-width:900px){
  .box__media{height:auto; aspect-ratio:16/9; border-radius:14px}
  .box__copy{position:static; max-width:none; grid-template-columns:1fr; margin-top:18px; background:transparent; padding:0; box-shadow:none}
}

/* ---------- 8. Sok kis egyéniség ---------- */
.montage__pics{display:grid; grid-template-columns:1.5fr 1fr; gap:clamp(20px,4vw,60px); align-items:center; margin:clamp(20px,4vh,50px) 0 clamp(40px,7vh,80px)}
.montage__small{max-width:300px; justify-self:center}
@media (max-width:760px){ .montage__pics{grid-template-columns:1fr} .montage__small{max-width:240px} }

/* ---------- 9. A képek tovább élnek ---------- */
.products__art img{width:min(100%,620px); margin:0 auto}

/* ---------- 10. Egy nap, két fotózás: a nap átvándorol ---------- */
.day__line{position:relative; height:4px; background:rgba(17,17,17,.14); border-radius:2px; margin:clamp(24px,4vh,44px) 0 clamp(34px,5vh,56px)}
.day__fill{position:absolute; inset:0; background:var(--pink); transform:scaleX(0); transform-origin:0 50%; border-radius:2px}
.day__sun{position:absolute; top:50%; left:0; width:48px; height:48px; margin:-24px 0 0 -24px; transition:left .15s linear}
.day__sun svg{width:100%; height:100%}
.day__cols{display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,4vw,48px)}
.day__cols .feat p{max-width:22ch}
.day__final{margin-top:clamp(28px,5vh,52px); font-size:clamp(24px,3vw,42px)}
.day__art img{width:min(100%,560px); margin:0 auto}
@media (max-width:640px){ .day__cols{grid-template-columns:1fr} }

/* ---------- 11. Ki áll mögötte? ---------- */
.about__grid{grid-template-columns:.85fr 1.15fr; align-items:start; margin-top:clamp(20px,4vh,40px)}
/* A név + „Fotográfus. Apuka.": a főcím és a „20+ év tapasztalat" közötti méret (a .sec p ne írja felül). */
.about__grid .ttl--sm{margin-bottom:.6em; font-size:clamp(32px,4.4vw,64px)}
.about__row{display:flex; flex-wrap:wrap; gap:18px 26px; align-items:center; margin-top:18px; font-size:clamp(22px,2.6vw,36px)}
.about__row .stk{margin:.1em 0}
.about__photo{max-width:460px}
@media (max-width:900px){ .about__grid{grid-template-columns:1fr} .about__photo{max-width:min(80vw,380px)} }

/* ---------- 12. Ajánlat + lábléc ---------- */
.cta__in{text-align:center; display:flex; flex-direction:column; align-items:center}
.cta .lead{max-width:30ch; margin:.4em auto 1.2em}
.cta__btns{display:flex; flex-wrap:wrap; justify-content:center; gap:14px}
.logo-card{display:inline-block; margin-bottom:clamp(20px,4vh,40px)}
.logo-card img{width:clamp(200px,24vw,320px)}
.hf-foot{background:#0a0a0a; color:var(--cream); padding:36px var(--pad); font-size:14px}
.hf-foot__in{max-width:var(--maxw); margin:0 auto; display:flex; flex-wrap:wrap; justify-content:space-between; gap:14px 28px; align-items:center}
.hf-foot__links{display:flex; flex-wrap:wrap; gap:10px 22px; margin:0; padding:0; list-style:none}
.hf-foot a{opacity:.72; text-decoration:none; transition:opacity .3s}
.hf-foot a:hover{opacity:1; text-decoration:underline}