/* A weboldal megjelenési szabályai. Saját felülírások: modositasok.css. */
:root {
  --navy:#061b2b;
  --navy2:#0a293c;
  --lime:#7c9634;
  --bright:#98b942;
  --white:#f6f7f5;
  --muted:#a9b5bb;
  --line:#294151
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth
}
body {
  margin:0;
  background:var(--navy);
  color:var(--white);
  font-family:Arial,Helvetica,sans-serif
}
a {
  color:inherit
}
header {
  height:88px;
  padding:12px clamp(22px,5vw,78px);
  background:#061a29;
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:sticky;
  top:0;
  z-index:20;
  border-bottom:1px solid var(--line)
}
.logo img {
  display:block;
  width:min(385px,42vw);
  filter:brightness(0) invert(1)
}
nav {
  display:flex;
  align-items:center;
  gap:28px
}
nav a {
  text-decoration:none;
  font-size:14px;
  font-weight:700
}
.phone {
  border:1px solid var(--lime);
  padding:13px 18px;
  color:#fff
}
header button {
  display:none;
  border:1px solid var(--lime);
  background:transparent;
  color:#fff;
  padding:10px 14px
}
.hero {
  height:calc(100vh - 88px);
  min-height:680px;
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  padding:80px clamp(24px,6vw,95px)
}
.hero-bg {
  position:absolute;
  inset:0;
  background:url('assets/field-hero.png') center/cover no-repeat
}
.hero-shade {
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(3,17,27,.98) 0%,rgba(3,17,27,.87) 38%,rgba(3,17,27,.24) 76%,rgba(3,17,27,.4) 100%)
}
.grid {
  position:absolute;
  inset:45% 0 0;
  background-image:linear-gradient(rgba(152,185,66,.2) 1px,transparent 1px),linear-gradient(90deg,rgba(152,185,66,.18) 1px,transparent 1px);
  background-size:55px 28px;
  transform:perspective(350px) rotateX(55deg) scale(1.3);
  transform-origin:bottom
}
.hero-copy {
  position:relative;
  z-index:2;
  max-width:820px
}
.eyebrow {
  text-transform:uppercase;
  letter-spacing:.17em;
  color:var(--bright);
  font-weight:900;
  font-size:13px
}
.hero h1 {
  font-size:clamp(50px,6.5vw,94px);
  line-height:.95;
  text-transform:uppercase;
  letter-spacing:-.05em;
  margin:22px 0
}
.hero h1 span,.contact h2 span {
  color:var(--bright)
}
.hero-copy>p:not(.eyebrow) {
  font-size:20px;
  line-height:1.6;
  color:#d0d8dc;
  max-width:680px
}
.actions {
  display:flex;
  gap:14px;
  margin-top:34px;
  flex-wrap:wrap
}
.actions a {
  padding:17px 22px;
  text-decoration:none;
  font-weight:800;
  border:1px solid var(--bright)
}
.actions a:first-child {
  background:var(--bright);
  color:var(--navy)
}
.hero-tags {
  position:absolute;
  z-index:2;
  right:5%;
  top:18%;
  display:flex;
  flex-direction:column;
  gap:8px;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:13px;
  font-weight:800
}
.hero-tags span:last-child {
  color:var(--bright)
}
.service-strip {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  background:#082236;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:0 clamp(24px,4vw,65px)
}
.service-strip article {
  padding:38px 28px;
  border-right:1px solid var(--line)
}
.service-strip article:last-child {
  border:0
}
.service-strip b {
  color:var(--bright)
}
.service-strip h3 {
  font-size:21px;
  text-transform:uppercase;
  line-height:1.15
}
.service-strip p {
  color:var(--muted);
  line-height:1.5
}
.technology {
  display:grid;
  grid-template-columns:1.15fr .85fr;
  min-height:700px
}
.photo {
  position:relative;
  overflow:hidden
}
.photo:after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,transparent 55%,var(--navy) 100%)
}
.photo img {
  width:100%;
  height:100%;
  object-fit:cover
}
.tech-copy {
  padding:100px clamp(30px,6vw,100px) 100px 40px;
  align-self:center
}
.tech-copy h2,.contact h2 {
  font-size:clamp(44px,5vw,74px);
  line-height:1;
  letter-spacing:-.04em;
  text-transform:uppercase;
  margin:20px 0
}
.tech-copy>p:not(.eyebrow) {
  font-size:18px;
  color:var(--muted);
  line-height:1.7
}
.tech-copy ul {
  list-style:none;
  padding:0;
  margin-top:35px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px
}
.tech-copy li {
  border:1px solid var(--line);
  padding:15px
}
.tech-copy li:before {
  content:"+";
  color:var(--bright);
  margin-right:10px
}
.values {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  background:var(--white);
  color:var(--navy);
  padding:60px clamp(24px,6vw,90px)
}
.values div {
  display:flex;
  gap:18px;
  align-items:center;
  padding:20px;
  border-right:1px solid #ced3d1
}
.values div:last-child {
  border:0
}
.values strong {
  font-size:32px;
  color:var(--lime)
}
.values span {
  font-size:14px;
  font-weight:800;
  line-height:1.5;
  text-transform:uppercase
}
.contact {
  padding:110px clamp(24px,7vw,110px);
  background:#041724;
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:8vw;
  align-items:center;
  position:relative
}
.contact:before {
  content:"";
  position:absolute;
  inset:0;
  opacity:.12;
  background:repeating-radial-gradient(ellipse at 90% 80%,transparent 0 20px,var(--bright) 21px 22px,transparent 23px 38px)
}
.contact>div {
  position:relative
}
.contact-card {
  background:#0a2a3e;
  border-top:5px solid var(--bright);
  padding:40px
}
.contact-card small {
  text-transform:uppercase;
  letter-spacing:.15em;
  color:var(--muted)
}
.contact-card h3 {
  font-size:34px;
  margin:14px 0 28px
}
.contact-card a {
  display:block;
  text-decoration:none;
  font-size:20px;
  margin:14px 0;
  color:#fff
}
.contact-card p {
  color:var(--muted);
  line-height:1.5
}
footer {
  min-height:90px;
  padding:20px clamp(24px,5vw,75px);
  display:flex;
  align-items:center;
  gap:28px;
  border-top:1px solid var(--line);
  color:var(--muted);
  font-size:13px
}
footer img {
  width:250px;
  filter:brightness(0) invert(1)
}
footer a {
  margin-left:auto;
  color:#fff;
  text-decoration:none
}
@media(max-width:900px) {
  header {
    height:74px
  }
  .logo img {
    width:250px;
    max-width:68vw
  }
  header button {
    display:block
  }
  nav {
    display:none;
    position:absolute;
    top:74px;
    left:0;
    right:0;
    background:var(--navy);
    padding:25px;
    flex-direction:column;
    align-items:stretch
  }
  nav.open {
    display:flex
  }
  .hero {
    height:auto;
    min-height:760px
  }
  .hero-tags {
    display:none
  }
  .service-strip {
    grid-template-columns:1fr 1fr
  }
  .technology {
    grid-template-columns:1fr
  }
  .photo {
    height:500px
  }
  .tech-copy {
    padding:70px 24px
  }
  .values {
    grid-template-columns:1fr 1fr
  }
  .contact {
    grid-template-columns:1fr
  }
}
@media(max-width:560px) {
  .hero {
    min-height:720px;
    padding:70px 22px
  }
  .hero h1 {
    font-size:48px
  }
  .hero-copy>p:not(.eyebrow) {
    font-size:17px
  }
  .service-strip {
    grid-template-columns:1fr;
    padding:0 22px
  }
  .service-strip article {
    border-right:0;
    border-bottom:1px solid var(--line);
    padding:28px 0
  }
  .photo {
    height:360px
  }
  .tech-copy ul {
    grid-template-columns:1fr
  }
  .values {
    grid-template-columns:1fr;
    padding:45px 22px
  }
  .values div {
    border-right:0;
    border-bottom:1px solid #ced3d1
  }
  .contact {
    padding:80px 22px
  }
  .contact-card {
    padding:28px 22px
  }
  footer {
    flex-direction:column;
    align-items:flex-start
  }
  footer a {
    margin-left:0
  }
}