/* Editorial redesign refresh 2026-08-04 */
:root {
  --editorial-bg: #080E1A;
  --editorial-ink: #F8FAFC;
  --editorial-muted: #A6B3C6;
  --editorial-soft: #0E1726;
  --editorial-panel: #101A2B;
  --editorial-panel-2: #131F32;
  --editorial-border: rgba(166, 179, 198, .18);
  --editorial-blue: #2563EB;
  --editorial-gold: #D4AF37;
  --editorial-green: #22C55E;
}

html,
body {
  background: var(--editorial-bg) !important;
}

body {
  color: var(--editorial-ink) !important;
  background-image: linear-gradient(180deg, #070C16 0%, #091222 36%, #080E1A 100%) !important;
}

body:before {
  display: none !important;
}

#root {
  isolation: isolate;
}

#root:before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .025) 0, rgba(255, 255, 255, .025) 1px, transparent 1px, transparent 84px),
    linear-gradient(180deg, rgba(37, 99, 235, .08) 0, transparent 26%, rgba(212, 175, 55, .045) 74%, transparent 100%);
  opacity: .72;
}

.gradient-orb {
  display: none !important;
}

.animate-bounce-subtle,
.animate-bounce,
.animate-pulse {
  animation: none !important;
}

.tracking-tight,
.tracking-wider,
.heading-hero,
.heading-section,
h1,
h2,
h3,
h4,
h5,
h6 {
  letter-spacing: 0 !important;
}

.container-premium {
  max-width: 1180px !important;
}

.section-padding {
  padding-top: 72px !important;
  padding-bottom: 72px !important;
}

.text-body {
  color: var(--editorial-muted) !important;
  line-height: 1.76 !important;
}

nav.fixed {
  top: 14px !important;
  left: 14px !important;
  right: 14px !important;
  border-radius: 8px !important;
  background: rgba(8, 14, 26, .9) !important;
  border: 1px solid rgba(166, 179, 198, .18) !important;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .42) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
}

nav.fixed > div {
  max-width: 1180px !important;
}

nav.fixed .h-16,
nav.fixed .lg\:h-\[68px\] {
  height: 62px !important;
}

nav.fixed a,
nav.fixed button {
  border-radius: 8px !important;
}

nav.fixed a[href="/"] > div {
  border-radius: 8px !important;
  background: linear-gradient(180deg, #2F6DF3, #1E4FC7) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 10px 22px rgba(37, 99, 235, .22) !important;
}

nav.fixed a[href="/"] span {
  font-size: 15px !important;
  font-weight: 800 !important;
}

nav.fixed .hidden.lg\:flex a {
  padding: 8px 12px !important;
  color: #B5C0D1 !important;
}

nav.fixed .hidden.lg\:flex a:hover {
  background: rgba(255, 255, 255, .06) !important;
  color: #fff !important;
}

nav.fixed .btn-primary {
  height: 40px !important;
  padding: 0 18px !important;
  background: #F8FAFC !important;
  color: #08101D !important;
  box-shadow: none !important;
  font-weight: 800 !important;
}

section.relative.min-h-\[100dvh\].flex.items-center {
  min-height: auto !important;
  align-items: flex-start !important;
  padding: 112px 0 74px !important;
  background: linear-gradient(180deg, #08101E 0%, #0A1220 52%, #080E1A 100%) !important;
  border-bottom: 1px solid rgba(166, 179, 198, .16);
}

section.relative.min-h-\[100dvh\].flex.items-center:before {
  content: "";
  position: absolute;
  inset: 88px 24px 28px;
  border-radius: 8px;
  border: 1px solid rgba(166, 179, 198, .14);
  background: linear-gradient(135deg, rgba(19, 31, 50, .72), rgba(8, 14, 26, .3) 58%, rgba(212, 175, 55, .06));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .055);
}

section.relative.min-h-\[100dvh\].flex.items-center > .container-premium {
  position: relative;
  z-index: 2;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

section.relative.min-h-\[100dvh\].flex.items-center .grid.lg\:grid-cols-2 {
  gap: 30px !important;
}

section.relative.min-h-\[100dvh\].flex.items-center .hero-anim.inline-flex {
  border-radius: 8px !important;
  background: rgba(37, 99, 235, .12) !important;
  border-color: rgba(37, 99, 235, .28) !important;
  padding: 8px 12px !important;
}

.heading-hero {
  font-size: 46px !important;
  line-height: 1.04 !important;
  font-weight: 900 !important;
  max-width: 760px !important;
  color: #fff !important;
}

section.relative.min-h-\[100dvh\].flex.items-center .heading-hero span {
  color: inherit !important;
  background: linear-gradient(90deg, #78A6FF 0%, #F3D676 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
}

section.relative.min-h-\[100dvh\].flex.items-center p.max-w-xl {
  max-width: 640px !important;
  font-size: 17px !important;
}

section.relative.min-h-\[100dvh\].flex.items-center .btn-primary,
section.relative.min-h-\[100dvh\].flex.items-center .btn-secondary {
  height: 48px !important;
  border-radius: 8px !important;
  padding: 0 20px !important;
}

section.relative.min-h-\[100dvh\].flex.items-center .btn-primary {
  background: linear-gradient(180deg, #F8FAFC, #DDE7F6) !important;
  color: #08101D !important;
  box-shadow: 0 14px 28px rgba(255, 255, 255, .08), inset 0 1px 0 rgba(255, 255, 255, .8) !important;
}

section.relative.min-h-\[100dvh\].flex.items-center .btn-secondary {
  background: rgba(255, 255, 255, .045) !important;
  color: #E6EDF7 !important;
  border: 1px solid rgba(166, 179, 198, .22) !important;
}

section.relative.min-h-\[100dvh\].flex.items-center .grid.grid-cols-2.sm\:grid-cols-4 > div {
  border-radius: 8px !important;
  background: rgba(8, 14, 26, .62) !important;
  border: 1px solid rgba(166, 179, 198, .16) !important;
  padding: 15px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045) !important;
}

section.relative.min-h-\[100dvh\].flex.items-center .grid.grid-cols-2.sm\:grid-cols-4 svg {
  color: var(--editorial-gold) !important;
}

.glass-card {
  border-radius: 8px !important;
  background: linear-gradient(180deg, rgba(248, 250, 252, .055), rgba(248, 250, 252, .025)) !important;
  border: 1px solid rgba(166, 179, 198, .2) !important;
  box-shadow: 0 22px 60px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255, 255, 255, .075) !important;
}

section.relative.min-h-\[100dvh\].flex.items-center .glass-card {
  padding: 0 !important;
  overflow: hidden;
}

section.relative.min-h-\[100dvh\].flex.items-center .glass-card > div:first-child {
  margin: 0 !important;
  padding: 18px 20px !important;
  border-bottom: 1px solid rgba(166, 179, 198, .14);
  background: rgba(8, 14, 26, .58);
}

section.relative.min-h-\[100dvh\].flex.items-center .glass-card > div[class*="rounded-xl"] {
  margin: 10px 14px !important;
  border-radius: 8px !important;
  background: #0D1728 !important;
  border: 1px solid rgba(166, 179, 198, .14) !important;
}

.badge-gold,
.badge-blue {
  border-radius: 8px !important;
  background: rgba(212, 175, 55, .1) !important;
  border: 1px solid rgba(212, 175, 55, .28) !important;
  color: #F3D676 !important;
}

.card-premium {
  border-radius: 8px !important;
  background: linear-gradient(180deg, #101A2B, #0D1626) !important;
  border: 1px solid rgba(166, 179, 198, .16) !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .05) !important;
}

.card-premium:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(37, 99, 235, .42) !important;
  box-shadow: 0 22px 54px rgba(0, 0, 0, .34), 0 0 0 1px rgba(37, 99, 235, .08) !important;
}

#top-lista {
  position: relative;
  background: linear-gradient(180deg, #080E1A, #0A1220) !important;
  border-top: 1px solid rgba(166, 179, 198, .14);
  border-bottom: 1px solid rgba(166, 179, 198, .14);
}

#top-lista .heading-section {
  font-size: 38px !important;
  line-height: 1.12 !important;
  max-width: 760px;
}

#top-lista .heading-section + p {
  max-width: 760px !important;
  color: #B4C0D1 !important;
}

#top-lista button {
  border-radius: 8px !important;
  background: rgba(255, 255, 255, .045) !important;
  border: 1px solid rgba(166, 179, 198, .16) !important;
  color: #B6C2D5 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045) !important;
}

#top-lista button.bg-\[\#2563EB\],
#top-lista button[aria-pressed="true"] {
  background: #2563EB !important;
  border-color: #5284F4 !important;
  color: #fff !important;
}

#top-lista .overflow-x-auto {
  border-radius: 8px !important;
  border: 1px solid rgba(166, 179, 198, .16) !important;
  background: rgba(8, 14, 26, .68) !important;
  padding: 10px !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .32), inset 0 1px 0 rgba(255, 255, 255, .04);
}

#top-lista .table {
  border-collapse: separate !important;
  border-spacing: 0 10px !important;
}

#top-lista .table-row-premium {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

#top-lista .table-row-premium > * {
  background: #101A2B !important;
  border-top: 1px solid rgba(166, 179, 198, .14) !important;
  border-bottom: 1px solid rgba(166, 179, 198, .14) !important;
}

#top-lista .table-row-premium > :first-child {
  border-left: 1px solid rgba(166, 179, 198, .14) !important;
  border-radius: 8px 0 0 8px !important;
  box-shadow: inset 4px 0 0 rgba(37, 99, 235, .72);
}

#top-lista .table-row-premium > :last-child {
  border-right: 1px solid rgba(166, 179, 198, .14) !important;
  border-radius: 0 8px 8px 0 !important;
}

#top-lista .table-row-premium:hover > * {
  background: #132037 !important;
  border-color: rgba(37, 99, 235, .34) !important;
}

#top-lista a[href^="https://click.trafflook.com"],
#top-lista a[href^="https://my.trekyoubaby.com"] {
  border-radius: 8px !important;
  background: linear-gradient(180deg, #2ED56A, #16A34A) !important;
  color: #05110B !important;
  font-weight: 900 !important;
  box-shadow: 0 12px 24px rgba(34, 197, 94, .24), inset 0 1px 0 rgba(255, 255, 255, .35) !important;
}

#top-lista a[href^="https://click.trafflook.com"]:hover,
#top-lista a[href^="https://my.trekyoubaby.com"]:hover {
  filter: brightness(1.06) !important;
  transform: translateY(-1px) !important;
}

#top-lista .lg\:hidden .card-premium {
  position: relative;
  padding: 18px !important;
  background: linear-gradient(180deg, #101B2F, #0D1626) !important;
  border-color: rgba(166, 179, 198, .18) !important;
  box-shadow: 0 18px 42px rgba(0, 0, 0, .28) !important;
}

#top-lista .lg\:hidden .card-premium:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  border-radius: 8px 0 0 8px;
  background: linear-gradient(180deg, var(--editorial-blue), var(--editorial-gold));
}

.method-card,
.guide-card,
.analysis-card,
.article-card {
  border-radius: 8px !important;
  background: #101A2B !important;
  border: 1px solid rgba(166, 179, 198, .16) !important;
  box-shadow: none !important;
}

.method-card:hover,
.guide-card:hover,
.analysis-card:hover,
.article-card:hover {
  background: #132037 !important;
  border-color: rgba(37, 99, 235, .36) !important;
  transform: translateY(-2px) !important;
}

.method-card h3,
.guide-card h3,
.analysis-card h3,
.article-card h3 {
  color: #F8FAFC !important;
}

.method-card p,
.guide-card p,
.analysis-card p,
.article-card p {
  color: #AAB6C8 !important;
}

.prose-premium {
  max-width: 760px;
  margin: 0 auto;
  color: #AAB6C8 !important;
  font-size: 17px !important;
  line-height: 1.84 !important;
}

.prose-premium h2 {
  border-top: 1px solid rgba(166, 179, 198, .16) !important;
  color: #fff !important;
  font-size: 28px !important;
  line-height: 1.18 !important;
}

.prose-premium li {
  border-radius: 8px !important;
  background: #101A2B !important;
  border-color: rgba(166, 179, 198, .16) !important;
}

details {
  border-radius: 8px !important;
  background: #101A2B !important;
  border-color: rgba(166, 179, 198, .16) !important;
}

footer {
  background: #070C16 !important;
  border-top: 1px solid rgba(166, 179, 198, .16) !important;
}

footer .rounded-xl,
footer .rounded-lg {
  border-radius: 8px !important;
}

button[aria-label="Chat megnyitása"] {
  width: 54px !important;
  height: 54px !important;
  border-radius: 8px !important;
  background: linear-gradient(180deg, #2ED56A, #11984A) !important;
  box-shadow: 0 16px 30px rgba(34, 197, 94, .26) !important;
}

button[aria-label="Chat megnyitása"] > span {
  display: none !important;
}

.w-\[380px\].h-\[560px\] {
  border-radius: 8px !important;
  background: #0D1626 !important;
  border-color: rgba(166, 179, 198, .2) !important;
}

@media (min-width: 1024px) {
  .heading-hero {
    font-size: 66px !important;
    line-height: .98 !important;
  }

  section.relative.min-h-\[100dvh\].flex.items-center .grid.lg\:grid-cols-2 {
    grid-template-columns: minmax(0, 1.08fr) 420px !important;
    align-items: stretch !important;
  }

  section.relative.min-h-\[100dvh\].flex.items-center .hidden.lg\:block {
    align-self: center !important;
  }

  #top-lista .overflow-x-auto {
    padding: 14px !important;
  }
}

@media (max-width: 768px) {
  nav.fixed {
    top: 10px !important;
    left: 10px !important;
    right: 10px !important;
  }

  nav.fixed .h-16 {
    height: 54px !important;
  }

  section.relative.min-h-\[100dvh\].flex.items-center {
    padding: 92px 0 52px !important;
  }

  section.relative.min-h-\[100dvh\].flex.items-center:before {
    inset: 74px 10px 16px;
  }

  .heading-hero {
    font-size: 38px !important;
    line-height: 1.05 !important;
  }

  section.relative.min-h-\[100dvh\].flex.items-center p.max-w-xl {
    font-size: 16px !important;
  }

  section.relative.min-h-\[100dvh\].flex.items-center .btn-primary,
  section.relative.min-h-\[100dvh\].flex.items-center .btn-secondary {
    width: 100% !important;
  }

  #top-lista .heading-section {
    font-size: 29px !important;
  }

  .section-padding {
    padding-top: 54px !important;
    padding-bottom: 54px !important;
  }

  .prose-premium {
    font-size: 16px !important;
  }

  button[aria-label="Chat megnyitása"] {
    right: 16px !important;
    bottom: 16px !important;
  }
}