/* =========================================================================
   MŰHELY 904 — AUTÓSZERVIZ  ·  Granivel mintaoldal
   granivel.hu — scroll-vezérelt cinematic koncepció
   ========================================================================= */

@font-face{
  font-family:"Inter Tight";
  src:url("../fonts/inter-tight-latin.woff2") format("woff2");
  font-weight:100 900; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Inter Tight";
  src:url("../fonts/inter-tight-latin-ext.woff2") format("woff2");
  font-weight:100 900; font-style:normal; font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ------------------------------------------------------------- tokens -- */
:root{
  --ink:#08090a;
  --carbon:#0c0e10;
  --graphite:#131619;
  --steel:#20252a;
  --bone:#ece9e3;
  --mute:#7e858c;
  --dim:#666d75;
  --accent:#ff3d14;
  --edge:rgba(236,233,227,.10);
  --edge-2:rgba(236,233,227,.20);
  --edge-3:rgba(236,233,227,.34);

  --pad:clamp(20px,4.4vw,72px);
  --cinema-h:560vh;

  --ease:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.65,.02,.24,1);

  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --sans:"Inter Tight","Helvetica Neue",Helvetica,Inter,Arial,sans-serif;
}

/* --------------------------------------------------------------- base -- */
*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-behavior:auto }
html,body{ margin:0; padding:0 }
body{
  background:var(--ink); color:var(--bone);
  font-family:var(--sans); font-size:16px; font-weight:400; line-height:1.5;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
html.is-loading,html.is-loading body{ overflow:hidden; height:100% }
img,video{ display:block; max-width:100% }
a{ color:inherit; text-decoration:none }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer }
ul,ol{ list-style:none; margin:0; padding:0 }
h1,h2,h3,p{ margin:0 }
::selection{ background:var(--accent); color:#fff }
:focus-visible{ outline:2px solid var(--accent); outline-offset:4px }

.tag{
  display:inline-block; font-family:var(--mono); font-size:10.5px; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase; color:var(--bone);
}
.tag--dim{ color:var(--mute) }

/* ------------------------------------------------ reveal primitives -- */
[data-lines] .ln{ display:block; overflow:hidden; padding:.2em .02em .1em; margin:-.2em -.02em -.1em }
[data-lines] .ln>i{ display:block; font-style:normal; will-change:transform }
[data-chars] .wd{
  display:inline-block; overflow:hidden;
  padding:.16em .03em .2em; margin:-.16em -.03em -.2em;
}
[data-chars] .ch{ display:inline-block; will-change:transform }

/* ------------------------------------------------------------ button -- */
.btn{
  position:relative; display:inline-flex; align-items:center; gap:.7em;
  font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  padding:16px 26px; border:1px solid var(--edge-2); border-radius:999px;
  overflow:hidden; isolation:isolate; will-change:transform;
  transition:border-color .45s var(--ease), color .45s var(--ease);
}
.btn>span{ position:relative; z-index:2; display:block }
.btn__arrow{ position:relative; z-index:2; font-style:normal; transition:transform .5s var(--ease) }
.btn::before{
  content:""; position:absolute; inset:0; z-index:1; background:var(--bone);
  transform:translateY(101%); transition:transform .6s var(--ease);
}
.btn:hover::before{ transform:translateY(0) }
.btn:hover{ color:var(--ink); border-color:transparent }
.btn:hover .btn__arrow{ transform:translateY(3px) }
.btn--solid{ background:var(--bone); color:var(--ink); border-color:var(--bone) }
.btn--solid::before{ background:var(--accent) }
.btn--solid:hover{ color:#fff; border-color:var(--accent) }
.btn--sm{ padding:11px 20px; font-size:10.5px; letter-spacing:.18em }
.btn--inv{ background:var(--ink); color:var(--bone); border-color:var(--ink) }
.btn--inv::before{ background:var(--accent) }
.btn--inv:hover{ color:#fff; border-color:var(--accent) }
.btn--invGhost{ border-color:rgba(8,9,10,.28); color:var(--ink) }
.btn--invGhost::before{ background:var(--ink) }
.btn--invGhost:hover{ color:var(--bone) }

/* ============================================================== INTRO == */
.intro{
  position:fixed; inset:0; z-index:1000; background:var(--ink);
  display:grid; place-items:center; overflow:hidden;
}
.intro__rule{ position:absolute; z-index:2; background:var(--edge); pointer-events:none }
.intro__rule--h{ left:0; right:0; top:50%; height:1px; transform:scaleX(0) }
.intro__rule--v{ top:0; bottom:0; left:50%; width:1px; transform:scaleY(0) }
.intro__scan{
  position:absolute; z-index:2; left:0; right:0; top:0; height:34vh; pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(255,61,20,.07) 46%,rgba(236,233,227,.14) 50%,rgba(255,61,20,.07) 54%,transparent);
  opacity:0;
}
.intro__core{ position:relative; z-index:3; text-align:center; padding:0 var(--pad) }
.intro__eyebrow{
  display:flex; align-items:center; justify-content:center; gap:.8em;
  font-family:var(--mono); font-size:10px; letter-spacing:.3em; color:var(--mute);
  opacity:0;
}
.intro__eyebrow b{ color:var(--accent) }
.intro__digits{
  position:relative; display:flex; justify-content:center; gap:.02em;
  margin-top:clamp(2px,.6vh,8px);
  font-size:clamp(84px,19vw,230px); font-weight:600; line-height:.9; letter-spacing:-.05em;
}
.intro__d{ display:block; overflow:hidden; padding:.1em .01em .12em; margin:-.1em -.01em -.12em }
.intro__d>i{ display:block; font-style:normal; transform:translateY(110%) }
.intro__sweep{
  position:absolute; left:-6%; right:-6%; top:0; height:2px; background:var(--accent);
  box-shadow:0 0 26px 5px rgba(255,61,20,.5); opacity:0;
}
.intro__lockLine,.intro__lockSub{ display:block; overflow:hidden }
.intro__lockLine>i,.intro__lockSub>i{ display:block; font-style:normal; transform:translateY(105%) }
.intro__lockLine{
  margin-top:clamp(14px,2.6vh,30px);
  font-size:clamp(22px,3.6vw,46px); font-weight:600; letter-spacing:.1em; text-indent:.1em;
}
.intro__lockSub{
  margin-top:clamp(6px,1vh,12px); font-family:var(--mono); font-size:clamp(9px,1.3vw,12px);
  letter-spacing:.46em; color:var(--mute); text-indent:.46em;
}
.intro__meter{
  width:min(240px,52vw); height:1px; margin:clamp(24px,4vh,44px) auto 0;
  background:var(--edge); overflow:hidden;
}
.intro__meter>i{ display:block; height:100%; width:100%; background:var(--accent); transform:scaleX(0); transform-origin:0 50% }
.intro__pct{
  margin-top:10px; font-family:var(--mono); font-size:10px; letter-spacing:.24em; color:var(--dim);
  font-variant-numeric:tabular-nums;
}
.intro__shutter{ position:absolute; inset:0; z-index:1; display:flex; flex-direction:column; pointer-events:none }
.intro__shutter>i{ flex:1; background:var(--ink); transform-origin:0 50% }

/* ============================================================= CURSOR == */
.cursor{ position:fixed; inset:0; z-index:990; pointer-events:none; display:none; opacity:0; transition:opacity .3s }
html.cursor-live .cursor{ opacity:1 }
.cursor__dot{
  position:absolute; top:0; left:0; width:5px; height:5px; margin:-2.5px 0 0 -2.5px;
  border-radius:50%; background:var(--bone);
}
.cursor__ring{
  position:absolute; top:0; left:0; width:38px; height:38px; margin:-19px 0 0 -19px;
  border:1px solid var(--edge-3); border-radius:50%;
  display:grid; place-items:center;
}
.cursor__label{
  font-family:var(--mono); font-size:8.5px; letter-spacing:.18em; color:var(--bone);
  opacity:0; white-space:nowrap;
}
@media (pointer:fine) and (min-width:900px){
  html.has-cursor .cursor{ display:block }
  html.has-cursor *{ cursor:none !important }
}

/* ============================================================== STAGE == */
.stage{
  position:fixed; inset:0; z-index:0; background:var(--ink);
  overflow:hidden; will-change:opacity,transform;
}
.stage__film{ position:absolute; inset:0 }
.stage__video{
  width:100%; height:100%; object-fit:cover; object-position:center 46%;
  background:var(--ink);
}
.stage__grade{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(120% 78% at 50% 44%,transparent 34%,rgba(8,9,10,.5) 78%,rgba(8,9,10,.86) 100%);
}
.stage__scrim{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(180deg,rgba(8,9,10,.86) 0%,rgba(8,9,10,.28) 16%,transparent 32%),
    linear-gradient(0deg,rgba(8,9,10,.94) 0%,rgba(8,9,10,.52) 24%,transparent 52%),
    linear-gradient(90deg,rgba(8,9,10,.8) 0%,rgba(8,9,10,.34) 16%,transparent 38%),
    linear-gradient(270deg,rgba(8,9,10,.8) 0%,rgba(8,9,10,.34) 16%,transparent 38%);
}

/* HUD */
.stage__hud{ position:absolute; inset:0; pointer-events:none; opacity:0 }
.hud__bracket{ position:absolute; width:26px; height:26px; border:1px solid var(--edge-2) }
.hud__bracket--tl{ top:calc(var(--pad) * .8); left:calc(var(--pad) * .8); border-right:0; border-bottom:0 }
.hud__bracket--tr{ top:calc(var(--pad) * .8); right:calc(var(--pad) * .8); border-left:0; border-bottom:0 }
.hud__bracket--bl{ bottom:calc(var(--pad) * .8); left:calc(var(--pad) * .8); border-right:0; border-top:0 }
.hud__bracket--br{ bottom:calc(var(--pad) * .8); right:calc(var(--pad) * .8); border-left:0; border-top:0 }
.hud__k{ font-family:var(--mono); font-size:9px; letter-spacing:.24em; color:var(--dim) }
.hud__v{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--bone); font-variant-numeric:tabular-nums }
.hud__meta{ position:absolute; display:flex; align-items:baseline; gap:.7em }
.hud__meta--tr{ top:calc(var(--pad) * .8 + 42px); right:calc(var(--pad) * .8) }
.hud__rail{ position:absolute; left:var(--pad); right:var(--pad); bottom:calc(var(--pad) * .78) }
.hud__railTrack{ height:1px; background:var(--edge); overflow:hidden }
.hud__railTrack>i{ display:block; height:100%; background:var(--accent); transform:scaleX(0); transform-origin:0 50% }
.hud__ticks{ display:flex; justify-content:space-between; margin-top:-1px }
.hud__ticks>i{ width:1px; height:7px; background:var(--edge-2) }
.hud__phase{ display:flex; align-items:baseline; gap:.7em; margin-top:12px }
.hud__phase .hud__v b{ font-weight:500; color:var(--accent) }
.hud__name{ font-family:var(--mono); font-size:9px; letter-spacing:.26em; color:var(--mute); margin-left:.4em }

/* ================================================================ NAV == */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:800;
  display:flex; align-items:center; gap:clamp(16px,3vw,44px);
  padding:18px var(--pad); mix-blend-mode:normal;
  transition:background .5s var(--ease), backdrop-filter .5s var(--ease), border-color .5s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.is-solid{
  background:rgba(8,9,10,.72); backdrop-filter:blur(16px) saturate(1.1);
  -webkit-backdrop-filter:blur(16px) saturate(1.1); border-bottom-color:var(--edge);
}
.nav.is-hidden{ transform:translateY(-102%) }
.nav{ transition:background .5s var(--ease), backdrop-filter .5s var(--ease), border-color .5s var(--ease), transform .55s var(--ease) }
.nav__progress{
  position:absolute; left:0; top:0; height:1px; width:100%; background:var(--accent);
  transform:scaleX(0); transform-origin:0 50%;
}
.nav__brand{ display:flex; align-items:center; gap:.55em; font-size:12px; font-weight:600; letter-spacing:.2em }
.nav__brand b{ color:var(--accent); font-weight:600 }
.nav__mark{ width:7px; height:7px; border:1px solid var(--accent); border-radius:50%; display:block }
.nav__links{ display:flex; gap:clamp(14px,2.2vw,34px); margin-left:auto }
.nav__links a{
  display:block; height:1.2em; overflow:hidden;
  font-size:11px; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--mute);
}
.nav__links a span{ display:block; line-height:1.2em; transition:transform .55s var(--ease) }
.nav__links a span::after{ content:attr(data-t); display:block; color:var(--bone) }
.nav__links a:hover span{ transform:translateY(-1.2em) }
.nav__links a.is-active span{ color:var(--bone) }
.nav__cta{ margin-left:clamp(10px,1.6vw,22px) }
.nav__burger{ display:none; width:34px; height:34px; margin-left:auto; position:relative }
.nav__burger>i{
  position:absolute; left:6px; right:6px; height:1px; background:var(--bone);
  transition:transform .45s var(--ease), opacity .3s;
}
.nav__burger>i:nth-child(1){ top:14px } .nav__burger>i:nth-child(2){ top:20px }
.nav.is-open .nav__burger>i:nth-child(1){ transform:translateY(3px) rotate(45deg) }
.nav.is-open .nav__burger>i:nth-child(2){ transform:translateY(-3px) rotate(-45deg) }

.drawer{
  position:fixed; inset:0; z-index:790; background:var(--carbon);
  display:flex; flex-direction:column; justify-content:center; gap:8px;
  padding:0 var(--pad); clip-path:inset(0 0 100% 0);
}
.drawer__nav{ display:flex; flex-direction:column; gap:2px }
.drawer__nav a{
  display:flex; align-items:baseline; gap:.7em; padding:10px 0;
  font-size:clamp(30px,9vw,54px); font-weight:600; letter-spacing:-.03em; line-height:1.1;
  border-bottom:1px solid var(--edge);
}
.drawer__nav a b{ font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.2em; color:var(--accent) }
.drawer__foot{ margin-top:34px; display:flex; flex-direction:column; gap:6px; font-size:13px; color:var(--mute) }

/* =============================================================== HERO == */
#story{ position:relative; z-index:1 }
.hero{
  position:relative; min-height:100svh; display:flex; flex-direction:column;
  justify-content:space-between; padding:clamp(88px,11vh,124px) var(--pad) clamp(24px,4vh,44px);
}
.hero__top{ display:flex; justify-content:space-between; align-items:center; gap:20px }
.hero__body{ margin-top:auto }
.hero__title{
  font-size:clamp(56px,12.6vw,196px); font-weight:600; line-height:.86; letter-spacing:-.05em;
  text-transform:uppercase;
}
.hero__meta{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:clamp(18px,5vw,88px); align-items:flex-end; margin-top:clamp(18px,3vh,34px) }
.hero__sub{
  font-family:var(--mono); font-size:clamp(10px,1.2vw,12.5px); letter-spacing:.3em; line-height:2;
  color:var(--bone);
}
.hero__lead{ font-size:clamp(14px,1.35vw,17px); line-height:1.65; color:var(--mute); max-width:34ch }
.hero__actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:clamp(24px,4vh,44px) }
.hero__foot{ display:flex; justify-content:space-between; align-items:flex-end; gap:20px; margin-top:clamp(28px,5vh,54px) }
.hero__scroll{ display:flex; align-items:center; gap:12px; font-family:var(--mono); font-size:9.5px; letter-spacing:.28em; color:var(--mute) }
.hero__scroll>i{ display:block; width:54px; height:1px; background:var(--edge-2); position:relative; overflow:hidden }
.hero__scroll>i::after{
  content:""; position:absolute; inset:0; background:var(--accent);
  animation:railRun 2.4s var(--ease-io) infinite;
}
@keyframes railRun{ 0%{ transform:translateX(-100%) } 55%,100%{ transform:translateX(100%) } }
.hero__note{ font-size:11.5px; letter-spacing:.02em; color:var(--dim); text-align:right; max-width:30ch }
.hero__note span{ color:var(--mute) }

/* ============================================================= CINEMA == */
.cinema{ position:relative; height:var(--cinema-h) }
.cinema__sticky{ position:sticky; top:0; height:100svh; overflow:hidden }
.scene{
  position:absolute; opacity:0; will-change:transform,opacity;
  max-width:min(660px,46vw);
}
.scene--left{ left:var(--pad); top:50%; translate:0 -50% }
.scene--right{ right:var(--pad); top:50%; translate:0 -50%; text-align:right }
.scene--center{ left:0; right:0; top:0; bottom:0; max-width:none; display:grid; place-content:center; text-align:center }
.scene--final{ left:var(--pad); right:var(--pad); top:50%; translate:0 -50%; max-width:none; text-align:center }

.scene__idx{ display:flex; align-items:center; gap:14px; margin-bottom:18px }
.scene--right .scene__idx{ justify-content:flex-end; flex-direction:row-reverse }
.scene__idx b{ font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.2em; color:var(--accent) }
.scene__idx i{ display:block; width:clamp(40px,6vw,88px); height:1px; background:var(--edge-2) }
.scene__title{
  font-size:clamp(34px,5.4vw,86px); font-weight:600; line-height:.94; letter-spacing:-.04em;
  text-transform:uppercase; white-space:nowrap;
}
.scene__text{ margin-top:clamp(16px,2.2vh,26px); font-size:clamp(15px,1.5vw,21px); line-height:1.5; color:var(--bone) }
.scene__accent{
  margin-top:clamp(14px,1.8vh,22px); font-size:clamp(13px,1.15vw,15.5px); line-height:1.7;
  color:var(--mute); border-left:1px solid var(--accent); padding-left:16px;
}
.scene--right .scene__accent{ border-left:0; border-right:1px solid var(--accent); padding-left:0; padding-right:16px }

.scene__mega{
  font-size:clamp(58px,15.5vw,240px); font-weight:600; line-height:.9; letter-spacing:-.055em;
  white-space:nowrap; will-change:transform;
}
.scene__list{
  display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(12px,2.4vw,42px);
  margin-top:clamp(16px,2.6vh,34px);
}
.scene__list li{
  font-family:var(--mono); font-size:clamp(10px,1.1vw,13px); letter-spacing:.24em; color:var(--mute);
  opacity:0;
}
.scene__final{
  font-size:clamp(46px,11vw,168px); font-weight:600; line-height:.9; letter-spacing:-.05em;
  text-transform:uppercase;
}
.scene__text--final{ margin-top:clamp(18px,2.6vh,30px); color:var(--mute); font-size:clamp(13px,1.2vw,16px); line-height:1.9 }

/* readout panel (scene 02) */
.readout{
  margin-top:clamp(18px,2.6vh,30px); border:1px solid var(--edge); border-radius:2px;
  background:rgba(12,14,16,.5); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  padding:4px 14px; text-align:left;
}
.readout__row{
  display:flex; justify-content:space-between; align-items:baseline; gap:20px;
  padding:9px 0; border-bottom:1px solid var(--edge);
  font-family:var(--mono); font-size:10px; letter-spacing:.16em;
}
.readout__row:last-child{ border-bottom:0 }
.readout__row span{ color:var(--dim) }
.readout__row b{ font-weight:500; color:var(--bone); font-variant-numeric:tabular-nums }
.readout__row--code b{ color:var(--accent) }

/* ================================================================ CUT == */
.cut{
  position:relative; z-index:1; background:var(--ink);
  display:flex; align-items:center; gap:clamp(14px,3vw,34px);
  padding:clamp(80px,16vh,190px) var(--pad);
}
.cut__line{ flex:1; height:1px; background:var(--edge-2); transform:scaleX(0) }
.cut__line--l{ transform-origin:100% 50% }
.cut__line--r{ transform-origin:0 50% }
.cut__tag{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.28em; color:var(--mute);
  text-align:center; white-space:nowrap;
}

/* ============================================================ sections == */
.sec{ position:relative; z-index:1; background:var(--ink); padding:clamp(70px,11vh,150px) var(--pad) }
.sec__head{ margin-bottom:clamp(40px,7vh,90px) }
.sec__idx{ display:flex; align-items:center; gap:14px; margin-bottom:clamp(20px,3vh,34px) }
.sec__idx i{ display:block; width:clamp(30px,5vw,64px); height:1px; background:var(--accent); transform:scaleX(0); transform-origin:0 50% }
.sec__idx span{ font-family:var(--mono); font-size:10px; letter-spacing:.26em; color:var(--mute) }
.sec__idxName{ color:var(--dim) !important }
.sec__title{
  font-size:clamp(36px,7.4vw,116px); font-weight:600; line-height:.92; letter-spacing:-.045em;
  text-transform:uppercase;
}
.sec__title--sm{ font-size:clamp(30px,4.6vw,72px) }
.sec__lead{ margin-top:clamp(18px,2.6vh,30px); font-size:clamp(14px,1.3vw,17px); line-height:1.6; color:var(--mute); max-width:46ch }
.sec__head--split{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:24px }
.sec__head--split .sec__idx{ margin-bottom:0 }
.sec__head--bare{ margin-bottom:clamp(30px,5vh,60px) }

/* ------------------------------------------------------------ services -- */
.svc{ border-top:1px solid var(--edge) }
.svc__row{
  position:relative; display:grid; align-items:center; gap:0 clamp(14px,3vw,44px);
  grid-template-columns:auto 1fr auto;
  padding:clamp(18px,2.6vh,30px) 0 clamp(18px,2.6vh,30px);
  border-bottom:1px solid var(--edge); overflow:hidden;
  transition:padding .55s var(--ease);
}
.svc__row::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:linear-gradient(90deg,rgba(255,61,20,.09),rgba(19,22,25,.7) 42%,transparent);
  opacity:0; transition:opacity .55s var(--ease);
}
.svc__row::after{
  content:""; position:absolute; left:0; right:0; top:0; height:1px; background:var(--accent);
  transform:scaleX(0); transform-origin:0 50%; transition:transform .7s var(--ease);
}
.svc__n{
  position:relative; z-index:1; font-family:var(--mono); font-size:10.5px; letter-spacing:.2em;
  color:var(--dim); transition:color .45s var(--ease);
}
.svc__name{
  position:relative; z-index:1; grid-column:2;
  font-size:clamp(22px,4.4vw,62px); font-weight:500; line-height:1.06; letter-spacing:-.035em;
  transition:transform .6s var(--ease), color .45s var(--ease);
}
.svc__desc{
  position:relative; z-index:1; grid-column:2; max-width:52ch;
  font-size:clamp(12.5px,1.15vw,15px); line-height:1.55; color:var(--mute);
  max-height:0; opacity:0; overflow:hidden;
  transition:max-height .6s var(--ease), opacity .5s var(--ease), margin-top .6s var(--ease);
}
.svc__arrow{
  position:relative; z-index:1; grid-row:1; grid-column:3; font-style:normal;
  font-size:clamp(15px,1.5vw,20px); color:var(--dim);
  transform:translateX(-8px); opacity:0;
  transition:transform .55s var(--ease), opacity .45s var(--ease), color .45s var(--ease);
}
@media (hover:hover) and (pointer:fine){
  .svc__row:hover::before{ opacity:1 }
  .svc__row:hover::after{ transform:scaleX(1) }
  .svc__row:hover .svc__name{ transform:translateX(clamp(8px,1.4vw,22px)) }
  .svc__row:hover .svc__n{ color:var(--accent) }
  .svc__row:hover .svc__desc{ max-height:8em; opacity:1; margin-top:12px }
  .svc__row:hover .svc__arrow{ transform:translateX(0); opacity:1; color:var(--bone) }
}
@media (hover:none),(pointer:coarse){
  .svc__desc{ max-height:8em; opacity:1; margin-top:10px }
  .svc__arrow{ opacity:.5; transform:none }
}

/* ----------------------------------------------------------------- why -- */
.sec--why{ overflow:hidden }
.why__texture{
  position:absolute; inset:0; pointer-events:none; opacity:.55;
  background:
    radial-gradient(80% 60% at 78% 12%,rgba(236,233,227,.055),transparent 62%),
    repeating-linear-gradient(101deg,rgba(236,233,227,.028) 0 1px,transparent 1px 3px),
    repeating-linear-gradient(101deg,rgba(8,9,10,.5) 0 2px,transparent 2px 7px),
    linear-gradient(160deg,#101316,#08090a 62%);
}
.why{ position:relative; z-index:1; display:grid; gap:clamp(34px,6vw,90px); grid-template-columns:1.15fr .85fr; align-items:start }
.why__claim{
  font-size:clamp(34px,6.6vw,104px); font-weight:600; line-height:.96; letter-spacing:-.045em;
  text-transform:uppercase;
}
.why__side{ padding-top:clamp(6px,1.4vw,20px) }
.why__p{ font-size:clamp(15px,1.5vw,20px); line-height:1.55; color:var(--bone) }
.why__p--dim{ margin-top:1.1em; color:var(--mute); font-size:clamp(14px,1.3vw,17px) }
.why__list{ margin-top:clamp(28px,4vh,48px); border-top:1px solid var(--edge) }
.why__list li{
  display:flex; align-items:baseline; gap:16px; padding:15px 0; border-bottom:1px solid var(--edge);
  font-size:clamp(13.5px,1.25vw,16px); color:var(--bone);
  opacity:0; transform:translateY(14px);
}
.why__list b{ font-family:var(--mono); font-size:10px; font-weight:500; letter-spacing:.2em; color:var(--accent) }

/* ---------------------------------------------------------------- flow -- */
.flow{ border-top:1px solid var(--edge) }
.flow__step{
  display:grid; grid-template-columns:minmax(0,.42fr) minmax(0,.58fr); gap:clamp(18px,4vw,70px);
  align-items:center; padding:clamp(24px,4.4vh,58px) 0; border-bottom:1px solid var(--edge);
  position:relative;
}
.flow__step::after{
  content:""; position:absolute; left:0; bottom:-1px; width:100%; height:1px; background:var(--accent);
  transform:scaleX(0); transform-origin:0 50%; transition:transform 1s var(--ease);
}
.flow__step.is-on::after{ transform:scaleX(1) }
.flow__num{
  display:block; font-size:clamp(64px,13vw,190px); font-weight:600; line-height:.8; letter-spacing:-.06em;
  color:transparent; -webkit-text-stroke:1px var(--edge-2);
  transition:color .8s var(--ease), -webkit-text-stroke-color .8s var(--ease);
}
.flow__step.is-on .flow__num{ color:var(--bone); -webkit-text-stroke-color:transparent }
.flow__body h3{
  font-size:clamp(20px,2.6vw,36px); font-weight:500; letter-spacing:-.025em; line-height:1.1;
}
.flow__body p{ margin-top:.7em; font-size:clamp(13.5px,1.25vw,16.5px); line-height:1.6; color:var(--mute); max-width:44ch }

/* --------------------------------------------------------------- stats -- */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--edge); border:1px solid var(--edge) }
.stat{ background:var(--ink); padding:clamp(24px,3.4vw,44px) clamp(18px,2vw,30px) clamp(28px,4vw,52px) }
.stat__v{
  display:flex; align-items:baseline; font-size:clamp(44px,6.6vw,104px); font-weight:600;
  line-height:.9; letter-spacing:-.055em; font-variant-numeric:tabular-nums;
}
.stat__v .odo{ display:inline-block; height:1em; overflow:hidden; vertical-align:baseline }
.stat__v .odo i{ display:block; font-style:normal; line-height:1em; will-change:transform }
.stat__v .odo i span{ display:block; line-height:1em }
.stat__v .sfx{ color:var(--accent) }
.stat__k{
  display:block; margin-top:clamp(12px,1.6vw,20px);
  font-family:var(--mono); font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--bone);
}
.stat__d{ margin-top:10px; font-size:12.5px; line-height:1.55; color:var(--dim); max-width:26ch }

/* ----------------------------------------------------------------- cta -- */
.sec--cta{ background:var(--bone); color:var(--ink); padding-block:clamp(90px,16vh,200px) }
.sec__idx--inv i{ background:var(--accent) }
.sec__idx--inv span{ color:rgba(8,9,10,.5) }
.cta__title{
  font-size:clamp(34px,7.2vw,116px); font-weight:600; line-height:.94; letter-spacing:-.05em;
  text-transform:uppercase;
}
.cta__lead{ margin-top:clamp(20px,3vh,34px); font-size:clamp(14px,1.4vw,19px); line-height:1.6; color:rgba(8,9,10,.62); max-width:44ch }
.cta__actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:clamp(28px,4.4vh,52px) }

/* ------------------------------------------------------------- contact -- */
.contact{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(34px,6vw,90px); align-items:start }
.contact__note p{ font-size:clamp(15px,1.5vw,20px); line-height:1.6 }
.contact__disclaimer{
  margin-top:clamp(20px,3vh,32px) !important; padding-top:clamp(18px,2.4vh,26px); border-top:1px solid var(--edge);
  font-size:12.5px !important; line-height:1.65 !important; color:var(--mute) !important; max-width:52ch;
}
.contact__disclaimer b{ color:var(--mute); font-weight:500 }
.contact__list{ border-top:1px solid var(--edge) }
.contact__row{
  position:relative; display:grid; grid-template-columns:clamp(58px,7vw,104px) 1fr auto; align-items:baseline;
  gap:clamp(14px,3vw,40px); padding:clamp(16px,2.4vh,26px) 0; border-bottom:1px solid var(--edge);
  overflow:hidden;
}
.contact__row::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:1px; background:var(--accent);
  transform:scaleX(0); transform-origin:0 50%; transition:transform .7s var(--ease);
}
.contact__row:hover::after{ transform:scaleX(1) }
.contact__k{ font-family:var(--mono); font-size:9.5px; letter-spacing:.22em; color:var(--dim) }
.contact__v{
  font-size:clamp(18px,2.8vw,40px); font-weight:500; letter-spacing:-.03em;
  transition:transform .6s var(--ease);
}
.contact__row:hover .contact__v{ transform:translateX(clamp(6px,1vw,16px)) }
.contact__row i{ font-style:normal; color:var(--dim); transition:transform .5s var(--ease), color .4s }
.contact__row:hover i{ transform:translate(4px,-4px); color:var(--accent) }

/* -------------------------------------------------------------- footer -- */
.foot{ position:relative; z-index:1; background:var(--ink); padding:clamp(50px,8vh,110px) var(--pad) clamp(22px,3vh,34px); border-top:1px solid var(--edge) }
.foot__top{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:20px }
.foot__big{
  font-size:clamp(28px,5.6vw,86px); font-weight:600; line-height:.94; letter-spacing:-.045em;
  text-transform:uppercase; color:var(--steel);
}
.foot__by{ font-family:var(--mono); font-size:10px; letter-spacing:.24em; color:var(--mute) }
.foot__by a{ color:var(--bone); border-bottom:1px solid var(--edge-2); padding-bottom:2px }
.foot__by a:hover{ color:var(--accent); border-bottom-color:var(--accent) }
.foot__bar{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px;
  margin-top:clamp(34px,6vh,70px); padding-top:20px; border-top:1px solid var(--edge);
  font-family:var(--mono); font-size:10px; letter-spacing:.2em; color:var(--dim);
}
.foot__bar a:hover{ color:var(--bone) }
.foot__up{ display:inline-flex; align-items:center; gap:.6em; font-family:var(--mono); font-size:10px; letter-spacing:.2em; color:var(--mute) }
.foot__up:hover{ color:var(--bone) }
.foot__up i{ transition:transform .45s var(--ease) }
.foot__up:hover i{ transform:translateY(-4px) }

/* --------------------------------------------------------------- grain -- */
.grain{
  position:fixed; inset:-120px; z-index:900; pointer-events:none; opacity:.038;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
html.mode-full .grain{ animation:grainShift 1.1s steps(6) infinite }
@keyframes grainShift{
  0%{ transform:translate(0,0) } 16%{ transform:translate(-14px,8px) } 33%{ transform:translate(10px,-12px) }
  50%{ transform:translate(-8px,-6px) } 66%{ transform:translate(12px,10px) } 83%{ transform:translate(-10px,4px) }
  100%{ transform:translate(0,0) }
}

/* ========================================================== RESPONSIVE == */

/* --- álló / négyzetes képarány: a film sáv fölülre kerül, a szöveg alá --- */
@media (max-aspect-ratio:1/1){
  .stage__film{
    inset:auto 0 auto 0; top:11svh; height:auto; aspect-ratio:16/9;
    border-top:1px solid var(--edge); border-bottom:1px solid var(--edge);
  }
  .stage__video{ object-position:center center }
  .stage__grade{
    background:radial-gradient(120% 60% at 50% 22%,transparent 40%,rgba(8,9,10,.55) 82%,rgba(8,9,10,.9) 100%);
  }
  .stage__scrim{
    background:linear-gradient(180deg,rgba(8,9,10,.9) 0%,rgba(8,9,10,.2) 11%,transparent 15%,transparent 34%,rgba(8,9,10,.86) 44%,var(--ink) 58%);
  }
  .hud__meta--tr{ top:auto; bottom:calc(var(--pad) * .78 + 62px); right:var(--pad) }
  .hud__bracket{ width:18px; height:18px }
  .hud__bracket--tl,.hud__bracket--tr{ top:calc(11svh - 1px) }
  .hud__bracket--bl,.hud__bracket--br{ top:calc(11svh + 56.25vw - 17px); bottom:auto }

  .scene{ max-width:none; left:var(--pad) !important; right:var(--pad) !important; top:auto !important; bottom:clamp(84px,15svh,150px) !important; translate:none !important; text-align:left !important }
  .scene--center,.scene--final{ display:block; text-align:left !important }
  .scene--right .scene__idx{ justify-content:flex-start; flex-direction:row }
  .scene--right .scene__accent{ border-right:0; padding-right:0; border-left:1px solid var(--accent); padding-left:16px }
  .scene__mega{ white-space:normal; font-size:clamp(46px,15vw,120px) }
  .scene__list{ justify-content:flex-start; gap:10px 18px }
  .scene__final{ font-size:clamp(40px,13vw,110px) }
  .readout{ max-width:420px }

  .hero{ justify-content:flex-end }
  .hero__top{ position:absolute; top:clamp(70px,9.5vh,100px); left:var(--pad); right:var(--pad); flex-direction:column; align-items:flex-start; gap:4px }
  .hero__title{ font-size:clamp(48px,15vw,120px) }
  .hero__foot{ flex-direction:column; align-items:flex-start; gap:12px }
  .hero__note{ text-align:left }
}

@media (max-width:1080px){
  .why{ grid-template-columns:1fr }
  .contact{ grid-template-columns:1fr }
  .stats{ grid-template-columns:repeat(2,1fr) }
  .flow__step{ grid-template-columns:1fr; gap:12px }
  .flow__num{ font-size:clamp(56px,16vw,120px) }
}

@media (max-width:860px){
  :root{ --cinema-h:440vh }
  .nav__links,.nav__cta{ display:none }
  .nav__burger{ display:block }
  .stats{ grid-template-columns:1fr }
  .svc__row{ grid-template-columns:auto 1fr; gap:0 16px }
  .svc__arrow{ display:none }
  .hero__meta{ flex-direction:column; align-items:flex-start; gap:16px }
  .hero__note{ display:none }
  .cut{ padding-block:clamp(60px,11vh,110px) }
  .cut__tag{ white-space:normal; font-size:9px; letter-spacing:.2em }
}

@media (max-width:560px){
  :root{ --cinema-h:380vh }
  .readout__row{ font-size:9px; letter-spacing:.12em; gap:10px }
  .scene__text{ font-size:15px }
}

/* ------------------------------------------------------ reduced motion -- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important }
  .hero__scroll>i::after{ display:none }
  .grain{ animation:none !important }
}
html.mode-reduced .cinema{ height:auto }
html.mode-reduced .cinema__sticky{ position:relative; height:auto; padding:clamp(60px,10vh,120px) 0; display:flex; flex-direction:column; gap:clamp(50px,9vh,110px) }
html.mode-reduced .scene{ position:relative; opacity:1; translate:none !important; transform:none !important; left:auto !important; right:auto !important; top:auto !important; bottom:auto !important; padding:0 var(--pad); max-width:none; text-align:left !important }
html.mode-reduced .scene--center,html.mode-reduced .scene--final{ display:block; text-align:left !important }
html.mode-reduced .scene__list li{ opacity:1 }
html.mode-reduced .why__list li{ opacity:1; transform:none }
html.mode-reduced .stage{ position:absolute; height:100svh }
html.mode-reduced .scene__mega{ white-space:normal }
html.mode-reduced .scene--right .scene__accent{
  border-right:0; padding-right:0; border-left:1px solid var(--accent); padding-left:16px;
}