/* ============================================================
   LiveIT — Expo weboldal
   Arculat: fekete alap, mátrix-zöld foszfor, ferde vágások
   ============================================================ */

/* ---------- 1. Tokenek ---------- */
:root{
  --bg:        #040605;
  --bg-lift:   #080C09;
  --panel:     #0A100C;
  --panel-2:   #0D140F;

  --green:     #3EA84B;   /* a logó zöldje */
  --green-hot: #63F58A;   /* foszfor kiemelés */
  --green-dim: #17331D;
  --green-ghost: rgba(62,168,75,.10);

  --ink:       #E9F1EB;
  --ink-soft:  #A9BBAF;
  --muted:     #75887C;

  --line:      rgba(62,168,75,.26);
  --line-soft: rgba(160,190,170,.11);

  --font-display: "Chakra Petch", "Trebuchet MS", sans-serif;
  --font-body:    "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --notch: 12px;
  --pad: clamp(20px, 5.5vw, 44px);
  --maxw: 1160px;

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- 2. Alap ---------- */
*, *::before, *::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:1.0625rem;
  line-height:1.68;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:700;
  line-height:.96;
  letter-spacing:-.015em;
  margin:0;
  text-transform:uppercase;
}

p{ margin:0 0 1.1em; }
p:last-child{ margin-bottom:0; }

::selection{ background:var(--green); color:#021206; }

:focus-visible{
  outline:2px solid var(--green-hot);
  outline-offset:3px;
}

/* ---------- 3. Háttérrétegek ---------- */
#rain{
  position:fixed; inset:0;
  width:100%; height:100%;
  z-index:0;
  opacity:.62;
  pointer-events:none;
}

.veil{
  position:fixed; inset:0; z-index:1; pointer-events:none;
}
/* vignetta: középen sötétít, hogy a szöveg olvasható maradjon */
.veil--vignette{
  background:
    radial-gradient(130% 82% at 50% 32%, rgba(4,6,5,.06) 0%, rgba(4,6,5,.55) 52%, rgba(4,6,5,.86) 100%);
}
/* CRT sorok */
.veil--scan{
  background:repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0px,
    rgba(0,0,0,0) 2px,
    rgba(0,0,0,.20) 3px,
    rgba(0,0,0,.20) 4px);
  opacity:.34;
  mix-blend-mode:multiply;
}
/* finom szemcse */
.veil--grain{
  opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- 4. Elrendezés ---------- */
.page{ position:relative; z-index:2; }

.wrap{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--pad);
}

section{ position:relative; scroll-margin-top:72px; }

.sect{ padding-block:clamp(76px, 14vw, 150px); }

/* szekciófejléc */
.sect__head{ margin-bottom:clamp(34px,6vw,60px); }

.tag{
  font-family:var(--font-mono);
  font-size:.7rem;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--green);
  display:inline-flex;
  align-items:center;
  gap:.7em;
  margin-bottom:1.15em;
}
.tag::before{
  content:"";
  width:26px; height:1px;
  background:var(--green);
  box-shadow:0 0 8px var(--green);
}

.sect__title{
  font-size:clamp(2rem, 7.4vw, 3.5rem);
}
.sect__title .g{ color:var(--green); }

.sect__lead{
  margin-top:1.2em;
  max-width:52ch;
  color:var(--ink-soft);
}

/* elválasztó vonal, ami "beúszik" */
.rule{
  height:1px;
  background:linear-gradient(90deg, var(--green) 0%, rgba(62,168,75,.08) 60%, transparent 100%);
  transform-origin:left;
  transform:scaleX(0);
  transition:transform 1.05s var(--ease);
}
.is-in .rule{ transform:scaleX(1); }

/* ---------- 5. Fejléc ---------- */
.top{
  position:fixed;
  top:0; left:0; right:0;
  z-index:40;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:12px var(--pad);
  background:rgba(4,6,5,0);
  border-bottom:1px solid transparent;
  transition:background .35s var(--ease), border-color .35s var(--ease), backdrop-filter .35s;
}
.top.is-stuck{
  background:rgba(4,6,5,.82);
  backdrop-filter:blur(14px) saturate(1.2);
  border-bottom-color:var(--line-soft);
}
.top__logo img{
  height:22px; width:auto;
}
.top__cta{
  font-family:var(--font-mono);
  font-size:.7rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--green-hot);
  border:1px solid var(--line);
  padding:8px 14px;
  background:rgba(62,168,75,.06);
  clip-path:polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
  transition:background .25s, color .25s;
  white-space:nowrap;
}
.top__cta:hover{ background:var(--green); color:#031708; }

/* ---------- 6. Hero ---------- */
.hero{
  min-height:100svh;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding-block:96px clamp(38px,8vw,64px);
}

.hero__logo{
  width:min(212px, 54vw);
  margin-bottom:clamp(24px,6vw,38px);
  filter:drop-shadow(0 0 30px rgba(62,168,75,.28));
}

.hero__kicker{
  font-family:var(--font-mono);
  font-size:.68rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:1.5em;
}
.hero__kicker b{ color:var(--green); font-weight:500; }

.hero__title{
  font-size:clamp(2.7rem, 12.5vw, 5.3rem);
  line-height:.9;
  letter-spacing:-.03em;
}
.hero__title span{ display:block; }
.hero__title .g{
  color:var(--green-hot);
  text-shadow:0 0 30px rgba(99,245,138,.35);
}

.hero__sub{
  margin-top:clamp(20px,4vw,28px);
  max-width:46ch;
  color:var(--ink-soft);
  font-size:clamp(1rem,3.6vw,1.2rem);
}

.hero__actions{
  margin-top:clamp(24px,5vw,34px);
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

.hero__scroll{
  margin-top:clamp(30px,7vw,48px);
  display:flex;
  align-items:center;
  gap:14px;
  font-family:var(--font-mono);
  font-size:.66rem;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--muted);
}
.hero__scroll i{
  display:block;
  width:64px; height:1px;
  background:var(--green-dim);
  position:relative;
  overflow:hidden;
}
.hero__scroll i::after{
  content:"";
  position:absolute; inset:0;
  background:var(--green-hot);
  transform:translateX(-100%);
  animation:slide 2.4s var(--ease) infinite;
}
@keyframes slide{
  0%{ transform:translateX(-100%); }
  55%,100%{ transform:translateX(100%); }
}

.hero__side{ display:none; }
@media (min-width:1024px){
  .hero{ position:relative; }
  .hero__side{
    display:flex;
    align-items:center;
    gap:16px;
    position:absolute;
    right:calc(var(--pad) - 6px);
    bottom:clamp(38px,8vw,64px);
    transform-origin:100% 100%;
    transform:rotate(-90deg) translateX(100%);
    margin:0;
    white-space:nowrap;
    font-family:var(--font-mono);
    font-size:.66rem;
    letter-spacing:.28em;
    text-transform:uppercase;
    color:var(--muted);
  }
  .hero__side b{ color:var(--green); font-weight:500; }
  .hero__side::before{
    content:"";
    width:70px; height:1px;
    background:linear-gradient(90deg, transparent, var(--green));
  }
}

/* ---------- 7. Gombok ---------- */
.btn{
  --n:11px;
  display:inline-flex;
  align-items:center;
  gap:.75em;
  font-family:var(--font-mono);
  font-size:.76rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  text-decoration:none;
  padding:15px 24px;
  border:0;
  cursor:pointer;
  position:relative;
  clip-path:polygon(var(--n) 0, 100% 0, 100% calc(100% - var(--n)), calc(100% - var(--n)) 100%, 0 100%, 0 var(--n));
  transition:transform .2s var(--ease), box-shadow .3s, background .25s, color .25s;
}
.btn--solid{
  background:var(--green);
  color:#021507;
  font-weight:500;
  box-shadow:0 0 0 rgba(62,168,75,0);
}
.btn--solid:hover{
  background:var(--green-hot);
  box-shadow:0 10px 40px -12px rgba(99,245,138,.75);
  transform:translateY(-2px);
}
.btn--ghost{
  background:rgba(233,241,235,.04);
  color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--line-soft);
}
.btn--ghost:hover{
  background:rgba(62,168,75,.12);
  color:var(--green-hot);
  box-shadow:inset 0 0 0 1px var(--line);
  transform:translateY(-2px);
}
.btn__x{ font-size:1.05em; line-height:1; }

/* ---------- 8. Keretes panel + sarokjelek ---------- */
.frame{
  position:relative;
  border:1px solid var(--line-soft);
  background:linear-gradient(160deg, var(--panel-2), var(--panel) 60%);
}
.frame::before,
.frame::after{
  content:"";
  position:absolute;
  width:13px; height:13px;
  border:1px solid var(--green);
  pointer-events:none;
}
.frame::before{ top:-1px; left:-1px; border-right:0; border-bottom:0; }
.frame::after{ bottom:-1px; right:-1px; border-left:0; border-top:0; }

/* ---------- 9. Szolgáltatások ---------- */
.svc{
  display:grid;
  gap:clamp(16px,3vw,22px);
}
@media (min-width:900px){
  .svc{ grid-template-columns:repeat(3,1fr); align-items:start; }
  .svc__card:nth-child(2){ margin-top:38px; }
  .svc__card:nth-child(3){ margin-top:-14px; }
}

.svc__card{
  padding:clamp(24px,5vw,34px);
  overflow:hidden;
}
.svc__card:hover{ border-color:var(--line); }

/* zöld pásztázó fény a kártya tetején */
.svc__card > .sweep{
  position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--green-hot), transparent);
  transform:translateX(-100%);
  transition:transform .9s var(--ease);
}
.svc__card:hover > .sweep{ transform:translateX(100%); }

.svc__num{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(3.4rem,13vw,4.6rem);
  line-height:.8;
  color:transparent;
  -webkit-text-stroke:1px var(--green-dim);
  display:block;
  margin-bottom:.24em;
  letter-spacing:-.04em;
}
.svc__card:hover .svc__num{ -webkit-text-stroke-color:var(--green); }
.svc__card .svc__num{ transition:-webkit-text-stroke-color .35s; }

.svc__title{
  font-size:clamp(1.28rem,4.6vw,1.55rem);
  margin-bottom:.7em;
  letter-spacing:-.005em;
}
.svc__body{
  color:var(--ink-soft);
  font-size:.98rem;
  line-height:1.66;
}
.svc__list{
  list-style:none;
  margin:1.5em 0 0;
  padding:0;
  border-top:1px solid var(--line-soft);
}
.svc__list li{
  font-family:var(--font-mono);
  font-size:.76rem;
  letter-spacing:.03em;
  color:var(--muted);
  padding:.62em 0 .62em 1.5em;
  border-bottom:1px solid rgba(160,190,170,.06);
  position:relative;
}
.svc__list li::before{
  content:"";
  position:absolute; left:1px; top:1.05em;
  width:6px; height:6px;
  border:1px solid var(--green);
  opacity:.85;
}

/* ---------- 10. Rólam ---------- */
.about{
  display:grid;
  gap:clamp(32px,7vw,64px);
}
@media (min-width:860px){
  .about{ grid-template-columns:minmax(0,.85fr) minmax(0,1fr); align-items:center; }
}

.portrait{
  position:relative;
  isolation:isolate;
  aspect-ratio:3/4;
  max-width:min(440px, 80vw);
  width:100%;
}
.portrait__img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  transition:opacity .5s var(--ease);
  filter:grayscale(1) contrast(1.22) brightness(.82);
  -webkit-mask-image:
    linear-gradient(105deg, #000 34%, rgba(0,0,0,.55) 68%, transparent 93%),
    linear-gradient(to bottom, #000 62%, rgba(0,0,0,.5) 84%, transparent 99%);
          mask-image:
    linear-gradient(105deg, #000 34%, rgba(0,0,0,.55) 68%, transparent 93%),
    linear-gradient(to bottom, #000 62%, rgba(0,0,0,.5) 84%, transparent 99%);
  -webkit-mask-composite:source-in;
          mask-composite:intersect;
}
/* ha a canvas átvette, a nyers fotó és a színszűrő elrejtve */
.portrait.is-canvas .portrait__img,
.portrait.is-canvas .portrait__tint{ opacity:0; }

/* tartalék színezés, ha a canvas nem indul el */
.portrait__tint{
  position:absolute; inset:0;
  background:var(--green);
  mix-blend-mode:color;
  opacity:.62;
  pointer-events:none;
  -webkit-mask-image:linear-gradient(105deg,#000 34%,transparent 92%);
          mask-image:linear-gradient(105deg,#000 34%,transparent 92%);
}
/* a bináris szétesés vászna */
.portrait__bits{
  position:absolute; inset:0;
  width:100%; height:100%;
  pointer-events:none;
  z-index:2;
}
.portrait__frame{
  position:absolute;
  left:-10px; top:-10px;
  width:52px; height:52px;
  border-left:1px solid var(--green);
  border-top:1px solid var(--green);
  z-index:3;
}

.about__name{
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--green);
  margin-bottom:1.4em;
}
.about__title{ font-size:clamp(1.8rem,6.4vw,2.9rem); margin-bottom:.8em; }
.about__body{ color:var(--ink-soft); max-width:48ch; }
.about__body strong{ color:var(--ink); font-weight:500; }

/* ---------- 11. A doboz ---------- */
.can{
  display:grid;
  gap:clamp(30px,6vw,56px);
  align-items:center;
}
@media (min-width:860px){
  .can{ grid-template-columns:1fr minmax(0,.72fr); }
}
.can__figure{
  position:relative;
  justify-self:center;
  filter:drop-shadow(0 30px 60px rgba(0,0,0,.7));
}
.can__figure::after{
  content:"";
  position:absolute;
  inset:14% -18% -6%;
  background:radial-gradient(50% 50% at 50% 50%, rgba(62,168,75,.34), transparent 70%);
  filter:blur(38px);
  z-index:-1;
}
.can__figure img{
  width:min(300px,74vw);
  border:1px solid var(--line-soft);
}
.can__body{ color:var(--ink-soft); }

/* ---------- 12. Terminál / HIBP ---------- */
.hibp{ padding-bottom:clamp(60px,10vw,110px); }

.term{
  font-family:var(--font-mono);
  max-width:720px;
  overflow:hidden;
}
.term__bar{
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  border-bottom:1px solid var(--line-soft);
  background:rgba(62,168,75,.05);
}
.term__dot{
  width:8px; height:8px;
  background:var(--green-dim);
  border-radius:50%;
}
.term__dot:first-child{ background:var(--green); box-shadow:0 0 8px var(--green); }
.term__name{
  margin-left:6px;
  font-size:.68rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--muted);
}

.term__body{
  padding:clamp(18px,4.5vw,26px);
  font-size:.84rem;
  line-height:1.85;
  min-height:190px;
}
.term__line{ color:var(--ink-soft); white-space:pre-wrap; word-break:break-word; }
.term__line .p{ color:var(--green); }         /* prompt */
.term__line .ok,  .term__line.ok{ color:var(--green-hot); }
.term__line .dim, .term__line.dim{ color:var(--muted); }
.term__line .err, .term__line.err{ color:#FF7D6D; }

.term__form{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:18px;
  padding-top:18px;
  border-top:1px solid var(--line-soft);
}
.term__field{
  flex:1 1 220px;
  display:flex;
  align-items:center;
  gap:10px;
  background:rgba(0,0,0,.45);
  border:1px solid var(--line-soft);
  padding:0 14px;
  transition:border-color .25s, box-shadow .25s;
}
.term__field:focus-within{
  border-color:var(--green);
  box-shadow:0 0 0 1px var(--green), 0 0 26px -6px rgba(62,168,75,.6);
}
.term__field span{ color:var(--green); font-size:.84rem; }
.term__field input{
  flex:1;
  background:transparent;
  border:0;
  outline:0;
  color:var(--ink);
  font-family:var(--font-mono);
  font-size:.9rem;
  padding:15px 0;
  min-width:0;
}
.term__field input::placeholder{ color:var(--muted); opacity:.7; }

/* caret */
.caret{
  display:inline-block;
  width:8px; height:1.05em;
  background:var(--green-hot);
  vertical-align:-.18em;
  animation:blink 1.05s steps(1) infinite;
}
@keyframes blink{ 0%,49%{opacity:1} 50%,100%{opacity:0} }

.hibp__note{
  margin-top:16px;
  font-family:var(--font-mono);
  font-size:.7rem;
  line-height:1.7;
  color:var(--muted);
  max-width:60ch;
}

/* eredmény doboz */
.result{
  margin-top:18px;
  padding:18px;
  border-left:2px solid var(--green);
  background:rgba(62,168,75,.07);
  display:none;
}
.result.is-on{ display:block; animation:pop .5s var(--ease) both; }
@keyframes pop{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
.result p{
  font-family:var(--font-mono);
  font-size:.78rem;
  line-height:1.75;
  color:var(--ink-soft);
  margin-bottom:14px;
}

/* ---------- 13. Lábléc ---------- */
.foot{
  position:relative;   /* különben a veil rétegek alá kerülne */
  z-index:2;
  border-top:1px solid var(--line-soft);
  padding-block:clamp(44px,8vw,66px);
  background:linear-gradient(to bottom, transparent, rgba(62,168,75,.05));
}
.foot__grid{
  display:flex;
  flex-wrap:wrap;
  gap:28px 48px;
  align-items:flex-end;
  justify-content:space-between;
}
.foot__logo{ width:150px; margin-bottom:16px; }
.foot__mail{
  font-family:var(--font-display);
  font-size:clamp(1.3rem,5.4vw,2rem);
  color:var(--green-hot);
  text-decoration:none;
  display:inline-block;
  border-bottom:1px solid transparent;
  transition:border-color .25s;
  text-transform:none;
  letter-spacing:-.01em;
}
.foot__mail:hover{ border-bottom-color:var(--green-hot); }
.foot__meta{
  font-family:var(--font-mono);
  font-size:.68rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
  line-height:2;
}

/* ---------- 14. Beúszás ---------- */
.rv{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay:var(--d, 0ms);
}
.is-in .rv, .rv.is-in{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  .rv{ opacity:1 !important; transform:none !important; }
  .rule{ transform:scaleX(1) !important; }
  .hero__scroll i::after{ animation:none; transform:translateX(0); }
  .caret{ animation:none; }
  *{ transition-duration:.001ms !important; }
}