:root {

    --bg: #030712;

    --bg-soft: #08111f;

    --panel: #0b1626;

    --panel-2: #10233a;

    --gold: #69c9ff;

    --gold-light: #d9f5ff;

    --gold-dark: #2d6f99;

    --red: #184d76;

    --line: rgba(105,201,255,.28);

    --text: #eef8ff;

    --muted: #9fb8c9;

    --shadow: 0 30px 90px rgba(0,18,38,.52);

    --serif: Georgia, 'Times New Roman', serif;

    --sans: Inter, Arial, sans-serif;

}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  background:var(--bg)
}
body {
  margin:0;
  background:radial-gradient(circle at 18% 8%,rgba(34,119,177,.22) 0,transparent 30%),radial-gradient(circle at 82% 18%,rgba(98,212,255,.10) 0,transparent 26%),linear-gradient(180deg,#06101c 0,#030712 52%,#02050c 100%);
  color:var(--text);
  font-family:var(--sans);
  line-height:1.65;
  overflow-x:hidden
}
a {
  color:inherit;
  text-decoration:none
}
button {
  font:inherit
}
.page-noise {
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:999;
  opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E")
}
.topbar {
  position:fixed;
  inset:0 0 auto;
  z-index:50;
  height:82px;
  display:flex;
  align-items:center;
  padding:0 clamp(22px,4vw,70px);
  gap:32px;
  border-bottom:1px solid transparent;
  transition:.35s;
  background:linear-gradient(180deg,rgba(2,8,16,.82),transparent)
}
.topbar.scrolled {
  height:70px;
  background:rgba(3,10,20,.94);
  backdrop-filter:blur(18px);
  border-bottom-color:rgba(105,201,255,.18)
}
.brand {
  display:flex;
  align-items:center;
  gap:12px;
  font-family:var(--serif);
  letter-spacing:.16em;
  font-weight:700
}
.brand-mark {
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border:1px solid var(--gold);
  transform:rotate(45deg);
  color:var(--gold-light)
}
.brand-mark::first-letter {
  transform:rotate(-45deg)
}
.brand-mark {
  font-family:var(--serif)
}
.brand-mark::before {
  content:'';
  position:absolute
}
.brand-text {
  font-size:15px
}
.main-nav {
  display:flex;
  gap:27px;
  margin-left:auto
}
.main-nav a {
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:#cfe9f7;
  position:relative
}
.main-nav a::after {
  content:'';
  position:absolute;
  left:0;
  right:100%;
  bottom:-8px;
  height:1px;
  background:var(--gold);
  transition:.25s
}
.main-nav a:hover::after {
  right:0
}
.top-cta {
  border:1px solid var(--gold-dark);
  padding:10px 18px;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.12em
}
.menu-toggle {
  display:none;
  background:none;
  border:1px solid var(--gold-dark);
  color:var(--text);
  padding:8px 12px
}
.hero {
  min-height:100svh;
  position:relative;
  display:grid;
  place-items:center;
  padding:120px 24px 80px;
  isolation:isolate
}
.hero-media,.final-media {
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  z-index:-3
}
.hero-media video,.final-media video {
  width:100%;
  height:100%;
  object-fit:cover
}
.hero-vignette {
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        linear-gradient(180deg, rgba(2, 8, 16, .56), rgba(2, 8, 16, .88)),
        radial-gradient(circle at center, rgba(0, 0, 0, .08) 0, rgba(2, 7, 14, .72) 76%),
        linear-gradient(90deg, rgba(2, 8, 16, .72), transparent 45%, rgba(2, 8, 16, .58));
}
.hero-media video {
    filter: brightness(.38);
}
.hero-content {
  text-align:center;
  max-width:960px
}
.eyebrow {
  font-size:11px;
  font-weight:700;
  letter-spacing:.34em;
  color:var(--gold);
  text-transform:uppercase;
  margin-bottom:18px
}
.logo-slot {
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-width:min(680px,88vw);
  padding:24px 36px 20px;
  margin-bottom:15px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  font-family:var(--serif);
  text-shadow:0 3px 18px #000
}
.logo-slot::before,.logo-slot::after {
  content:'◆';
  color:var(--gold);
  font-size:12px;
  position:absolute
}
.logo-slot strong {
  font-size: clamp(58px, 8vw, 96px);
  letter-spacing: .10em;
  padding-left: .10em;
  white-space: nowrap;
  color: #eefbff;
  background: linear-gradient(
    180deg,
    #ffffff 10%,
    #79d8ff 55%,
    #28678e 100%
  );
  -webkit-background-clip: text;
  color: transparent;
  filter: drop-shadow(0 3px 1px #08233b);
}
.logo-slot-small {
  font-size:10px;
  letter-spacing:.42em;
  color:#9edfff
}
.logo-slot img {
  max-width:min(690px,88vw);
  max-height:250px
}
.hero h1,.section-heading h2,.intro h2,.final-cta h2,.info-copy h2 {
  font-family:var(--serif);
  font-weight:400;
  line-height:1.1;
  margin:0
}
.hero h1 {
  font-size:clamp(34px,5vw,66px)
}
.hero p {
  max-width:720px;
  margin:22px auto 30px;
  color:#c6dce8;
  font-size:clamp(15px,1.6vw,19px)
}
.hero-actions {
  display:flex;
  justify-content:center;
  gap:14px;
  flex-wrap:wrap
}
.btn {
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:170px;
  padding:14px 24px;
  border:1px solid var(--gold-dark);
  text-transform:uppercase;
  font-size:11px;
  font-weight:700;
  letter-spacing:.16em;
  transition:.25s;
  overflow:hidden
}
.btn-primary {
  background:linear-gradient(180deg,#78d7ff,#2d7fb1);
  color:#03101b;
  border-color:#d8f4ff;
  box-shadow:0 10px 32px rgba(52,165,224,.28),inset 0 1px 0 rgba(255,255,255,.26)
}
.btn-primary:hover {
  transform:translateY(-2px);
  filter:brightness(1.08)
}
.btn-ghost {
  background:rgba(10,2,3,.35)
}
.btn-ghost:hover {
  background:rgba(105,201,255,.10);
  border-color:var(--gold)
}
.hero-stats {
  display:flex;
  justify-content:center;
  gap:1px;
  margin-top:52px
}
.hero-stat {
  min-width:140px;
  padding:14px 24px;
  border-left:1px solid var(--line)
}
.hero-stat:last-child {
  border-right:1px solid var(--line)
}
.hero-stat strong {
  display:block;
  font-family:var(--serif);
  font-size:25px;
  color:var(--gold-light)
}
.hero-stat span {
  font-size:9px;
  letter-spacing:.22em;
  color:var(--muted)
}
.scroll-cue {
  position:absolute;
  bottom:26px;
  width:26px;
  height:42px;
  border:1px solid rgba(105,201,255,.50);
  border-radius:20px;
  display:flex;
  justify-content:center
}
.scroll-cue span {
  width:3px;
  height:8px;
  background:var(--gold);
  border-radius:4px;
  margin-top:8px;
  animation:scroll 1.8s infinite
}
@keyframes scroll {
  0% {
    opacity:0;
    transform:translateY(0)
  }
  30% {
    opacity:1
  }
  100% {
    opacity:0;
    transform:translateY(16px)
  }

}
.section-shell {
  width:min(1320px,calc(100% - 48px));
  margin:auto;
  padding:110px 0
}
.section-ornament {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  margin-bottom:68px;
  color:var(--gold)
}
.section-ornament span {
  height:1px;
  width:min(180px,22vw);
  background:linear-gradient(90deg,transparent,var(--gold-dark))
}
.section-ornament span:last-child {
  background:linear-gradient(90deg,var(--gold-dark),transparent)
}
.intro-grid {
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:80px;
  align-items:center
}
.intro h2 {
  font-size:clamp(38px,5vw,66px)
}
.intro-copy>p {
  color:var(--muted);
  max-width:600px;
  margin:25px 0 32px
}
.intro-points {
  display:grid;
  gap:12px
}
.intro-points div {
  display:flex;
  gap:12px;
  align-items:center;
  color:#d3e8f2
}
.intro-points span {
  color:var(--gold);
  font-size:9px
}
/* =========================================================
   KÉP / VIDEÓ KERET – OVERLAY MEGOLDÁS
   A tartalom a keret belső nyílásában van, a PNG fölötte ül.
   ========================================================= */
.media-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    min-height: 0;
    overflow: visible;
    background: transparent;
    isolation: isolate;
}

.media-frame-content {
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--media-width, 90%);
    height: var(--media-height, 85%);
    overflow: hidden;
    border-radius: 5%;
    background: #071421;
    z-index: 1;
    transform: translate(calc(-50% + var(--media-x, 0%)), calc(-50% + var(--media-y, 0%)));
    transform-origin: center;
    box-shadow:
        inset 0 0 70px rgba(0, 17, 34, .30),
        0 18px 48px rgba(0, 15, 34, .35);
}

.media-frame-content > img,
.media-frame-content > video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #071421;
}

.media-frame-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--frame-width, 108%);
    height: var(--frame-height, 108%);
    object-fit: fill;
    transform: translate(calc(-50% + var(--frame-x, 0%)), calc(-50% + var(--frame-y, 0%))) scale(var(--frame-scale, 1));
    transform-origin: center;
    pointer-events: none;
    z-index: 3;
    filter:
        hue-rotate(155deg)
        saturate(.72)
        brightness(1.18)
        contrast(1.08)
        drop-shadow(0 0 12px rgba(100, 210, 255, .22))
        drop-shadow(0 18px 26px rgba(0, 8, 18, .55));
}

.media-frame.no-custom-frame {
    overflow: hidden;
    border: 0;
    padding: 0;
}

.media-frame.no-custom-frame .media-frame-content {
    inset: 0;
    border-radius: 0;
}

.video-placeholder {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 12px;
    letter-spacing: .22em;
    background: rgba(4, 15, 28, .28);
    color: var(--gold-light);
    z-index: 2;
}

.section-heading {
  text-align:center;
  max-width:830px;
  margin:0 auto 70px
}
.section-heading h2 {
  font-size:clamp(38px,5vw,66px)
}
em {
  font-style:normal;
  color:var(--gold)
}
.section-heading p {
  color:var(--muted);
  margin:22px auto 0;
  max-width:650px
}
.feature-list {
  display:grid;
  gap:120px
}
.feature {
  display:grid;
  grid-template-columns:1fr 1.15fr;
  gap:80px;
  align-items:center
}
.feature-reverse .feature-copy {
  order:2
}
.feature-number {
  font-family:var(--serif);
  font-size:72px;
  line-height:1;
  color:rgba(105,201,255,.14);
  margin-bottom:-18px
}
.feature h3 {
  font-family:var(--serif);
  font-size:clamp(31px,4vw,52px);
  line-height:1.14;
  margin:0 0 22px;
  font-weight:400
}
.feature-copy>p {
  color:var(--muted);
  margin-bottom:28px
}
.feature ul {
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:10px
}
.feature li {
  padding-left:22px;
  position:relative;
  color:#d2e6f0
}
.feature li::before {
  content:'◆';
  position:absolute;
  left:0;
  color:var(--gold);
  font-size:8px;
  top:8px
}
.feature-media {
  aspect-ratio:16/9;
  min-height:0
}
.pillars {
  padding-top:50px
}
.pillar-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px
}
.pillar-card {
  position:relative;
  min-height:480px;
  overflow:hidden;
  border:1px solid rgba(105,201,255,.30);
  background-image:var(--pillar-bg);
  background-size:cover;
  background-position:center;
  box-shadow:var(--shadow);
  transition:.4s
}
.pillar-card:hover {
  transform:translateY(-8px);
  border-color:var(--gold)
}
.pillar-card::before {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(8,1,2,.05),rgba(8,1,2,.92))
}
.pillar-shade {
  position:absolute;
  inset:0;
  box-shadow:inset 0 0 90px rgba(0,0,0,.55)
}
.pillar-content {
  position:absolute;
  left:32px;
  right:32px;
  bottom:32px
}
.pillar-content>span {
  color:var(--gold);
  font-family:var(--serif);
  font-size:13px
}
.pillar-content h3 {
  font-family:var(--serif);
  font-size:36px;
  margin:5px 0 8px
}
.pillar-content p {
  color:#b9cfdd;
  margin:0;
  font-size:14px
}
.gallery-grid {
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:14px
}
.gallery-item {
  grid-column:span 4;
  position:relative;
  padding:0;
  border:1px solid rgba(105,201,255,.25);
  background:#071421;
  aspect-ratio:4/3;
  overflow:hidden;
  cursor:pointer
}
.gallery-item:nth-child(1),.gallery-item:nth-child(5) {
  grid-column:span 7
}
.gallery-item:nth-child(2),.gallery-item:nth-child(6) {
  grid-column:span 5
}
.gallery-item img,
.gallery-item video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.gallery-overlay {
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  background:rgba(9,1,2,.18);
  opacity:0;
  transition:.35s
}
.gallery-overlay b {
  width:52px;
  height:52px;
  border:1px solid var(--gold);
  display:grid;
  place-items:center;
  color:var(--gold-light);
  font-weight:400
}
.gallery-overlay small {
  text-transform:uppercase;
  letter-spacing:.13em
}
.gallery-item:hover img,
.gallery-item:hover video {
    transform: scale(1.045);
    filter: brightness(.58);
}
.gallery-item:hover .gallery-overlay {
  opacity:1
}
.info-panel {
  display:grid;
  grid-template-columns:.75fr 1.25fr;
  gap:70px;
  padding:70px;
  background:linear-gradient(135deg,rgba(14,43,72,.88),rgba(4,13,25,.94));
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  position:relative
}
.info-panel::before {
  content:'';
  position:absolute;
  inset:12px;
  border:1px solid rgba(214,163,71,.12);
  pointer-events:none
}
.info-copy h2 {
  font-size:clamp(36px,4vw,58px)
}
.info-copy p {
  color:var(--muted)
}
.info-grid {
  display:grid;
  grid-template-columns:1fr 1fr
}
.info-item {
  padding:22px;
  border-bottom:1px solid rgba(105,201,255,.16)
}
.info-item:nth-child(odd) {
  border-right:1px solid rgba(105,201,255,.16)
}
.info-item span {
  display:block;
  text-transform:uppercase;
  font-size:9px;
  letter-spacing:.18em;
  color:var(--muted)
}
.info-item strong {
  font-family:var(--serif);
  font-size:23px;
  color:var(--gold-light);
  font-weight:400
}
.final-cta {
  min-height:660px;
  position:relative;
  display:grid;
  place-items:center;
  padding:110px 24px;
  isolation:isolate
}
.final-overlay {
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,#030712 0,rgba(3,13,27,.68) 25%,rgba(2,9,20,.82) 100%);
  z-index:-2
}
.final-content {
  text-align:center;
  max-width:850px
}
.final-content h2 {
  font-size:clamp(42px,6vw,78px)
}
.final-content p {
  color:#c8deea;
  margin:22px auto 31px;
  max-width:650px
}
.final-content .section-ornament {
  margin-bottom:34px
}
.footer {
  min-height:90px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:25px clamp(24px,5vw,80px);
  border-top:1px solid rgba(105,201,255,.16);
  color:var(--muted);
  font-size:12px
}
.footer strong {
  color:var(--gold-light);
  margin-right:15px;
  letter-spacing:.2em
}
.back-to-top {
  background:none;
  border:0;
  color:var(--gold);
  cursor:pointer;
  text-transform:uppercase;
  font-size:10px;
  letter-spacing:.13em
}
.lightbox {
  width:min(1100px,92vw);
  max-width:none;
  border:1px solid var(--gold-dark);
  padding:16px;
  background:#020710;
  color:var(--text);
  box-shadow:0 30px 120px #000
}
.lightbox::backdrop {
  background:rgba(0,0,0,.88);
  backdrop-filter:blur(8px)
}
.lightbox-content img,.lightbox-content video {
  display:block;
  width:100%;
  max-height:78vh;
  object-fit:contain
}
.lightbox-close {
  position:absolute;
  right:20px;
  top:20px;
  width:42px;
  height:42px;
  border:1px solid var(--gold);
  background:#071421;
  color:var(--gold-light);
  font-size:26px;
  z-index:2;
  cursor:pointer
}
.lightbox-caption {
  text-align:center;
  padding:14px 0 0;
  color:var(--muted)
}
.reveal {
  opacity:0;
  transform:translateY(34px);
  transition:opacity .8s ease,transform .8s ease
}
.reveal.visible {
  opacity:1;
  transform:none
}
@media (max-width:1000px) {
  .main-nav {
    display:none;
    position:absolute;
    top:70px;
    left:20px;
    right:20px;
    background:#06111d;
    border:1px solid var(--line);
    padding:22px;
    flex-direction:column
  }
  .main-nav.open {
    display:flex
  }
  .menu-toggle {
    display:block;
    margin-left:auto
  }
  .top-cta {
    display:none
  }
  .intro-grid,.feature,.info-panel {
    grid-template-columns:1fr;
    gap:45px
  }
  .feature-reverse .feature-copy {
    order:0
  }
  .pillar-grid {
    grid-template-columns:1fr 1fr
  }
  .pillar-card:last-child {
    grid-column:1/-1
  }
  .info-panel {
    padding:44px
  }
  .section-shell {
    padding:80px 0
  }

}
@media (max-width:680px) {
  .topbar {
    height:68px;
    padding:0 18px
  }
  .brand-text {
    display:none
  }
  .hero {
    padding-top:100px
  }
  .logo-slot {
    min-width:92vw;
    padding:18px 10px
  }
  .logo-slot strong {
    font-size:38px
  }
  .hero-stats {
    gap:0
  }
  .hero-stat {
    min-width:0;
    padding:10px 16px
  }
  .section-shell {
    width:min(100% - 30px,1320px);
    padding:68px 0
  }
  .section-ornament {
    margin-bottom:45px
  }
  .pillar-grid {
    grid-template-columns:1fr
  }
  .pillar-card:last-child {
    grid-column:auto
  }
  .pillar-card {
    min-height:390px
  }
  .gallery-grid {
    grid-template-columns:1fr
  }
  .gallery-item,.gallery-item:nth-child(1),.gallery-item:nth-child(2),.gallery-item:nth-child(5),.gallery-item:nth-child(6) {
    grid-column:auto
  }
  .info-panel {
    padding:34px 22px
  }
  .info-grid {
    grid-template-columns:1fr
  }
  .info-item:nth-child(odd) {
    border-right:0
  }
  .footer {
    flex-direction:column;
    gap:14px;
    text-align:center
  }
  .feature-list {
    gap:80px
  }

}

/* =========================================================
   ALDREON ICE THEME – FINOMHANGOLÁS
   ========================================================= */

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    background:
        radial-gradient(circle at 50% -10%, rgba(111, 210, 255, .12), transparent 38%),
        linear-gradient(180deg, rgba(85, 184, 231, .025), transparent 32%);
}

.topbar.scrolled {
    box-shadow: 0 12px 38px rgba(0, 18, 40, .35);
}

.logo-slot strong {
    background: linear-gradient(180deg, #ffffff 4%, #bdeeff 42%, #58bfe9 70%, #1f648c 100%);
    -webkit-background-clip: text;
    color: transparent;
    filter: drop-shadow(0 0 14px rgba(105, 201, 255, .26));
}

.btn-primary {
    background: linear-gradient(180deg, #a9ecff 0%, #4eb6e5 48%, #216f9c 100%);
    border-color: #d9f7ff;
    color: #03101b;
}

.btn-ghost {
    background: rgba(8, 28, 47, .34);
}

.btn-ghost:hover {
    background: rgba(105, 201, 255, .12);
    box-shadow: inset 0 0 28px rgba(105, 201, 255, .06);
}

.section-ornament,
.feature li::before,
.scroll-cue span {
    filter: drop-shadow(0 0 8px rgba(105, 201, 255, .4));
}



.pillar-card {
    border-color: rgba(105, 201, 255, .24);
}

.pillar-card:hover {
    border-color: var(--gold);
    box-shadow:
        0 26px 90px rgba(0, 16, 36, .52),
        0 0 28px rgba(105, 201, 255, .08);
}

.info-panel {
    box-shadow:
        0 30px 90px rgba(0, 13, 30, .48),
        inset 0 1px 0 rgba(194, 238, 255, .04);
}

.lightbox {
    background: #020710;
    box-shadow: 0 30px 120px #000, 0 0 40px rgba(105, 201, 255, .10);
}

::selection {
    background: rgba(105, 201, 255, .28);
    color: #fff;
}

/* =========================================================
   ALDREON ICE – PREMIUM DARK LUXURY BACKGROUND
   Fekete / mélykék / jeges ezüst, visszafogott fényekkel.
   ========================================================= */

:root {
    --bg: #02050a;
    --bg-soft: #07101a;
    --panel: #09131f;
    --panel-2: #0d1b2a;

    --gold: #79c8ee;
    --gold-light: #e4f7ff;
    --gold-dark: #315f7b;

    --line: rgba(139, 207, 237, .20);
    --text: #f1f7fb;
    --muted: #9eb0bd;

    --shadow:
        0 34px 90px rgba(0, 5, 13, .72),
        0 1px 0 rgba(220, 246, 255, .025);
}

html {
    background: #02050a;
}

body {
    position: relative;
    isolation: isolate;
    background:
        radial-gradient(ellipse at 50% -12%, rgba(70, 145, 188, .16) 0%, rgba(19, 50, 73, .07) 28%, transparent 58%),
        radial-gradient(ellipse at 8% 46%, rgba(36, 91, 128, .08) 0%, transparent 39%),
        radial-gradient(ellipse at 92% 58%, rgba(52, 115, 150, .055) 0%, transparent 42%),
        linear-gradient(180deg, #06101a 0%, #030810 23%, #02050a 56%, #010308 100%);
}

/* Finom, selyemszerű függőleges fény és vignetta */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background:
        linear-gradient(90deg,
            rgba(0, 0, 0, .44) 0%,
            transparent 18%,
            rgba(118, 194, 227, .018) 49%,
            transparent 82%,
            rgba(0, 0, 0, .48) 100%),
        radial-gradient(ellipse at center,
            transparent 20%,
            rgba(0, 3, 8, .18) 66%,
            rgba(0, 2, 6, .58) 100%);
}

/* Nagyon halvány prémium szövet/fém textúra */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: .22;
    background-image:
        linear-gradient(135deg, rgba(207, 240, 255, .018) 25%, transparent 25%),
        linear-gradient(225deg, rgba(207, 240, 255, .014) 25%, transparent 25%),
        linear-gradient(45deg, rgba(0, 0, 0, .08) 25%, transparent 25%),
        linear-gradient(315deg, rgba(0, 0, 0, .08) 25%, transparent 25%);
    background-position: 12px 0, 12px 0, 0 0, 0 0;
    background-size: 24px 24px;
}

/* A régi erős zaj helyett finom szemcsézettség */
.page-noise {
    opacity: .022;
    mix-blend-mode: soft-light;
}

/* Navigáció: fekete üveg + vékony ezüst perem */
.topbar {
    background: linear-gradient(180deg, rgba(1, 5, 10, .88), rgba(2, 8, 15, .28), transparent);
}

.topbar.scrolled {
    background:
        linear-gradient(180deg, rgba(6, 15, 24, .97), rgba(2, 7, 13, .96));
    border-bottom-color: rgba(137, 207, 239, .16);
    box-shadow:
        0 16px 46px rgba(0, 4, 12, .52),
        inset 0 -1px 0 rgba(218, 246, 255, .025);
}

/* Szekciók közötti finom luxus elválasztás */
.section-shell {
    position: relative;
}

.section-shell::before {
    content: "";
    position: absolute;
    top: 0;
    left: 8%;
    right: 8%;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(108, 180, 215, .08) 24%,
        rgba(201, 237, 252, .15) 50%,
        rgba(108, 180, 215, .08) 76%,
        transparent
    );
}

/* Címek hideg fehér-ezüst tónussal */
.hero h1,
.section-heading h2,
.intro h2,
.final-cta h2,
.info-copy h2,
.feature h3,
.pillar-content h3 {
    color: #edf7fc;
    text-shadow:
        0 2px 18px rgba(0, 0, 0, .62),
        0 0 22px rgba(91, 181, 222, .035);
}

.eyebrow,
.logo-slot-small,
.feature-number,
.pillar-content > span {
    color: #7dc5e8;
}

/* Gombok: fémes, nem neon */
.btn {
    border-color: rgba(112, 183, 218, .42);
    box-shadow: inset 0 1px 0 rgba(236, 250, 255, .035);
}

.btn-primary {
    background:
        linear-gradient(180deg, #bcecff 0%, #72bedf 7%, #397fa4 54%, #1d4c69 100%);
    border-color: rgba(222, 248, 255, .78);
    color: #03101a;
    box-shadow:
        0 13px 34px rgba(10, 73, 109, .28),
        inset 0 1px 0 rgba(255, 255, 255, .54),
        inset 0 -1px 0 rgba(0, 24, 40, .48);
}

.btn-primary:hover {
    filter: brightness(1.06);
    box-shadow:
        0 16px 42px rgba(17, 99, 140, .34),
        inset 0 1px 0 rgba(255, 255, 255, .62);
}

.btn-ghost {
    background:
        linear-gradient(180deg, rgba(17, 38, 55, .66), rgba(4, 13, 22, .72));
}

.btn-ghost:hover {
    background:
        linear-gradient(180deg, rgba(28, 61, 82, .72), rgba(6, 19, 30, .78));
    border-color: rgba(154, 222, 250, .52);
}

/* Panelek és kártyák: sötét lakk/fém felület */
.info-panel {
    background:
        radial-gradient(circle at 18% 0%, rgba(93, 169, 205, .075), transparent 38%),
        linear-gradient(135deg, rgba(12, 29, 44, .96), rgba(3, 9, 17, .98));
    border-color: rgba(116, 186, 220, .19);
    box-shadow:
        0 38px 100px rgba(0, 4, 12, .66),
        inset 0 1px 0 rgba(224, 246, 255, .035),
        inset 0 0 70px rgba(46, 121, 158, .025);
}

.info-panel::before {
    border-color: rgba(151, 214, 241, .07);
}

.pillar-card {
    border-color: rgba(119, 187, 219, .17);
    box-shadow:
        0 30px 88px rgba(0, 4, 12, .58),
        inset 0 1px 0 rgba(228, 248, 255, .025);
}

.pillar-card::before {
    background:
        linear-gradient(180deg, rgba(1, 6, 11, .02) 0%, rgba(2, 8, 15, .46) 46%, rgba(1, 4, 9, .96) 100%);
}

.pillar-card:hover {
    border-color: rgba(137, 210, 241, .42);
    box-shadow:
        0 38px 110px rgba(0, 5, 14, .68),
        0 0 34px rgba(85, 175, 216, .055),
        inset 0 1px 0 rgba(232, 250, 255, .045);
}

/* Kép/videó környéke: mély fekete, prémium árnyékkal */
.media-frame-content {
    background:
        radial-gradient(circle at center, #0b1720 0%, #050b11 70%, #020407 100%);
    box-shadow:
        0 28px 76px rgba(0, 3, 9, .72),
        inset 0 0 75px rgba(0, 8, 18, .38);
}

.media-frame-content > img,
.media-frame-content > video {
    background: #03070c;
}

/* Jeges keret: inkább ezüst/acél, kevésbé rikító cián */
.media-frame-overlay {
    filter:
        hue-rotate(156deg)
        saturate(.52)
        brightness(1.08)
        contrast(1.14)
        drop-shadow(0 2px 0 rgba(232, 250, 255, .06))
        drop-shadow(0 18px 28px rgba(0, 4, 12, .68));
}

/* Galéria és lightbox */
.gallery-item {
    background: #03070c;
    border-color: rgba(115, 184, 217, .15);
    box-shadow: 0 18px 52px rgba(0, 4, 12, .42);
}

.lightbox {
    background:
        radial-gradient(circle at 50% 0%, rgba(77, 151, 187, .08), transparent 38%),
        #02050a;
    border-color: rgba(126, 199, 232, .30);
    box-shadow:
        0 38px 140px rgba(0, 0, 0, .94),
        0 0 50px rgba(62, 145, 186, .055);
}

/* Footer */
.footer {
    background: linear-gradient(180deg, transparent, rgba(0, 4, 10, .45));
    border-top-color: rgba(118, 186, 218, .12);
}

/* Kiemelés */
::selection {
    background: rgba(91, 174, 214, .32);
    color: #fff;
}

/* =========================================================
   ALDREON SIGNATURE LUXURY
   Tipográfia + háttérornamentika + keretcsillanás
   ========================================================= */

/* Prémium címfontok. Internet nélkül a megadott tartalék fontokra vált. */
@import url("https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700&family=Marcellus&family=Inter:wght@400;500;600;700&display=swap");

:root {
    --serif: "Cinzel", "Marcellus", Georgia, "Times New Roman", serif;
    --display-serif: "Cinzel", "Marcellus", Georgia, serif;
    --sans: "Inter", Arial, sans-serif;
}

/* Főcímek */
.hero h1,
.section-heading h2,
.intro h2,
.final-cta h2,
.info-copy h2,
.feature h3,
.pillar-content h3 {
    font-family: var(--display-serif);
    font-weight: 600;
    letter-spacing: .035em;
}

/* Kisebb kiemelések */
.eyebrow,
.logo-slot-small,
.feature-number,
.pillar-content > span,
.info-item span,
.btn,
.main-nav a {
    letter-spacing: .17em;
}

.logo-slot strong {
    font-family: var(--display-serif);
    font-weight: 700;
    letter-spacing: .135em;
}

/* =========================================================
   HALVÁNY ALDREON HÁTTÉRORNAMENTIKA
   ========================================================= */

body::before {
    background:
        radial-gradient(ellipse at 50% -12%, rgba(70, 145, 188, .14) 0%, rgba(19, 50, 73, .055) 28%, transparent 58%),
        radial-gradient(circle at 50% 22%, rgba(139, 220, 255, .025), transparent 30%),
        linear-gradient(90deg,
            rgba(0, 0, 0, .44) 0%,
            transparent 18%,
            rgba(118, 194, 227, .014) 49%,
            transparent 82%,
            rgba(0, 0, 0, .48) 100%),
        radial-gradient(ellipse at center,
            transparent 20%,
            rgba(0, 3, 8, .18) 66%,
            rgba(0, 2, 6, .58) 100%);
}

/* Finom, szimmetrikus jég-rúna motívum a nagyobb szekciók mögött */
.section-shell::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 52%;
    width: min(760px, 72vw);
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: -1;
    opacity: .085;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 800'%3E%3Cg fill='none' stroke='%2379c8ee' stroke-opacity='.7'%3E%3Ccircle cx='400' cy='400' r='264' stroke-width='1'/%3E%3Ccircle cx='400' cy='400' r='206' stroke-width='.7' stroke-dasharray='4 16'/%3E%3Cpath d='M400 96v608M96 400h608M185 185l430 430M615 185L185 615' stroke-width='.55'/%3E%3Cpath d='M400 145l34 92 93-34-34 93 92 34-92 34 34 93-93-34-34 92-34-92-93 34 34-93-92-34 92-34-34-93 93 34z' stroke-width='1.1'/%3E%3Cpath d='M400 245l31 70 76-8-45 61 45 61-76-8-31 70-31-70-76 8 45-61-45-61 76 8z' stroke-width='.8'/%3E%3C/g%3E%3C/svg%3E");
    filter: blur(.15px) drop-shadow(0 0 22px rgba(74, 167, 210, .10));
}

/* Ne legyen minden szekcióban pontosan ugyanott */
.section-shell:nth-of-type(even)::after {
    left: 77%;
    top: 44%;
    width: min(610px, 62vw);
    opacity: .055;
    transform: translate(-50%, -50%) rotate(18deg);
}

.section-shell:nth-of-type(3n)::after {
    left: 23%;
    top: 58%;
    transform: translate(-50%, -50%) rotate(-14deg);
}

/* =========================================================
   KERET: FINOM CSILLANÁS + HOVER
   ========================================================= */

.media-frame {
    transition:
        transform .55s cubic-bezier(.22, .61, .36, 1),
        filter .55s ease;
}

/* A keret enyhén "lélegzik", de nem mozog folyamatosan */
.media-frame:hover {
    transform: translateY(-3px);
    filter: brightness(1.025);
}

.media-frame-overlay {
    transition:
        filter .55s ease,
        opacity .55s ease;
}

.media-frame:hover .media-frame-overlay {
    filter:
        hue-rotate(156deg)
        saturate(.58)
        brightness(1.14)
        contrast(1.16)
        drop-shadow(0 2px 0 rgba(232, 250, 255, .09))
        drop-shadow(0 0 16px rgba(102, 202, 240, .13))
        drop-shadow(0 22px 32px rgba(0, 4, 12, .72));
}

/* Fénycsík csak hoverkor fut végig a kereten */
.media-frame::after {
    content: "";
    position: absolute;
    top: -24%;
    bottom: -24%;
    left: -42%;
    width: 23%;
    z-index: 4;
    pointer-events: none;
    opacity: 0;
    transform: skewX(-18deg);
    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(218, 247, 255, .02) 16%,
            rgba(232, 251, 255, .22) 48%,
            rgba(185, 232, 250, .055) 72%,
            transparent 100%
        );
    filter: blur(1px);
}

.media-frame:hover::after {
    opacity: 1;
    animation: aldreon-frame-shine 1.35s cubic-bezier(.21, .6, .35, 1) forwards;
}

@keyframes aldreon-frame-shine {
    0% {
        left: -42%;
        opacity: 0;
    }
    14% {
        opacity: .70;
    }
    72% {
        opacity: .42;
    }
    100% {
        left: 122%;
        opacity: 0;
    }
}

/* A felső kő körül finom, középre koncentrált hideg fény */
.media-frame::before {
    content: "";
    position: absolute;
    z-index: 2;
    pointer-events: none;
    top: -2%;
    left: 50%;
    width: 20%;
    height: 18%;
    transform: translateX(-50%);
    border-radius: 50%;
    opacity: 0;
    background: radial-gradient(
        ellipse at center,
        rgba(189, 238, 255, .16) 0%,
        rgba(94, 190, 232, .055) 36%,
        transparent 72%
    );
    filter: blur(8px);
    transition: opacity .45s ease;
}

.media-frame:hover::before {
    opacity: .9;
}

/* A screenshot/videó is finoman reagáljon */
.media-frame-content > img,
.media-frame-content > video {
    transition:
        transform .75s cubic-bezier(.22, .61, .36, 1),
        filter .65s ease;
}

.media-frame:hover .media-frame-content > img,
.media-frame:hover .media-frame-content > video {
    transform: scale(1.012);
    filter: brightness(1.035) contrast(1.018);
}

/* Mobilon és csökkentett mozgásnál ne fusson a csillanás */
@media (hover: none), (prefers-reduced-motion: reduce) {
    .media-frame,
    .media-frame-overlay,
    .media-frame-content > img,
    .media-frame-content > video {
        transition: none;
    }

    .media-frame:hover {
        transform: none;
    }

    .media-frame::after,
    .media-frame::before {
        display: none;
    }
}

@media (max-width: 680px) {
    .section-shell::after {
        width: 115vw;
        opacity: .045;
    }
}

/* =========================================================
   ALDREON HERO WORDMARK – VÉGSŐ LOGÓBLOKK
   A meglévő logo-slot komponens prémium fallback megjelenése.
   Ha a content.js hero.logo mezőjébe képet adsz, az továbbra is
   automatikusan lecseréli ezt a wordmarkot.
   ========================================================= */

.logo-slot {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: min(940px, 94vw);
    min-width: 0;
    padding: 26px 40px 24px;
    margin: 4px auto 18px;
    border: 0;
    isolation: isolate;
    text-shadow: none;
}

.logo-slot::before,
.logo-slot::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    pointer-events: none;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(95, 171, 207, .10) 12%,
        rgba(196, 233, 248, .28) 50%,
        rgba(95, 171, 207, .10) 88%,
        transparent 100%
    );
    box-shadow: 0 0 14px rgba(82, 174, 216, .06);
}

.logo-slot::before {
    top: 0;
}

.logo-slot::after {
    bottom: 0;
}

.logo-slot-emblem {
    position: relative;
    width: 54px;
    height: 54px;
    margin-bottom: 18px;
    display: grid;
    place-items: center;
    transform: rotate(45deg);
    border: 1px solid rgba(169, 224, 247, .56);
    background:
        linear-gradient(135deg, rgba(29, 75, 103, .78), rgba(3, 12, 21, .97));
    box-shadow:
        0 15px 38px rgba(0, 4, 12, .62),
        inset 0 0 22px rgba(105, 201, 255, .055),
        0 0 20px rgba(105, 201, 255, .055);
}

.logo-slot-emblem::before,
.logo-slot-emblem::after {
    content: "";
    position: absolute;
    inset: 7px;
    border: 1px solid rgba(205, 239, 252, .08);
}

.logo-slot-emblem::after {
    inset: 14px;
    border-color: rgba(111, 201, 239, .11);
}

.logo-slot-emblem span {
    position: relative;
    z-index: 2;
    display: block;
    transform: rotate(-45deg);
    font-family: var(--display-serif, var(--serif));
    font-size: 23px;
    font-weight: 600;
    line-height: 1;
    color: #eefaff;
    text-shadow:
        0 2px 10px rgba(0, 0, 0, .72),
        0 0 12px rgba(112, 207, 247, .12);
}

.logo-slot strong {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: visible;
    text-align: center;
    white-space: nowrap;

    font-family: var(--display-serif, var(--serif));
    font-size: clamp(48px, 6.4vw, 90px);
    font-weight: 600;
    line-height: .94;
    letter-spacing: .075em;
    padding-left: .075em;

    color: transparent;
    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #dff5ff 18%,
            #a9d8ec 42%,
            #5f9fbd 68%,
            #275f7b 100%
        );
    -webkit-background-clip: text;
    background-clip: text;

    filter:
        drop-shadow(0 6px 2px rgba(0, 5, 12, .72))
        drop-shadow(0 0 20px rgba(88, 177, 218, .075));
}

.logo-slot-small {
    display: block;
    margin-top: 18px;
    font-family: var(--sans);
    font-size: 9px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .48em;
    padding-left: .48em;
    color: rgba(143, 202, 228, .78);
    text-transform: uppercase;
    text-shadow: 0 2px 14px rgba(0, 0, 0, .72);
}

.logo-slot img {
    display: block;
    max-width: min(680px, 84vw);
    width: auto;
    max-height: 245px;
    object-fit: contain;
    filter:
        drop-shadow(0 16px 34px rgba(0, 4, 12, .72))
        drop-shadow(0 0 18px rgba(90, 180, 221, .095));
}

.media-frame-content img[src$=".gif"],
.media-frame-content img[src*=".gif?"] {
    width: 88%;
    height: 88%;
    object-fit: contain;
    object-position: center;
    margin: auto;
}

@media (max-width: 680px) {
    .logo-slot {
        width: 92vw;
        padding: 20px 12px 18px;
    }

    .logo-slot-emblem {
        width: 44px;
        height: 44px;
        margin-bottom: 15px;
    }

    .logo-slot-emblem span {
        font-size: 19px;
    }

    .logo-slot strong {
        font-size: clamp(34px, 10vw, 54px);
        letter-spacing: .055em;
        padding-left: .055em;
    }

    .logo-slot-small {
        margin-top: 14px;
        font-size: 7px;
        letter-spacing: .32em;
        padding-left: .32em;
    }
}

/* ===== ALDREON TARTALMI BLOKKOK ===== */
.story-grid,.economy-grid{display:grid;grid-template-columns:1fr 1.12fr;gap:78px;align-items:center}.story-copy h2,.economy-copy h2,.balance-copy h2{font-family:var(--serif);font-weight:400;font-size:clamp(38px,5vw,66px);line-height:1.08;margin:0 0 24px}.story-copy>p,.economy-copy>p,.balance-copy>p{color:var(--muted);margin:0 0 28px}.story-points{display:grid;gap:12px}.story-points div{display:flex;gap:12px;align-items:flex-start;color:#d3e8f2}.story-points span{color:var(--gold);font-size:9px;margin-top:8px}.progression-track{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(105,201,255,.16);border:1px solid rgba(105,201,255,.16)}.progression-step{position:relative;padding:34px 28px;background:linear-gradient(160deg,rgba(14,38,62,.96),rgba(4,12,23,.98));min-height:250px}.progression-step>span{font-family:var(--serif);font-size:48px;color:rgba(105,201,255,.18)}.progression-step h3{font-family:var(--serif);font-size:26px;margin:18px 0 10px}.progression-step p{color:var(--muted);font-size:14px;margin:0}.economy-grid{grid-template-columns:1.12fr 1fr}.economy-cards{display:grid;gap:12px}.economy-cards article{padding:18px 20px;border-left:2px solid var(--gold);background:rgba(9,29,48,.72)}.economy-cards h3{margin:0 0 5px;font-family:var(--serif);font-size:20px}.economy-cards p{margin:0;color:var(--muted);font-size:13px}.adventure-list{display:grid;gap:100px}.adventure-card{display:grid;grid-template-columns:.9fr 1.1fr;gap:70px;align-items:center}.adventure-reverse .adventure-copy{order:2}.adventure-copy h3{font-family:var(--serif);font-size:clamp(34px,4vw,52px);font-weight:400;margin:0 0 18px}.adventure-copy p{color:var(--muted)}.adventure-copy ul{list-style:none;padding:0;display:grid;gap:8px}.adventure-copy li::before{content:'◆';color:var(--gold);font-size:8px;margin-right:11px}.balance-panel{display:grid;grid-template-columns:1fr 1.1fr;gap:65px;align-items:center;padding:55px;background:linear-gradient(135deg,rgba(14,43,72,.9),rgba(4,13,25,.96));border:1px solid var(--line);box-shadow:var(--shadow)}.reason-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.reason-card{padding:30px 24px;min-height:245px;border:1px solid rgba(105,201,255,.2);background:linear-gradient(160deg,rgba(12,34,56,.84),rgba(3,10,20,.95))}.reason-card>span{display:block;color:var(--gold);font-size:25px;margin-bottom:28px}.reason-card h3{font-family:var(--serif);font-size:23px;margin:0 0 12px}.reason-card p{color:var(--muted);font-size:14px;margin:0}@media(max-width:980px){.story-grid,.economy-grid,.adventure-card,.balance-panel{grid-template-columns:1fr;gap:42px}.adventure-reverse .adventure-copy{order:0}.progression-track,.reason-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:620px){.progression-track,.reason-grid{grid-template-columns:1fr}.balance-panel{padding:28px}.story-grid,.economy-grid{gap:30px}}


/* Fejlődési út – egymás alatti, adminból bővíthető képes állomások */
.progression-track {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(52px, 7vw, 92px);
  max-width: 1000px;
  margin: 0 auto;
  background: transparent;
  border: 0;
}
.progression-step {
  min-height: 0;
  padding: 0;
  background: transparent;
  display: grid;
  gap: 20px;
}
.progression-step .progression-media {
  width: 100%;
}
.progression-copy {
  padding: 0 10px;
  text-align: center;
}
.progression-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 7px;
  color: var(--gold);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.progression-meta span {
  font-family: var(--serif);
  font-size: 24px;
  color: var(--gold-light);
}
.progression-meta b { font-weight: 700; }
.progression-step h3 {
  font-family: var(--serif);
  font-size: clamp(27px, 3vw, 40px);
  font-weight: 400;
  margin: 0 0 8px;
}
.progression-step p {
  max-width: 720px;
  margin: 0 auto;
  color: var(--muted);
}
section[hidden] { display: none !important; }
@media (max-width: 620px) {
  .progression-track { gap: 46px; }
  .progression-copy { padding: 0; }
}



/* =========================================================
   KEZDÉS – TÖBB BLOKK, A RENDSZEREKHEZ AZONOS LOGIKÁVAL
   ========================================================= */
.start-list { display:grid; gap:120px; }
.start-block { width:100%; }
@media (max-width:680px) { .start-list { gap:80px; } }


/* Farm és gazdaság: több blokk, a Saját rendszerekhez igazítva */
.economy-list{display:grid;gap:120px}
.economy-block{display:grid;grid-template-columns:1fr 1.15fr;gap:80px;align-items:center}
.economy-block.feature-reverse .feature-copy{order:2}
@media(max-width:1000px){.economy-block{grid-template-columns:1fr;gap:45px}.economy-block.feature-reverse .feature-copy{order:0}}
@media(max-width:680px){.economy-list{gap:80px}}