/* Homepage-specific styles. Loaded after shared.css. */

/* ============================================================ HOME HERO (Figma layout) */
.home-hero{ position: relative; margin-top: 76px; height: 774px; overflow: hidden; color: #fff; background: #1a1a1a; }
.home-hero__main{ position: absolute; left: 0; top: 0; bottom: 0; right: 166px; background-size: cover; background-position: center; animation: heroSlideIn var(--d-3) var(--ease-out) both; }
/* opacity only — a 774px surface scaling from 1.04 every 6s is exactly the
   vestibular trigger `prefers-reduced-motion` exists for. */
@keyframes heroSlideIn{ from{ opacity:0 } to{ opacity:1 } }
.home-hero__side{ position: absolute; top:0; bottom:0; right:0; width: 166px; background-size: cover; background-position: center; z-index: 2; }
.home-hero__copy{ position: absolute; left:0; right:166px; bottom: 80px; max-width: var(--container); margin: 0 auto; padding: 0 var(--pad-x); z-index: 4; }
.home-hero__title{ margin: 0; font: 500 80px/123px var(--font-display); letter-spacing: 0; color: rgba(255,255,255,.7); animation: heroFadeUp var(--d-2) 0ms var(--ease-out) both; }
.home-hero__title-line{ display: inline; }
.home-hero__title-line + .home-hero__title-line::before{ content: " "; }
.home-hero__sub{ margin: 18px 0 0; font: 500 20px/25px var(--font-display); color: #fff; max-width: 632px; animation: heroFadeUp var(--d-2) 60ms var(--ease-out) both; text-wrap: pretty; }
.home-hero__cta{ display: inline-flex; align-items: center; gap: 14px; margin-top: 40px; padding: 0 22px 0 30px; height: 46px; background: var(--primary-ink); border-radius: var(--r-full); color: #fff; font: 400 var(--t-body)/1 var(--font-sans); text-decoration: none; box-shadow: var(--e0); transition: background-color var(--d-1) var(--ease-out); animation: heroFadeUp var(--d-2) 120ms var(--ease-out) both; }
.home-hero__cta:hover{ background: var(--primary-700); }
.home-hero__cta:active{ background: var(--primary-800); }
.home-hero__cta-arrow{ display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(255,255,255,.85); }
.home-hero__cta-arrow svg{ width: 12px; height: 12px; }
@keyframes heroFadeUp{ from{ opacity:0; transform: translateY(8px);} to{ opacity:1; transform: none;} }
.home-hero__arrow{ position: absolute; right: 186px; top: 443px; width: 40px; height: 40px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 2px 6px rgba(0,0,0,.1); display: grid; place-items: center; cursor: pointer; color: #443f3f; z-index: 5; transition: transform .2s ease, background .2s ease, color .2s ease; }
.home-hero__arrow:hover{ background: var(--primary-ink); color: #fff; }
.home-hero__arrow svg{ width: 26px; height: 12px; }
.home-hero__dots{ position: absolute; left: 50%; transform: translateX(-50%); bottom: 36px; display: flex; gap: 10px; z-index: 4; }
.home-hero__dot{ width: 32px; height: 3px; background: rgba(255,255,255,.35); border: 0; padding: 0; cursor: pointer; transition: background .25s ease, width .25s ease; }
.home-hero__dot.is-active{ background: var(--primary); width: 48px; }

/* ============================================================ INTRO LEDE */
.intro-lede{
  margin: 80px auto 0;
}
.intro-lede p{
  font-size: 28px; line-height: 1.4; color: var(--ink);
  font-weight: 300; max-width: 1100px;
  text-wrap: balance;
}

/* ============================================================ PRODUCTS MOSAIC */
.pmos{ margin-top: 60px; }
.pmos__title{
  margin: 0 0 32px;
  font: 500 50px/1.05 var(--font-sans);
  letter-spacing: -0.01em;
  color: var(--ink);
  /* Scroll-driven reveal. The *visible* state is the base style and the hidden
     state lives in the keyframes, so an inactive view timeline (which applies
     no effect at all) leaves the section readable instead of stranding it at
     opacity 0. */
  animation: pmos-title-in linear both;
  animation-timeline: view();
  animation-range: entry 0% entry 60%;
}
@keyframes pmos-title-in{
  from{ opacity: 0; transform: translateY(24px); }
  to{ opacity: 1; transform: translateY(0); }
}
.pmos__grid{
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 16px;
  height: 613px;
}
.pmos__tile{
  position: relative;
  background-color: #4a4a4a;
  border-radius: 6px;
  overflow: hidden;
  text-decoration: none;
  display: block;
  isolation: isolate;
  /* staggered entrance — see the note on .pmos__title */
  animation: pmos-tile-in cubic-bezier(.2,.7,.2,1) both;
  animation-timeline: view();
  animation-range: entry 0% entry 70%;
  transition: transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s ease;
}
.pmos__tile:nth-child(1){ animation-delay: 0ms; }
.pmos__tile:nth-child(2){ animation-delay: 80ms; }
.pmos__tile:nth-child(3){ animation-delay: 160ms; }
@keyframes pmos-tile-in{
  from{ opacity: 0; transform: translateY(40px) scale(.985); }
  to{ opacity: 1; transform: translateY(0) scale(1); }
}
.pmos__tile--big{ grid-row: span 2; }

/* image layer — scales on hover (Ken Burns) */
.pmos__tile{ background: none; }
/* Real element rather than a pseudo-element: the image URL has to come from
   the markup (and later from a CMS field), and a relative url() inside an
   inline custom property resolves against the stylesheet, not the document. */
.pmos__img{
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.02);
  transition: transform 1.2s cubic-bezier(.2,.7,.2,1), filter .6s ease;
  z-index: 0;
}
.pmos__tile:hover .pmos__img{ transform: scale(1.06); }

/* gradient overlay */
.pmos__tile::after{
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.6) 100%);
  transition: background .5s ease, opacity .5s ease;
  z-index: 1;
}
.pmos__tile:hover::after{
  background: linear-gradient(180deg, rgba(0,0,0,.1) 0%, rgba(0,0,0,.75) 100%);
}

/* shine sweep on hover */
.pmos__tile > .pmos__shine{
  position: absolute; inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(115deg,
    transparent 30%,
    rgba(255,255,255,.18) 48%,
    rgba(255,255,255,.04) 56%,
    transparent 70%);
  transform: translateX(-110%);
  transition: transform .9s cubic-bezier(.2,.7,.2,1);
}
.pmos__tile:hover > .pmos__shine{ transform: translateX(110%); }

.pmos__label{
  position: absolute; left: 28px; bottom: 24px;
  z-index: 3;
  font: 700 30px/1.2 var(--font-sans);
  letter-spacing: 0.02em;
  color: #fff;
  display: inline-flex; align-items: center; gap: 14px;
  transition: transform .5s cubic-bezier(.2,.7,.2,1);
}
.pmos__label::after{
  content: "";
  width: 0; height: 1.5px;
  background: #fff;
  transition: width .5s cubic-bezier(.2,.7,.2,1);
}

.pmos__tile:hover .pmos__label::after{ width: 36px; }

.pmos__tile:not(.pmos__tile--big) .pmos__label{
  font-size: 24px;
  left: 22px; bottom: 18px;
}

@media (prefers-reduced-motion: reduce){
  .pmos__title, .pmos__tile{ animation: none; opacity: 1; transform: none; }
  .pmos__img, .pmos__tile::after, .pmos__label, .pmos__shine{ transition: none !important; }
}

/* ============================================================ SERVICES */
.srvs{ margin-top: 100px; }
/* Five services in a 2 + 3 split, as the Figma component set lays them out —
   a six-column track lets the first row take halves and the second thirds. */
.srvs__grid{
  display: grid; grid-template-columns: repeat(6, 1fr);
  border-top: 1px solid var(--line);
}
.srv-item:nth-child(-n+2){ grid-column: span 3; }
.srv-item:nth-child(n+3) { grid-column: span 2; }
.srv-item:nth-child(3)   { border-left: 0; padding-left: 0; }
.srv-item{
  position: relative;
  display: flex; flex-direction: column;
  padding: 36px 28px 32px 0;
  text-decoration: none;
  border-top: 2px solid transparent;
  margin-top: -1px;
  transition: border-color .25s ease;
}
.srv-item + .srv-item{
  padding-left: 28px;
  border-left: 1px solid var(--line);
}
.srv-item:hover{ border-top-color: var(--primary); }
.srv-item__num{
  font: 300 14px/1 var(--font-sans);
  color: var(--ink-2);
  letter-spacing: .08em;
  margin-bottom: 28px;
}
.srv-item:hover .srv-item__num{ color: var(--primary-text); }
.srv-item__t{
  margin: 0 0 16px;
  font: 400 26px/1.15 var(--font-sans);
  letter-spacing: -0.01em;
  color: var(--ink);
  text-wrap: balance;
}
.srv-item__d{
  margin: 0 0 28px;
  font-size: 15px; color: var(--ink-2); line-height: 1.55;
  flex: 1;
}
.srv-item__more{
  display: inline-flex; align-items: center; gap: 8px;
  font: 400 14px/1 var(--font-sans);
  color: var(--ink);
  transition: color .2s ease, gap .2s ease;
}
.srv-item:hover .srv-item__more{ color: var(--primary-text); gap: 12px; }

/* ============================================================ SUSTAINABILITY (Figma: orange band 346 high; title on band; image extends below) */
.sust{
  position: relative;
  margin-top: 110px;
  padding: 0;
  background: transparent;
}
.sust__band{
  position: absolute;
  /* 540px is the artboard's desktop constant. Below 1180px the copy grows past
     it and the white text fell off the fill onto the page ground. The band now
     covers the section whenever the fixed height would be too short. */
  inset: 0;
  height: 540px;
  /* --primary-ink, not --primary: this field carries 15px white body copy,
     which measures 3.93:1 on #DF5129 and 5.13:1 on #C2421C. */
  background: var(--primary-ink);
  z-index: 0;
}
@media (max-width: 1180px){
  .sust__band{ height: auto; }
}
.sust__inner{
  position: relative;
  z-index: 1;
  display: grid; grid-template-columns: 1.55fr 1fr; gap: 64px;
  padding: 45px 0 90px;
  align-items: start;
}
.sust__title{
  margin: 0 0 38px;
  grid-column: 1 / -1;
  font: 500 44px/1.1 var(--font-display);
  color: #fff;
  letter-spacing: .2px;
  white-space: nowrap;
}

/* 44px nowrap measures 449px — wider than a 375px viewport — and because the
   title is grid-column:1/-1 it widened the whole grid track, dragging the
   fixed nav out with it. The <br /> already in the markup does the break once
   nowrap is released. */
@media (max-width: 720px){
  .sust__title{ white-space: normal; font-size: clamp(28px, 7vw, 44px); }
}
.sust__img{
  height: 412px; background-color: #ddd;
  background-size: cover; background-position: center;
  border-radius: 2px;
}
.sust__copy{
  color: #fff;
  position: relative;
  padding-left: 32px;
  margin-top: 4px;
}
.sust__copy::before{
  content: "";
  position: absolute;
  left: 0; top: 6px;
  width: 2px; height: 115px;
  background: rgba(255,255,255,.55);
}
.sust__copy h2{ display: none; }
.sust__copy p{
  margin: 0 0 26px;
  font-size: 15px; line-height: 1.5; color: #fff; font-weight: 300;
  max-width: 360px;
}
.sust__copy .pill--white{ margin-top: 4px; }

/* ============================================================ CIRCULAR */
.circ{ margin-top: 80px; }
.circ__grid{
  display: grid; grid-template-columns: 1fr 1.1fr 1.4fr;
  gap: 36px;
  border-top: 1px solid var(--line);
  padding-top: 38px;
}
.circ__col h3{
  margin:0; font: 500 30px/1.15 var(--font-display); color: var(--ink);
}
.circ__col ul{
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 10px;
}
.circ__col ul li{
  font-size: 16px; line-height: 1.5; color: var(--ink); font-weight: 400;
  position: relative; padding-left: 18px;
}
.circ__col ul li::before{
  content: ""; position: absolute; left: 0; top: 11px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--primary);
}
.circ__col p{
  margin: 0; font-size: 16px; line-height: 1.6; color: var(--ink); font-weight: 300;
}

/* ============================================================ PROJECTS */
.proj{ margin-top: 100px; padding: 90px 0; }
.proj__inner .section-head{ align-items: flex-start; margin-bottom: 50px; }
.proj__grid{
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.proj-card{
  display: flex; flex-direction: column; gap: 14px;
}
.proj-card__img{
  height: 280px; background-color: #ccc;
  background-size: cover; background-position: center;
  border-radius: 4px;
  transition: transform .3s ease;
}
.proj-card:hover .proj-card__t{ color: var(--primary-text); }
.proj-card__t{
  margin: 0; font: 500 18px/1.3 var(--font-sans); color: var(--ink);
  letter-spacing: .2px;
}

/* The projects lede. Was a React `style` prop in the prototype; it was lost
   when the contact block at the end of this file was rewritten. */
.proj__lede{
  margin-top: var(--sp-4);
  font-size: var(--t-body);
  line-height: var(--lh-snug);
  color: var(--ink);
  max-width: 720px;
}

/* ============================================================ HOME BLOG */
.hblog{
  position: relative;
  margin-top: 0;
  padding: 100px 0 100px;
  overflow: hidden;
}
.hblog__bg{
  position: absolute; left: 0; right: 0; top: 0; height: 360px;
  background-size: cover; background-position: center;
  isolation: isolate;
}
/* A real scrim under the heading instead of a 20px-blur halo smeared behind
   50px white type — the halo softened the letterforms it was meant to rescue. */
.hblog__bg::after{
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,.12) 62%, rgba(0,0,0,0) 100%);
}
.hblog__inner{ position: relative; }
.hblog__title{
  margin: 0 0 40px;
  font: 500 var(--t-h1)/var(--lh-display) var(--font-display); color: #fff;
}
.hblog__title em{ font-style: normal; color: #fff; font-weight: 600; }
.hblog__grid{
  background: #fff;
  border-radius: 4px;
  padding: 40px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px;
  box-shadow: var(--shadow-lift);
}
/* The homepage's blog cards are the shared .postcard at its --compact step;
   only the white panel they sit in is homepage-specific. */
.hblog-card{ display: flex; flex-direction: column; gap: var(--sp-3); }
.hblog-card__img{
  height: 220px; background: var(--bg-2) center/cover no-repeat;
  border-radius: var(--r-2); margin-bottom: var(--sp-2); box-shadow: var(--frame);
}
.hblog-card__date{ font-size: var(--t-small); color: var(--ink-2); letter-spacing: .4px; }
.hblog-card__t{ margin: 0; font: 500 var(--t-lead)/var(--lh-head) var(--font-display); color: var(--ink); }
.hblog-card__excerpt{ margin: 0; font-size: var(--t-small); line-height: var(--lh-snug); color: var(--ink-2); flex: 1; }

/* ============================================================ RESPONSIVE */
@media (max-width: 1180px){
  .home-hero{ height: 640px; }
  .home-hero__title{ font-size: 60px; }
  .home-hero__sub{ font-size: 18px; }
  .home-hero__peek{ width: 100px; }
  .home-hero__peek:hover{ width: 170px; }
  .home-hero__copy{ right: 100px; bottom: 90px; }
  .prods__grid{ grid-template-columns: repeat(2, 1fr); }
  .proj__grid, .hblog__grid{ grid-template-columns: repeat(2, 1fr); }
  .srvs__grid{ grid-template-columns: repeat(2, 1fr); }
  .srv-item:nth-child(-n+2), .srv-item:nth-child(n+3){ grid-column: span 1; }
  .srv-item:nth-child(odd){ border-left: 0; padding-left: 0; }
  .stats__grid{ grid-template-columns: repeat(2, 1fr); }
  .stats__head h2{ font-size: 38px; }
  .sust__inner{ grid-template-columns: 1fr; gap: 32px; }
  .sust__copy h2{ font-size: 36px; }
  .circ__grid{ grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 720px){
  /* "AUTOMATA BÁLÁZÓK" at 24px overruns a narrow tile and gets clipped —
     Hungarian compounds do not break, so the type has to give way. */
  .pmos__grid{ grid-template-columns: 1fr; grid-template-rows: repeat(3, 1fr); height: auto; }
  .pmos__tile{ min-height: 220px; }
  .pmos__tile--big{ grid-row: span 1; min-height: 280px; }
  .pmos__label,
  .pmos__tile:not(.pmos__tile--big) .pmos__label{
    font-size: clamp(1rem, 4.4vw, 1.375rem);
    left: 20px; right: 20px; bottom: 18px;
    hyphens: auto;
  }
  .home-hero{ height: 560px; }
  .home-hero__title{ font-size: 42px; }
  .home-hero__sub{ font-size: 15px; }
  .home-hero__peek{ width: 70px; }
  .home-hero__peek-title{ display: none; }
  .home-hero__peek-num{ display: none; }
  .home-hero__copy{ right: 70px; bottom: 80px; }
  .home-hero__scroll{ display: none; }
  .intro-lede p{ font-size: 20px; }
  .prods__grid{ grid-template-columns: 1fr; }
  .proj__grid, .hblog__grid{ grid-template-columns: 1fr; }
  .srvs__grid{ grid-template-columns: 1fr; }
  .srv-item:nth-child(-n+2), .srv-item:nth-child(n+3){ grid-column: span 1; }
  .srv-item + .srv-item{ border-left: 0; padding-left: 0; }
  .stats__grid{ grid-template-columns: 1fr; border-left: 0; }
  .stat{ border-right: 0; border-bottom: 1px solid var(--line); }
}

/* ============================================================ INDUSTRIES
   Figma node 714:3183, artboard y=6311. A full-bleed --primary band: a 30px
   heading on the left, five white pills on the right in two columns with the
   last spanning both, and a 50px call to action below.

   --primary is correct here rather than --primary-ink: the band carries only
   display type. White at 30px and 50px is large text, which needs 3:1, and
   white on #DF5129 measures 3.93:1. No body copy sits on this fill. */
.inds{
  margin-top: var(--section-y);
  background: var(--primary);
  padding: var(--sp-8) var(--pad-x) var(--sp-7);
}
.inds__inner{ max-width: var(--container); margin: 0 auto; }

.inds__head{
  /* The white vertical rule at the heading's left edge — the same idiom as
     .machine__rail and the .srv-item top rule. */
  border-left: var(--bw-rule) solid rgba(255,255,255,.9);
  padding-left: var(--sp-5);
}
.inds__title{
  margin: 0;
  max-width: 30ch;
  font: 400 var(--t-lead-lg)/var(--lh-head) var(--font-display);
  color: #fff;
  text-wrap: balance;
}

.inds__list{
  list-style: none;
  margin: var(--sp-7) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3) var(--sp-4);
}
.inds__wide{ grid-column: 1 / -1; }

.inds__chip{
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  min-height: var(--ctl-h);
  padding: 0 var(--sp-4) 0 var(--sp-5);
  background: var(--surface);
  border-radius: var(--r-full);
  color: var(--ink);                 /* 7.93:1 on white */
  font: 300 var(--t-body)/1.3 var(--font-sans);
  text-decoration: none;
  transition: background var(--d-1) var(--ease-out), color var(--d-1) var(--ease-out);
}
.inds__chip svg{ flex: none; color: var(--primary-text); transition: transform var(--d-2) var(--ease-out); }
.inds__chip:hover{ background: var(--bg); }
.inds__chip:hover svg{ transform: translateX(3px); }
/* The ring flips to white: --focus-color is --primary-ink, which is 2.62:1 on
   this band. */
.inds :where(a):focus-visible{ --focus-color: #FFFFFF; }

.inds__cta{
  display: inline-flex; align-items: center; gap: var(--sp-4);
  margin-top: var(--sp-8);
  font: 500 var(--t-h2)/var(--lh-display) var(--font-display);
  color: #fff;
  text-decoration: none;
}
.inds__cta svg{ transition: transform var(--d-2) var(--ease-out); }
.inds__cta:hover svg{ transform: translateX(4px); }

@media (min-width: 981px){
  /* Two columns at desktop: the heading holds the left, the chips the right,
     as the artboard lays them out. */
  .inds__inner{
    display: grid;
    grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
    column-gap: var(--sp-10);
    align-items: start;
  }
  .inds__list{ margin-top: 0; }
  .inds__cta{ grid-column: 1 / -1; }
}
@media (max-width: 640px){
  .inds__list{ grid-template-columns: 1fr; }
  .inds__wide{ grid-column: auto; }
}