/* =====================================================================
   ZSILÁK MIHÁLY – személyes weboldal
   Monokróm (fekete / fehér) + liquid glass anyag
   Témák: világos alap, sötét a rendszer beállítása vagy a kapcsoló szerint
   ===================================================================== */

/* ---------- Színtokenek – világos ---------- */
:root{
  color-scheme: light;
  --bg:#ffffff;
  --ink:#000000;
  --ink-2:rgba(0,0,0,.66);
  --ink-3:rgba(0,0,0,.45);
  --ink-4:rgba(0,0,0,.16);
  --hair:rgba(0,0,0,.11);
  --hair-2:rgba(0,0,0,.06);
  --fill:rgba(0,0,0,.035);
  --glass:rgba(255,255,255,.46);
  --glass-2:rgba(255,255,255,.7);
  --glass-3:rgba(252,252,252,.86);
  --rim-a:rgba(255,255,255,1);
  --rim-b:rgba(255,255,255,.55);
  --edge:rgba(0,0,0,.09);
  --spec:rgba(255,255,255,.95);
  --drop:rgba(0,0,0,.16);
  --sheen:rgba(255,255,255,.95);
  --blob:rgba(0,0,0,.075);
  --grain:.045;
  --inv:#000000;
  --on-inv:#ffffff;
  --scrim:rgba(255,255,255,.4);
}

/* ---------- Színtokenek – sötét (rendszer szerint) ---------- */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --bg:#000000;
    --ink:#ffffff;
    --ink-2:rgba(255,255,255,.68);
    --ink-3:rgba(255,255,255,.45);
    --ink-4:rgba(255,255,255,.18);
    --hair:rgba(255,255,255,.13);
    --hair-2:rgba(255,255,255,.07);
    --fill:rgba(255,255,255,.04);
    --glass:rgba(255,255,255,.06);
    --glass-2:rgba(255,255,255,.1);
    --glass-3:rgba(20,20,20,.78);
    --rim-a:rgba(255,255,255,.6);
    --rim-b:rgba(255,255,255,.16);
    --edge:rgba(255,255,255,.07);
    --spec:rgba(255,255,255,.4);
    --drop:rgba(0,0,0,.65);
    --sheen:rgba(255,255,255,.2);
    --blob:rgba(255,255,255,.12);
    --grain:.07;
    --inv:#ffffff;
    --on-inv:#000000;
    --scrim:rgba(0,0,0,.5);
  }
}

/* ---------- Színtokenek – sötét (kapcsolóval) ---------- */
:root[data-theme="dark"]{
  color-scheme: dark;
  --bg:#000000;
  --ink:#ffffff;
  --ink-2:rgba(255,255,255,.68);
  --ink-3:rgba(255,255,255,.45);
  --ink-4:rgba(255,255,255,.18);
  --hair:rgba(255,255,255,.13);
  --hair-2:rgba(255,255,255,.07);
  --fill:rgba(255,255,255,.04);
  --glass:rgba(255,255,255,.06);
  --glass-2:rgba(255,255,255,.1);
  --glass-3:rgba(20,20,20,.78);
  --rim-a:rgba(255,255,255,.6);
  --rim-b:rgba(255,255,255,.16);
  --edge:rgba(255,255,255,.07);
  --spec:rgba(255,255,255,.4);
  --drop:rgba(0,0,0,.65);
  --sheen:rgba(255,255,255,.2);
  --blob:rgba(255,255,255,.12);
  --grain:.07;
  --inv:#ffffff;
  --on-inv:#000000;
  --scrim:rgba(0,0,0,.5);
}

/* ---------- Tipográfia és méretek ---------- */
:root{
  --f-display:"Archivo","Arial Black","Helvetica Neue",Arial,sans-serif;
  --f-body:"Geist","SF Pro Text",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --wrap:1320px;
  --gut:clamp(20px,4.2vw,60px);
  --r-xl:34px;
  --r-lg:26px;
  --r-md:18px;
  --r-sm:12px;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --spring:cubic-bezier(.34,1.56,.64,1);
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
html{
  scroll-padding-top:calc(env(safe-area-inset-top,0px) + 96px);
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:17px;
  line-height:1.6;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  transition:background-color .5s var(--ease-out), color .5s var(--ease-out);
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
p{margin:0}
h1,h2,h3,h4{margin:0;font-weight:inherit}
ul,ol{margin:0;padding:0;list-style:none}
::selection{background:var(--inv);color:var(--on-inv)}

:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--ink);
  outline-offset:3px;
  border-radius:10px;
}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.sr{position:absolute !important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Háttér: lassan mozgó fényfoltok + szemcse ---------- */
.ambient{position:fixed;inset:0;z-index:-2;overflow:hidden;pointer-events:none}
.ambient i{
  position:absolute;border-radius:50%;
  background:radial-gradient(closest-side,var(--blob),transparent);
  will-change:transform;
}
.ambient i:nth-child(1){width:70vmax;height:70vmax;left:-20vmax;top:-25vmax;animation:drift1 38s ease-in-out infinite alternate}
.ambient i:nth-child(2){width:55vmax;height:55vmax;right:-18vmax;top:20vh;animation:drift2 44s ease-in-out infinite alternate}
.ambient i:nth-child(3){width:45vmax;height:45vmax;left:20vw;bottom:-25vmax;animation:drift3 52s ease-in-out infinite alternate}
.ambient i:nth-child(4){width:30vmax;height:30vmax;left:55vw;top:-10vmax;animation:drift1 60s ease-in-out infinite alternate-reverse}
@keyframes drift1{to{transform:translate3d(18vw,22vh,0) scale(1.15)}}
@keyframes drift2{to{transform:translate3d(-22vw,-12vh,0) scale(.85)}}
@keyframes drift3{to{transform:translate3d(-10vw,-30vh,0) scale(1.2)}}
.grain{
  position:fixed;inset:-50%;z-index:-1;pointer-events:none;opacity:var(--grain);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation:grain 1.2s steps(6) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}
  60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}
}

/* =====================================================================
   LIQUID GLASS – az anyag
   ===================================================================== */
.glass{
  position:relative;
  isolation:isolate;
  background:var(--glass);
  -webkit-backdrop-filter:blur(var(--gb,20px)) saturate(170%);
  backdrop-filter:blur(var(--gb,20px)) saturate(170%);
  border-radius:var(--r,var(--r-lg));
  box-shadow:
    inset 0 1px 0 0 var(--spec),
    inset 0 0 0 1px var(--edge),
    0 18px 50px -18px var(--drop);
}
/* fényes perem – átlós csillanás */
.glass::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;z-index:1;
  background:linear-gradient(140deg,var(--rim-a) 0%,transparent 34%,transparent 66%,var(--rim-b) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
}
/* az egeret követő fényfolt */
.glass::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1;
  background:radial-gradient(220px 160px at var(--mx,50%) var(--my,-20%),var(--sheen),transparent 70%);
  opacity:0;transition:opacity .45s var(--ease-out);
  mix-blend-mode:soft-light;
}
.glass.lit::after{opacity:1}
.glass--strong{background:var(--glass-2)}
.glass--solid{background:var(--glass-3)}
/* Chromium: valódi fénytörés (SVG elmozdítás-térkép) */
.refract .glass.bent{
  -webkit-backdrop-filter:var(--bend) blur(var(--gb,20px)) saturate(170%);
  backdrop-filter:var(--bend) blur(var(--gb,20px)) saturate(170%);
}

/* ---------- Gombok ---------- */
.btn{
  --r:999px;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:0 24px;
  font-weight:500;font-size:16px;letter-spacing:-.005em;
  border-radius:999px;white-space:nowrap;
  transition:transform .5s var(--spring),background-color .3s,box-shadow .3s,color .3s;
  -webkit-tap-highlight-color:transparent;
  user-select:none;
}
.btn svg{width:18px;height:18px;flex:none}
.btn:active{transform:scale(.955);transition-duration:.12s}
.btn--solid{
  background:var(--inv);color:var(--on-inv);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 14px 34px -14px var(--drop);
  position:relative;overflow:hidden;isolation:isolate;
}
.btn--solid::after{
  content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;
  background:radial-gradient(140px 80px at var(--mx,50%) var(--my,0%),rgba(128,128,128,.45),transparent 70%);
  opacity:0;transition:opacity .35s;
}
.btn--solid:hover::after{opacity:1}
.btn--glass{color:var(--ink)}
.btn--ghost{color:var(--ink);box-shadow:inset 0 0 0 1px var(--hair)}
.btn--ghost:hover{box-shadow:inset 0 0 0 1px var(--ink-3)}
.btn--sm{min-height:40px;padding:0 16px;font-size:14px;gap:8px}
.btn--sm svg{width:16px;height:16px}
.btn--icon{width:44px;min-height:44px;padding:0}
.btn[disabled]{opacity:.4;pointer-events:none}

.chip{
  --r:999px;
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 14px;border-radius:999px;font-size:14px;line-height:1.2;
  color:var(--ink-2);
}

/* ---------- Státusz-jelölő (monokróm) ---------- */
.dot{
  --s:10px;
  display:inline-block;width:var(--s);height:var(--s);border-radius:50%;flex:none;
  position:relative;
}
.dot[data-s="free"]{background:var(--ink)}
.dot[data-s="partial"]{background:linear-gradient(90deg,var(--ink) 50%,transparent 50%);box-shadow:inset 0 0 0 1.5px var(--ink)}
.dot[data-s="busy"]{box-shadow:inset 0 0 0 1.5px var(--ink)}
.dot[data-s="busy"]::after{
  content:"";position:absolute;left:50%;top:-1px;bottom:-1px;width:1.5px;background:var(--ink);
  transform:translateX(-50%) rotate(45deg);
}
.dot[data-s="off"]{box-shadow:inset 0 0 0 1.5px var(--ink-3);background:transparent}
.dot[data-s="off"]::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--ink-4)}
.dot.pulse[data-s="free"]::before,.dot.pulse[data-s="partial"]::before{
  content:"";position:absolute;inset:-5px;border-radius:50%;
  box-shadow:0 0 0 1.5px var(--ink);
  animation:pulse 2.2s var(--ease-out) infinite;
}
@keyframes pulse{0%{transform:scale(.5);opacity:.9}100%{transform:scale(1.6);opacity:0}}

/* =====================================================================
   NAVIGÁCIÓ – lebegő üvegkapszula (asztali) + alsó fülsáv (mobil)
   ===================================================================== */
.nav{
  position:fixed;z-index:60;left:50%;
  top:calc(env(safe-area-inset-top,0px) + 16px);
  transform:translateX(-50%);
  --r:999px;--gb:24px;
  display:flex;align-items:center;gap:6px;
  padding:6px;
  transition:padding .5s var(--ease-out),opacity .4s,transform .6s var(--spring);
}
.nav.hide{opacity:0;transform:translate(-50%,-140%);pointer-events:none}
.nav-mark{
  display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  background:var(--inv);color:var(--on-inv);
  font:800 14px/1 var(--f-display);font-stretch:125%;letter-spacing:-.02em;
  flex:none;position:relative;z-index:2;
}
.nav-links{position:relative;display:flex;align-items:center;gap:0;overflow:hidden;
  transition:max-width .6s var(--ease-out),opacity .35s;max-width:760px}
.nav-links a{
  position:relative;z-index:2;
  padding:11px 15px;font-size:14.5px;font-weight:500;color:var(--ink-2);
  border-radius:999px;white-space:nowrap;transition:color .3s;
}
.nav-links a:hover{color:var(--ink)}
.nav-links a.on{color:var(--ink)}
.nav-ind{
  position:absolute;z-index:1;top:0;left:0;height:100%;border-radius:999px;
  background:var(--glass-2);
  box-shadow:inset 0 1px 0 var(--spec),inset 0 0 0 1px var(--edge);
  opacity:0;transition:opacity .3s;
  pointer-events:none;
}
.nav-ind.on{opacity:1}
.nav-now{
  display:flex;align-items:center;gap:9px;padding:0 14px 0 12px;height:44px;border-radius:999px;
  font-size:14px;font-weight:500;color:var(--ink);white-space:nowrap;
  box-shadow:inset 0 0 0 1px var(--hair);
  position:relative;z-index:2;
}
.nav-now small{color:var(--ink-3);font-size:13px;font-weight:400}
.nav-tools{display:flex;gap:4px;position:relative;z-index:2}
.icon-btn{
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:var(--ink);
  transition:background-color .25s,transform .45s var(--spring);
}
.icon-btn:hover{background:var(--fill)}
.icon-btn:active{transform:scale(.9)}
.icon-btn svg{width:19px;height:19px}
.nav-cur{display:none;font-size:14.5px;font-weight:500;padding:0 12px;white-space:nowrap;position:relative;z-index:2}

/* összecsukott állapot görgetéskor (mint az iOS fülsáv) */
.nav.mini .nav-links{max-width:0;opacity:0}
.nav.mini .nav-cur{display:block}
.nav.mini .nav-now small{display:none}

/* mobil fülsáv */
.tabbar{
  position:fixed;z-index:60;left:50%;transform:translateX(-50%);
  bottom:calc(env(safe-area-inset-bottom,0px) + 14px);
  --r:999px;--gb:26px;
  display:none;align-items:center;padding:6px;gap:2px;
  transition:transform .6s var(--spring),opacity .4s;
}
.tabbar.hide{transform:translate(-50%,160%);opacity:0}
.tabbar a{
  position:relative;z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:3px;
  width:62px;padding:8px 0 7px;border-radius:999px;
  font-size:10.5px;font-weight:500;color:var(--ink-2);
  -webkit-tap-highlight-color:transparent;
}
.tabbar a svg{width:21px;height:21px}
.tabbar a.on{color:var(--ink)}
.tabbar .nav-ind{border-radius:999px}
.topbtns{
  position:fixed;z-index:60;right:14px;top:calc(env(safe-area-inset-top,0px) + 12px);
  display:none;gap:6px;
}
.topbtns .icon-btn{--r:999px}

@media (max-width:900px){
  .nav{display:none}
  .tabbar{display:flex}
  .topbtns{display:flex}
}

/* =====================================================================
   HERO
   ===================================================================== */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding-bottom:clamp(28px,5vh,56px);
  overflow:hidden;
}
.hero-stage{position:absolute;inset:0;pointer-events:none}
.hero-name{
  position:absolute;left:0;right:0;
  top:clamp(92px,15vh,170px);
  padding-inline:calc(var(--gut) - .04em);
  font-family:var(--f-display);
  font-weight:800;font-stretch:125%;
  font-variation-settings:"wdth" 125;
  font-size:clamp(3.4rem,15.4vw,17.5rem);
  line-height:.84;letter-spacing:-.045em;
  text-transform:uppercase;
  color:var(--ink);
  z-index:1;
  user-select:none;
}
.hero-name span{display:block;overflow:hidden;padding-top:.12em;margin-top:-.12em}
.hero-name span:nth-child(2){padding-left:.9em}
.hero-name i{display:inline-block;font-style:normal;will-change:transform}
.hero-outline{
  color:transparent;
  -webkit-text-stroke:1.2px #fff;
  mix-blend-mode:difference;
  z-index:3;
  -webkit-mask-image:var(--pmask);
  mask-image:var(--pmask);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:var(--pw) var(--ph);mask-size:var(--pw) var(--ph);
  -webkit-mask-position:var(--px) var(--py);mask-position:var(--px) var(--py);
}
.portrait{
  position:absolute;z-index:2;
  right:clamp(0px,9vw,180px);bottom:0;
  height:min(94svh,1180px);
  aspect-ratio:860/1180;
  will-change:transform;
}
.portrait img{
  width:100%;height:100%;object-fit:contain;object-position:bottom center;
  -webkit-mask-image:linear-gradient(to bottom,#000 72%,transparent 99%);
  mask-image:linear-gradient(to bottom,#000 72%,transparent 99%);
  filter:drop-shadow(0 0 1px var(--ink-4));
}
.portrait.bw img{filter:grayscale(1) contrast(1.06) drop-shadow(0 0 1px var(--ink-4))}
.portrait-glow{
  position:absolute;z-index:1;right:clamp(0px,9vw,180px);bottom:-10%;
  width:min(70svh,820px);height:min(90svh,1100px);
  background:radial-gradient(closest-side,var(--blob),transparent 72%);
  transform:translateX(12%);
  filter:blur(10px);
}
/* keretes (nem kivágott) fotó */
.hero--frame .portrait{
  right:var(--gut);bottom:auto;top:clamp(120px,19vh,210px);
  height:min(60svh,640px);aspect-ratio:4/5;
  --r:var(--r-xl);
  padding:10px;
}
.hero--frame .portrait img{
  border-radius:calc(var(--r-xl) - 10px);object-fit:cover;object-position:center 30%;
  -webkit-mask-image:none;mask-image:none;filter:none;
}
.hero--frame .portrait.bw img{filter:grayscale(1) contrast(1.06)}
.hero--frame .hero-outline,.hero--frame .portrait-glow{display:none}

.hero-foot{
  position:relative;z-index:4;
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:32px;
  pointer-events:none;
}
.hero-foot > *{pointer-events:auto}
.hero-copy{max-width:520px}
.hero-role{display:flex;align-items:center;gap:10px;font-size:15px;color:var(--ink-2);margin-bottom:14px}
.hero-role::before{content:"";width:28px;height:1px;background:var(--ink-3)}
.hero-head{
  font-family:var(--f-display);font-weight:600;font-stretch:100%;
  font-size:clamp(1.55rem,2.3vw,2.2rem);line-height:1.08;letter-spacing:-.025em;
  margin-bottom:14px;text-wrap:balance;
}
.hero-pitch{color:var(--ink-2);font-size:16.5px;max-width:48ch}
.hero-ctas{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}

.status-card{
  --r:var(--r-lg);
  width:330px;padding:18px 18px 16px;
  display:grid;gap:12px;
}
.sc-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.sc-state{display:flex;align-items:center;gap:10px;font-weight:600;font-size:17px;letter-spacing:-.01em}
.sc-clock{font-variant-numeric:tabular-nums;color:var(--ink-3);font-size:13.5px}
.sc-line{font-size:14.5px;color:var(--ink-2);line-height:1.45}
.sc-line b{color:var(--ink);font-weight:500}
.sc-actions{display:flex;gap:8px}
.sc-actions .btn{flex:1}
.sc-msg{font-size:14px;color:var(--ink);padding:10px 12px;border-radius:12px;background:var(--fill)}

/* a lencse – egérkövető liquid glass csepp */
.lens{
  position:absolute;z-index:5;left:0;top:0;
  width:190px;height:190px;border-radius:50%;
  --r:50%;--gb:0px;
  pointer-events:none;
  opacity:0;
  transition:opacity .45s var(--ease-out);
  will-change:transform;
  background:rgba(255,255,255,.02);
  box-shadow:
    inset 0 2px 1px -1px rgba(255,255,255,.75),
    inset 0 -2px 3px -1px rgba(255,255,255,.25),
    inset 0 0 0 1px rgba(255,255,255,.18),
    inset 0 0 30px rgba(255,255,255,.06),
    0 20px 40px -12px rgba(0,0,0,.45);
}
.lens.on{opacity:1}
:root:not(.refract) .lens{
  -webkit-backdrop-filter:blur(3px) contrast(1.15) brightness(1.12);
  backdrop-filter:blur(3px) contrast(1.15) brightness(1.12);
}
.refract .lens{
  -webkit-backdrop-filter:url(#zs-lens) brightness(1.08) contrast(1.08);
  backdrop-filter:url(#zs-lens) brightness(1.08) contrast(1.08);
}
.lens::before{background:linear-gradient(160deg,rgba(255,255,255,.9),transparent 40%,transparent 60%,rgba(255,255,255,.35))}

.scroll-cue{
  position:absolute;z-index:4;left:50%;bottom:18px;transform:translateX(-50%);
  width:26px;height:42px;border-radius:999px;box-shadow:inset 0 0 0 1.5px var(--ink-3);
}
.scroll-cue::after{
  content:"";position:absolute;left:50%;top:9px;width:3px;height:8px;border-radius:3px;background:var(--ink);
  transform:translateX(-50%);animation:cue 2s var(--ease-io) infinite;
}
@keyframes cue{0%{opacity:0;transform:translate(-50%,-4px)}40%{opacity:1}100%{opacity:0;transform:translate(-50%,12px)}}

@media (max-width:1100px){
  .status-card{width:300px}
  .portrait{right:0}
  .portrait-glow{right:0}
}
@media (max-width:900px){
  .hero{padding-bottom:120px;justify-content:flex-start}
  .hero-name{top:calc(env(safe-area-inset-top,0px) + 70px);font-size:clamp(3rem,16.4vw,9rem)}
  .hero-name span:nth-child(2){padding-left:0}
  .portrait{right:-4vw;height:min(62svh,640px);bottom:auto;top:calc(env(safe-area-inset-top,0px) + 26vw + 70px)}
  .portrait-glow{top:20vh;bottom:auto;right:-10vw;height:60svh;width:90vw}
  .hero--frame .portrait{top:calc(env(safe-area-inset-top,0px) + 38vw + 70px);right:var(--gut);height:auto;width:62vw}
  .hero-foot{
    grid-template-columns:1fr;gap:18px;
    margin-top:calc(env(safe-area-inset-top,0px) + 26vw + 70px + min(62svh,640px) - 22svh);
  }
  .hero--frame .hero-foot{margin-top:calc(38vw + 70px + 62vw * 1.25 + 30px)}
  .hero-copy{max-width:none}
  .status-card{width:100%}
  .scroll-cue{display:none}
  .lens{display:none}
}

/* =====================================================================
   SZEKCIÓK – közös
   ===================================================================== */
.sec{position:relative;padding-block:clamp(88px,12vw,170px)}
.sec-head{
  display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:28px 60px;align-items:end;
  margin-bottom:clamp(44px,6vw,84px);
}
.h2{
  font-family:var(--f-display);font-weight:700;font-stretch:118%;
  font-variation-settings:"wdth" 118;
  font-size:clamp(2.7rem,6.6vw,6.2rem);line-height:.92;letter-spacing:-.04em;
  text-wrap:balance;
}
.sec-lead{color:var(--ink-2);font-size:18px;max-width:46ch;justify-self:end}
.sec-lead b{color:var(--ink);font-weight:500}
@media (max-width:900px){
  .sec-head{grid-template-columns:1fr}
  .sec-lead{justify-self:start}
}
.h3{
  font-family:var(--f-display);font-weight:650;font-stretch:108%;
  font-size:clamp(1.7rem,3vw,2.6rem);line-height:1;letter-spacing:-.03em;
}
.muted{color:var(--ink-2)}
.faint{color:var(--ink-3)}
.hr{height:1px;background:var(--hair);border:0;margin:0}

/* =====================================================================
   MUNKÁK
   ===================================================================== */
.works{display:grid;gap:clamp(90px,11vw,160px)}
.work{
  display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:clamp(36px,5vw,80px);align-items:center;
}
.work:nth-child(even) .work-media{order:2}
.work-media{position:relative;padding-bottom:7%;perspective:1400px}
.browser{
  --r:22px;--gb:24px;
  padding:0;overflow:hidden;
  transform-style:preserve-3d;
  transition:transform .8s var(--ease-out);
}
.browser-bar{display:flex;align-items:center;gap:12px;padding:12px 14px;border-bottom:1px solid var(--hair-2);position:relative;z-index:2}
.browser-dots{display:flex;gap:6px}
.browser-dots i{width:10px;height:10px;border-radius:50%;box-shadow:inset 0 0 0 1.2px var(--ink-3)}
.browser-url{
  flex:1;max-width:340px;margin-inline:auto;
  display:flex;align-items:center;justify-content:center;gap:6px;
  height:28px;border-radius:999px;background:var(--fill);font-size:12.5px;color:var(--ink-3);
}
.browser-url svg{width:12px;height:12px}
.screen{position:relative;display:block;width:100%;aspect-ratio:16/10;overflow:hidden;background:var(--fill);text-align:left}
.screen img{width:100%;height:auto;will-change:transform;
  filter:grayscale(1) contrast(1.04);
  transition:filter .9s var(--ease-out),transform var(--dur,6s) var(--ease-io);
}
.work:hover .screen img,.work.show .screen img{filter:grayscale(0) contrast(1)}
.work:hover .screen img.long{transform:translateY(calc(-1 * var(--dist,0px)))}
.screen .play{
  position:absolute;inset:auto 16px 16px auto;z-index:2;
  --r:999px;
  display:flex;align-items:center;gap:8px;padding:10px 16px;font-size:14px;font-weight:500;
  transition:transform .5s var(--spring);
}
.work:hover .screen .play{transform:scale(1.04)}
.phone{
  position:absolute;right:-3%;bottom:0;width:21%;min-width:120px;
  --r:30px;padding:6px;
  transform:translateZ(60px);
  transition:transform .8s var(--ease-out);
}
.phone .ph-screen{position:relative;border-radius:24px;overflow:hidden;aspect-ratio:390/844;background:var(--fill)}
.phone .ph-screen img{width:100%;height:100%;object-fit:cover;object-position:top;filter:grayscale(1);transition:filter .9s var(--ease-out)}
.work:hover .phone .ph-screen img{filter:none}
.phone .island{position:absolute;z-index:2;top:8px;left:50%;transform:translateX(-50%);width:34%;height:14px;border-radius:999px;background:#000}
.work:nth-child(even) .phone{right:auto;left:-3%}

.work-info{display:grid;gap:20px;align-content:center}
.work-kind{font-size:15px;color:var(--ink-3)}
.work-title{
  font-family:var(--f-display);font-weight:700;font-stretch:115%;
  font-size:clamp(2.2rem,4.4vw,4rem);line-height:.95;letter-spacing:-.035em;
}
.work-meta{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;font-size:14.5px;margin:0}
.work-meta dt{color:var(--ink-3)}
.work-meta dd{margin:0;color:var(--ink)}
.work-desc{color:var(--ink-2);max-width:52ch}
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tags .chip{font-size:13.5px}
.work-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
@media (max-width:900px){
  .work{grid-template-columns:1fr}
  .work:nth-child(even) .work-media{order:0}
  .phone{width:26%}
}

/* =====================================================================
   SZOLGÁLTATÁSOK – sorok, közös csúszó üveglap
   ===================================================================== */
.svc{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.5fr);gap:clamp(36px,6vw,100px);align-items:start}
.svc-side{position:sticky;top:120px;display:grid;gap:24px}
.svc-note{font-size:14.5px;color:var(--ink-3);max-width:40ch}
.svc-list{position:relative}
.svc-plate{
  position:absolute;left:-18px;right:-18px;top:0;height:0;z-index:0;
  --r:var(--r-lg);
  opacity:0;pointer-events:none;
  transition:opacity .35s var(--ease-out);
}
.svc-plate.on{opacity:1}
.svc-row{position:relative;z-index:1;border-top:1px solid var(--hair)}
.svc-row:last-child{border-bottom:1px solid var(--hair)}
.svc-btn{
  width:100%;display:grid;grid-template-columns:minmax(0,1fr) auto 36px;align-items:center;gap:18px;
  padding:26px 0;text-align:left;
}
.svc-title{
  font-family:var(--f-display);font-weight:600;font-stretch:110%;
  font-size:clamp(1.45rem,2.5vw,2.15rem);line-height:1.05;letter-spacing:-.03em;
}
.svc-price{font-size:15px;color:var(--ink-2);white-space:nowrap;font-variant-numeric:tabular-nums}
.svc-plus{
  width:36px;height:36px;border-radius:50%;display:grid;place-items:center;box-shadow:inset 0 0 0 1px var(--hair);
  transition:transform .6s var(--spring),background-color .3s,color .3s;
}
.svc-plus svg{width:16px;height:16px}
.svc-row.open .svc-plus{transform:rotate(45deg);background:var(--inv);color:var(--on-inv);box-shadow:none}
.svc-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .65s var(--ease-out)}
.svc-row.open .svc-body{grid-template-rows:1fr}
.svc-body > div{overflow:hidden}
.svc-inner{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:24px 40px;padding:0 0 30px}
.svc-inner p{color:var(--ink-2);max-width:52ch}
.svc-inc{display:grid;gap:9px;font-size:15px}
.svc-inc li{display:flex;gap:10px;align-items:baseline}
.svc-inc li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ink);flex:none;transform:translateY(-2px)}
.svc-time{font-size:14px;color:var(--ink-3);margin-top:12px}
@media (max-width:900px){
  .svc{grid-template-columns:1fr}
  .svc-side{position:static}
  .svc-inner{grid-template-columns:1fr}
  .svc-btn{grid-template-columns:minmax(0,1fr) 36px}
  .svc-price{grid-column:1;grid-row:2;margin-top:-8px}
  .svc-plus{grid-row:1/3;grid-column:2}
  .svc-plate{left:-10px;right:-10px}
}

/* =====================================================================
   FOLYAMAT – valódi sorrend, ezért számozott
   ===================================================================== */
.steps{position:relative;display:grid;grid-template-columns:repeat(var(--n,5),minmax(0,1fr));gap:28px}
.steps-line{position:absolute;left:0;right:0;top:27px;height:1px;background:var(--hair)}
.steps-line i{position:absolute;inset:0;background:var(--ink);transform-origin:left;transform:scaleX(var(--p,0))}
.step{position:relative;display:grid;gap:14px;align-content:start}
.step-n{
  width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  --r:50%;
  font:700 18px/1 var(--f-display);font-stretch:120%;font-variant-numeric:tabular-nums;
  transition:background-color .5s,color .5s,transform .7s var(--spring);
}
.step.done .step-n{background:var(--inv);color:var(--on-inv);transform:scale(1.06)}
.step h3{font-family:var(--f-display);font-weight:600;font-stretch:108%;font-size:1.45rem;letter-spacing:-.02em;line-height:1.1;margin-top:6px}
.step p{color:var(--ink-2);font-size:15.5px}
@media (max-width:900px){
  .steps{grid-template-columns:1fr;gap:34px;padding-left:76px}
  .steps-line{left:27px;right:auto;top:0;bottom:0;width:1px;height:auto}
  .steps-line i{transform-origin:top;transform:scaleY(var(--p,0))}
  .step-n{position:absolute;left:-76px;top:-6px}
  .step h3{margin-top:0}
}

/* =====================================================================
   NAPTÁR ÉS ELÉRHETŐSÉG
   ===================================================================== */
.avail{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:22px;align-items:start}
.cal{--r:var(--r-xl);padding:22px 22px 18px;position:relative}
.cal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.cal-title{font-family:var(--f-display);font-weight:650;font-stretch:112%;font-size:1.7rem;letter-spacing:-.03em;text-transform:capitalize}
.cal-nav{display:flex;gap:6px}
.cal-nav .icon-btn{box-shadow:inset 0 0 0 1px var(--hair)}
.cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.cal-dow{font-size:12.5px;color:var(--ink-3);text-align:center;padding:4px 0 8px}
.cal-day{
  position:relative;aspect-ratio:1/1;min-height:44px;border-radius:14px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  font-variant-numeric:tabular-nums;font-size:15.5px;font-weight:500;
  transition:background-color .25s,transform .45s var(--spring),box-shadow .25s;
}
.cal-day:not(.blank):hover{background:var(--fill);transform:scale(1.06)}
.cal-day.blank{pointer-events:none}
.cal-day.past{opacity:.28}
.cal-day[data-s="busy"],.cal-day[data-s="off"]{
  background-image:repeating-linear-gradient(135deg,var(--hair-2) 0 1px,transparent 1px 7px);
}
.cal-day[data-s="off"] .num,.cal-day[data-s="busy"] .num{color:var(--ink-3)}
.cal-day.today{box-shadow:inset 0 0 0 1.5px var(--ink)}
.cal-day.today::after{
  content:"";position:absolute;inset:-4px;border-radius:17px;box-shadow:0 0 0 1px var(--ink-3);
  animation:todayRing 2.6s var(--ease-out) infinite;
}
@keyframes todayRing{0%{opacity:.8;transform:scale(.94)}100%{opacity:0;transform:scale(1.12)}}
.cal-day.sel{background:var(--inv);color:var(--on-inv)}
.cal-day.sel .dot[data-s]{--ink:var(--on-inv);--ink-3:var(--on-inv)}
.cal-day .dot{--s:7px}
.cal-day .note-mark{position:absolute;top:7px;right:8px;width:4px;height:4px;border-radius:50%;background:var(--ink-3)}
.cal-legend{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:16px;padding-top:14px;border-top:1px solid var(--hair-2);font-size:13.5px;color:var(--ink-2)}
.cal-legend span{display:inline-flex;align-items:center;gap:8px}
.cal-anim{animation:calIn .55s var(--ease-out)}
.cal-anim.back{animation-name:calInBack}
@keyframes calIn{from{opacity:0;transform:translateX(28px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@keyframes calInBack{from{opacity:0;transform:translateX(-28px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}

.pop{
  position:absolute;z-index:20;width:250px;padding:16px;
  --r:var(--r-md);
  display:grid;gap:10px;
  transform-origin:var(--ox,50%) var(--oy,100%);
  animation:popIn .5s var(--spring);
}
@keyframes popIn{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}
.pop-date{font-weight:600;font-size:15.5px;text-transform:capitalize}
.pop-state{display:flex;align-items:center;gap:8px;font-size:14.5px}
.pop-note{font-size:14px;color:var(--ink-2)}

.now{--r:var(--r-xl);padding:26px;display:grid;gap:18px}
.now-clock{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.now-time{
  font-family:var(--f-display);font-weight:600;font-stretch:112%;
  font-size:clamp(3rem,5.4vw,4.6rem);line-height:.9;letter-spacing:-.04em;font-variant-numeric:tabular-nums;
}
.now-time .sec{font-size:.38em;color:var(--ink-3);letter-spacing:0;padding:0;margin-left:4px}
.now-tz{font-size:13px;color:var(--ink-3);text-align:right}
.now-state{display:flex;align-items:center;gap:12px;font-size:1.35rem;font-weight:600;letter-spacing:-.02em}
.now-state .dot{--s:12px}
.now-lines{display:grid;gap:8px;font-size:15px;color:var(--ink-2)}
.now-lines b{color:var(--ink);font-weight:500}
.now-actions{display:flex;flex-wrap:wrap;gap:8px}
.week{--r:var(--r-lg);padding:8px 20px;margin-top:22px}
.week-row{display:grid;grid-template-columns:62px 1fr auto;gap:12px;align-items:center;padding:11px 0;border-bottom:1px solid var(--hair-2);font-size:14.5px}
.week-row:last-child{border-bottom:0}
.week-row.is-today{font-weight:600}
.week-row .d{color:var(--ink-3)}
.week-row.is-today .d{color:var(--ink)}
.week-row .h{font-variant-numeric:tabular-nums;color:var(--ink-2)}
@media (max-width:900px){
  .avail{grid-template-columns:1fr}
  .cal{padding:16px 12px 14px}
  .cal-grid{gap:3px}
  .cal-day{border-radius:11px;font-size:14.5px;gap:4px}
}

/* =====================================================================
   BEMUTATKOZÁS – ablak
   ===================================================================== */
.win{
  --r:var(--r-xl);--gb:28px;
  display:grid;grid-template-rows:auto 1fr;
  overflow:hidden;
  touch-action:pan-y;
}
.win-bar{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:12px 16px;border-bottom:1px solid var(--hair-2);
  cursor:grab;user-select:none;position:relative;z-index:2;
}
.win-bar:active{cursor:grabbing}
.win-grip{justify-self:start;width:38px;height:5px;border-radius:9px;background:var(--ink-4)}
.win-title{font-size:14px;font-weight:600}
.win-bar .icon-btn{justify-self:end;width:34px;height:34px}
.win-body{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.25fr);min-height:520px;position:relative;z-index:2}
.win-photo{position:relative;overflow:hidden;border-right:1px solid var(--hair-2);background:radial-gradient(closest-side at 50% 70%,var(--blob),transparent)}
.win-photo img{position:absolute;inset:auto 0 0 0;width:100%;height:100%;object-fit:contain;object-position:bottom center;
  -webkit-mask-image:linear-gradient(to bottom,#000 80%,transparent);mask-image:linear-gradient(to bottom,#000 80%,transparent)}
.win-photo.bw img{filter:grayscale(1) contrast(1.05)}
.win-photo.frame img{object-fit:cover;object-position:center 30%;-webkit-mask-image:none;mask-image:none}
.win-photo figcaption{position:absolute;left:18px;bottom:16px;z-index:2;--r:999px;padding:8px 14px;font-size:13.5px;font-weight:500}
.win-main{padding:28px clamp(22px,3vw,40px) 32px;display:grid;gap:22px;align-content:start}
.win-name{font-family:var(--f-display);font-weight:700;font-stretch:115%;font-size:clamp(2rem,3.6vw,3.2rem);line-height:.95;letter-spacing:-.035em}
.seg{
  position:relative;display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;
  padding:4px;border-radius:999px;background:var(--fill);box-shadow:inset 0 0 0 1px var(--hair-2);
  justify-self:start;
}
.seg button{position:relative;z-index:2;padding:9px 18px;font-size:14px;font-weight:500;border-radius:999px;color:var(--ink-2);transition:color .3s;white-space:nowrap}
.seg button[aria-selected="true"]{color:var(--ink)}
.seg-thumb{
  position:absolute;z-index:1;top:4px;bottom:4px;left:4px;border-radius:999px;
  background:var(--glass-2);box-shadow:inset 0 1px 0 var(--spec),inset 0 0 0 1px var(--edge),0 6px 16px -8px var(--drop);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
:root[data-theme="dark"] .seg-thumb{background:rgba(255,255,255,.14)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .seg-thumb{background:rgba(255,255,255,.14)}}
.tabpane{display:grid;gap:16px;animation:paneIn .6s var(--ease-out)}
@keyframes paneIn{from{opacity:0;transform:translateY(10px);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
.about-text p{color:var(--ink-2);max-width:60ch}
.about-text p:first-child{color:var(--ink);font-size:19px;line-height:1.5}
.skills{display:flex;flex-wrap:wrap;gap:8px}
.skills .chip{font-size:14.5px;color:var(--ink)}
.facts{display:grid;margin:0}
.facts div{display:grid;grid-template-columns:150px 1fr;gap:16px;padding:13px 0;border-bottom:1px solid var(--hair-2)}
.facts div:last-child{border-bottom:0}
.facts dt{color:var(--ink-3);font-size:14.5px}
.facts dd{margin:0}
@media (max-width:900px){
  .win-body{grid-template-columns:1fr}
  .win-photo{height:380px;border-right:0;border-bottom:1px solid var(--hair-2)}
  .facts div{grid-template-columns:1fr;gap:2px}
  .seg{justify-self:stretch}
  .seg button{padding:9px 10px}
}

/* =====================================================================
   KAPCSOLAT
   ===================================================================== */
.contact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(36px,5vw,80px);align-items:start}
.big-links{display:grid;gap:10px}
.big-link{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:22px 0;border-bottom:1px solid var(--hair);
}
.big-link .lbl{font-size:14px;color:var(--ink-3);display:block;margin-bottom:6px}
.big-link .val{
  font-family:var(--f-display);font-weight:600;font-stretch:105%;
  font-size:clamp(1.35rem,2.6vw,2.2rem);letter-spacing:-.03em;line-height:1.1;
  word-break:break-word;
  background:linear-gradient(currentColor,currentColor) 0 100%/0 1.5px no-repeat;
  transition:background-size .6s var(--ease-out);
}
.big-link a:hover .val{background-size:100% 1.5px}
.big-link .acts{display:flex;gap:6px;flex:none}
.big-link .acts .icon-btn{box-shadow:inset 0 0 0 1px var(--hair)}
.contact-state{display:flex;align-items:center;gap:12px;margin-top:22px;font-size:15.5px;color:var(--ink-2);max-width:48ch}
.contact-state .dot{--s:10px}
.contact-meta{display:grid;gap:4px;margin-top:22px;font-size:14.5px;color:var(--ink-3)}

.form{--r:var(--r-xl);padding:clamp(20px,3vw,34px);display:grid;gap:16px}
.form h3{font-family:var(--f-display);font-weight:650;font-stretch:110%;font-size:1.7rem;letter-spacing:-.03em;line-height:1}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fld{position:relative;display:block}
.fld input,.fld textarea,.fld select{
  width:100%;border:0;outline:0;border-radius:16px;
  background:var(--fill);
  box-shadow:inset 0 0 0 1px var(--hair-2);
  padding:24px 16px 9px;font-size:16px;
  transition:box-shadow .25s,background-color .25s;
  -webkit-appearance:none;appearance:none;
}
.fld textarea{min-height:130px;resize:vertical;line-height:1.5}
.fld input:focus,.fld textarea:focus,.fld select:focus{box-shadow:inset 0 0 0 1.5px var(--ink)}
.fld span{
  position:absolute;left:16px;top:16px;font-size:16px;color:var(--ink-3);pointer-events:none;
  transform-origin:left top;transition:transform .35s var(--ease-out),color .25s;
}
.fld input:focus + span,.fld input:not(:placeholder-shown) + span,
.fld textarea:focus + span,.fld textarea:not(:placeholder-shown) + span,
.fld.fixed span{transform:translateY(-9px) scale(.78);color:var(--ink-2)}
.fld.bad input,.fld.bad textarea{box-shadow:inset 0 0 0 1.5px var(--ink);animation:shake .45s}
@keyframes shake{25%{transform:translateX(-6px)}50%{transform:translateX(5px)}75%{transform:translateX(-3px)}}
.pick{display:grid;gap:9px}
.pick > span{font-size:14px;color:var(--ink-3)}
.pills{display:flex;flex-wrap:wrap;gap:7px}
.pills input{position:absolute;opacity:0;pointer-events:none}
.pills label{
  padding:9px 15px;border-radius:999px;font-size:14.5px;cursor:pointer;
  box-shadow:inset 0 0 0 1px var(--hair);
  transition:background-color .25s,color .25s,transform .45s var(--spring),box-shadow .25s;
  user-select:none;
}
.pills label:hover{box-shadow:inset 0 0 0 1px var(--ink-3)}
.pills input:checked + label{background:var(--inv);color:var(--on-inv);box-shadow:none;transform:scale(1.03)}
.pills input:focus-visible + label{outline:2px solid var(--ink);outline-offset:2px}
.consent{display:flex;gap:12px;align-items:flex-start;font-size:14px;color:var(--ink-2);cursor:pointer}
.consent input{position:absolute;opacity:0}
.consent .box{
  width:22px;height:22px;border-radius:7px;flex:none;display:grid;place-items:center;
  box-shadow:inset 0 0 0 1.5px var(--ink-3);transition:background-color .2s,box-shadow .2s;
}
.consent .box svg{width:14px;height:14px;opacity:0;transform:scale(.4);transition:transform .45s var(--spring),opacity .2s}
.consent input:checked ~ .box{background:var(--inv);box-shadow:none;color:var(--on-inv)}
.consent input:checked ~ .box svg{opacity:1;transform:scale(1)}
.consent input:focus-visible ~ .box{outline:2px solid var(--ink);outline-offset:2px}
.consent.bad .box{box-shadow:inset 0 0 0 2px var(--ink);animation:shake .45s}
.linkish{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--ink-4)}
.form-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.form-foot small{color:var(--ink-3);font-size:13px}
@media (max-width:900px){
  .contact{grid-template-columns:1fr}
  .row2{grid-template-columns:1fr}
}

/* =====================================================================
   LÁBLÉC
   ===================================================================== */
.foot{padding:clamp(60px,8vw,110px) 0 calc(40px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--hair)}
.foot-big{
  font-family:var(--f-display);font-weight:800;font-stretch:125%;
  font-size:clamp(2.6rem,11vw,11rem);line-height:.82;letter-spacing:-.05em;text-transform:uppercase;
  margin-bottom:clamp(36px,5vw,64px);
  color:transparent;-webkit-text-stroke:1px var(--ink-3);
  transition:color .8s var(--ease-out),-webkit-text-stroke-color .8s;
}
.foot-big:hover{color:var(--ink);-webkit-text-stroke-color:var(--ink)}
.foot-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;font-size:14.5px}
.foot-grid h4{font-size:13.5px;color:var(--ink-3);font-weight:400;margin-bottom:10px}
.foot-grid p,.foot-grid li{color:var(--ink-2);line-height:1.75}
.foot-grid a:hover{color:var(--ink)}
.foot-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:48px;padding-top:22px;border-top:1px solid var(--hair-2);font-size:13.5px;color:var(--ink-3)}
.foot-bottom button{color:var(--ink-3);display:inline-flex;align-items:center;gap:6px}
.foot-bottom button:hover{color:var(--ink)}
.foot-bottom button svg{width:14px;height:14px}
@media (max-width:900px){
  .foot{padding-bottom:calc(120px + env(safe-area-inset-bottom,0px))}
  .foot-grid{grid-template-columns:1fr 1fr}
}

/* =====================================================================
   RÉTEGEK – lapok (sheet), fátyol, értesítések
   ===================================================================== */
.stage{transition:transform .7s var(--ease-out),filter .7s var(--ease-out);transform-origin:50% var(--oy,50vh)}
body.sheet-open .stage{transform:scale(.95) translateY(8px);filter:saturate(.6)}
body.sheet-open{overflow:hidden}
.scrim{
  position:fixed;inset:0;z-index:80;background:var(--scrim);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  animation:fadeIn .45s var(--ease-out);
}
.scrim.out{animation:fadeOut .35s var(--ease-out) forwards}
@keyframes fadeIn{from{opacity:0}}
@keyframes fadeOut{to{opacity:0}}
.sheet{
  position:fixed;z-index:81;
  left:50%;bottom:0;
  width:min(1180px,calc(100vw - 32px));
  height:calc(100% - env(safe-area-inset-top,0px) - 40px);
  transform:translateX(-50%);
  --r:32px;--gb:34px;
  border-bottom-left-radius:0;border-bottom-right-radius:0;
  display:grid;grid-template-rows:auto 1fr;
  animation:sheetUp .75s var(--spring);
  overflow:hidden;
  padding-bottom:env(safe-area-inset-bottom,0px);
}
.sheet.out{animation:sheetDown .45s var(--ease-io) forwards}
.sheet.sm{width:min(620px,calc(100vw - 24px));height:auto;max-height:calc(100% - env(safe-area-inset-top,0px) - 40px)}
@keyframes sheetUp{from{transform:translate(-50%,105%)}to{transform:translate(-50%,0)}}
@keyframes sheetDown{to{transform:translate(-50%,105%)}}
.sheet-head{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:14px 16px 12px 22px;border-bottom:1px solid var(--hair-2);position:relative;z-index:2;
}
.sheet-head::before{
  content:"";position:absolute;top:6px;left:50%;transform:translateX(-50%);width:40px;height:5px;border-radius:9px;background:var(--ink-4);
}
.sheet-title{font-weight:600;font-size:17px;margin-right:auto;padding-top:6px}
.sheet-title small{display:block;font-weight:400;font-size:13.5px;color:var(--ink-3)}
.sheet-body{position:relative;overflow:auto;z-index:2;overscroll-behavior:contain}
.sheet-close{box-shadow:inset 0 0 0 1px var(--hair)}
.dev-wrap{height:100%;display:grid;place-items:start center;padding:22px;overflow:auto}
.dev{
  width:100%;height:100%;min-height:560px;border-radius:18px;overflow:hidden;
  box-shadow:0 0 0 1px var(--hair),0 30px 60px -30px var(--drop);
  background:#fff;
  transition:width .7s var(--spring),border-radius .5s;
}
.dev[data-d="tablet"]{width:820px;max-width:100%}
.dev[data-d="mobile"]{width:390px;border-radius:40px;box-shadow:0 0 0 10px var(--inv),0 30px 60px -30px var(--drop);height:min(844px,100%)}
.dev iframe{width:100%;height:100%;border:0;display:block;background:#fff}
.shot-wrap{padding:22px;display:grid;justify-items:center}
.shot-wrap img{width:min(100%,900px);border-radius:14px;box-shadow:0 0 0 1px var(--hair),0 30px 60px -30px var(--drop)}
.sheet-pad{padding:22px 24px 26px;display:grid;gap:16px}
.mail-pre{
  white-space:pre-wrap;font:14.5px/1.55 var(--f-body);background:var(--fill);border-radius:16px;padding:16px;
  box-shadow:inset 0 0 0 1px var(--hair-2);max-height:40vh;overflow:auto;user-select:text;
}
.sheet .seg{background:var(--fill)}

.toasts{position:fixed;z-index:120;left:50%;transform:translateX(-50%);bottom:calc(env(safe-area-inset-bottom,0px) + 24px);display:grid;gap:8px;justify-items:center;pointer-events:none}
.toast{
  --r:999px;--gb:24px;
  display:flex;align-items:center;gap:10px;padding:12px 18px 12px 14px;font-size:14.5px;font-weight:500;
  animation:toastIn .6s var(--spring);
  pointer-events:auto;
}
.toast svg{width:18px;height:18px}
.toast.out{animation:toastOut .35s var(--ease-io) forwards}
@keyframes toastIn{from{opacity:0;transform:translateY(30px) scale(.8)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translateY(16px) scale(.9)}}
@media (max-width:900px){.toasts{bottom:calc(env(safe-area-inset-bottom,0px) + 96px)}}

/* szerkesztés gomb (csak a tulajdonosnak) */
.edit-fab{
  position:fixed;z-index:70;right:20px;bottom:calc(env(safe-area-inset-bottom,0px) + 20px);
  --r:999px;
  display:flex;align-items:center;gap:9px;padding:0 18px 0 14px;height:50px;font-weight:600;font-size:15px;
  animation:toastIn .8s var(--spring);
}
.edit-fab svg{width:18px;height:18px}
@media (max-width:900px){.edit-fab{bottom:calc(env(safe-area-inset-bottom,0px) + 96px);right:14px}}

/* =====================================================================
   INTRÓ
   ===================================================================== */
.intro{position:fixed;inset:0;z-index:200;background:var(--bg);display:grid;place-items:center;pointer-events:none}
.intro-drop{
  width:64px;height:64px;border-radius:999px;
  display:grid;place-items:center;
  background:var(--inv);color:var(--on-inv);
  font:800 18px/1 var(--f-display);font-stretch:125%;letter-spacing:-.02em;
  box-shadow:inset 0 2px 1px -1px rgba(255,255,255,.5),0 20px 50px -10px var(--drop);
}

/* =====================================================================
   SZERKESZTŐ (admin)
   ===================================================================== */
.adm{
  position:fixed;z-index:90;top:calc(env(safe-area-inset-top,0px) + 12px);right:12px;bottom:calc(env(safe-area-inset-bottom,0px) + 12px);
  width:min(480px,calc(100vw - 24px));
  --r:28px;--gb:34px;
  display:grid;grid-template-rows:auto auto 1fr auto;
  overflow:hidden;
  animation:admIn .7s var(--spring);
  font-size:15px;
}
.adm.out{animation:admOut .45s var(--ease-io) forwards}
@keyframes admIn{from{transform:translateX(110%)}to{transform:none}}
@keyframes admOut{to{transform:translateX(110%)}}
.adm > *{position:relative;z-index:2}
.adm-head{display:flex;align-items:center;gap:10px;padding:16px 14px 12px 20px}
.adm-head h2{font-weight:650;font-size:18px;letter-spacing:-.01em;margin-right:auto}
.adm-head h2 small{display:block;font-weight:400;font-size:13px;color:var(--ink-3)}
.adm-badge{font-size:12.5px;padding:5px 10px;border-radius:999px;background:var(--inv);color:var(--on-inv);font-weight:500;animation:popIn .5s var(--spring)}
.adm-tabs{display:flex;gap:4px;padding:0 12px 12px;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--hair-2)}
.adm-tabs::-webkit-scrollbar{display:none}
.adm-tabs button{padding:8px 13px;border-radius:999px;font-size:13.5px;font-weight:500;color:var(--ink-2);white-space:nowrap;transition:background-color .25s,color .25s}
.adm-tabs button:hover{background:var(--fill)}
.adm-tabs button[aria-selected="true"]{background:var(--inv);color:var(--on-inv)}
.adm-body{overflow:auto;padding:18px 20px 26px;display:grid;gap:18px;align-content:start;overscroll-behavior:contain}
.adm-foot{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;padding:12px 14px;border-top:1px solid var(--hair-2)}
.adm-foot .btn{min-height:46px}
.adm-sec{display:grid;gap:12px}
.adm-sec > h3{font-size:13px;font-weight:600;color:var(--ink-3)}
.adm-hint{font-size:13px;color:var(--ink-3);line-height:1.5}
.adm-hint b{color:var(--ink-2);font-weight:500}
.af{display:grid;gap:6px}
.af > span{font-size:13px;color:var(--ink-2)}
.af input,.af textarea,.af select{
  width:100%;border:0;outline:0;border-radius:12px;padding:11px 13px;font-size:15px;
  background:var(--fill);box-shadow:inset 0 0 0 1px var(--hair-2);
  transition:box-shadow .2s;
}
.af textarea{min-height:90px;resize:vertical;line-height:1.5}
.af textarea.tall{min-height:190px}
.af input:focus,.af textarea:focus,.af select:focus{box-shadow:inset 0 0 0 1.5px var(--ink)}
.af select{-webkit-appearance:none;appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink-2) 50%),linear-gradient(135deg,var(--ink-2) 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:34px}
.a2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.a3{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:8px}
.acard{border-radius:18px;box-shadow:inset 0 0 0 1px var(--hair);padding:14px;display:grid;gap:12px}
.acard-head{display:flex;align-items:center;gap:8px}
.acard-head strong{margin-right:auto;font-weight:600;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mini-btn{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;color:var(--ink-2);transition:background-color .2s}
.mini-btn:hover{background:var(--fill);color:var(--ink)}
.mini-btn svg{width:16px;height:16px}
.drop{
  display:flex;align-items:center;gap:12px;padding:12px;border-radius:14px;
  box-shadow:inset 0 0 0 1px var(--hair);border:1px dashed transparent;cursor:pointer;
  transition:background-color .2s;
}
.drop:hover{background:var(--fill)}
.drop img{width:56px;height:56px;border-radius:10px;object-fit:cover;background:var(--fill);flex:none}
.drop .ph{width:56px;height:56px;border-radius:10px;background:var(--fill);display:grid;place-items:center;flex:none}
.drop .ph svg{width:20px;height:20px;color:var(--ink-3)}
.drop div{display:grid;gap:2px;font-size:14px}
.drop small{color:var(--ink-3);font-size:12.5px}
.drop input{display:none}
.brushes{display:flex;flex-wrap:wrap;gap:6px}
.brushes button{display:inline-flex;align-items:center;gap:7px;padding:8px 12px;border-radius:999px;font-size:13.5px;box-shadow:inset 0 0 0 1px var(--hair);transition:background-color .2s,color .2s}
.brushes button[aria-pressed="true"]{background:var(--inv);color:var(--on-inv);box-shadow:none}
.brushes button[aria-pressed="true"] .dot{--ink:var(--on-inv);--ink-3:var(--on-inv)}
.brushes .dot{--s:9px}
.acal .cal-grid{gap:4px}
.acal .cal-day{min-height:38px;border-radius:10px;font-size:14px;gap:3px;user-select:none;touch-action:none}
.acal .cal-day .dot{--s:6px}
.acal .cal-day.custom{box-shadow:inset 0 0 0 1px var(--ink-3)}
.acal .cal-day.today{box-shadow:inset 0 0 0 1.5px var(--ink)}
.acal .cal-day.today::after{display:none}
.acal .cal-head{margin-bottom:10px}
.acal .cal-title{font-size:1.25rem}
.wk-row{display:grid;grid-template-columns:34px 1fr 82px 82px;gap:6px;align-items:center}
.wk-row b{font-size:14px;font-weight:600}
.wk-row select,.wk-row input{padding:8px 10px;font-size:14px;border-radius:10px}
.toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:14.5px;cursor:pointer}
.toggle input{position:absolute;opacity:0}
.toggle .sw{
  width:52px;height:32px;border-radius:999px;background:var(--ink-4);position:relative;flex:none;transition:background-color .3s;
}
.toggle .sw::after{
  content:"";position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:999px;background:#fff;
  box-shadow:0 3px 8px rgba(0,0,0,.25);
  transition:transform .55s var(--spring),width .25s var(--ease-out);
}
.toggle input:checked + .sw{background:var(--inv)}
.toggle input:checked + .sw::after{transform:translateX(20px);background:var(--on-inv)}
.toggle:active .sw::after{width:32px}
.toggle input:checked:active + .sw::after{transform:translateX(14px)}
.toggle input:focus-visible + .sw{outline:2px solid var(--ink);outline-offset:2px}
@media (max-width:560px){
  .adm{top:calc(env(safe-area-inset-top,0px) + 8px);right:8px;left:8px;bottom:calc(env(safe-area-inset-bottom,0px) + 8px);width:auto}
  .a3{grid-template-columns:1fr 1fr}
  .wk-row{grid-template-columns:30px 1fr 70px 70px}
}

/* =====================================================================
   Nézetváltás (téma) és csökkentett mozgás
   ===================================================================== */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
::view-transition-old(root){z-index:1}
::view-transition-new(root){z-index:2}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
  .ambient i,.grain{animation:none !important}
  .lens{display:none}
}

/* ---------- kiegészítések ---------- */
.seg button svg{width:18px;height:18px;display:block}
.sheet .seg button{padding:8px 14px}
.intro-on .hero-name i{transform:translateY(112%)}
.intro-on .portrait,.intro-on .portrait-glow{opacity:0}
.intro-on .hero-foot > *,.intro-on .scroll-cue{opacity:0}
.intro-on .nav,.intro-on .tabbar,.intro-on .topbtns{opacity:0}
.cal-day{background:none;border:0;color:inherit;cursor:pointer}
.cal-day[disabled]{cursor:default}
.work-media .screen:focus-visible{outline-offset:-3px}
.foot-grid ul li a{display:inline-flex;align-items:center;gap:6px}
.foot-grid ul li a svg{width:14px;height:14px}
.adm-size{font-size:12.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.adm-foot .grow{justify-self:end}
.lockbtn{margin-left:auto}
.now-actions .btn,.sc-actions .btn{transition:background-color .5s,color .5s,box-shadow .5s,transform .5s var(--spring)}
.pv-note{font-size:13px;color:var(--ink-3);padding:0 22px 12px}

/* =====================================================================
   GÖRGETÉSRE MEGJELENŐ ELEMEK (reveal)
   ===================================================================== */
.rv{opacity:0;transform:translateY(46px) scale(.985);filter:blur(8px);
  transition:opacity 1s var(--ease-out),transform 1.2s var(--ease-out),filter 1s var(--ease-out);
  transition-delay:calc(var(--d,0) * 90ms)}
.rv.in{opacity:1;transform:none;filter:none}
.rv.now{transition:none}
/* címsorok szavanként emelkednek ki */
.h2 .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.h2 .w > i{display:inline-block;font-style:normal;transform:translateY(105%);
  transition:transform 1.1s var(--ease-out);transition-delay:calc(var(--i,0) * 70ms)}
.sec-head.in .h2 .w > i,.svc-side.in .h2 .w > i,.h2.in .w > i{transform:none}
.sec-head.now .h2 .w > i,.svc-side.now .h2 .w > i{transition:none}

/* =====================================================================
   FUTÓSZALAG a hero alatt
   ===================================================================== */
.ticker{position:relative;overflow:hidden;padding-block:clamp(22px,3vw,40px);border-block:1px solid var(--hair-2);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.ticker-track{display:flex;width:max-content;animation:tick var(--tdur,48s) linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker-group{display:flex;align-items:center;flex:none}
.ticker-item{display:flex;align-items:center;gap:clamp(22px,3vw,44px);padding-right:clamp(22px,3vw,44px);
  font-family:var(--f-display);font-weight:700;font-stretch:118%;font-size:clamp(1.9rem,4.6vw,4.2rem);
  letter-spacing:-.035em;line-height:1;text-transform:uppercase;white-space:nowrap;
  color:transparent;-webkit-text-stroke:1px var(--ink-3);transition:color .5s,-webkit-text-stroke-color .5s}
.ticker-item:nth-child(3n+1){color:var(--ink);-webkit-text-stroke-color:transparent}
.ticker-item::after{content:"";width:.26em;height:.26em;border-radius:50%;background:var(--ink);flex:none}
@keyframes tick{to{transform:translateX(-50%)}}

/* =====================================================================
   ÉRINTŐKÉPERNYŐ: a hosszú képernyőkép magától görög, ha látszik
   ===================================================================== */
@media (hover:none){
  .work.show .screen img.long{animation:longScroll calc(var(--dur,6s) * 1.6) var(--ease-io) .8s infinite alternate}
  .work.show .phone .ph-screen img{filter:none}
}
@keyframes longScroll{to{transform:translateY(calc(-1 * var(--dist,0px)))}}

/* =====================================================================
   APRÓSÁGOK
   ===================================================================== */
.portrait{transform:translate3d(0,var(--pty,0px),0)}
.hero-name,.hero-outline{transform:translate3d(0,var(--nty,0px),0)}
.hero-foot{transform:translate3d(0,var(--fty,0px),0);opacity:var(--fo,1)}
.work-media .browser{will-change:transform}
.pop .btn{width:100%}
.pop-close{position:absolute;top:8px;right:8px;width:30px;height:30px}
.pop-close svg{width:15px;height:15px}
.sheet-head .seg{margin-right:4px}
.sheet-head .btn{min-height:40px}
.mail-meta{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;font-size:14px}
.mail-meta dt{color:var(--ink-3)}
.mail-meta dd{margin:0;word-break:break-word}
.sheet-actions{display:flex;flex-wrap:wrap;gap:8px}
.legal h4{font-weight:600;font-size:15.5px;margin:6px 0 2px}
.legal p,.legal li{color:var(--ink-2);font-size:15px}
.legal ul{display:grid;gap:4px;padding-left:18px;list-style:disc}
.theme-ico{display:grid;place-items:center}
.drop.busy{opacity:.55;pointer-events:none}
.adm-status{display:flex;align-items:flex-start;gap:12px;padding:14px;border-radius:16px;background:var(--fill);font-size:14.5px;line-height:1.45}
.adm-status .dot{--s:12px;margin-top:4px}
.adm-status b{font-weight:600}
.dayed{display:grid;gap:10px;padding:14px;border-radius:16px;box-shadow:inset 0 0 0 1px var(--hair);animation:paneIn .45s var(--ease-out)}
.dayed-title{font-weight:600;text-transform:capitalize}
.adm-row{display:flex;flex-wrap:wrap;gap:8px}
.adm-row .btn{min-height:40px;font-size:14px;padding:0 14px}
.btn.loading{pointer-events:none;opacity:.7}
.btn.loading svg{animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.ov-seg{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;padding:4px;border-radius:16px;background:var(--fill)}
.ov-seg button{display:grid;justify-items:center;gap:6px;padding:10px 4px;border-radius:12px;font-size:12.5px;font-weight:500;color:var(--ink-2);transition:background-color .25s,color .25s}
.ov-seg button .dot{--s:10px}
.ov-seg button[aria-pressed="true"]{background:var(--inv);color:var(--on-inv)}
.ov-seg button[aria-pressed="true"] .dot{--ink:var(--on-inv);--ink-3:var(--on-inv)}
.auto-ico{width:10px;height:10px;border-radius:50%;background:conic-gradient(var(--ink) 0 50%,transparent 0);box-shadow:inset 0 0 0 1.5px var(--ink)}
.ov-seg button[aria-pressed="true"] .auto-ico{background:conic-gradient(var(--on-inv) 0 50%,transparent 0);box-shadow:inset 0 0 0 1.5px var(--on-inv)}
.adm-lock{display:grid;gap:14px;justify-items:start}
@media (max-width:900px){.ticker-item{font-size:clamp(1.6rem,8vw,2.6rem)}}
@media (prefers-reduced-motion: reduce){
  .rv{opacity:1;transform:none;filter:none}
  .h2 .w > i{transform:none}
  .ticker-track{animation:none}
}

html{scrollbar-gutter:stable}
.win-bar{touch-action:none}
.pv-note{flex-basis:100%;padding:0 0 2px}
.cal-grid{touch-action:pan-y}
.fld.hint-bad input{box-shadow:inset 0 0 0 1.5px var(--ink-3)}
.lens{translate:var(--lx,0px) var(--ly,0px)}
@media (max-width:900px){
  .portrait{height:min(54svh,560px)}
  .portrait img{-webkit-mask-image:linear-gradient(to bottom,#000 52%,transparent 93%);mask-image:linear-gradient(to bottom,#000 52%,transparent 93%)}
  .hero-foot{margin-top:calc(env(safe-area-inset-top,0px) + 26vw + 70px + min(54svh,560px) - 9svh)}
}

/* =====================================================================
   JAVÍTÁS: a címsor és a bevezető soha ne csússzon egymásra
   (flex-sorban, ami nem fér ki, az új sorba törik)
   ===================================================================== */
.sec-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px clamp(28px,5vw,64px)}
.sec-head .h2{flex:0 1 auto;min-width:0;max-width:100%}
.sec-head .sec-lead{flex:0 1 36ch;min-width:min(100%,260px)}
.h2,.work-title,.svc-title,.win-name,.cal-title,.big-link .val{overflow-wrap:break-word;min-width:0}
.svc-side .h2{font-size:clamp(2.4rem,4.6vw,4.6rem)}
.work-title{font-size:clamp(2rem,3.7vw,3.5rem)}

/* extra szakaszok */
.extra-body{--r:var(--r-xl);padding:clamp(22px,3.2vw,44px);display:grid;gap:14px;max-width:900px}
.extra-body p{color:var(--ink-2);max-width:68ch;position:relative;z-index:2}
.extra-body p:first-child{color:var(--ink);font-size:19px;line-height:1.5}
.sec--extra + .sec--extra{padding-top:0}
/* spamcsapda: képernyőn kívül */
.hp{position:absolute !important;left:-10000px;width:1px;height:1px;overflow:hidden}
/* szerkesztő: üzenetek, verziók */
.acard.msg.unread{box-shadow:inset 0 0 0 1.5px var(--ink)}
.acard-head small{white-space:nowrap}
.rev-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 0;border-bottom:1px solid var(--hair-2);font-size:14px;line-height:1.45}
.rev-row:last-child{border-bottom:0}
/* JS nélküli (keresőbarát) tartalom – ha fut a JS, elrejtjük */
.js .ssr{display:none}