/* Exocortex · papír és tinta. A lila csak a gépé: a jel áramkör-harmada és a gépi kiemelések. */
:root {
  --papir: #f2eee5; --lap: #f8f5ee; --tinta: #15131a; --grafit: #1d1b22; --lila: #4b2fa8; --vlila: #aa96f0;
  --halk: #8f877d; --szoveg: #5c5750; --vonal: #ddd5c6;
  --cim: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
  --test: 'Inter', -apple-system, 'Segoe UI', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --puha: cubic-bezier(.2, .75, .15, 1);
  --sz: max(20px, env(safe-area-inset-left, 0px));
}
* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { background: var(--papir); color: var(--tinta); font: 400 18px/1.6 var(--test); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--cim); font-weight: 500; letter-spacing: -.012em; text-wrap: balance; }
h2 { font-size: clamp(40px, 5.6vw, 84px); line-height: 1.02; }
h3 { font-size: 30px; line-height: 1.1; }
.mono { font-family: var(--mono); font-weight: 500; }
.szemoldok { font: 500 13px var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--halk); }
:focus-visible { outline: 2px solid var(--lila); outline-offset: 3px; border-radius: 6px; }

/* Gombok */
.gombok { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.gomb { display: inline-flex; align-items: center; gap: 6px; background: var(--tinta); color: var(--papir); text-decoration: none; font: 500 16px var(--test);
  padding: 14px 26px; border-radius: 999px; transition: transform .4s var(--puha), background .3s; }
.gomb:hover { transform: translateY(-2px); background: #2a2632; }
.gomb-kicsi { padding: 9px 18px; font-size: 14px; }
.gomb-uj { background: transparent; color: var(--tinta); padding-inline: 10px; }
.gomb-uj:hover { background: transparent; }
.gomb-uj span { transition: transform .4s var(--puha); }
.gomb-uj:hover span { transform: translateX(4px); }
.gomb-vilagos { background: var(--papir); color: var(--tinta); }
.gomb-vilagos:hover { background: #fff; }
.gomb-uj.vilagos { color: var(--papir); }

/* Felső sáv */
.sav { position: fixed; inset: 0 0 auto; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 14px max(28px, var(--sz)); transition: background .4s, box-shadow .4s, color .4s; }
.sav .gomb-kicsi { transition: background .4s, color .4s, transform .4s var(--puha); }
.sav.alatta { background: rgba(242, 238, 229, .86); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); box-shadow: 0 1px 0 rgba(21, 19, 26, .07); }
.sav-logo { display: flex; align-items: center; gap: 9px; text-decoration: none; font: 500 25px/1 var(--cim); }
.sav-linkek { display: flex; gap: 30px; font-size: 14.5px; }
.sav-linkek a { text-decoration: none; color: var(--szoveg); transition: color .2s; }
.sav-linkek a:hover { color: var(--tinta); }
.sav-logo .s { display: none; }
.sav.sotet-sav.alatta { background: rgba(21, 19, 26, .8); box-shadow: 0 1px 0 rgba(255, 255, 255, .06); color: var(--papir); }
.sav.sotet-sav .sav-logo .v { display: none; } .sav.sotet-sav .sav-logo .s { display: block; }
.sav.sotet-sav .sav-linkek a { color: #a9a29a; } .sav.sotet-sav .sav-linkek a:hover { color: var(--papir); }
.sav.sotet-sav .gomb-kicsi { background: var(--papir); color: var(--tinta); }

/* Hero */
.hero { min-height: 100svh; min-height: max(100svh, 640px); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 110px var(--sz) 80px; }
.hero-jel { width: min(31vh, 310px, 72vw); aspect-ratio: 1; margin-bottom: 24px; }
.hero h1 { font-size: clamp(44px, 5.4vw, 84px); line-height: 1.02; max-width: 21ch; margin: 16px 0 22px; }
.hero-al { font-size: clamp(18px, 1.5vw, 20px); color: var(--szoveg); max-width: 44ch; margin-bottom: 30px; }
.hero-be { opacity: 0; transform: translateY(18px); transition: opacity 1.1s var(--puha), transform 1.1s var(--puha); transition-delay: calc(var(--k) * 120ms); }
.indul .hero-be { opacity: 1; transform: none; }

/* A jel: WebGL-vászon a redőknek, fölötte SVG az áramkörnek */
.jel { position: relative; }
.jel canvas, .jel svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.jel-tartalek { background: url(/assets/jel.png) center / contain no-repeat; }
.kapcs-jel.jel-tartalek { background-image: url(/assets/jel-sotet.png); }

/* A név: ragadós szakasz, görgetésre emelkedik ki a gépi harmad */
.nev { height: 320vh; position: relative; }
.nev-ragad { position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 70px var(--sz) 40px; }
.nev-jel { width: min(56vh, 560px, 84vw); aspect-ratio: 1; }
.nev-feliratok { position: relative; width: min(720px, 100%); height: 140px; margin-top: 26px; }
.nev-f { position: absolute; inset: 0; text-align: center; font: 500 clamp(24px, 2.6vw, 34px)/1.25 var(--cim); opacity: 0; transform: translateY(14px); transition: opacity .7s var(--puha), transform .7s var(--puha); text-wrap: balance; }
.nev-f.most { opacity: 1; transform: none; }
.nev-f .mono { font-size: .62em; letter-spacing: .06em; color: var(--tinta); }
.nev-f .pont { margin: 0 .6em; color: var(--halk); }
.nev-f em { font-style: normal; color: var(--lila); }

/* Sötét szakasz: szavanként világosodó állítás */
.sotet { background: var(--tinta); color: var(--papir); padding: clamp(110px, 16vh, 190px) var(--sz); }
.szuk { max-width: 980px; margin: 0 auto; }
.masodik { margin-top: clamp(120px, 18vh, 220px); }
.szavak { font-size: clamp(46px, 7vw, 104px); line-height: 1.02; }
.szavak .sz { opacity: .16; transition: opacity .25s linear; }
.nagy-szoveg { font-size: clamp(20px, 2vw, 26px); line-height: 1.5; color: #b9b2a8; max-width: 36ch; margin-top: 42px; }
.zaro { font: 500 clamp(26px, 2.8vw, 38px)/1.2 var(--cim); color: var(--vlila); margin-top: 34px; }

/* Felbukkanás */
.fel { opacity: 0; transform: translateY(28px); transition: opacity 1s var(--puha), transform 1s var(--puha); }
.fel.lat { opacity: 1; transform: none; }

/* Mit építek: csempék */
.mit { padding: clamp(110px, 15vh, 180px) var(--sz); max-width: 1240px; margin: 0 auto; }
.fejlec { text-align: center; margin-bottom: 64px; }
.fejlec h2 { margin-top: 16px; }
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; }
.cs { grid-column: span 2; background: var(--lap); border: 1px solid var(--vonal); border-radius: 28px; padding: 32px; display: flex; flex-direction: column; gap: 26px; overflow: hidden; }
.cs:nth-child(2) { transition-delay: .08s; } .cs:nth-child(4) { transition-delay: .08s; } .cs:nth-child(5) { transition-delay: .16s; }
.cs-nagy { grid-column: span 4; display: grid; grid-template-columns: 1fr 1.15fr; align-items: center; gap: 36px; position: relative; }
.cs-szoveg p { color: var(--szoveg); font-size: 16px; margin-top: 10px; }
.pelda { position: absolute; left: 32px; bottom: 26px; font-size: 12.5px; color: var(--halk); }

.lap { background: #fbf9f4; border: 1px solid var(--vonal); border-radius: 14px; padding: 22px 22px 26px; box-shadow: 0 18px 40px rgba(40, 30, 20, .08); }
.lap-fej { display: flex; align-items: center; gap: 7px; font: 500 16px var(--cim); }
.lap-cimke { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--halk); margin-top: 22px; }
.lap-cim { font: 500 28px/1.08 var(--cim); margin: 6px 0 14px; }
.lap-sor { display: grid; grid-template-columns: 10px auto 1fr; align-items: center; gap: 10px; padding: 11px 0; border-top: 1px solid #ebe5d9; font-size: 13.5px;
  opacity: 0; transform: translateX(-10px); transition: opacity .7s var(--puha), transform .7s var(--puha); transition-delay: calc(.35s + var(--k) * .16s); }
.lap-sor b { font-weight: 500; }
.lap-sor i { height: 6px; border-radius: 3px; background: #e6e0d4; width: 0; justify-self: start; transition: width 1.1s var(--puha); transition-delay: calc(.55s + var(--k) * .16s); }
.lat .lap-sor { opacity: 1; transform: none; }
.lat .lap-sor i { width: var(--w); }
.potty { width: 8px; height: 8px; border-radius: 50%; background: var(--tinta); }
.potty.lila { background: var(--lila); }

.cset { display: flex; flex-direction: column; gap: 10px; margin-top: auto; }
.bub { font-size: 14px; line-height: 1.45; padding: 11px 15px; border-radius: 16px; max-width: 92%; opacity: 0; transform: translateY(10px); transition: opacity .7s var(--puha), transform .7s var(--puha); }
.bub.te { align-self: flex-end; background: var(--tinta); color: var(--papir); border-bottom-right-radius: 5px; transition-delay: .3s; }
.bub.o { align-self: flex-start; background: #fff; border: 1px solid #d9d0f3; border-bottom-left-radius: 5px; transition-delay: 1s; }
.lat .bub { opacity: 1; transform: none; }
.forras { display: flex; gap: 6px; margin-top: 8px; }
.forras em { font: 500 11px var(--mono); font-style: normal; color: var(--lila); background: #efebfb; padding: 3px 8px; border-radius: 6px; }

.dontes, .szam { width: 100%; height: auto; margin-top: auto; overflow: visible; }
.dontes-vonal { fill: none; stroke: var(--lila); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 320; stroke-dashoffset: 320; transition: stroke-dashoffset 1.6s var(--puha) .2s; }
.lat .dontes-vonal { stroke-dashoffset: 0; }
.dontes-pont { opacity: 0; transition: opacity .6s var(--puha); transition-delay: calc(.4s + var(--k) * .45s); }
.dontes-pont circle { fill: var(--papir); stroke: var(--lila); stroke-width: 3; }
.dontes-pont rect { fill: #e2dbcd; }
.lat .dontes-pont { opacity: 1; }
.szam-racs { stroke: #e6e0d4; stroke-width: 1; }
.szam-vonal { fill: none; stroke: var(--tinta); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 380; stroke-dashoffset: 380; transition: stroke-dashoffset 1.8s var(--puha) .2s; }
.lat .szam-vonal { stroke-dashoffset: 0; }
.szam-jel { opacity: 0; transform: scale(.4); transform-origin: 222px 52px; transition: opacity .5s, transform .7s cubic-bezier(.3, 1.6, .5, 1); transition-delay: 1.5s; }
.szam-jel circle { fill: var(--lila); }
.szam-jel text { font-size: 12px; fill: var(--lila); }
.lat .szam-jel { opacity: 1; transform: none; }

.hol { display: grid; grid-template-columns: 1.3fr 1fr; gap: 10px; margin-top: auto; }
.hol-doboz { border: 1.5px solid var(--tinta); border-radius: 14px; padding: 12px; display: flex; flex-wrap: wrap; gap: 7px; align-content: flex-start; min-height: 110px; }
.hol-doboz span { width: 100%; font-size: 11px; color: var(--szoveg); }
.hol-doboz i { width: 26px; height: 20px; border-radius: 5px; background: #e2dbcd; opacity: 0; transform: translateY(6px); transition: opacity .5s, transform .6s var(--puha); }
.hol-doboz.felho { border-style: dashed; border-color: var(--halk); }
.lat .hol-doboz i { opacity: 1; transform: none; }
.hol-doboz i:nth-of-type(2) { transition-delay: .12s; } .hol-doboz i:nth-of-type(3) { transition-delay: .24s; } .hol-doboz i:nth-of-type(4) { transition-delay: .36s; }

.elv { text-align: center; font: 500 clamp(34px, 4.4vw, 64px)/1.1 var(--cim); margin-top: clamp(80px, 12vh, 130px); }
.lila { color: var(--lila); }

/* Hogyan: a lépéseket egy áramköri vezeték köti össze, görgetésre rajzolódik */
.grafit { background: var(--grafit); color: var(--papir); padding: clamp(110px, 15vh, 180px) var(--sz); }
.grafit .szemoldok { color: #8a8396; }
.lepesek { position: relative; max-width: 1180px; margin: 0 auto; }
.lepes-vonal { position: absolute; left: 0; right: 0; top: 0; width: 100%; height: 40px; overflow: visible; }
.lepes-vonal path { fill: none; stroke: var(--vlila); stroke-width: 3; vector-effect: non-scaling-stroke; stroke-dasharray: 1000; stroke-dashoffset: 1000; }
.lepesek ol { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; position: relative; }
.lepesek li { padding-top: 62px; position: relative; opacity: .28; transition: opacity .6s var(--puha); }
.lepesek li.be { opacity: 1; }
.via { position: absolute; top: 9px; left: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--grafit); border: 3px solid #4a4555; transition: border-color .4s, transform .5s cubic-bezier(.3, 1.6, .5, 1); }
.via::after { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: var(--grafit); }
.lepesek li.be .via { border-color: var(--vlila); transform: scale(1.12); }
.lepesek b { font: 500 34px/1.1 var(--cim); display: block; margin-bottom: 12px; }
.lepesek p { color: #b4ada3; font-size: 16px; }

/* Workshop */
.workshop { padding: clamp(110px, 15vh, 170px) var(--sz); }
.ws { max-width: 1100px; margin: 0 auto; background: var(--lap); border: 1px solid var(--vonal); border-radius: 36px; padding: clamp(40px, 6vw, 80px); text-align: center; }
.ws h2 { margin: 16px auto 18px; max-width: 16ch; }
.ws-be { color: var(--szoveg); font-size: 19px; max-width: 46ch; margin: 0 auto; }
.ws-lista { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; text-align: left; margin: 48px 0 44px; }
.ws-lista li { border-top: 1px solid var(--vonal); padding-top: 18px; font-size: 16px; color: var(--szoveg); }
.ws-lista .mono { display: block; color: var(--lila); font-size: 13px; margin-bottom: 8px; }

/* Rólam */
.rolam { max-width: 1180px; margin: 0 auto; padding: clamp(60px, 10vh, 120px) var(--sz) clamp(110px, 15vh, 170px); display: grid; grid-template-columns: 1fr 1.25fr; gap: clamp(36px, 6vw, 90px); align-items: center; }
.rolam-kep img { border-radius: 28px; aspect-ratio: 4 / 5; object-fit: cover; width: 100%; filter: saturate(.9); }
.rolam-szoveg { transition-delay: .12s; }
.rolam-szoveg h2 { font-size: clamp(38px, 4.4vw, 64px); margin: 16px 0 24px; }
.rolam-szoveg > p { color: var(--szoveg); font-size: 18px; }
.szamok { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 40px 0 22px; }
.szamok div { border-top: 1px solid var(--tinta); padding-top: 14px; }
.szamok dt { font: 500 34px/1 var(--cim); }
.szamok dd { margin: 8px 0 0; font-size: 14px; color: var(--szoveg); line-height: 1.4; }
.halk { color: var(--halk) !important; font-size: 15px !important; }

/* Kapcsolat */
.kapcsolat { background: var(--tinta); color: var(--papir); text-align: center; padding: clamp(110px, 15vh, 170px) var(--sz) clamp(90px, 12vh, 130px); display: flex; flex-direction: column; align-items: center; }
.kapcs-jel { width: min(300px, 64vw); aspect-ratio: 1; margin-bottom: 44px; }
.kapcsolat h2 { font-size: clamp(46px, 6.4vw, 96px); }
.kapcsolat > p { color: #b9b2a8; font-size: 20px; max-width: 40ch; margin: 22px 0 38px; }

.lab { background: var(--tinta); color: #8a8396; border-top: 1px solid #2a2731; padding: 34px max(28px, var(--sz)) calc(34px + env(safe-area-inset-bottom, 0px)); display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; font-size: 13.5px; }
.lab-logo { display: flex; align-items: center; gap: 9px; color: var(--papir); font: 500 22px var(--cim); }
.lab-logo i { font-style: normal; color: #8a8396; }
.lab a { color: #b9b2a8; text-decoration: none; }
.lab a:hover { color: var(--papir); }

/* Telefon */
@media (max-width: 860px) {
  body { font-size: 17px; }
  .sav-linkek { display: none; }
  .bento { grid-template-columns: 1fr; }
  .cs, .cs-nagy { grid-column: auto; }
  .cs-nagy { grid-template-columns: 1fr; padding-bottom: 56px; }
  .lepesek ol { grid-template-columns: 1fr; gap: 0; padding-left: 44px; }
  .lepesek li { padding: 4px 0 42px; }
  .via { left: -44px; top: 6px; }
  .lepes-vonal { display: none; }
  .lepesek ol::before { content: ''; position: absolute; left: 10px; top: 14px; bottom: 50px; width: 3px; background: #4a4555; }
  .lepesek ol::after { content: ''; position: absolute; left: 10px; top: 14px; width: 3px; height: calc(var(--hal, 0) * (100% - 64px)); background: var(--vlila); }
  .ws-lista { grid-template-columns: 1fr; }
  .rolam { grid-template-columns: 1fr; }
  .rolam-kep { max-width: 420px; }
  .szamok { grid-template-columns: 1fr; gap: 0; }
  .szamok div { display: flex; align-items: baseline; gap: 14px; padding: 14px 0; }
  .szamok dd { margin: 0; }
  .nev { height: 260vh; }
  .nev-feliratok { height: 170px; }
  .lab { justify-content: center; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-be, .fel, .nev-f, .lap-sor, .bub, .dontes-pont, .szam-jel, .hol-doboz i, .lepesek li { transition: none !important; opacity: 1 !important; transform: none !important; }
  .lap-sor i { width: var(--w); transition: none; }
  .dontes-vonal, .szam-vonal, .lepes-vonal path { stroke-dashoffset: 0 !important; transition: none; }
  .szavak .sz { opacity: 1 !important; }
  .nev { height: auto; } .nev-ragad { position: static; height: auto; padding-block: 100px; }
  .nev-feliratok { height: auto; display: grid; gap: 20px; } .nev-f { position: static; }
}