/* ==================================================
ALAPOK: betűk, színek, fejléc, lábléc, közös oldalváz
================================================== */
@font-face {
  font-family: Jost;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/jost-400.woff2') format('woff2');
}
@font-face {
  font-family: Jost;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/jost-500.woff2') format('woff2');
}
@font-face {
  font-family: Jost;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/jost-600.woff2') format('woff2');
}
@font-face {
  font-family: Jost;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/jost-700.woff2') format('woff2');
}
:root {
  --paper: #EEF0EB;
  --tint: #EAF1DC;
  --alt: #EEF0EB;
  --white: #fff;
  --ink: #0D2A0A;
  --green: #12670C;
  --deep: #12670C;
  --night: #12670C;
  --lime: #B0E629;
  --line: #D6E0C4;
  --muted: #51654A;
  --sh1: 0 1px 2px rgba(13,42,10,.06),0 10px 28px -14px rgba(13,42,10,.22);
  --sh2: 0 2px 6px rgba(13,42,10,.08),0 28px 56px -20px rgba(13,42,10,.35);
  --wrap: 1240px;
  --ease: cubic-bezier(.6,0,.2,1);
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
html,body {
  overflow-x: clip;
}
main {
  overflow-x: clip;
}
body {
  margin: 0;
  font-family: 'Jost',system-ui,sans-serif;
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}
a {
  color: inherit;
}
img {
  max-width: 100%;
  display: block;
}
:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 3px;
  border-radius: 6px;
}
.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 32px;
  position: relative;
  z-index: 1;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font: inherit;
  font-weight: 600;
  font-size: 17px;
  text-decoration: none;
  border-radius: 999px;
  padding: 15px 28px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background .2s,color .2s,transform .2s,box-shadow .2s;
}
.btn-green {
  background: var(--green);
  color: var(--white);
  box-shadow: 0 12px 24px -12px rgba(18,103,12,.8);
}
.btn-green:hover {
  background: var(--ink);
  transform: translateY(-2px);
}
.btn-outline {
  border-color: var(--green);
  color: var(--green);
  background: rgba(255,255,255,.6);
}
.btn-outline:hover {
  background: var(--green);
  color: var(--white);
}
.btn-lime {
  background: var(--lime);
  color: var(--ink);
}
.btn-lime:hover {
  background: var(--white);
  transform: translateY(-2px);
}
.sec {
  padding: 88px 0;
  position: relative;
}
.lede {
  margin: 0;
  font-size: 19px;
  color: var(--muted);
  max-width: 46ch;
}
.head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}
.more-link {
  font-weight: 600;
  color: var(--green);
  text-decoration: none;
  border-bottom: 2px solid currentColor;
  padding-bottom: 2px;
}
/* Beúszás görgetésre */
.rv {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s var(--ease),transform .7s var(--ease);
}
.rv.in {
  opacity: 1;
  transform: none;
}
/* Háttér "o" gyűrűk */
.bg-o {
  position: absolute;
  pointer-events: none;
  z-index: 0;
}
/* Visszaköszönő mini-bolygórendszerek */
.mini-sys {
  position: absolute;
  pointer-events: none;
  z-index: 0;
}
.mini-sys svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.mini-sys .mp {
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 50%;
  offset-path: var(--path);
  offset-rotate: 0deg;
  animation: travel var(--dur,26s) linear infinite;
}
.mini-sys .mp.a {
  width: 18px;
  height: 18px;
  background: radial-gradient(circle at 34% 30%,#f3fcc9,#B0E629 55%,#12670C);
  box-shadow: inset -3px -4px 6px rgba(0,0,0,.25);
}
.mini-sys .mp.b {
  width: 11px;
  height: 11px;
  background: radial-gradient(circle at 34% 30%,#fff,#bfd6ad 60%,#7e9e68);
  animation-delay: calc(var(--dur,26s) * -.5);
}
@keyframes travel {
  to {
    offset-distance: 100%;
  }
}
/* Átúszó bolygók */
.cosmos {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
.cosmos .fly {
  position: absolute;
  left: 0;
  top: 0;
  will-change: transform;
  transform: translate(-300px,-300px);
}
.cosmos .fly>i {
  display: block;
  border-radius: 50%;
  position: relative;
}
.cosmos .t-lime>i {
  background: radial-gradient(circle at 34% 30%,#f3fcc9,#B0E629 55%,#12670C);
  box-shadow: inset -4px -6px 10px rgba(0,0,0,.22);
}
.cosmos .t-green>i {
  background: radial-gradient(circle at 34% 30%,#a8d690,#5aa548 55%,#2f7d24);
  box-shadow: inset -4px -6px 10px rgba(0,0,0,.2);
  opacity: .8;
  transform: scale(.8);
}
.cosmos .t-pale>i {
  background: radial-gradient(circle at 34% 30%,#fff,#dfe9d3 60%,#9db98a);
  box-shadow: inset -3px -5px 8px rgba(0,0,0,.18);
}
.cosmos .ring>i::after {
  content: "";
  position: absolute;
  left: -42%;
  right: -42%;
  top: 40%;
  height: 22%;
  border-radius: 50%;
  border: 2px solid rgba(18,103,12,.45);
  transform: rotate(-16deg);
}
.cosmos .t-green.ring>i::after {
  border-color: rgba(176,230,41,.8);
}
.cosmos .moon>b {
  position: absolute;
  width: 28%;
  height: 28%;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%,#fff,#b7c9a8);
  right: -40%;
  top: -18%;
}
/* ---------- Fejléc ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 84px;
  gap: 24px;
}
.logo {
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -.035em;
  color: var(--green);
  text-decoration: none;
  line-height: 1;
}
.nav {
  display: flex;
  align-items: center;
  gap: 32px;
}
.nav>ul {
  display: flex;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav a,.drop-btn {
  text-decoration: none;
  font-weight: 500;
  font-size: 17px;
}
.nav>ul>li>a:hover,.drop-btn:hover {
  color: var(--green);
}
.has-drop {
  position: relative;
}
.drop-btn {
  background: none;
  border: 0;
  font-family: inherit;
  color: inherit;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
.drop {
  position: absolute;
  top: calc(100% + 18px);
  left: -20px;
  width: 310px;
  max-height: calc(100vh - 110px);
  overflow: auto;
  background: var(--white);
  border-radius: 18px;
  padding: 10px;
  list-style: none;
  margin: 0;
  box-shadow: var(--sh2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: .18s;
}
.drop a {
  display: block;
  padding: 8px 14px;
  border-radius: 10px;
  font-size: 16px;
}
.drop a:hover {
  background: var(--paper);
  color: var(--green);
}
.has-drop:hover .drop,.has-drop:focus-within .drop,.has-drop.open .drop {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.burger {
  display: none;
  background: none;
  border: 0;
  color: var(--ink);
  cursor: pointer;
}
/* ---------- Hero ---------- */
.hero {
  padding: 56px 0 140px;
  min-height: 680px;
  position: relative;
  overflow: hidden;
  color: #fff;
  background: radial-gradient(760px 560px at 78% 42%,rgba(35,150,26,.55),transparent 70%),radial-gradient(420px 300px at 30% 10%,rgba(176,230,41,.10),transparent 70%),radial-gradient(500px 360px at 95% 95%,rgba(20,120,90,.18),transparent 70%),radial-gradient(520px 420px at 0% 100%,rgba(176,230,41,.12),transparent 70%),linear-gradient(160deg,#12670C 0%,#12670C 55%,#12670C 100%);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(176,230,41,.20) 1.2px,transparent 1.3px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(620px 520px at 78% 45%,#000,transparent 75%);
  mask-image: radial-gradient(620px 520px at 78% 45%,#000,transparent 75%);
  pointer-events: none;
}
.hero .wrap {
  display: block;
  position: relative;
  z-index: 10;
}
.hero .wrap>.rv {
  max-width: 640px;
  padding: 40px 0 20px;
}
.hero .system {
  position: absolute;
  right: -1%;
  top: 50%;
  transform: translateY(-50%);
  width: min(860px,60vw);
  max-width: none;
  margin: 0;
  z-index: 1;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(90deg,rgba(7,44,5,.78) 0%,rgba(7,44,5,.5) 38%,rgba(7,44,5,0) 62%);
}
.claim {
  margin: 0 0 28px;
  font-size: clamp(46px,5.9vw,86px);
  line-height: .96;
  font-weight: 700;
  letter-spacing: -.045em;
  text-wrap: balance;
}
.hero .lede {
  margin-bottom: 36px;
  color: rgba(255,255,255,.82);
}
.hero .btn-outline {
  border-color: rgba(255,255,255,.55);
  color: #fff;
  background: transparent;
}
.hero .btn-outline:hover {
  background: #fff;
  color: var(--green);
}
.hero .btn-green {
  background: var(--lime);
  color: var(--ink);
  box-shadow: 0 14px 30px -14px rgba(176,230,41,.7);
}
.hero .btn-green:hover {
  background: #fff;
}
.hero-arcs {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.system {
  position: relative;
  width: 100%;
  max-width: 620px;
  aspect-ratio: 1;
  margin-left: auto;
  container-type: inline-size;
}
.orbits {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: visible;
}
.planet {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}
.planet>svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 40px 60px rgba(0,0,0,.45));
}
.body {
  position: absolute;
  left: 0;
  top: 0;
  will-change: transform,opacity;
  transform: translate(-50%,-50%);
  display: grid;
  justify-items: center;
  gap: 6px;
}
/* Bolygó-címkék */
.pl {
  position: relative;
  display: grid;
  place-items: center;
  border-radius: 50%;
  box-shadow: inset -8px -10px 16px rgba(6,40,4,.45),inset 5px 6px 10px rgba(255,255,255,.55),0 18px 30px -14px rgba(0,0,0,.7);
}
.pl svg {
  width: 46%;
  height: 46%;
  position: relative;
  z-index: 1;
}
.pl.s {
  width: 46px;
  height: 46px;
}
.pl.m {
  width: 52px;
  height: 52px;
}
.pl.l {
  width: 58px;
  height: 58px;
}
.pl.pale {
  background: radial-gradient(circle at 34% 30%,#ffffff 0%,#e6efd8 45%,#a9c592 100%);
}
.pl.lime {
  background: radial-gradient(circle at 34% 30%,#f3fcc9 0%,#B0E629 50%,#12670C 100%);
}
.pl.ringed::after {
  content: "";
  position: absolute;
  left: -30%;
  right: -30%;
  top: 40%;
  height: 22%;
  border-radius: 50%;
  border: 2.5px solid rgba(223,245,143,.85);
  transform: rotate(-18deg);
  box-shadow: 0 0 0 1px rgba(255,255,255,.12);
}
.pl-lbl {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  letter-spacing: .01em;
  white-space: nowrap;
  text-shadow: 0 2px 8px rgba(0,0,0,.6);
  background: rgba(6,40,4,.45);
  padding: 2px 9px;
  border-radius: 999px;
  backdrop-filter: blur(4px);
}
.moon i {
  display: block;
  border-radius: 50%;
  box-shadow: inset -3px -4px 6px rgba(0,0,0,.35);
}
.moon .m1 {
  width: 18px;
  height: 18px;
  background: radial-gradient(circle at 35% 30%,#e6fa9e,#B0E629);
}
.moon .m2 {
  width: 12px;
  height: 12px;
  background: radial-gradient(circle at 35% 30%,#fff,#bfd6ad);
}
.moon .m3 {
  width: 22px;
  height: 22px;
  background: radial-gradient(circle at 35% 30%,#12670C,#12670C);
}
.stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.stars i {
  position: absolute;
  border-radius: 50%;
  background: #f3fcc9;
  opacity: .55;
  box-shadow: 0 0 6px rgba(243,252,201,.6);
  animation: tw 4.5s ease-in-out infinite;
}
/* Csillogás: változó ütem, hogy véletlenszerűnek hasson. */
.stars i:nth-child(2n) {
  animation-duration: 3.3s;
}
.stars i:nth-child(3n) {
  animation-duration: 6.2s;
}
.stars i:nth-child(5n) {
  animation-duration: 2.5s;
}
.stars i:nth-child(7n) {
  animation-duration: 7.4s;
}
@keyframes tw {
  0%, 100% {
    opacity: .15;
    transform: scale(.8);
  }
  45% {
    opacity: .2;
  }
  55% {
    opacity: 1;
    transform: scale(1.6);
  }
  68% {
    opacity: .4;
    transform: scale(1);
  }
}
.scene {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 10px;
  opacity: 0;
  transform: translateY(12px) scale(.97);
  transition: opacity .6s var(--ease),transform .6s var(--ease);
}
.scene.on {
  opacity: 1;
  transform: none;
}
.scene .lbl {
  font-size: 13px;
  font-weight: 600;
  color: var(--lime);
  letter-spacing: .02em;
}
/* ---------- Számsáv ---------- */
.facts {
  position: relative;
  z-index: 2;
  margin-top: -60px;
}
.facts .row {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  background: #fff;
  border-radius: 24px;
  box-shadow: var(--sh2);
  overflow: hidden;
}
.facts .row>div {
  padding: 24px 28px;
  display: flex;
  align-items: center;
  gap: 14px;
  border-left: 1px solid var(--line);
}
.facts .row>div:first-child {
  border-left: 0;
}
.facts b {
  font-size: 26px;
  font-weight: 600;
  color: var(--green);
  letter-spacing: -.02em;
  line-height: 1;
}
.facts span {
  font-size: 16px;
  color: var(--muted);
  line-height: 1.3;
}
/* ---------- Szolgáltatáskártyák ---------- */
.group {
  margin-top: 48px;
}
.group:first-of-type {
  margin-top: 0;
}
.group-h {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 22px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.group-h p {
  margin: 0;
  font-size: 16px;
  color: var(--muted);
  max-width: 52ch;
}
.cards {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 18px;
}
.cards.six,.cards.three {
  grid-template-columns: repeat(3,minmax(0,1fr));
}
.card {
  position: relative;
  background: #fff;
  border: 1px solid #ECEFE8;
  border-radius: 24px;
  padding: 26px 26px 60px;
  box-shadow: var(--sh1);
  transition: transform .35s var(--ease),box-shadow .35s var(--ease),opacity .7s var(--ease);
  overflow: hidden;
}
.card::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 4px;
  background: linear-gradient(90deg,var(--green),var(--lime));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s var(--ease);
}
.card:hover {
  transform: translateY(-6px);
  box-shadow: var(--sh2);
}
.card:hover::before {
  transform: scaleX(1);
}
.tile {
  width: 76px;
  height: 76px;
  border-radius: 22px;
  background: linear-gradient(145deg,#fff,var(--tint));
  box-shadow: inset 0 0 0 1px rgba(18,103,12,.08),0 8px 18px -10px rgba(13,42,10,.3);
  display: grid;
  place-items: center;
  margin-bottom: 20px;
  transition: transform .35s var(--ease);
}
.card:hover .tile {
  transform: rotate(-6deg) scale(1.05);
}
.tile .ico {
  width: 62px;
  height: 62px;
}
.card h3 {
  margin: 0 0 8px;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -.015em;
}
.card h3 a {
  text-decoration: none;
}
.card h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
}
.card p {
  margin: 0;
  font-size: 16px;
  color: var(--muted);
  line-height: 1.5;
}
.card .tag {
  position: absolute;
  right: 22px;
  top: 24px;
  font-size: 13px;
  font-weight: 600;
  color: var(--green);
  background: var(--tint);
  padding: 4px 10px;
  border-radius: 999px;
}
.card .arrow {
  position: absolute;
  left: 26px;
  bottom: 22px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--tint);
  color: var(--green);
  transition: background .3s,color .3s,transform .3s;
}
.card:hover .arrow {
  background: var(--green);
  color: #fff;
  transform: translateX(4px);
}
/* Kiszervezés sáv */
.out-band {
  position: relative;
  overflow: hidden;
  margin-top: 28px;
  border-radius: 30px;
  padding: 48px 52px;
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 48px;
  align-items: center;
  color: #fff;
  background: radial-gradient(600px 400px at 100% 0%,rgba(176,230,41,.16),transparent 60%),linear-gradient(150deg,#12670C,#12670C);
  box-shadow: var(--sh2);
}
.out-band>* {
  position: relative;
  z-index: 1;
}
.out-band .tag {
  display: inline-block;
  background: var(--lime);
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 16px;
}
.out-band .cim-kartya a {
  text-decoration: none;
}
.out-band p {
  margin: 0 0 24px;
  color: rgba(255,255,255,.88);
  max-width: 46ch;
}
.out-o {
  position: absolute;
  right: -120px;
  bottom: -140px;
  width: 420px;
  z-index: 0;
}
/* Kiemelt sötét kártyák (Keresőmarketing és Google Ads) */
.cards.three .card {
  background: radial-gradient(400px 260px at 100% 0%,rgba(176,230,41,.14),transparent 60%),linear-gradient(150deg,#12670C,#12670C);
  color: #fff;
  border: 0;
  box-shadow: 0 24px 48px -24px rgba(7,44,5,.7);
}
.cards.three .card p {
  color: rgba(255,255,255,.84);
}
.cards.three .card .tag {
  background: var(--lime);
  color: var(--ink);
}
.cards.three .card .arrow {
  background: rgba(255,255,255,.12);
  color: var(--lime);
}
.cards.three .card:hover .arrow {
  background: var(--lime);
  color: var(--ink);
}
.cards.three .tile {
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 6px rgba(255,255,255,.08),0 12px 24px -12px rgba(0,0,0,.5);
}
/* Kompakt világos kártyák */
.cards.six .card,.cards.four .card {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 4px 18px;
  align-items: start;
  padding: 22px 22px 22px 20px;
  background: linear-gradient(150deg,#ffffff 0%,#F3F4F0 50%,#E8EBE4 100%);
  border-color: #E3E7DE;
}
.cards.six .tile,.cards.four .tile {
  grid-row: span 3;
  width: 64px;
  height: 64px;
  margin: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%,#12670C,#12670C 55%,#12670C);
  box-shadow: 0 12px 22px -12px rgba(7,44,5,.7);
  transition: background .3s,transform .35s var(--ease);
}
.cards.six .card:hover .tile,.cards.four .card:hover .tile {
  background: var(--lime);
  transform: none;
}
.cards.six .tile .ico,.cards.four .tile .ico {
  filter: brightness(0) invert(1);
  transition: filter .3s;
  width: 50px;
  height: 50px;
}
.cards.six .tile .ico>circle:first-child[fill^="url"],.cards.four .tile .ico>circle:first-child[fill^="url"] {
  fill: transparent;
}
.cards.six .tile .ico>circle:first-child[fill="#fff"],.cards.four .tile .ico>circle:first-child[fill="#fff"] {
  fill: transparent;
}
.cards.six .card:hover .tile .ico,.cards.four .card:hover .tile .ico {
  filter: none;
}
.cards.six .card h3,.cards.four .card h3 {
  font-size: 20px;
  margin: 2px 0 4px;
}
.cards.six .card p,.cards.four .card p {
  font-size: 15px;
}
.cards.six .card .arrow,.cards.four .card .arrow {
  position: static;
  width: 30px;
  height: 30px;
  margin-top: 10px;
}
.cards.six .card::before,.cards.four .card::before {
  display: none;
}
.cards.four {
  grid-template-columns: repeat(2,minmax(0,1fr));
}
.fit {
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 20px;
  padding: 26px 28px;
}
.fit-h {
  margin: 0 0 14px;
  font-size: 18px;
  font-weight: 600;
  color: var(--lime);
}
.fit ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.fit li {
  position: relative;
  padding-left: 30px;
  font-size: 16px;
  line-height: 1.45;
  color: rgba(255,255,255,.9);
}
.fit li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  width: 18px;
  height: 18px;
  background: var(--optimalnet-jel-sotetre) center / contain no-repeat;
}
/* ---------- AI ---------- */
.ai {
  padding: 20px 0 64px;
}
.ai>.wrap {
  padding-top: 48px!important;
  padding-bottom: 44px!important;
  background: radial-gradient(700px 420px at 90% 10%,rgba(176,230,41,.12),transparent 60%),linear-gradient(160deg,#12670C,var(--night));
  color: #fff;
  border-radius: 36px;
  padding: 60px 56px;
  box-shadow: var(--sh2);
  overflow: hidden;
  max-width: 1080px;
}
.ai .lede {
  color: rgba(255,255,255,.8);
}
.ai-top {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 44px;
  align-items: center;
  margin-bottom: 32px;
}
.ai-lede {
  margin: 0 0 26px;
  color: rgba(255,255,255,.75);
  font-size: 17px;
  padding-bottom: 22px;
  border-bottom: 1px solid rgba(255,255,255,.14);
}
.ai-top .new {
  display: inline-block;
  background: var(--lime);
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 18px;
}
.ai-top p {
  margin: 0 0 22px;
  color: rgba(255,255,255,.88);
  max-width: 46ch;
  font-size: 17px;
}
.gather {
  position: relative;
  aspect-ratio: 1/.9;
  border-radius: 30px;
  background: radial-gradient(closest-side,rgba(176,230,41,.10),transparent),rgba(0,0,0,.18);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
  overflow: hidden;
  container-type: inline-size;
}
.gather>svg {
  position: absolute;
  left: 50%;
  top: 52%;
  width: 66%;
  transform: translate(-50%,-50%);
  overflow: visible;
}
.g-track {
  fill: none;
  stroke: rgba(255,255,255,.08);
  stroke-width: 14;
}
.g-ring {
  fill: none;
  stroke: url(#gL);
  stroke-width: 14;
  stroke-linecap: round;
  stroke-dasharray: 943;
  stroke-dashoffset: 943;
  transform: rotate(-90deg);
  transform-origin: 200px 200px;
  transition: stroke-dashoffset 1.1s var(--ease) .15s;
}
.gather.after .g-ring {
  stroke-dashoffset: 0;
}
.gchip {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  padding: 7px 13px 7px 8px;
  border-radius: 12px;
  white-space: nowrap;
  box-shadow: 0 14px 30px -12px rgba(0,0,0,.5);
  transition: left .8s var(--ease),top .8s var(--ease),transform .8s var(--ease),opacity .45s .3s;
}
.gchip i {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: var(--tint);
  flex-shrink: 0;
  display: grid;
  place-items: center;
}
.gchip i svg {
  width: 14px;
  height: 14px;
}
.gchip .dot {
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  color: var(--green);
}
.gchip.alert {
  align-items: center;
  gap: 9px;
  padding: 8px 13px 8px 8px;
  border-radius: 14px;
  background: #FFF9EA;
  box-shadow: 0 16px 34px -12px rgba(0,0,0,.55),inset 0 0 0 1.5px #F2B233;
}
.gchip.alert .al {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.gchip.alert .al svg {
  width: 22px;
  height: 22px;
}
.gchip.alert>span {
  display: grid;
  line-height: 1.15;
}
.gchip.alert strong {
  font-size: 14px;
}
.gchip.alert small {
  font-size: 12px;
  color: #7a5b00;
  font-weight: 500;
}
.gather:not(.after) .gchip {
  animation: bob 3.6s ease-in-out infinite;
}
.gather:not(.after) .gchip:nth-of-type(2n) {
  animation-duration: 4.4s;
  animation-delay: -1s;
}
.gather:not(.after) .gchip:nth-of-type(3n) {
  animation-duration: 5s;
  animation-delay: -2s;
}
@keyframes bob {
  50% {
    translate: 0 -6px;
  }
}
.gather:not(.after) .gchip.alert {
  animation: shake 3s ease-in-out infinite;
}
@keyframes shake {
  0%,86%,100% {
    translate: 0 0;
  }
  89% {
    translate: -3px 0;
  }
  92% {
    translate: 3px 0;
  }
  95% {
    translate: -2px 0;
  }
}
.meter {
  position: absolute;
  left: 18px;
  bottom: 18px;
  right: 18px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,.8);
}
.meter .bar {
  flex: 1;
  height: 8px;
  border-radius: 8px;
  background: rgba(255,255,255,.1);
  overflow: hidden;
}
.meter .bar i {
  display: block;
  height: 100%;
  width: 88%;
  border-radius: 8px;
  background: linear-gradient(90deg,#F2B233,#e0621d);
  transition: width 1s var(--ease),background 1s;
}
.gather.after .meter .bar i {
  width: 38%;
  background: linear-gradient(90deg,#B0E629,#B0E629);
}
.gchip:nth-of-type(1) {
  left: 6%;
  top: 21%;
  transform: rotate(-7deg);
}
.gchip:nth-of-type(2) {
  left: 52%;
  top: 18%;
  transform: rotate(5deg);
}
.gchip:nth-of-type(3) {
  left: 26%;
  top: 30%;
  transform: rotate(-3deg);
}
.gchip:nth-of-type(4) {
  left: 68%;
  top: 38%;
  transform: rotate(-9deg);
}
.gchip:nth-of-type(5) {
  left: 4%;
  top: 50%;
  transform: rotate(6deg);
}
.gchip:nth-of-type(6) {
  left: 40%;
  top: 57%;
  transform: rotate(7deg);
}
.gchip:nth-of-type(7) {
  left: 12%;
  top: 72%;
  transform: rotate(-5deg);
}
.gchip:nth-of-type(8) {
  left: 62%;
  top: 70%;
  transform: rotate(4deg);
}
.gchip:nth-of-type(9) {
  left: 34%;
  top: 80%;
  transform: rotate(-2deg);
}
.gather.after .gchip {
  left: 44%;
  top: 48%;
  transform: scale(.2);
  opacity: 0;
}
.g-core {
  position: absolute;
  left: 50%;
  top: 52%;
  transform: translate(-50%,-50%) scale(.8);
  opacity: 0;
  transition: .6s var(--ease) .55s;
  text-align: center;
  display: grid;
  justify-items: center;
  gap: 6px;
}
.gather.after .g-core {
  opacity: 1;
  transform: translate(-50%,-50%);
}
.g-core .mark {
  width: clamp(52px,15cqw,76px);
  height: clamp(52px,15cqw,76px);
  border-radius: 50%;
  background: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 16px 40px -14px rgba(0,0,0,.6);
}
.g-core b {
  font-size: clamp(15px,4.4cqw,21px);
  letter-spacing: -.02em;
  color: #fff;
  white-space: nowrap;
}
.g-core small {
  font-size: 14px;
  color: rgba(255,255,255,.7);
}
.gpill {
  position: absolute;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  color: var(--ink);
  font-size: clamp(11.5px,3.3cqw,14.5px);
  font-weight: 600;
  padding: 7px 13px 7px 7px;
  border-radius: 999px;
  box-shadow: 0 18px 36px -14px rgba(0,0,0,.55);
  opacity: 0;
  transform: translate(-50%,-50%) scale(.85);
  transition: .55s var(--ease);
}
.gpill svg {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
}
.gpill.p1 {
  left: 50%;
  top: 21%;
}
.gpill.p2 {
  left: 75%;
  top: 80%;
}
.gpill.p3 {
  left: 25%;
  top: 80%;
}
.gather.after .gpill {
  opacity: 1;
  transform: translate(-50%,-50%);
}
.gather.after .p1 {
  transition-delay: .9s;
}
.gather.after .p2 {
  transition-delay: 1.05s;
}
.gather.after .p3 {
  transition-delay: 1.2s;
}
.g-ctrl {
  position: absolute;
  left: 16px;
  top: 16px;
  display: flex;
  background: rgba(255,255,255,.1);
  border-radius: 999px;
  padding: 4px;
  z-index: 3;
}
.g-ctrl button {
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  border: 0;
  background: none;
  color: #fff;
  padding: 7px 16px;
  border-radius: 999px;
  cursor: pointer;
}
.g-ctrl button[aria-pressed="true"] {
  background: var(--lime);
  color: var(--ink);
}
.ai-cols {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 20px;
}
.ai-cols a {
  position: relative;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 22px;
  padding: 24px 26px;
  text-decoration: none;
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 6px 22px;
  transition: background .3s,transform .35s var(--ease);
}
.ai-cols a:hover {
  background: rgba(255,255,255,.11);
  transform: translateY(-4px);
}
.ai-cols .ic {
  grid-row: span 3;
  width: 64px;
  height: 64px;
  border-radius: 20px;
  background: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 14px 30px -14px rgba(0,0,0,.6);
}
.ai-cols p {
  margin: 0;
  color: rgba(255,255,255,.84);
  font-size: 16px;
}
.ai-cols .go {
  color: var(--lime);
  font-weight: 600;
  font-size: 16px;
  margin-top: 6px;
}
/* ---------- Iparágak ---------- */
.markets {
  padding: 64px 0 60px;
  overflow: hidden;
  background: var(--alt);
}
.markets .head {
  flex-wrap: nowrap;
  align-items: flex-end;
}
.markets .head .lede {
  max-width: 40ch;
  font-size: 17px;
}
.marquee {
  overflow: hidden;
  padding: 18px 0;
  -webkit-mask-image: linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image: linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.track {
  display: flex;
  gap: 14px;
  width: max-content;
  list-style: none;
  margin: 0;
  padding: 0;
  animation: run var(--dur,40s) linear infinite;
}
.marquee:hover .track,.marquee:focus-within .track {
  animation-play-state: paused;
}
.marquee.rev .track {
  animation-direction: reverse;
}
@keyframes run {
  to {
    transform: translateX(calc(-50% - 7px));
  }
}
.mk a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 26px 14px 14px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #ECEFE8;
  box-shadow: var(--sh1);
  text-decoration: none;
  font-size: 19px;
  font-weight: 500;
  white-space: nowrap;
  transition: .25s;
}
.mk a::before {
  content: "";
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  background: var(--optimalnet-jel) center / contain no-repeat;
}
.mk a:hover {
  background: var(--green);
  color: #fff;
}
/* ---------- Rólunk röviden ---------- */
.story-sec {
  background: var(--alt);
  overflow: hidden;
}
.story {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 64px;
  align-items: start;
}
.story>div>p {
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 17px;
  max-width: 44ch;
}
.story>div>p.slogan {
  font-size: 21px;
  font-weight: 600;
  color: var(--green);
  margin-top: 14px;
}
.eras {
  display: grid;
  gap: 10px;
}
.era {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 16px;
  align-items: center;
  background: #fff;
  border: 1px solid #ECEFE8;
  border-radius: 18px;
  padding: 12px 18px;
  box-shadow: var(--sh1);
}
.era .yr {
  width: 70px;
  height: 70px;
  font-size: 15px!important;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 17px;
  font-weight: 600;
  color: var(--green);
  background: conic-gradient(var(--green) var(--p),var(--tint) 0);
  position: relative;
}
.era .yr::before {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background: #fff;
}
.era .yr span {
  position: relative;
}
.era strong {
  display: block;
  font-size: 19px;
}
.era div>span {
  font-size: 16px;
  color: var(--muted);
}
/* ---------- Folyamat ---------- */
.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 20px;
}
.steps li {
  background: #fff;
  border: 1px solid #ECEFE8;
  border-radius: 22px;
  padding: 22px 22px 20px;
  box-shadow: var(--sh1);
  position: relative;
}
.steps li::after {
  content: "";
  position: absolute;
  right: -14px;
  top: 52px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 0 4px var(--paper);
}
.steps li:last-child::after {
  display: none;
}
.ring {
  width: 52px;
  height: 52px;
  margin-bottom: 14px;
}
.steps h3 {
  margin: 0 0 6px;
  font-size: 19px;
  line-height: 1.25;
}
.steps p {
  margin: 0;
  font-size: 16px;
  color: var(--muted);
}
/* Végtelen folyamat */
.loop {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 48px;
  align-items: center;
}
.lm circle {
  fill: #fff;
  stroke: #12670C;
  stroke-width: 3;
  transition: fill .4s,stroke .4s;
}
.lm text {
  font: 600 17px Jost,system-ui,sans-serif;
  fill: #12670C;
  transition: fill .4s;
}
.lm.on circle {
  fill: #12670C;
  stroke: #B0E629;
}
.lm.on text {
  fill: #fff;
}
.lstep {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 16px;
  align-items: start;
  padding: 16px 20px;
  border-radius: 18px;
  border: 1px solid transparent;
  transition: background .4s,border-color .4s,box-shadow .4s,opacity .4s;
  opacity: .55;
}
.lstep .n {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 600;
  color: var(--green);
  border: 3px solid var(--green);
  transition: .4s;
}
.lstep h3 {
  margin: 0 0 4px;
  font-size: 19px;
  line-height: 1.25;
}
.lstep p {
  margin: 0;
  font-size: 15.5px;
  color: var(--muted);
}
.lstep.on {
  opacity: 1;
  background: #fff;
  border-color: #ECEFE8;
  box-shadow: var(--sh1);
}
.lstep.on .n {
  background: var(--green);
  color: #fff;
  border-color: var(--lime);
}
/* ---------- Referenciák ---------- */
.refs {
  padding: 56px 0 72px;
}
.logo-tile {
  width: 210px;
  height: 112px;
  border-radius: 22px;
  background: #fff;
  border: 1px solid #ECEFE8;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  box-shadow: var(--sh1);
}
.logo-tile img {
  max-height: 62px;
  max-width: 78%;
  width: auto;
  object-fit: contain;
}
/* ---------- Teszt ---------- */
.test {
  position: relative;
  display: grid;
  grid-template-columns: 1fr minmax(320px,420px);
  gap: 44px;
  align-items: center;
  background: var(--lime);
  border-radius: 32px;
  padding: 48px 52px;
  overflow: hidden;
}
.test>*:not(.bg-o) {
  position: relative;
  z-index: 1;
}
.test .bg-o {
  right: -120px;
  top: -160px;
  width: 520px;
  z-index: 0;
}
.test p {
  margin: 18px 0 28px;
  max-width: 46ch;
}
.quiz {
  background: #fff;
  border-radius: 26px;
  padding: 28px;
  display: grid;
  gap: 12px;
  box-shadow: 0 30px 60px -24px rgba(13,42,10,.45);
}
.qtop {
  display: flex;
  align-items: center;
  gap: 14px;
}
.qtop svg {
  width: 54px;
  height: 54px;
  flex-shrink: 0;
}
.qtop .n {
  font-size: 14px;
  color: var(--muted);
}
.qtop .q {
  font-weight: 600;
  font-size: 19px;
  line-height: 1.3;
}
.quiz button {
  font: inherit;
  text-align: left;
  background: var(--paper);
  color: var(--ink);
  border: 1.5px solid transparent;
  border-radius: 14px;
  padding: 13px 16px;
  font-size: 16px;
  cursor: pointer;
  transition: .2s;
}
.quiz button:hover {
  border-color: var(--green);
}
.quiz button[aria-pressed="true"] {
  border-color: var(--green);
  background: #E7F4C8;
  font-weight: 600;
}
.quiz .next {
  display: none;
  justify-self: start;
}
.quiz.done .next {
  display: inline-flex;
}
/* ---------- Tudástár ---------- */
.posts {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 20px;
}
.post {
  position: relative;
  background: #fff;
  border: 1px solid #ECEFE8;
  border-radius: 22px;
  overflow: hidden;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px 26px 22px;
  box-shadow: var(--sh1);
  transition: transform .35s var(--ease),box-shadow .35s var(--ease);
}
.post:hover {
  transform: translateY(-5px);
  box-shadow: var(--sh2);
}
.post .po {
  position: absolute;
  right: -26px;
  top: -26px;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  border: 14px solid rgba(176,230,41,.55);
  transition: transform .5s var(--ease);
}
.post:hover .po {
  transform: scale(1.15);
}
.post .cat {
  align-self: flex-start;
  background: var(--lime)!important;
  color: var(--ink)!important;
  font-size: 13px;
  font-weight: 600;
  color: var(--green);
  background: var(--tint);
  padding: 4px 11px;
  border-radius: 999px;
}
.post h3 {
  margin: 0;
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: -.015em;
}
.post p {
  margin: 0;
  font-size: 16px;
  color: var(--muted);
}
.post .read {
  font-weight: 600;
  font-size: 15px;
  color: var(--green);
  margin-top: auto;
  padding-top: 8px;
}
/* ---------- GYIK ---------- */
.faq {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 16px;
  align-items: start;
}
.faq details {
  background: #fff;
  border: 1px solid #ECEFE8;
  border-radius: 18px;
  box-shadow: var(--sh1);
  margin-bottom: 12px;
  overflow: hidden;
}
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 22px 64px 22px 26px;
  font-size: 19px;
  font-weight: 600;
  position: relative;
  transition: background .25s,color .25s;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary:hover {
  background: #F3F5EF;
  color: var(--green);
}
.faq summary::after {
  content: "";
  position: absolute;
  right: 26px;
  top: 50%;
  width: 11px;
  height: 11px;
  margin-top: -9px;
  border-right: 3px solid var(--green);
  border-bottom: 3px solid var(--green);
  transform: rotate(45deg);
  transition: transform .3s,margin .3s;
}
.faq details[open] summary::after {
  transform: rotate(-135deg);
  margin-top: -3px;
}
.faq details[open] summary {
  color: var(--green);
}
.faq details p {
  margin: 0;
  padding: 0 26px 24px;
  color: var(--muted);
}
/* ---------- Ajánlatkérés ---------- */
.offer {
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 72px;
}
form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  background: #fff;
  border-radius: 28px;
  padding: 36px;
  box-shadow: var(--sh2);
}
label {
  display: grid;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
}
input,textarea {
  font: inherit;
  font-size: 17px;
  color: var(--ink);
  background: var(--paper);
  border: 1.5px solid transparent;
  border-radius: 14px;
  padding: 14px 16px;
  transition: .2s;
}
input:focus,textarea:focus {
  border-color: var(--green);
  outline: none;
  background: #fff;
}
textarea {
  min-height: 140px;
  resize: vertical;
}
.full {
  grid-column: 1/-1;
}
.check {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-weight: 400;
  font-size: 15px;
}
.check input {
  width: 20px;
  height: 20px;
  margin-top: 3px;
  accent-color: var(--green);
}
/* ---------- Lábléc ---------- */
.site-footer {
  background: var(--night);
  color: rgba(255,255,255,.85);
  padding: 80px 0 36px;
  font-size: 16px;
  position: relative;
  overflow: hidden;
}
.fgrid {
  display: grid;
  grid-template-columns: 1.2fr .8fr 1.3fr 1fr;
  gap: 40px;
}
.site-footer h4 {
  font-size: 19px;
  margin: 0 0 16px;
  color: #fff;
}
.site-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 9px;
}
.site-footer a {
  text-decoration: none;
}
.site-footer a:hover {
  color: var(--lime);
}
.site-footer address {
  font-style: normal;
  display: grid;
  gap: 9px;
}
.fbottom {
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.15);
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  font-size: 15px;
  color: rgba(255,255,255,.65);
}
.fbottom ul {
  display: flex;
  gap: 20px;
  align-items: center;
}
.soc {
  gap: 10px;
}
.soc a {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  transition: background .25s,color .25s;
}
.soc a:hover {
  background: var(--lime);
  color: var(--ink)!important;
}
.ci {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.ci i {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(176,230,41,.14);
  color: var(--lime);
  margin-top: -6px;
}
/* ---------- Reszponzív ---------- */
@media (max-width:1100px) {
  .hero .wrap {
    grid-template-columns: 1fr;
  }
  .hero .system {
    transform: none;
    position: absolute;
    right: -46%;
    top: -30px;
    width: 118vw;
    max-width: none;
    margin: 0;
    opacity: .85;
  }
  .hero {
    min-height: 0;
    padding: 56px 0 110px;
  }
  .hero::after {
    background: linear-gradient(180deg,rgba(7,44,5,0) 0%,rgba(7,44,5,.55) 30%,rgba(7,44,5,.82) 60%);
  }
  .hero .wrap>.rv {
    padding-top: 84px;
  }
  .cards {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
  .cards.six,.cards.three {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
  .ai-top,.story,.offer {
    grid-template-columns: 1fr;
  }
  .facts .row {
    grid-template-columns: 1fr 1fr;
  }
  .facts .row>div:nth-child(3) {
    border-left: 0;
  }
  .steps {
    grid-template-columns: 1fr 1fr;
  }
  .steps li::after {
    display: none;
  }
  .loop {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .lstep {
    opacity: 1;
  }
  .posts {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
  .fgrid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width:860px) {
  .burger {
    display: block;
  }
  .site-header {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: #fff;
  }
  .logo {
    font-size: 30px;
  }
  .nav {
    position: fixed;
    inset: 84px 0 0 0;
    background: var(--paper);
    flex-direction: column;
    align-items: stretch;
    padding: 24px 32px;
    gap: 22px;
    overflow: auto;
    display: none;
  }
  .nav.open {
    display: flex;
  }
  .nav>ul {
    flex-direction: column;
    gap: 18px;
  }
  .drop {
    position: static;
    width: auto;
    max-height: none;
    box-shadow: none;
    display: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    margin-top: 10px;
  }
  .has-drop.open .drop {
    display: block;
  }
  .has-drop:hover .drop {
    display: none;
  }
  .has-drop.open:hover .drop {
    display: block;
  }
  .sec {
    padding: 84px 0;
  }
  .markets .head {
    flex-wrap: wrap;
  }
  .ai-cols {
    grid-template-columns: 1fr;
  }
  .ai>.wrap {
    border-radius: 0;
    padding: 56px 22px;
  }
  .out-band {
    grid-template-columns: 1fr;
    padding: 36px 22px;
  }
  form {
    grid-template-columns: 1fr;
    padding: 24px;
  }
  .faq {
    grid-template-columns: 1fr;
  }
  .test {
    padding: 36px 24px;
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .posts {
    grid-template-columns: 1fr;
  }
}
@media (max-width:560px) {
  .wrap {
    padding: 0 20px;
  }
  .cards,.cards.six,.cards.three,.cards.four,.steps {
    grid-template-columns: 1fr;
  }
  .facts .row {
    grid-template-columns: 1fr 1fr;
    border-radius: 18px;
  }
  .facts .row>div {
    padding: 12px 14px;
    gap: 8px;
    border-left: 0;
    border-top: 1px solid var(--line);
  }
  .facts .row>div:nth-child(-n+2) {
    border-top: 0;
  }
  .facts .row>div:nth-child(even) {
    border-left: 1px solid var(--line);
  }
  .facts b {
    font-size: 22px;
  }
  .facts span {
    font-size: 12.5px;
  }
  .fgrid {
    grid-template-columns: 1fr;
  }
  .mob-hide {
    display: none;
  }
  .pl.s {
    width: 32px;
    height: 32px;
  }
  .pl.m {
    width: 40px;
    height: 40px;
  }
  .pl.l {
    width: 46px;
    height: 46px;
  }
  .pl-lbl {
    display: none;
  }
  .gchip {
    font-size: 11.5px;
    padding: 5px 9px 5px 6px;
  }
  .gpill {
    font-size: 12px;
    padding: 6px 11px 6px 6px;
  }
  .gpill svg {
    width: 20px;
    height: 20px;
  }
}
/* ====== Aloldal-sablon ====== */
.sub-hero {
  position: relative;
  overflow: hidden;
  color: #fff;
  padding: 60px 0 68px;
  background: radial-gradient(620px 460px at 82% 50%,rgba(35,150,26,.5),transparent 70%),radial-gradient(420px 300px at 0% 100%,rgba(176,230,41,.10),transparent 70%),linear-gradient(160deg,#12670C 0%,#12670C 55%,#12670C 100%);
}
.sub-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(176,230,41,.18) 1.2px,transparent 1.3px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(520px 420px at 82% 50%,#000,transparent 75%);
  mask-image: radial-gradient(520px 420px at 82% 50%,#000,transparent 75%);
  pointer-events: none;
}
.sub-hero .wrap {
  display: block;
}
.sub-hero .wrap>.rv {
  max-width: 820px;
}
.sub-hero p {
  margin: 0 0 30px;
  font-size: 19px;
  color: rgba(255,255,255,.84);
  max-width: 52ch;
}
.sub-hero .btn-green {
  background: var(--lime);
  color: var(--ink);
}
.sub-hero .btn-green:hover {
  background: #fff;
}
.sub-hero .btn-outline {
  border-color: rgba(255,255,255,.55);
  color: #fff;
  background: transparent;
}
.sub-hero .btn-outline:hover {
  background: #fff;
  color: var(--green);
}
.hero-orbits {
  position: absolute;
  inset: 0;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg,transparent 30%,#000 62%);
  mask-image: linear-gradient(90deg,transparent 30%,#000 62%);
}
.hero-orbits svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.sub-hero .wrap {
  position: relative;
  z-index: 1;
}
.prose {
  max-width: 760px;
}
.prose p {
  margin: 0 0 18px;
  font-size: 18px;
  color: #2c3d29;
}
.prose a {
  color: var(--green);
  font-weight: 500;
}
.callout {
  margin: 26px 0;
  padding: 22px 26px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid #ECEFE8;
  border-left: 5px solid var(--lime);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.45;
  box-shadow: var(--sh1);
}
.lbl {
  margin: 26px 0 0;
  font-weight: 600;
  font-size: 17px;
}
.two {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 56px;
  align-items: start;
}
.quote {
  position: relative;
  margin: 0;
  padding: 64px 34px 30px 34px;
  border-radius: 26px;
  color: #fff;
  background: radial-gradient(500px 300px at 100% 0%,rgba(176,230,41,.14),transparent 60%),linear-gradient(150deg,#12670C,#12670C);
  box-shadow: var(--sh2);
}
.quote::before {
  content: "\201E";
  position: absolute;
  left: 30px;
  top: -28px;
  font-size: 120px;
  line-height: 1;
  color: var(--lime);
  font-family: Georgia,serif;
}
.quote p {
  margin: 18px 0 18px;
  font-size: 17.5px;
  line-height: 1.6;
  color: rgba(255,255,255,.92);
}
.quote cite {
  font-style: normal;
  font-size: 14px;
  font-weight: 600;
  color: var(--lime);
}
.fig {
  margin: 0;
  border-radius: 26px;
  overflow: hidden;
  background: #fff;
  padding: 8px;
  border: 2px solid rgba(176,230,41,.55);
  box-shadow: var(--sh1);
}
.fig img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 19px;
}
.ctapair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.ctabox {
  border-radius: 28px;
  padding: 40px;
  display: grid;
  gap: 14px;
  grid-template-rows: auto 1fr auto;
  position: relative;
  overflow: hidden;
}
.ctabox p {
  margin: 0 0 10px;
  font-size: 17px;
}
.ctabox .btn {
  justify-self: start;
  align-self: end;
}
.ctabox.dark {
  color: #fff;
  background: radial-gradient(500px 300px at 100% 0%,rgba(176,230,41,.14),transparent 60%),linear-gradient(150deg,#12670C,#12670C);
}
.ctabox.dark p {
  color: rgba(255,255,255,.85);
}
.ctabox.lime {
  background: var(--lime);
  color: var(--ink);
}
.end-band {
  position: relative;
  overflow: hidden;
  color: #fff;
  text-align: center;
  padding: 84px 0;
  background: radial-gradient(600px 400px at 50% 0%,rgba(176,230,41,.12),transparent 60%),linear-gradient(160deg,#12670C,#12670C);
}
.end-band p {
  margin: 0 0 28px;
  color: rgba(255,255,255,.82);
  font-size: 19px;
}
.end-band .ctas {
  justify-content: center;
}
.end-band .btn-green {
  background: var(--lime);
  color: var(--ink);
}
.end-band .btn-outline {
  border-color: rgba(255,255,255,.55);
  color: #fff;
  background: transparent;
}
.related {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 14px;
}
.related a {
  display: grid;
  gap: 8px;
  text-decoration: none;
  background: #fff;
  border: 1px solid #ECEFE8;
  border-radius: 18px;
  padding: 18px 20px;
  box-shadow: var(--sh1);
  transition: transform .3s var(--ease),box-shadow .3s var(--ease);
}
.related a:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh2);
}
.related .cat {
  justify-self: start;
  font-size: 12.5px;
  font-weight: 600;
  background: var(--lime);
  color: var(--ink);
  padding: 3px 10px;
  border-radius: 999px;
}
.related b {
  font-size: 16.5px;
  line-height: 1.35;
}
/* Aloldal: tömörebb térközök */
main .sec {
  padding: 64px 0;
}
.two {
  gap: 40px;
}
.head {
  margin-bottom: 28px;
}
.prose p {
  margin-bottom: 14px;
}
.callout {
  margin: 20px 0;
}
.end-band {
  padding: 64px 0;
}
@media (max-width:1000px) {
  .sub-hero .wrap,.two,.ctapair {
    grid-template-columns: 1fr;
  }
  .related {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width:1000px) {
  .two-side {
    margin-top: 0!important;
  }
  .two {
    gap: 28px;
  }
}
@media (max-width:560px) {
  main .sec {
    padding: 44px 0;
  }
  .quote {
    padding: 50px 22px 22px;
  }
  .quote::before {
    left: 20px;
    top: -30px;
    font-size: 100px;
  }
  .head {
    margin-bottom: 20px;
  }
  .end-band {
    padding: 48px 0;
  }
  .callout {
    padding: 16px 18px;
    font-size: 17px;
  }
  .ctapair {
    gap: 14px;
  }
  .related {
    grid-template-columns: 1fr;
  }
  .ctabox {
    padding: 28px 22px;
  }
  .sub-hero {
    padding: 48px 0 60px;
  }
}
.rv {
  opacity: 1;
  transform: none;
}
.hero-art-star-0 {
  left: 49.8%;
  top: 76.0%;
  width: 3px;
  height: 3px;
  animation-delay: 2.8s;
}
.hero-art-star-1 {
  left: 47.2%;
  top: 90.5%;
  width: 4px;
  height: 4px;
  animation-delay: 3.9s;
}
.hero-art-star-2 {
  left: 79.7%;
  top: 59.7%;
  width: 3px;
  height: 3px;
  animation-delay: 0.6s;
}
.hero-art-star-3 {
  left: 45.8%;
  top: 52.4%;
  width: 3px;
  height: 3px;
  animation-delay: 0.2s;
}
.hero-art-star-4 {
  left: 55.1%;
  top: 28.3%;
  width: 4px;
  height: 4px;
  animation-delay: 0.1s;
}
.hero-art-star-5 {
  left: 69.6%;
  top: 45.0%;
  width: 4px;
  height: 4px;
  animation-delay: 3.4s;
}
.hero-art-star-6 {
  left: 72.5%;
  top: 61.8%;
  width: 2px;
  height: 2px;
  animation-delay: 2.0s;
}
.hero-art-star-7 {
  left: 80.1%;
  top: 46.4%;
  width: 2px;
  height: 2px;
  animation-delay: 1.1s;
}
.hero-art-star-8 {
  left: 97.9%;
  top: 91.6%;
  width: 4px;
  height: 4px;
  animation-delay: 3.4s;
}
.hero-art-star-9 {
  left: 82.5%;
  top: 34.5%;
  width: 3px;
  height: 3px;
  animation-delay: 0.9s;
}
.hero-art-star-10 {
  left: 60.3%;
  top: 13.9%;
  width: 4px;
  height: 4px;
  animation-delay: 3.1s;
}
.hero-art-star-11 {
  left: 66.2%;
  top: 79.1%;
  width: 2px;
  height: 2px;
  animation-delay: 1.5s;
}
.hero-art-star-12 {
  left: 95.8%;
  top: 79.2%;
  width: 2px;
  height: 2px;
  animation-delay: 0.0s;
}
.hero-art-star-13 {
  left: 56.1%;
  top: 84.5%;
  width: 3px;
  height: 3px;
  animation-delay: 1.9s;
}
.hero-art-star-14 {
  left: 97.0%;
  top: 41.4%;
  width: 3px;
  height: 3px;
  animation-delay: 0.3s;
}
.hero-art-star-15 {
  left: 78.4%;
  top: 73.4%;
  width: 2px;
  height: 2px;
  animation-delay: 1.1s;
}