/* AAA visual redesign 2026-08-04 - layout/style only */
:root {
  --aaa-bg: #070B13;
  --aaa-panel: #0D1524;
  --aaa-panel-2: #111D31;
  --aaa-ink: #F8FAFC;
  --aaa-muted: #A8B5C8;
  --aaa-line: rgba(166, 179, 198, .18);
  --aaa-line-strong: rgba(166, 179, 198, .28);
  --aaa-blue: #2563EB;
  --aaa-blue-soft: #78A6FF;
  --aaa-gold: #D4AF37;
  --aaa-green: #22C55E;
  --aaa-radius: 8px;
}

html {
  background: var(--aaa-bg) !important;
}

body {
  background:
    linear-gradient(180deg, #060A12 0%, #09111F 38%, #070B13 100%) !important;
  color: var(--aaa-ink) !important;
  letter-spacing: 0 !important;
}

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

#root {
  position: relative;
  isolation: isolate;
  min-height: 100dvh;
}

#root:before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .032) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 255, 255, .026) 1px, transparent 1px),
    radial-gradient(circle at 18% 12%, rgba(37, 99, 235, .16), transparent 28%),
    radial-gradient(circle at 92% 28%, rgba(212, 175, 55, .12), transparent 24%);
  background-size: 96px 96px, 96px 96px, 100% 100%, 100% 100%;
  opacity: .82;
}

* {
  letter-spacing: 0 !important;
}

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

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

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

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

.btn-primary,
.btn-secondary,
.card-premium,
.glass-card,
.rounded-lg,
.rounded-xl,
.rounded-2xl {
  border-radius: var(--aaa-radius) !important;
}

nav.fixed {
  top: 14px !important;
  left: 14px !important;
  right: 14px !important;
  border: 1px solid var(--aaa-line) !important;
  background: rgba(7, 11, 19, .88) !important;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .46) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  border-radius: var(--aaa-radius) !important;
}

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

nav.fixed a[href="/"] > div {
  border-radius: var(--aaa-radius) !important;
  background: linear-gradient(180deg, #3C77F5, #1D4ED8) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 12px 28px rgba(37, 99, 235, .26) !important;
}

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

nav.fixed .hidden.lg\:flex a {
  color: #BAC6D8 !important;
}

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

nav.fixed .btn-primary {
  background: #F8FAFC !important;
  color: #07101D !important;
  box-shadow: none !important;
}

section.relative.min-h-\[100dvh\].flex.items-center {
  min-height: auto !important;
  align-items: flex-start !important;
  padding: 118px 0 86px !important;
  background:
    linear-gradient(180deg, rgba(10, 18, 32, .96), rgba(7, 11, 19, .96)) !important;
  border-bottom: 1px solid var(--aaa-line);
}

section.relative.min-h-\[100dvh\].flex.items-center:before {
  content: "";
  position: absolute;
  inset: 92px 22px 26px;
  border: 1px solid rgba(166, 179, 198, .16);
  border-radius: var(--aaa-radius);
  background:
    linear-gradient(135deg, rgba(17, 29, 49, .72), rgba(7, 11, 19, .28) 52%, rgba(37, 99, 235, .08)),
    linear-gradient(90deg, rgba(212, 175, 55, .07), transparent 34%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}

section.relative.min-h-\[100dvh\].flex.items-center:after {
  content: "";
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 26px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--aaa-blue), var(--aaa-gold), var(--aaa-green));
  opacity: .82;
}

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: 34px !important;
}

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

.heading-hero {
  max-width: 760px !important;
  color: #fff !important;
  font-size: 48px !important;
  line-height: 1.02 !important;
  font-weight: 950 !important;
}

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

section.relative.min-h-\[100dvh\].flex.items-center p.max-w-xl {
  max-width: 650px !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 {
  min-height: 50px !important;
  padding: 0 22px !important;
  font-weight: 900 !important;
}

section.relative.min-h-\[100dvh\].flex.items-center .btn-primary {
  background: linear-gradient(180deg, #F8FAFC, #DEE8F7) !important;
  color: #07101D !important;
  box-shadow: 0 14px 30px rgba(248, 250, 252, .12), inset 0 1px 0 rgba(255, 255, 255, .86) !important;
}

section.relative.min-h-\[100dvh\].flex.items-center .btn-secondary {
  background: rgba(255, 255, 255, .045) !important;
  border: 1px solid var(--aaa-line-strong) !important;
  color: #E8EEF8 !important;
}

section.relative.min-h-\[100dvh\].flex.items-center .grid.grid-cols-2.sm\:grid-cols-4 > div {
  min-height: 92px;
  background: rgba(7, 11, 19, .68) !important;
  border: 1px solid var(--aaa-line) !important;
  border-radius: var(--aaa-radius) !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(--aaa-gold) !important;
}

.glass-card {
  background: rgba(7, 11, 19, .68) !important;
  border: 1px solid rgba(166, 179, 198, .2) !important;
  box-shadow: 0 28px 70px rgba(0, 0, 0, .44), inset 0 1px 0 rgba(255, 255, 255, .06) !important;
  overflow: hidden;
}

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

section.relative.min-h-\[100dvh\].flex.items-center .glass-card > div:first-child {
  margin: 0 !important;
  padding: 18px 20px !important;
  background: rgba(17, 29, 49, .76);
  border-bottom: 1px solid var(--aaa-line);
}

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

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

#top-lista {
  background: linear-gradient(180deg, #070B13, #09111F) !important;
  border-top: 1px solid var(--aaa-line);
  border-bottom: 1px solid var(--aaa-line);
}

#top-lista .heading-section {
  max-width: 780px;
  font-size: 40px !important;
  line-height: 1.08 !important;
  font-weight: 950 !important;
}

#top-lista .heading-section + p {
  max-width: 780px !important;
  color: #B8C4D6 !important;
  font-size: 16px !important;
}

#top-lista button {
  border-radius: var(--aaa-radius) !important;
  border: 1px solid var(--aaa-line) !important;
  background: rgba(255, 255, 255, .045) !important;
  color: #B7C3D4 !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: #5B8CF7 !important;
  color: #fff !important;
}

#top-lista .hidden.lg\:block {
  display: none !important;
}

#top-lista .lg\:hidden {
  display: block !important;
}

#top-lista .lg\:hidden .space-y-4 {
  display: grid !important;
  gap: 18px !important;
}

#top-lista .lg\:hidden .space-y-4 > * {
  margin-top: 0 !important;
}

#top-lista .lg\:hidden .card-premium {
  position: relative;
  min-height: 300px;
  padding: 20px !important;
  background:
    linear-gradient(180deg, rgba(17, 29, 49, .98), rgba(11, 20, 35, .98)) !important;
  border: 1px solid rgba(166, 179, 198, .18) !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255, 255, 255, .05) !important;
  overflow: hidden;
}

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

#top-lista .lg\:hidden .card-premium:after {
  content: "";
  position: absolute;
  right: -80px;
  top: -90px;
  width: 190px;
  height: 190px;
  border: 1px solid rgba(120, 166, 255, .12);
  border-radius: 999px;
  background: radial-gradient(circle, rgba(37, 99, 235, .16), transparent 62%);
}

#top-lista .lg\:hidden .card-premium > * {
  position: relative;
  z-index: 1;
}

#top-lista .lg\:hidden .card-premium a[href^="https://click.trafflook.com"],
#top-lista .lg\:hidden .card-premium a[href^="https://my.trekyoubaby.com"] {
  min-height: 48px;
  border-radius: var(--aaa-radius) !important;
  background: linear-gradient(180deg, #2ED56A, #16A34A) !important;
  color: #06130B !important;
  font-weight: 950 !important;
  box-shadow: 0 14px 26px rgba(34, 197, 94, .26), inset 0 1px 0 rgba(255, 255, 255, .34) !important;
}

#top-lista .lg\:hidden .card-premium a[href^="https://click.trafflook.com"] + a,
#top-lista .lg\:hidden .card-premium a[href^="https://my.trekyoubaby.com"] + a {
  background: rgba(37, 99, 235, .11) !important;
  border: 1px solid rgba(37, 99, 235, .22) !important;
  color: #89AEFF !important;
  box-shadow: none !important;
}

#top-lista .lg\:hidden .card-premium .text-\[\#D4AF37\] {
  color: #F3D676 !important;
}

#top-lista .lg\:hidden .card-premium .text-\[\#22C55E\] {
  color: #68E893 !important;
}

.card-premium,
.method-card,
.guide-card,
.analysis-card,
.article-card,
details {
  border-radius: var(--aaa-radius) !important;
  background: linear-gradient(180deg, #101A2B, #0D1626) !important;
  border: 1px solid var(--aaa-line) !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, .26), inset 0 1px 0 rgba(255, 255, 255, .045) !important;
}

.card-premium:hover,
.method-card:hover,
.guide-card:hover,
.analysis-card:hover,
.article-card:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(37, 99, 235, .42) !important;
  background: linear-gradient(180deg, #132037, #0F1A2B) !important;
}

.heading-section {
  font-weight: 950 !important;
}

.method-card h3,
.guide-card h3,
.analysis-card h3,
.article-card h3 {
  color: var(--aaa-ink) !important;
}

.method-card p,
.guide-card p,
.analysis-card p,
.article-card p {
  color: var(--aaa-muted) !important;
}

.prose-premium {
  max-width: 780px;
  margin: 0 auto;
  color: var(--aaa-muted) !important;
  font-size: 17px !important;
  line-height: 1.84 !important;
}

.prose-premium h2 {
  margin-top: 44px !important;
  padding-top: 24px !important;
  border-top: 1px solid var(--aaa-line) !important;
  color: #fff !important;
  font-size: 30px !important;
  line-height: 1.16 !important;
  font-weight: 950 !important;
}

.prose-premium h3 {
  color: #F8FAFC !important;
  font-weight: 900 !important;
}

.prose-premium p {
  color: var(--aaa-muted) !important;
}

.prose-premium li {
  border-radius: var(--aaa-radius) !important;
  background: #101A2B !important;
  border-color: var(--aaa-line) !important;
}

footer {
  background: #060A12 !important;
  border-top: 1px solid var(--aaa-line) !important;
}

footer .divider {
  background: var(--aaa-line) !important;
}

footer .rounded-xl,
footer .rounded-lg {
  border-radius: var(--aaa-radius) !important;
}

button[aria-label="Chat megnyitása"] {
  width: 54px !important;
  height: 54px !important;
  border-radius: var(--aaa-radius) !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: var(--aaa-radius) !important;
  background: #0D1626 !important;
  border-color: var(--aaa-line-strong) !important;
}

@media (min-width: 1024px) {
  #top-lista .lg\:hidden .space-y-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #top-lista .lg\:hidden .space-y-4 > div:first-child {
    grid-column: 1 / -1;
    min-height: 260px;
  }

  #top-lista .lg\:hidden .space-y-4 > div:first-child .card-premium {
    min-height: 260px;
  }

  .heading-hero {
    font-size: 68px !important;
    line-height: .98 !important;
  }

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

@media (min-width: 1180px) {
  nav.fixed {
    top: 20px !important;
    left: 20px !important;
    right: auto !important;
    bottom: 20px !important;
    width: 252px !important;
  }

  nav.fixed > div {
    height: 100% !important;
    padding: 14px !important;
  }

  nav.fixed > div > div {
    height: 100% !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 22px !important;
  }

  nav.fixed a[href="/"] {
    padding: 6px 0 !important;
  }

  nav.fixed .hidden.lg\:flex {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 6px !important;
  }

  nav.fixed .hidden.lg\:flex > div {
    width: 100% !important;
  }

  nav.fixed .hidden.lg\:flex a {
    width: 100% !important;
    justify-content: space-between !important;
    padding: 12px !important;
    background: rgba(255, 255, 255, .032) !important;
    border: 1px solid rgba(166, 179, 198, .1) !important;
  }

  nav.fixed .hidden.lg\:flex [class*="absolute"] {
    left: 236px !important;
    top: 0 !important;
    margin-top: 0 !important;
    border-radius: var(--aaa-radius) !important;
    background: rgba(7, 11, 19, .96) !important;
  }

  nav.fixed > div > div > .flex.items-center.gap-2:last-child {
    margin-top: auto !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }

  nav.fixed > div > div > .flex.items-center.gap-2:last-child .btn-primary {
    display: inline-flex !important;
    width: 100% !important;
  }

  section,
  footer {
    margin-left: 286px !important;
  }

  header {
    margin-left: 286px !important;
  }

  section.relative.min-h-\[100dvh\].flex.items-center,
  #top-lista,
  footer {
    margin-left: 286px !important;
  }

  section.relative.min-h-\[100dvh\].flex.items-center:before {
    left: 18px;
    right: 22px;
  }
}

@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 54px !important;
  }

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

  section.relative.min-h-\[100dvh\].flex.items-center:after {
    left: 10px;
    right: 10px;
    bottom: 18px;
  }

  .heading-hero {
    font-size: 40px !important;
    line-height: 1.04 !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: 31px !important;
  }

  #top-lista .lg\:hidden .card-premium {
    min-height: 300px;
  }

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

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

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

.aaa-experience {
  display: none;
}

.aaa-home-active .aaa-experience {
  display: block;
}

.aaa-home-active #root nav.fixed,
.aaa-home-active .aaa-source-hidden {
  display: none !important;
}

.aaa-shell-nav {
  position: fixed;
  top: 16px;
  left: 16px;
  right: 16px;
  z-index: 80;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 18px;
  align-items: center;
  max-width: 1188px;
  margin: 0 auto;
  padding: 10px;
  border: 1px solid rgba(166, 179, 198, .2);
  border-radius: 8px;
  background: rgba(7, 11, 19, .88);
  box-shadow: 0 20px 54px rgba(0, 0, 0, .46);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.aaa-brand,
.aaa-shell-nav nav,
.aaa-nav-cta,
.aaa-primary,
.aaa-secondary,
.aaa-register,
.aaa-details,
.aaa-mini-row {
  text-decoration: none !important;
}

.aaa-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-weight: 950;
}

.aaa-brand-mark {
  display: inline-grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 8px;
  background: linear-gradient(180deg, #3C77F5, #1D4ED8);
  color: #fff;
  font-size: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 12px 26px rgba(37, 99, 235, .25);
}

.aaa-shell-nav nav {
  display: flex;
  justify-content: center;
  gap: 6px;
}

.aaa-shell-nav nav a {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 13px;
  border-radius: 8px;
  color: #B6C2D5;
  font-size: 13px;
  font-weight: 750;
}

.aaa-shell-nav nav a:hover {
  background: rgba(255, 255, 255, .06);
  color: #fff;
}

.aaa-nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 16px;
  border-radius: 8px;
  background: #F8FAFC;
  color: #07101D;
  font-size: 13px;
  font-weight: 950;
}

.aaa-cover {
  position: relative;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) 430px;
  gap: 26px;
  align-items: end;
  max-width: 1188px;
  margin: 0 auto;
  padding: 122px 16px 64px;
}

.aaa-cover:before {
  content: "";
  position: absolute;
  inset: 96px 16px 34px;
  z-index: -1;
  border: 1px solid rgba(166, 179, 198, .16);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(17, 29, 49, .74), rgba(7, 11, 19, .38) 58%, rgba(212, 175, 55, .06)),
    linear-gradient(90deg, rgba(37, 99, 235, .12), transparent 34%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}

.aaa-cover:after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 34px;
  z-index: -1;
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(90deg, #2563EB, #D4AF37, #22C55E);
}

.aaa-cover-copy {
  padding: 38px 0 38px 36px;
}

.aaa-eyebrow {
  display: inline-flex;
  margin-bottom: 18px;
  padding: 8px 12px;
  border: 1px solid rgba(120, 166, 255, .28);
  border-radius: 8px;
  background: rgba(37, 99, 235, .14);
  color: #8DB2FF;
  font-size: 12px;
  font-weight: 850;
}

.aaa-cover h1 {
  max-width: 790px;
  color: #fff;
  font-size: clamp(46px, 6vw, 82px);
  line-height: .94;
  font-weight: 950;
}

.aaa-cover h1::first-line {
  color: #F8FAFC;
}

.aaa-cover p {
  max-width: 660px;
  margin-top: 26px;
  color: #B4C0D2;
  font-size: 18px;
  line-height: 1.72;
}

.aaa-cover-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
}

.aaa-primary,
.aaa-secondary {
  display: inline-flex;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  padding: 0 22px;
  border-radius: 8px;
  font-weight: 950;
}

.aaa-primary {
  background: linear-gradient(180deg, #F8FAFC, #DEE8F7);
  color: #07101D;
  box-shadow: 0 16px 32px rgba(248, 250, 252, .12), inset 0 1px 0 rgba(255, 255, 255, .86);
}

.aaa-secondary {
  border: 1px solid rgba(166, 179, 198, .26);
  background: rgba(255, 255, 255, .045);
  color: #E8EEF8;
}

.aaa-metric-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  max-width: 650px;
  margin-top: 34px;
}

.aaa-metric-grid div {
  min-height: 94px;
  padding: 16px;
  border: 1px solid rgba(166, 179, 198, .16);
  border-radius: 8px;
  background: rgba(7, 11, 19, .66);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045);
}

.aaa-metric-grid strong {
  display: block;
  color: #fff;
  font-size: 24px;
  line-height: 1;
}

.aaa-metric-grid span {
  display: block;
  margin-top: 8px;
  color: #A8B5C8;
  font-size: 12px;
  line-height: 1.35;
}

.aaa-decision-panel {
  margin: 0 28px 38px 0;
  border: 1px solid rgba(166, 179, 198, .2);
  border-radius: 8px;
  background: rgba(7, 11, 19, .72);
  box-shadow: 0 28px 70px rgba(0, 0, 0, .44), inset 0 1px 0 rgba(255, 255, 255, .06);
  overflow: hidden;
}

.aaa-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(166, 179, 198, .16);
  background: rgba(17, 29, 49, .72);
}

.aaa-panel-head span,
.aaa-panel-note span {
  color: #94A3B8;
  font-size: 12px;
  font-weight: 800;
}

.aaa-panel-head strong,
.aaa-panel-note strong {
  color: #F3D676;
  font-size: 13px;
}

.aaa-mini-list {
  display: grid;
  gap: 10px;
  padding: 14px;
}

.aaa-mini-row {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  gap: 12px;
  align-items: center;
  min-height: 62px;
  padding: 12px;
  border: 1px solid rgba(166, 179, 198, .14);
  border-radius: 8px;
  background: #0E182A;
}

.aaa-mini-row span {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 8px;
  background: #2563EB;
  color: #fff;
  font-size: 12px;
  font-weight: 950;
}

.aaa-mini-row strong {
  color: #fff;
  font-size: 15px;
}

.aaa-mini-row em {
  color: #68E893;
  font-style: normal;
  font-weight: 950;
}

.aaa-panel-note {
  display: grid;
  gap: 5px;
  padding: 18px 20px;
  border-top: 1px solid rgba(166, 179, 198, .16);
}

.aaa-trust-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  max-width: 1188px;
  margin: 0 auto 0;
  padding: 0 16px 26px;
}

.aaa-trust-strip div {
  min-height: 104px;
  padding: 18px;
  border: 1px solid rgba(166, 179, 198, .16);
  background: #0D1524;
}

.aaa-trust-strip div:first-child {
  border-radius: 8px 0 0 8px;
}

.aaa-trust-strip div:last-child {
  border-radius: 0 8px 8px 0;
}

.aaa-trust-strip strong {
  display: block;
  color: #fff;
  font-size: 20px;
}

.aaa-trust-strip span {
  display: block;
  margin-top: 8px;
  color: #A8B5C8;
  font-size: 13px;
}

.aaa-ranking {
  max-width: 1188px;
  margin: 0 auto;
  padding: 52px 16px 88px;
}

.aaa-section-head {
  max-width: 760px;
  margin-bottom: 26px;
}

.aaa-section-head span {
  display: inline-flex;
  margin-bottom: 12px;
  padding: 8px 12px;
  border: 1px solid rgba(37, 99, 235, .24);
  border-radius: 8px;
  color: #8DB2FF;
  background: rgba(37, 99, 235, .12);
  font-size: 12px;
  font-weight: 850;
}

.aaa-section-head h2 {
  color: #fff;
  font-size: clamp(34px, 4vw, 56px);
  line-height: 1;
  font-weight: 950;
}

.aaa-section-head p {
  margin-top: 15px;
  color: #B4C0D2;
  font-size: 16px;
  line-height: 1.68;
}

.aaa-ranking-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.aaa-casino-card {
  position: relative;
  min-height: 310px;
  padding: 22px;
  border: 1px solid rgba(166, 179, 198, .18);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(17, 29, 49, .98), rgba(11, 20, 35, .98));
  box-shadow: 0 18px 46px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255, 255, 255, .05);
  overflow: hidden;
}

.aaa-casino-card.is-featured {
  grid-column: 1 / -1;
  min-height: 280px;
  display: grid;
  grid-template-columns: 1fr minmax(240px, .38fr);
  column-gap: 26px;
}

.aaa-casino-card:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background: linear-gradient(180deg, #2563EB, #D4AF37, #22C55E);
}

.aaa-casino-card:after {
  content: "";
  position: absolute;
  right: -78px;
  top: -88px;
  width: 210px;
  height: 210px;
  border-radius: 999px;
  border: 1px solid rgba(120, 166, 255, .13);
  background: radial-gradient(circle, rgba(37, 99, 235, .16), transparent 62%);
}

.aaa-casino-card > * {
  position: relative;
  z-index: 1;
}

.aaa-card-topline {
  display: grid;
  grid-template-columns: 42px 1fr auto;
  gap: 14px;
  align-items: start;
}

.aaa-rank {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 8px;
  background: #2563EB;
  color: #fff;
  font-size: 13px;
  font-weight: 950;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2);
}

.aaa-card-topline h3 {
  color: #fff;
  font-size: 22px;
  font-weight: 950;
  line-height: 1.05;
}

.aaa-card-topline p {
  margin-top: 6px;
  color: #F3D676;
  font-size: 13px;
  font-weight: 850;
}

.aaa-score {
  text-align: right;
}

.aaa-score strong {
  color: #68E893;
  font-size: 28px;
  line-height: 1;
}

.aaa-score span {
  color: #7F8EA3;
  font-size: 12px;
  font-weight: 800;
}

.aaa-scorebar {
  height: 8px;
  margin-top: 18px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
}

.aaa-scorebar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #2563EB, #22C55E);
}

.aaa-card-review {
  margin-top: 18px;
  color: #B4C0D2;
  font-size: 14px;
  line-height: 1.65;
}

.aaa-card-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.aaa-card-facts span {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  padding: 0 10px;
  border: 1px solid rgba(166, 179, 198, .14);
  border-radius: 8px;
  background: rgba(255, 255, 255, .045);
  color: #B6C2D5;
  font-size: 12px;
  font-weight: 750;
}

.aaa-card-actions {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  margin-top: 22px;
}

.aaa-casino-card.is-featured .aaa-card-actions {
  align-self: end;
}

.aaa-register,
.aaa-details {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  border-radius: 8px;
  font-weight: 950;
}

.aaa-register {
  background: linear-gradient(180deg, #2ED56A, #16A34A);
  color: #06130B;
  box-shadow: 0 14px 26px rgba(34, 197, 94, .26), inset 0 1px 0 rgba(255, 255, 255, .34);
}

.aaa-details {
  border: 1px solid rgba(37, 99, 235, .24);
  background: rgba(37, 99, 235, .1);
  color: #8DB2FF;
}

@media (min-width: 1180px) {
  .aaa-shell-nav {
    top: 20px;
    left: 20px;
    right: auto;
    bottom: 20px;
    width: 252px;
    max-width: none;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
    align-items: start;
    padding: 14px;
  }

  .aaa-shell-nav nav {
    width: 100%;
    flex-direction: column;
    justify-content: flex-start;
  }

  .aaa-shell-nav nav a,
  .aaa-nav-cta {
    width: 100%;
    justify-content: flex-start;
  }

  .aaa-cover,
  .aaa-trust-strip,
  .aaa-ranking {
    margin-left: 306px;
    margin-right: 28px;
  }

  .aaa-cover {
    max-width: none;
  }
}

@media (max-width: 900px) {
  .aaa-cover {
    min-height: auto;
    grid-template-columns: 1fr;
    padding-top: 96px;
    padding-bottom: 42px;
  }

  .aaa-cover-copy {
    padding: 28px 0 0;
  }

  .aaa-decision-panel {
    margin: 0;
  }

  .aaa-trust-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .aaa-trust-strip div:first-child,
  .aaa-trust-strip div:last-child {
    border-radius: 8px;
  }

  .aaa-ranking-grid,
  .aaa-casino-card.is-featured {
    grid-template-columns: 1fr;
  }

  .aaa-casino-card.is-featured {
    grid-column: auto;
  }
}

@media (max-width: 640px) {
  .aaa-shell-nav {
    top: 10px;
    left: 10px;
    right: 10px;
    grid-template-columns: 1fr auto;
  }

  .aaa-shell-nav nav {
    display: none;
  }

  .aaa-nav-cta {
    min-height: 36px;
    padding: 0 12px;
  }

  .aaa-cover {
    padding: 84px 10px 34px;
  }

  .aaa-cover:before {
    inset: 70px 10px 18px;
  }

  .aaa-cover:after {
    left: 10px;
    right: 10px;
    bottom: 18px;
  }

  .aaa-cover h1 {
    font-size: 43px;
    line-height: .98;
  }

  .aaa-cover p {
    font-size: 16px;
  }

  .aaa-cover-actions,
  .aaa-card-actions {
    grid-template-columns: 1fr;
    display: grid;
  }

  .aaa-metric-grid,
  .aaa-trust-strip {
    grid-template-columns: 1fr;
  }

  .aaa-ranking {
    padding: 44px 10px 72px;
  }

  .aaa-section-head h2 {
    font-size: 34px;
  }

  .aaa-casino-card {
    min-height: 320px;
    padding: 20px;
  }
}