/* ==========================================================================
   APPraforgó — „A fény felé"

   A napraforgó szó szerint a nap felé forduló. A lap ezt veszi szó szerint:
   egyetlen folyamatos snitt egy napon át. A görgetés az idő — hajnaltól
   alkonyig változik a papír színe, vándorol a nap, és a virág követi.

   Három szabály tartja egyben:
   1. A szín itt fény, nem minta. Nincs „pasztell mező": a papír egésze
      melegszik vagy hűl, ahogy telik a nap.
   2. Két hang a betűkben: szerif a hangnak (Newsreader), monospace a
      pontosságnak (Fragment Mono) — feliratok, időbélyegek, stáblista.
   3. Minden mozgás lassú, mint a fény. Nincs rugózás, nincs pattogás:
      exponenciális lassulás, 0,9–1,6 másodperc.
   ========================================================================== */

/* --- Betűk --------------------------------------------------------------
   Saját domainről, nem külső szolgáltatótól: az oldal „nulla külső kérés"
   szabálya így is áll. Mindhárom fájl a magyar ábécére vágva (ő/ű egy
   fájlban a többi ékezettel — a fontsource két részhalmazra bontaná). */
@font-face {
  font-family: "Newsreader Display";
  src: url("fonts/newsreader-display.woff2") format("woff2");
  font-weight: 330; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Newsreader Display";
  src: url("fonts/newsreader-display-italic.woff2") format("woff2");
  font-weight: 330; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Newsreader Text";
  src: url("fonts/newsreader-text.woff2") format("woff2");
  font-weight: 400 560; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Fragment Mono";
  src: url("fonts/fragment-mono-hu.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  color-scheme: light;

  /* A fény. Ezeket a JS írja felül görgetés közben. Az alapérték a hajnal —
     pontosan az, amit a JS a lap tetején az első képkockán beállítana. Ha az
     alap a dél volt, betöltéskor egy pillanatra a meleg déli papír villant
     fel, és a nap a hajnali helyére ugrott (CLS). JS nélkül a lap végig
     hajnali marad: világos, és a kontraszt erre is mérve van. */
  --paper:    #E9ECEC;
  --sunlight: #FFE6D8;
  --sun-x: 6;
  --sun-y: 92;

  /* Tinta. Meleg fekete, nem kékes — nyomott stáblista, nem képernyő.
     A számok mind az öt napszak legrosszabb pontján mérve (alkonyi
     sarokárnyék): tinta 10,8:1 · halk 4,9:1 · okker 4,8:1. */
  --ink:      #1C1915;
  --ink-soft: #585046;
  --ochre:    #744600;   /* napsütötte kiemelés szövegben */
  --gold:     #E3A21A;   /* szirom, csak dísz */
  --gold-deep:#C98A12;
  --seed:     #3A2817;
  --shade:    43, 58, 85;  /* hideg árnyék RGB — operatőri trükk: meleg fény, hideg árnyék */
  --hair: color-mix(in srgb, var(--ink) 16%, transparent);

  --f-display: "Newsreader Display", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --f-text:    "Newsreader Text", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --f-mono:    "Fragment Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Mozgás: a fény lassul, nem fékez. */
  --ease-light: cubic-bezier(.16, 1, .3, 1);
  --ease-turn:  cubic-bezier(.65, 0, .35, 1);
  --t-slow: 1.5s;
  --t-mid: .9s;

  --gutter: clamp(1.25rem, 4.2vw, 3.75rem);
  --max: 1380px;
}

/* --- Alapok -------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--paper);
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font: 400 clamp(1.06rem, 1rem + .25vw, 1.2rem)/1.55 var(--f-text);
  font-variant-numeric: oldstyle-nums proportional-nums;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p, ol, ul, dl, dd, figure { margin: 0; padding: 0; }
ol, ul { list-style: none; }
em { font-style: italic; }

::selection { background: color-mix(in srgb, var(--gold) 45%, transparent); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--ochre);
  outline-offset: 4px;
  border-radius: 2px;
}

.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }

.skip {
  position: absolute; left: var(--gutter); top: -4rem; z-index: 100;
  background: var(--ink); color: var(--paper);
  padding: .6rem 1rem; font: 400 .8rem/1 var(--f-mono); text-decoration: none;
}
.skip:focus { top: 1rem; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* --- Fény-rétegek ---------------------------------------------------------
   Sorrend alulról: papír → nap → porszemek → tartalom → lencse (vignetta +
   szemcse). A lencse a tartalom FÖLÖTT van, mint egy objektív: a szöveg és
   a papír ugyanannyit sötétül, így a kontraszt-arány alig mozdul. */

.light { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }

/* A nap translate-tel mozog, NEM left/top-pal: a left/top elrendezés-
   változás, és a böngésző minden képkockáját elrendezés-ugrásnak (CLS)
   számolta — betöltéskor 0,49-et, görgetés közben folyamatosan. A
   transzformáció nem érinti az elrendezést, így nem ugrás. */
.sun {
  position: absolute;
  left: 0; top: 0;
  width: 120vmax; height: 120vmax;
  translate: calc(var(--sun-x) * 1vw - 50%) calc(var(--sun-y) * 1vh - 50%);
  background: radial-gradient(closest-side,
    color-mix(in srgb, var(--sunlight) 55%, transparent) 0%,
    color-mix(in srgb, var(--sunlight) 30%, transparent) 30%,
    color-mix(in srgb, var(--sunlight) 10%, transparent) 55%,
    transparent 75%);
}

.motes { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Szemcse. Nem divatból van itt: a nagy, lágy gradiensek 8 bites kijelzőn
   sávosodnak, és egy halk zaj ezt eltünteti (dithering). Ezért a fény-réteg
   része, a tartalom ALATT — nem koszolja be a szöveget és a képernyőképeket. */
.grain {
  position: absolute; inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .32 0 0 0 0 .28 0 0 0 0 .24 0 0 0 .9 -.32'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
  opacity: .32;
}

.lens {
  position: fixed; inset: 0; z-index: 50; pointer-events: none;
  /* Vignetta: hideg árnyék a sarkokban, multiply-jal. Sima, textúra nélkül —
     a szemcse lent, a fény-rétegben van. */
  background: radial-gradient(130% 110% at 50% 42%, transparent 58%, rgba(var(--shade), .10) 100%);
  mix-blend-mode: multiply;
}

main, .foot, .hud { position: relative; z-index: 1; }

/* --- Fejléc ---------------------------------------------------------------
   Nem sáv, hanem felirat a kép tetején. A háttere a papír színe, félig
   áttetsző, így napszakkal együtt változik. */

.hud {
  position: fixed; inset: 0 0 auto 0; z-index: 40;
  /* Szimmetrikus rács: a középső menü a képernyő közepén áll, akármilyen
     széles a két szél. „auto 1fr auto" mellett a napóra szélessége tolta a
     menüt, és minden napszakváltáskor oldalra rándult (angolul 31 px-t). */
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1.5rem;
  padding: 1.1rem var(--gutter);
  /* A felirat-sor mögött teljesen fedő papír, alatta lágy kifutás. 96%-os
     fedésnél a görgetett nagy betűk szellemként átütöttek a menün. */
  background: linear-gradient(to bottom,
    var(--paper) 0%,
    var(--paper) 66%,
    color-mix(in srgb, var(--paper) 0%, transparent) 100%);
  /* Szándékosan nincs backdrop-filter: a lap tetején elmosott sávot húzott
     át a szirmokon és a nagy betűk ékezetein, és hibának látszott. */
}

.mark {
  justify-self: start;
  display: inline-flex; align-items: center; gap: .6rem;
  font: 560 1.05rem/1 var(--f-text); letter-spacing: -.01em; text-decoration: none;
}
.mark img { width: 30px; height: 30px; }
.mark-app { letter-spacing: .02em; }

.hud-nav { display: flex; justify-content: center; gap: clamp(1rem, 2.4vw, 2.2rem); }
.hud-nav a, .clock {
  font: 400 .74rem/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-soft);
}
.hud-nav a { text-decoration: none; padding: .4rem 0; background: linear-gradient(var(--ink), var(--ink)) 0 100% / 0 1px no-repeat; transition: background-size var(--t-mid) var(--ease-light), color .3s; }
.hud-nav a:hover { color: var(--ink); background-size: 100% 1px; }

/* Fix szélesség a leghosszabb jelenetnévre („Golden hour": 13,89 em, mérve),
   balra zárt tartalommal: az idő és a pont nem mozdul, csak a név nő jobbra.
   Különben a napóra minden napszakváltáskor odébb csúszott (CLS). */
.clock {
  justify-self: end; width: 14.4em;
  display: inline-flex; align-items: center; gap: .55rem;
  font-variant-numeric: tabular-nums; color: var(--ink);
}
/* Ha nagy rendszerbetűvel a napóra a márkanévhez érne (a main.js ráillesztője
   méri): előbb a jelenet neve megy, és a napóra a tartalmához zsugorodik — az
   idő táblázatos számokkal fix széles, így nem ugrál; ha így sem fér, az egész. */
.hud--tight .clock { width: auto; }
.hud--tight [data-scene-name] { display: none; }
.hud--tighter .clock { display: none; }
.clock-dot {
  width: .45rem; height: .45rem; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #FFE7A8, var(--gold-deep));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 22%, transparent);
}
[data-scene-name] { color: var(--ink-soft); }

/* --- Közös elemek -------------------------------------------------------- */

/* A „csapó": minden jelenet egy filmes csapóval kezdődik. */
.slate {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .55rem;
  width: fit-content; max-width: 100%;
  font: 400 .74rem/1.4 var(--f-mono); letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.slate > span:first-child { color: var(--ink); }
/* Az elválasztó a halk tintát kapja, nem átlátszóságot: 50%-on 2,2:1 lett. */
.slate-sep { color: var(--ink-soft); }

.h-section {
  font: 330 clamp(2.6rem, 1.6rem + 4.6vw, 6.4rem)/.95 var(--f-display);
  letter-spacing: -.035em;
  font-variant-numeric: lining-nums;
}
.sub { margin-top: 1rem; color: var(--ink-soft); font-size: clamp(1.1rem, 1rem + .45vw, 1.35rem); }

.scene { position: relative; }

/* --- 01 · Hajnal --------------------------------------------------------- */

/* minmax(0, 1fr): az automatikus rácsoszlop a leghosszabb törhetetlen szóhoz
   („alkalmazások") nőne, és nagy betűs telefonon az egész hero szélesebb lenne a
   képernyőnél. */
.scene--hajnal {
  min-height: 100svh;
  display: grid; grid-template-columns: minmax(0, 1fr); align-items: end;
  overflow: clip;
}

.hero { position: relative; z-index: 2; width: 100%; padding-top: 8rem; padding-bottom: clamp(5rem, 11vh, 8rem); }

.hero-title {
  font: 330 clamp(3.2rem, .5rem + 9.4vw, 10rem)/.86 var(--f-display);
  letter-spacing: -.045em;
  margin-left: -.04em;
}
/* A maszk fölül .22em-et ad: az „Ö" pontjai a nagybetű fölött ülnek, és a
   szoros sorköz miatt egy szűkebb maszk levágta őket („Otletből"). */
.hero-title .line { display: block; overflow: clip; padding: .22em .12em .1em; margin: -.22em -.12em -.1em; }
.hero-title .line > * { display: inline-block; }
.hero-title .line--indent { padding-left: calc(.12em + .55em); }
.hero-title em { color: var(--ochre); letter-spacing: -.04em; }

/* Címkártya-felúszás: a sor maszk mögül emelkedik ki, nem beúszik. */
@media (prefers-reduced-motion: no-preference) {
  /* Az első sor („Ötletből") nem animál: az első képen ez a lap legnagyobb
     szövege, a Google ezt méri LCP-ként, és egy maszk mögül induló sor
     csak akkor számít kirajzoltnak, amikor már látszik. A címkártya-hatást
     a második, dőlt sor viszi — az emelkedik ki a maszk mögül. */
  .hero-title .line:nth-child(2) > * { animation: rise 1.6s var(--ease-light) .12s both; }
  .hero-foot, .credits, .slate--hero { animation: develop 1.6s var(--ease-light) both; }
  .slate--hero { animation-delay: .05s; }
  .hero-foot  { animation-delay: .7s; }
  .credits    { animation-delay: .9s; }
}
@keyframes rise { from { transform: translateY(108%); } to { transform: none; } }
/* „Előhívás": életlenből élesbe, mint egy fotó a hívótálban. */
@keyframes develop { from { opacity: 0; filter: blur(10px); transform: translateY(.8rem); } to { opacity: 1; filter: none; transform: none; } }

.hero-foot {
  display: grid; grid-template-columns: minmax(0, min(34ch, 100%)) auto; gap: 1.5rem clamp(2rem, 5vw, 5rem);
  align-items: end; margin-top: clamp(2rem, 5vh, 3.5rem);
}
.hero-lead { color: var(--ink-soft); font-size: clamp(1.12rem, 1rem + .5vw, 1.4rem); line-height: 1.5; }

.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 2rem; }

/* Az elsődleges gomb nem pill: tinta-téglalap, éles sarokkal. A hover-en
   egy arany fénycsík fut át rajta — ugyanaz a mozdulat, mint a filmkockákon. */
.cta {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; gap: 1rem;
  padding: 1.05rem 1.5rem 1.05rem 1.6rem;
  background: var(--ink); color: #FBF6EA;
  font: 400 .8rem/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; text-decoration: none;
  border-radius: 2px;
  transition: transform var(--t-mid) var(--ease-light);
}
.cta::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 214, 140, .35) 50%, transparent 70%);
  translate: -120% 0; transition: translate 1.2s var(--ease-light);
}
.cta:hover::after, .cta:focus-visible::after { translate: 120% 0; }
.cta:hover { transform: translateY(-2px); }
.cta-arrow { width: 2.2rem; height: .7rem; fill: none; stroke: currentColor; stroke-width: 1.3; transition: transform var(--t-mid) var(--ease-light); }
.cta:hover .cta-arrow { transform: translateX(.35rem); }

.cta-quiet {
  font: 400 .8rem/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; text-decoration: none;
  padding: .5rem 0;
  background: linear-gradient(var(--ink), var(--ink)) 0 100% / 100% 1px no-repeat;
  transition: background-size var(--t-mid) var(--ease-light);
}
.cta-quiet:hover { background-size: 30% 1px; }

/* Stáblista a kép alján. */
.credits {
  display: flex; flex-wrap: wrap; gap: .8rem clamp(2rem, 5vw, 4.5rem);
  margin-top: clamp(2.5rem, 6vh, 4rem); padding-top: 1.1rem;
  border-top: 1px solid var(--hair);
  max-width: 62rem;
}
.credits div { display: flex; gap: .9rem; align-items: baseline; min-width: 0; }
.credits dt { font: 400 .7rem/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); white-space: nowrap; }
.credits dd { font-size: .98rem; }

.scroll-cue {
  position: absolute; z-index: 2; left: var(--gutter); bottom: clamp(1.5rem, 4vh, 2.5rem);
  display: flex; align-items: center; gap: .8rem;
  font: 400 .7rem/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft);
}
.scroll-line { width: 3.5rem; height: 1px; background: var(--ink-soft); transform-origin: left; }
@media (prefers-reduced-motion: no-preference) {
  /* Kétszer jelez, aztán kihúzódik és úgy marad: egy végtelen mozgás a lap
     szélén zaj. A „cue" kulcskockái 0 szélességgel végződnek, ezért a végén
     egy külön „cue-in" húzza ki a vonalat — enélkül egy üres rés maradt
     volna a felirat előtt. A sorrend számít: ha két animáció ugyanazt a
     tulajdonságot írja, a listában a későbbi nyer, és a „cue" a várakozása
     alatt is a sajátját mutatja (backwards). */
  .scroll-line { animation: cue-in 1.4s var(--ease-light) 6.8s backwards, cue 2.8s var(--ease-turn) 1.2s 2 backwards; }
}
@keyframes cue-in { from { transform: scaleX(0); transform-origin: left; } to { transform: scaleX(1); transform-origin: left; } }
@keyframes cue { 0% { transform: scaleX(0); } 45% { transform: scaleX(1); transform-origin: left; } 55% { transform: scaleX(1); transform-origin: right; } 100% { transform: scaleX(0); transform-origin: right; } }

/* A virág. Jobbra, félig a képen kívül — mint a nap a képkivágás szélén.
   A sötét korong soha nem kerül szöveg alá; a nagy cím a szirmokra fut rá,
   ami mélységet ad (előtér–háttér), és a szirmokon is olvasható marad. */
.flower-stage {
  position: absolute; z-index: 1;
  width: min(122vmin, 1240px); aspect-ratio: 1;
  right: max(-36vmin, -360px); top: 50%;
  translate: 0 -50%;
  perspective: 1600px;
}
.flower-tilt {
  width: 100%; height: 100%;
  transform-style: preserve-3d;
  transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
}
.flower { width: 100%; height: 100%; overflow: visible; rotate: var(--spin, 0deg); }
.flower-shadow {
  position: absolute; inset: 8% 4% 0 12%;
  background: radial-gradient(closest-side, rgba(var(--shade), .20), rgba(var(--shade), .08) 55%, transparent 80%);
  translate: -5% 9%;
  filter: blur(18px);
}

/* Növekedés: középről kifelé, ahogy az ötletből lesz a rendszer. A magok
   egy táguló kör alakú maszk mögül bukkannak elő, a két szirom-gyűrű
   egy-egy enyhe fordulással nyílik ki (a heliotrópia kis visszhangja).

   Szándékosan csak HÁROM animáció, csoportonként egy. Az első változat mind
   a 655 magot és szirmot külön animálta: SVG gyerekelem nem kerülhet külön
   grafikus rétegre, így mind a főszálon futott, és egy 450–850 ms-os
   feladat ~1 másodpercre kitolta az első kirajzolást. Csoportonként egy
   animációval a leghosszabb feladat ~80 ms (mérve).

   A maszk százaléka a magcsoport befoglaló dobozára vonatkozik (≈ 2R × 2R);
   a circle() sugarának 100%-a ennek √((w²+h²)/2) = 2R, tehát 52% ≈ R + a
   legszélső magok. */
.seeds  { clip-path: circle(52% at 50% 50%); }
.petals { transform-box: view-box; transform-origin: 50% 50%; }
@media (prefers-reduced-motion: no-preference) {
  .js .seeds         { animation: seeds-grow 1.5s var(--ease-light) .1s both; }
  .js .petals        { animation: petals-open 1.7s var(--ease-light) both; }
  .js .petals--back  { animation-delay: .7s; }
  .js .petals--front { animation-delay: .85s; }
}
@keyframes seeds-grow  { from { clip-path: circle(0% at 50% 50%); } to { clip-path: circle(52% at 50% 50%); } }
@keyframes petals-open { from { opacity: 0; transform: scale(.62) rotate(-9deg); } to { opacity: 1; transform: none; } }

/* --- 02 · Délelőtt ------------------------------------------------------- */

.scene--delelott { padding: clamp(7rem, 16vh, 12rem) 0 clamp(5rem, 12vh, 9rem); }

.prologue { max-width: 72rem; margin-left: clamp(0rem, 8vw, 9rem); }
.prologue-line {
  font: 330 clamp(1.9rem, 1.1rem + 3vw, 3.9rem)/1.08 var(--f-display);
  letter-spacing: -.025em;
  max-width: 24ch;
  font-variant-numeric: lining-nums;
}
.prologue-line + .prologue-line, .prologue-row, .prologue-row + .prologue-line { margin-top: clamp(1.6rem, 3.5vw, 3rem); }
.prologue-line .num { font-family: var(--f-mono); font-size: .62em; letter-spacing: 0; color: var(--ochre); vertical-align: .08em; }
.prologue-line--close em { color: var(--ochre); }
.prologue-row { display: grid; grid-template-columns: minmax(0, 1fr) clamp(9rem, 15vw, 13rem); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }

/* A műszaki rajz: hajszálvonal, monospace felirat. A mag színe a virágé. */
.angle svg { width: 100%; height: auto; overflow: visible; }
.angle-ring  { fill: none; stroke: var(--hair); stroke-dasharray: 2 5; }
.angle-ray   { stroke: var(--ink-soft); stroke-width: 1; }
.angle-arc   { fill: none; stroke: var(--ochre); stroke-width: 1.4; }
.angle-seed  { fill: var(--seed); }
.angle-seed--2 { fill: var(--gold-deep); }
.angle-core  { fill: var(--ink); }
.angle-label { font: 400 15px var(--f-mono); fill: var(--ochre); }
.angle-label--small { font-size: 12px; fill: var(--ink-soft); }
.angle figcaption { margin-top: .8rem; font: 400 .7rem/1.4 var(--f-mono); letter-spacing: .02em; color: var(--ink-soft); }
/* Képlet az egyik sorban, eredmény a másikban — mint egy levezetésben. Egy
   sorba kényszerítve 1024 px-en kitolta a lapot (10 px túlcsordulás). */
.angle figcaption span { display: block; white-space: nowrap; }

.services-head {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 1.5rem clamp(2rem, 6vw, 6rem);
  align-items: end; margin-top: clamp(7rem, 16vh, 12rem);
}
.statement { font-size: clamp(1.2rem, 1rem + .9vw, 1.75rem); line-height: 1.4; color: var(--ink-soft); max-width: 36ch; }
.statement em { color: var(--ink); }

/* A szolgáltatások stáblista, nem kártyák. */
.services { margin-top: clamp(3rem, 7vh, 5rem); }
.service {
  position: relative;
  display: grid; grid-template-columns: clamp(3.5rem, 7vw, 7rem) minmax(0, 1fr) minmax(0, min(34ch, 100%));
  gap: .5rem clamp(1.5rem, 4vw, 4rem); align-items: baseline;
  padding: clamp(1.6rem, 3.5vw, 2.6rem) 0;
}
.service:last-child { border-bottom: 1px solid var(--hair); }
.rule { position: absolute; inset: 0 0 auto 0; height: 1px; background: var(--hair); transform-origin: left; }
.service-n { font: italic 330 clamp(1.4rem, 1rem + 1.2vw, 2rem)/1 var(--f-display); color: var(--ochre); }
.service h3 { font: 330 clamp(2rem, 1.2rem + 3vw, 4.2rem)/1 var(--f-display); letter-spacing: -.03em; }
.service p { color: var(--ink-soft); font-size: 1.05rem; }

/* --- 03 · Dél ------------------------------------------------------------ */

/* A megállított jelenet JS-t feltételez (a JS viszi végig a napot). Nélküle
   nincs mit nézni 260 svh-nyi görgetés alatt, ezért .js mögött van. */
.scene--del { padding: clamp(5rem, 12vh, 8rem) 0; }
.js .scene--del { height: 260svh; padding: 0; }
.js .pin { position: sticky; top: 0; height: 100svh; display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; overflow: clip; }
.pin-inner { width: 100%; padding-top: 4rem; }
.arc-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 2rem; }
.arc-head .slate { flex-basis: 100%; }
.arc-head .sub { margin-top: 0; }

/* A lépések szélessége és a címük betűmérete az ív szélességéből jön (cqi),
   nem a képernyőéből: az állomások egymástól az ív 24,3–25,9%-ára vannak,
   ennél egyetlen lépés sem lehet szélesebb. */
.arc { position: relative; width: 100%; margin: clamp(1.5rem, 4vh, 3rem) auto 0; container-type: inline-size; }
.arc-svg { width: 100%; height: auto; overflow: visible; }
.arc-track   { fill: none; stroke: var(--hair); stroke-width: 1.2; stroke-dasharray: 3 7; }
.arc-lit     { fill: none; stroke: var(--gold-deep); stroke-width: 2; stroke-linecap: round; }
.arc-horizon { stroke: var(--hair); stroke-width: 1; }
.arc-sun-glow { fill: var(--gold); opacity: .22; }
.arc-sun-core { fill: var(--gold-deep); }
.station-ring { fill: var(--paper); stroke: var(--ink-soft); stroke-width: 1.2; transition: stroke .6s, fill .6s; }
.station-dot  { fill: var(--ink-soft); transition: fill .6s, transform .9s var(--ease-light); transform-box: fill-box; transform-origin: center; transform: scale(.5); }
.station.is-lit .station-ring { stroke: var(--gold-deep); }
.station.is-lit .station-dot  { fill: var(--gold-deep); transform: scale(1); }

/* A lépések a horizont ALATT, mindegyik a saját állomása alatt. Az ív így
   soha nem fut át szövegen; az állomástól pontozott méretvonal ér le. */
/* JS nélkül: egyszerű négyoszlopos sor, minden lépés teljes erővel. */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; margin-top: 2rem; }
html:not(.js) .arc-sun { display: none; }
.js .steps { display: block; position: relative; height: 10.5rem; margin-top: 0; }
.js .step {
  position: absolute; left: calc(var(--x) * 1%); top: 0;
  width: clamp(10rem, 15vw, 14rem);
  width: min(14rem, calc(24cqi - 1.25rem));
  translate: -50% 1.6rem;
  opacity: .32; filter: blur(1.5px);
  transition: opacity 1s var(--ease-light), filter 1s var(--ease-light), translate 1s var(--ease-light);
}
.js .step.is-lit { opacity: 1; filter: none; translate: -50% 1.1rem; }
.station-drop { stroke: var(--ink-soft); stroke-width: 1; stroke-dasharray: 2 4; opacity: .5; transition: stroke .6s, opacity .6s; }
.station.is-lit .station-drop { stroke: var(--gold-deep); opacity: 1; }
.step-n { font: 400 .72rem/1 var(--f-mono); letter-spacing: .14em; color: var(--ochre); }
.step h3 { margin: .55rem 0 .35rem; font: 330 clamp(1.5rem, 1rem + 1.4vw, 2.2rem)/1.05 var(--f-display); letter-spacing: -.02em; }
/* A leghosszabb szó a „Development": 5,71 em. Ennél kisebb betű kell, hogy
   egyetlen szó se lógjon át a szomszéd lépésbe; több szó nyugodtan törhet. */
.step h3 { font-size: min(clamp(1.5rem, 1rem + 1.4vw, 2.2rem), calc((24cqi - 1.25rem) / 5.9)); }

/* A megállított jelenet: a fejléc, az ív és a lépések együtt férjenek bele
   egy képernyőbe, ezért az ív szélessége a képernyő MAGASSÁGÁBÓL jön.
   3,158 = 1200 / 380, a rajz aránya. Alacsony képernyőn (45 rem alatt) így
   az ív olyan keskeny lenne, hogy a lépések nem férnének alá: ott a jelenet
   nem áll meg, az ív teljes szélességű, és a nap a sima görgetéssel halad. */
@media (min-width: 861px) and (height >= 45rem) and (prefers-reduced-motion: no-preference) {
  .js .arc { width: min(100%, calc((100svh - 30rem) * 3.158)); }
}
@media (min-width: 861px) and (height < 45rem) {
  .js .scene--del { height: auto; padding: clamp(5rem, 12vh, 8rem) 0; }
  .js .pin { position: static; height: auto; display: block; overflow: visible; }
}
.step p { font-size: .98rem; line-height: 1.45; color: var(--ink-soft); }

/* --- 04 · Aranyóra ------------------------------------------------------- */

.scene--aranyora { padding: clamp(6rem, 14vh, 10rem) 0 clamp(4rem, 10vh, 8rem); }
/* A 44 rem az alcím sorhossza; a cím („Referenciamunkák", 780 px) szélesebb ennél. */
.works-head { margin-bottom: clamp(4rem, 10vh, 7rem); }
.works-head .sub { max-width: 44rem; }

.still { margin-bottom: clamp(6rem, 16vh, 12rem); }
.still-link {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1.5rem clamp(1rem, 2.4vw, 2.5rem);
  align-items: end; text-decoration: none;
}
.still--a .still-frame { grid-column: 1 / span 8; }
.still--a .still-text  { grid-column: 9 / span 4; }
.still--b .still-frame { grid-column: 5 / span 8; grid-row: 1; }
.still--b .still-text  { grid-column: 1 / span 4; grid-row: 1; }
.still--c .still-frame { grid-column: 2 / span 10; }
.still--c .still-text  { grid-column: 2 / span 10; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem clamp(1.5rem, 4vw, 4rem); }
.still--c .still-text > :nth-child(-n+3) { grid-column: 1; }
.still--c .still-text > :nth-child(n+4)  { grid-column: 2; }
.still--c .still-text > .still-body { grid-row: 1 / span 2; }

/* A keret: éles sarok, hosszú hideg árnyék és meleg peremfény — egy
   kiállított fotó a délutáni napban. */
.still-frame {
  position: relative; overflow: hidden;
  border-radius: 3px;
  background: #fff;
  box-shadow:
    0 0 0 1px rgba(28, 25, 21, .08),
    0 2px 4px rgba(var(--shade), .06),
    0 40px 80px -36px rgba(var(--shade), .42),
    0 18px 36px -24px rgba(120, 70, 0, .18);
  /* Három független tulajdonság, három gazdával: a felúszás a transformot
     írja, a parallax a translate-et, a hover a scale-t. Ha mind a transformon
     osztozna, a felúszás „transform: none"-ja elnyelné a másik kettőt. */
  translate: 0 var(--py, 0px);
  transition: transform var(--t-slow) var(--ease-light), scale 1.2s var(--ease-light), box-shadow 1.2s var(--ease-light), opacity var(--t-slow) var(--ease-light), filter var(--t-slow) var(--ease-light);
}
.still-frame img { width: 100%; height: auto; }
/* A fénycsík: belépéskor egyszer végigfut, hover-re újra. */
.light-pass {
  position: absolute; inset: -10% -40%;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 236, 190, .55) 48%, rgba(255, 255, 255, .7) 50%, rgba(255, 236, 190, .55) 52%, transparent 62%);
  mix-blend-mode: soft-light;
  translate: -70% 0;
  pointer-events: none;
}
.still-frame.is-in .light-pass { animation: pass 2.2s var(--ease-turn) .3s both; }
.still-link:hover .light-pass, .still-link:focus-visible .light-pass { animation: pass 1.6s var(--ease-turn) both; }
@keyframes pass { from { translate: -70% 0; } to { translate: 70% 0; } }
.still-link:hover .still-frame { scale: 1.012; box-shadow: 0 0 0 1px rgba(28,25,21,.1), 0 2px 4px rgba(var(--shade),.06), 0 60px 100px -40px rgba(var(--shade),.5), 0 22px 44px -26px rgba(120,70,0,.22); }

.still-slate { font: 400 .72rem/1.4 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.still-text h3 { margin: .9rem 0 .4rem; font: 330 clamp(2.2rem, 1.4rem + 2.6vw, 3.8rem)/.95 var(--f-display); letter-spacing: -.03em; }
.still-tag { font: italic 330 clamp(1.15rem, 1rem + .5vw, 1.4rem)/1.3 var(--f-display); color: var(--ochre); }
.still-body { margin-top: 1rem; color: var(--ink-soft); font-size: 1rem; line-height: 1.55; }
/* Elválasztó nélkül: a „/" tördeléskor sor elejére került („/ Előfizetés"),
   és elválasztó soha nem nyithat sort. A széles köz és a nagybetű így is
   listaként olvastatja. */
.still-credits { display: flex; flex-wrap: wrap; gap: .45rem 1.6rem; margin-top: 1.1rem; }
.still-credits li { font: 400 .68rem/1.4 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.still-go {
  display: inline-flex; align-items: center; gap: .55rem; margin-top: 1.6rem; padding-bottom: .35rem;
  font: 400 .76rem/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase;
  background: linear-gradient(var(--ink), var(--ink)) 0 100% / 100% 1px no-repeat;
  transition: background-size var(--t-mid) var(--ease-light);
}
.still-go svg { width: .7rem; height: .7rem; fill: none; stroke: currentColor; stroke-width: 1.4; transition: transform var(--t-mid) var(--ease-light); }
.still-link:hover .still-go svg { transform: translate(2px, -2px); }
.still-link:hover .still-go { background-size: 35% 1px; }

/* --- 05 · Alkony --------------------------------------------------------- */

.scene--alkony { padding: clamp(6rem, 16vh, 11rem) 0 0; overflow: clip; }
/* minmax(0, …): különben a törhetetlen e-mail-cím min-content szélessége szabja
   meg az oszlopot, és nagy betűs telefonon (rendszerszintű betűnagyítás) az
   egész szakaszt kitolja a képernyőről. */
.dusk { text-align: center; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; }
.dusk .slate { justify-content: center; }
.dusk-title {
  max-width: 100%;
  font: italic 330 clamp(3.4rem, 1rem + 10vw, 11rem)/.9 var(--f-display);
  letter-spacing: -.045em; color: var(--ink);
}
.dusk-copy { margin-top: clamp(1.5rem, 3vw, 2.5rem); max-width: 40ch; color: var(--ink-soft); font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem); }
.dusk-mail {
  margin-top: clamp(2rem, 5vh, 3.5rem);
  font: 330 clamp(1.8rem, 1rem + 4.2vw, 5rem)/1.1 var(--f-display); letter-spacing: -.03em;
  text-decoration: none;
  background: linear-gradient(var(--gold-deep), var(--gold-deep)) 50% 100% / 100% 2px no-repeat;
  padding-bottom: .12em; max-width: 100%; overflow-wrap: anywhere;
  transition: background-size 1.1s var(--ease-light), color .4s;
}
.dusk-mail:hover { background-size: 0% 2px; color: var(--ochre); }

/* A horizont: a doboz a vonal FÖLÖTT van, és ami a vonal alá ér, azt levágja
   — így a napnak mindig csak a horizont fölötti része látszik. A JS a lap
   aljához közeledve lejjebb tolja (--set 0 → 1): a nap lemegy. */
.horizon {
  position: relative; height: clamp(9rem, 24vh, 16rem); margin-top: clamp(3rem, 8vh, 6rem);
  border-bottom: 1px solid var(--hair);
  overflow: hidden;
}
.horizon-sun {
  position: absolute; left: 50%; top: 100%;
  width: clamp(18rem, 44vw, 38rem); aspect-ratio: 1; border-radius: 50%;
  translate: -50% calc(-50% + var(--set, 0) * 34%);
  /* Az 50→54% közti lépcső adja a korong peremét; utána a lágy fényudvar. */
  background: radial-gradient(circle closest-side, #FFA27E 0%, #FFB28E 50%, rgba(255, 178, 142, .5) 54%, rgba(255, 178, 142, .16) 74%, transparent 100%);
}

/* --- Lábléc -------------------------------------------------------------- */

.foot { padding: 2.5rem 0 3rem; border-top: 1px solid var(--hair); }
.foot-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem; align-items: start; }
.foot-brand { font: 560 1rem/1.4 var(--f-text); }
.foot-sub { display: block; font-weight: 400; color: var(--ink-soft); font-size: .92rem; }
.foot-legal { display: grid; grid-template-columns: repeat(4, auto); gap: .4rem 2.5rem; }
.foot-legal dt { font: 400 .66rem/1.4 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.foot-legal dd { font: 400 .8rem/1.5 var(--f-mono); font-variant-numeric: tabular-nums; }
.foot-legal a { text-decoration-color: var(--hair); text-underline-offset: 3px; }
.foot-bottom { grid-column: 1 / -1; font: 400 .7rem/1.4 var(--f-mono); letter-spacing: .08em; color: var(--ink-soft); }
.foot-note { margin-left: 1rem; }

/* --- Felúszás: „expozíció" ----------------------------------------------
   Nem csúszik be oldalról, hanem előhívódik: életlenből élesbe, alulról
   alig emelkedve. A hajszálvonalak balról húzódnak ki. */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal {
    opacity: 0; filter: blur(10px); transform: translate3d(0, 1.4rem, 0);
    transition: opacity var(--t-slow) var(--ease-light), filter var(--t-slow) var(--ease-light), transform var(--t-slow) var(--ease-light);
    transition-delay: calc(var(--stagger, 0) * 110ms);
  }
  .js .reveal.is-in { opacity: 1; filter: none; transform: none; }
  .js .rule { transform: scaleX(0); transition: transform 1.8s var(--ease-light) calc(var(--stagger, 0) * 110ms); }
  .js .is-in > .rule { transform: none; }
}

/* Fekvő tablet: a cím arányaiban szélesebb, a virágnak jobbrább kell állnia,
   különben a korong 1024 px-en rácsúszik az „alkalmazások" végére. */
@media (max-width: 1100px) and (min-width: 861px) {
  .flower-stage { right: -44vmin; }
  .hero-foot { grid-template-columns: minmax(0, min(34ch, 100%)); }
}

/* --- Keskeny képernyő ---------------------------------------------------- */

@media (max-width: 860px) {
  .hud { grid-template-columns: 1fr auto; }
  .hud-nav { display: none; }
  /* Telefonon a virág felül ül, levágva; a szöveg a korong alatt indul.
     A számok mérésből: a korong alja 390 px-en kb. 66vw-nél van. */
  .hero { padding-top: 74vw; }
  /* Keskenyen a csapó két sorba törik: „01 Hajnal", alatta a műfaj. Az
     elválasztó pont ilyenkor a sor végén lógna, ezért eltűnik. A második rész
     saját elem — enélkül a „Hajnal" és a műfaj egyetlen névtelen flex-elemmé
     olvadna össze, ami nem tud törni, és egy sorban futna rá a szirmokra. */
  .slate--hero .slate-sep { display: none; }
  .slate--hero .slate-what { flex-basis: 100%; }
  /* A stáblista címkéje keskenyen a szöveg fölé kerül: egymás mellett a
     hosszabb címke („Track record") kettétört, és összenyomta a szöveget. */
  .credits div { flex-direction: column; gap: .35rem; }
  .flower-stage { width: 128vw; right: -52vw; top: -32vw; translate: none; }
  .hero-foot { grid-template-columns: minmax(0, 1fr); }
  .scroll-cue { display: none; }
  .prologue { margin-left: 0; }
  .prologue-row { grid-template-columns: 1fr; }
  .angle { max-width: 12rem; }
  .services-head { grid-template-columns: 1fr; }
  .service { grid-template-columns: 3rem minmax(0, 1fr); }
  .service p { grid-column: 2; }

  /* A nap pályája keskenyen nem áll meg: függőleges lista, a nap egy
     függőleges vonalon halad, minden állomás látszik. */
  .scene--del, .js .scene--del { height: auto; padding: 6rem 0; }
  .pin, .js .pin { position: static; height: auto; display: block; overflow: visible; }
  .arc-svg { display: none; }
  .arc { width: 100%; }
  .steps, .js .steps { position: static; height: auto; display: grid; grid-template-columns: 1fr; gap: 2rem; margin-top: 2.5rem; padding-left: 1.4rem; border-left: 1px solid var(--gold-deep); }
  .step, .js .step, .js .step.is-lit { position: static; width: auto; translate: none; opacity: 1; filter: none; }
  .step h3 { font-size: clamp(1.5rem, 1rem + 1.4vw, 2.2rem); }

  .still-link { grid-template-columns: 1fr; }
  .still .still-frame, .still .still-text { grid-column: 1; grid-row: auto; }
  .still--c .still-text { display: block; }
  .foot-inner { grid-template-columns: minmax(0, 1fr); }
  .foot-legal { grid-template-columns: repeat(2, minmax(0, auto)); }
  .foot-legal dd { overflow-wrap: anywhere; }
}

/* --- Csökkentett mozgás --------------------------------------------------
   Minden marad, ami szín és kompozíció; ami mozgás, az áll. A dél-jelenet
   nem áll meg görgetés közben, a lépések mind égnek. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .scene--del, .js .scene--del { height: auto; padding: 6rem 0; }
  .pin, .js .pin { position: static; height: auto; }
  .js .step { opacity: 1; filter: none; }
  .motes { display: none; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}