:root {
  --bg: #070707;
  --bg-elev: #0b0b0b;
  --panel: #111111;
  --panel2: #171717;
  --panel3: #1d1d1d;
  --text: #ece6d8;
  --text-strong: #f5efe2;
  --muted: #9e988b;
  --muted-2: #7f7a70;
  --gold: #c9a24a;
  --gold-soft: #e6c878;
  --gold-dim: #8a6f2f;
  --green: #3ecb7e;
  --amber: #e6b23d;
  --red: #e15757;
  --line: #262626;
  --line-soft: #303030;
  --shadow-lg: 0 18px 50px rgba(0, 0, 0, .42);
  --shadow-md: 0 10px 26px rgba(0, 0, 0, .3);
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --wrap: 1220px;
}

* {
  box-sizing: border-box
}

html {
  scroll-behavior: smooth
}

body {
  margin: 0;
  font-family: Inter, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility
}

a {
  color: inherit
}

img {
  max-width: 100%;
  display: block
}

button,
input,
select,
textarea {
  font: inherit
}

.hidden {
  display: none !important
}

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 32px;
  border-bottom: 1px solid var(--line);
  background: rgba(5, 5, 5, .88);
  backdrop-filter: blur(14px);
  position: sticky;
  top: 0;
  z-index: 50
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none
}

.logo-chip {
  background: #ffffff;
  padding: 6px 14px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .4)
}

.logo-chip img {
  height: 26px;
  width: auto;
  display: block
}

.brand-text {
  font-size: 19px;
  font-weight: 800;
  color: var(--gold-soft);
  letter-spacing: .4px;
  font-family: Georgia, serif
}

.brand-text.hidden {
  display: none
}

.nav-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap
}

.nav-links a {
  color: var(--muted);
  text-decoration: none;
  margin-left: 26px;
  font-size: 14px;
  transition: color .18s ease
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--gold-soft)
}

.hero {
  position: relative;
  padding: 82px 24px 52px;
  text-align: center;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% -10%, rgba(201, 162, 74, .11), transparent 60%), #060606;
  border-bottom: 1px solid var(--line)
}

.hero h1 {
  font-family: Georgia, serif;
  font-size: clamp(34px, 4.8vw, 52px);
  margin: 0 0 12px;
  color: var(--gold-soft);
  letter-spacing: .4px
}

.hero p {
  color: var(--muted);
  margin: 0 auto;
  font-size: 15px;
  max-width: 560px;
  line-height: 1.65
}

.page-hero {
  padding: 58px 24px 36px;
  text-align: center;
  border-bottom: 1px solid var(--line);
  background: #060606
}

.page-hero h1 {
  font-family: Georgia, serif;
  font-size: clamp(28px, 4vw, 38px);
  margin: 0 0 8px;
  color: var(--gold-soft)
}

.page-hero p {
  color: var(--muted);
  margin: 0;
  font-size: 14px;
  line-height: 1.6
}

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 36px 24px 70px
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px
}

.card {
  background: linear-gradient(180deg, rgba(255, 255, 255, .015), rgba(255, 255, 255, 0)), var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 22px;
  box-shadow: var(--shadow-md)
}

.w4 {
  grid-column: span 4
}

.w6 {
  grid-column: span 6
}

.w8 {
  grid-column: span 8
}

.w12 {
  grid-column: span 12
}

.w3 {
  grid-column: span 3
}

.card-title {
  font-family: Georgia, serif;
  color: var(--gold-soft);
  font-size: 17px;
  margin: 0 0 4px
}

.card-sub {
  color: var(--muted);
  font-size: 12.5px;
  margin: 0 0 14px;
  line-height: 1.55
}

label {
  display: block;
  font-size: 11.5px;
  color: var(--muted);
  margin: 12px 0 6px;
  text-transform: uppercase;
  letter-spacing: .4px
}

select,
input,
textarea {
  width: 100%;
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--text);
  padding: 12px 13px;
  font-size: 14px;
  font-family: inherit;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease
}

textarea {
  min-height: 90px;
  resize: vertical
}

select:focus,
input:focus,
textarea:focus {
  outline: none;
  border-color: var(--gold-dim);
  box-shadow: 0 0 0 3px rgba(201, 162, 74, .12)
}

button {
  background: linear-gradient(180deg, var(--gold-soft), var(--gold));
  color: #161200;
  border: 0;
  border-radius: 12px;
  padding: 12px 16px;
  font-weight: 800;
  cursor: pointer;
  letter-spacing: .3px;
  transition: transform .16s ease, opacity .16s ease, box-shadow .16s ease;
  box-shadow: 0 8px 18px rgba(201, 162, 74, .12)
}

button.secondary {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--line);
  font-weight: 600;
  box-shadow: none
}

button.icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 1
}

button:hover {
  opacity: .96;
  transform: translateY(-1px)
}

button:active {
  transform: translateY(0)
}

button:disabled {
  opacity: .6;
  cursor: not-allowed;
  transform: none
}

.pill {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .3px
}

.pill.muted {
  background: rgba(158, 152, 139, .14);
  color: var(--muted)
}

.green {
  background: rgba(62, 203, 126, .14);
  color: var(--green)
}

.amber {
  background: rgba(230, 178, 61, .14);
  color: var(--amber)
}

.red {
  background: rgba(225, 87, 87, .14);
  color: var(--red)
}

.visa-result {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  margin-top: 12px
}

.visa-check-icon {
  color: var(--green);
  font-size: 16px
}

.advisory {
  background: rgba(255, 255, 255, .02);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 13px;
  color: var(--text);
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0;
  gap: 12px;
  flex-wrap: wrap
}

.advisory .updated {
  font-size: 11px;
  color: var(--muted);
  display: block;
  margin-top: 2px
}

.section {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 12px;
  background: var(--panel2)
}

.section h4 {
  margin: 0 0 6px;
  color: var(--gold-soft);
  font-size: 13px;
  letter-spacing: .3px
}

.section p {
  margin: 0;
  color: #cfd3dc;
  font-size: 13.5px;
  line-height: 1.6
}

.split {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px
}

.delivery {
  display: flex;
  gap: 10px;
  margin-top: 16px;
  flex-wrap: wrap
}

.country-card {
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px 14px;
  text-align: center;
  transition: border-color .18s ease, transform .18s ease, background .18s ease
}

.country-card:hover {
  border-color: var(--gold-dim);
  background: var(--panel3);
  transform: translateY(-2px)
}

.country-card .flag-emoji {
  font-size: 30px;
  margin-bottom: 10px;
  line-height: 1
}

.country-card h5 {
  margin: 0 0 8px;
  font-size: 14px;
  color: var(--text)
}

.country-card.disabled {
  opacity: .4
}

.legend {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px
}

.legend span {
  font-size: 11.5px;
  padding: 6px 12px;
  border-radius: 8px;
  font-weight: 700
}

.table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 8px
}

.table th,
.table td {
  padding: 10px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  font-size: 13px
}

.table th {
  color: var(--muted);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: .3px
}

.foot {
  text-align: center;
  color: var(--muted);
  font-size: 12px;
  padding: 24px;
  border-top: 1px solid var(--line)
}

.foot a {
  color: var(--gold-dim);
  text-decoration: none
}

.foot-links {
  margin-bottom: 8px
}

.foot-links a {
  margin: 0 10px
}

.disclaimer-bar {
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.6
}

.toast {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: var(--panel);
  border: 1px solid var(--gold);
  color: var(--text);
  padding: 12px 16px;
  border-radius: 12px;
  display: none;
  font-size: 13px;
  z-index: 99;
  box-shadow: var(--shadow-lg)
}

.dropzone {
  border: 2px dashed var(--line);
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  cursor: pointer
}

.dropzone.drag {
  border-color: var(--gold);
  color: var(--gold)
}

.methodology-step {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 20px
}

.step-num {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--panel2);
  border: 1px solid var(--gold-dim);
  color: var(--gold-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-family: Georgia, serif
}

.step-content h4 {
  margin: 0 0 4px;
  color: var(--text);
  font-size: 15px
}

.step-content p {
  margin: 0;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.6
}

.contact-info-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 16px
}

.contact-info-item .icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--panel2);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-soft);
  flex-shrink: 0
}

.contact-info-item div p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 13px
}

.contact-info-item div strong {
  color: var(--text);
  font-size: 13.5px
}

.breadcrumb {
  font-size: 12.5px;
  color: var(--muted);
  margin-bottom: 18px
}

.breadcrumb a {
  color: var(--muted);
  text-decoration: none
}

.breadcrumb a:hover {
  color: var(--gold-soft)
}

.breadcrumb .sep {
  margin: 0 6px;
  color: var(--line-soft)
}

.breadcrumb .current {
  color: var(--gold-soft)
}

.report-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 18px;
  margin-bottom: 20px
}

.report-title-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap
}

.report-title-row h1 {
  font-family: Georgia, serif;
  font-size: clamp(34px, 4vw, 54px);
  margin: 0;
  color: var(--text-strong);
  line-height: 1.05
}

.report-meta-text {
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 8px
}

.badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .3px;
  border: 1px solid transparent
}

.badge-risk-moderate {
  background: rgba(230, 178, 61, .12);
  color: var(--amber);
  border-color: rgba(230, 178, 61, .35)
}

.badge-risk-low {
  background: rgba(62, 203, 126, .12);
  color: var(--green);
  border-color: rgba(62, 203, 126, .35)
}

.badge-risk-high,
.badge-risk-extreme {
  background: rgba(225, 87, 87, .12);
  color: var(--red);
  border-color: rgba(225, 87, 87, .35)
}

.badge-reviewed {
  background: rgba(62, 203, 126, .10);
  color: var(--green);
  border: 1px solid rgba(62, 203, 126, .3)
}

.btn-download {
  background: linear-gradient(180deg, var(--gold-soft), var(--gold));
  color: #161200;
  border: 0;
  border-radius: 12px;
  padding: 14px 22px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  text-decoration: none;
  font-size: 13.5px;
  box-shadow: 0 12px 24px rgba(201, 162, 74, .14)
}

.advisory-banner {
  background: linear-gradient(90deg, rgba(225, 87, 87, .16), rgba(225, 87, 87, .05));
  border: 1px solid rgba(225, 87, 87, .4);
  border-radius: 12px;
  padding: 16px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 22px;
  gap: 14px;
  flex-wrap: wrap
}

.advisory-banner .adv-left {
  display: flex;
  align-items: center;
  gap: 12px
}

.advisory-banner .adv-icon {
  font-size: 20px;
  color: var(--red)
}

.advisory-banner .adv-title {
  font-weight: 800;
  font-size: 13px;
  color: #f4d6d6;
  letter-spacing: .3px
}

.advisory-banner .adv-sub {
  font-size: 11.5px;
  color: #d9a8a8;
  margin-top: 2px
}

.advisory-banner .adv-sub a {
  color: var(--gold-soft);
  text-decoration: none
}

.report-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 320px;
  gap: 20px;
  align-items: start
}

.report-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0
}

.info-card,
.redlines-card,
.sidebar-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, .015), rgba(255, 255, 255, 0)), var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px;
  box-shadow: var(--shadow-md)
}

.info-card h3,
.redlines-card h3 {
  margin: 0 0 14px;
  font-size: 14px;
  color: var(--gold-soft);
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: .2px
}

.info-row {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 12px 0;
  border-bottom: 1px solid var(--line)
}

.info-row:last-child {
  border-bottom: none;
  padding-bottom: 2px
}

.info-row .info-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--panel2);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
  color: var(--gold-soft)
}

.info-row .info-label {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-strong);
  margin-bottom: 3px
}

.info-row .info-value {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.58
}

.info-row .info-value b {
  color: var(--gold-soft);
  font-weight: 700
}

.redline-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 12px;
  font-size: 13px;
  color: #e6dfcf;
  line-height: 1.6
}

.redline-item:last-child {
  margin-bottom: 0
}

.redline-item .warn {
  color: var(--red);
  flex-shrink: 0;
  margin-top: 1px
}

.accordion {
  border: 1px solid var(--line);
  border-radius: 12px;
  margin-bottom: 0;
  overflow: hidden;
  background: var(--panel);
  box-shadow: var(--shadow-md)
}

.accordion-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 16px;
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--gold-soft);
  transition: background .18s ease
}

.accordion-head:hover {
  background: var(--panel2)
}

.accordion-body {
  display: none;
  padding: 0 16px 16px;
  font-size: 13px;
  color: #cfd3dc;
  line-height: 1.7
}

.accordion.open .accordion-body {
  display: block
}

.accordion.open .chev {
  transform: rotate(180deg)
}

.chev {
  transition: transform .18s ease;
  color: var(--muted)
}

.sidebar-card h4 {
  margin: 0 0 12px;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--gold-soft)
}

.personalize-box {
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px;
  margin-top: 12px
}

.personalize-box .p-title {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--gold-soft);
  margin-bottom: 6px
}

.personalize-box p {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.55;
  margin: 0
}

.about-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 12.5px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  color: var(--muted)
}

.about-row:last-child {
  border-bottom: none
}

.about-row span.val {
  color: var(--text);
  text-align: right
}

.methodology-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--gold-soft);
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  padding: 14px 0 0
}

.practical-group {
  display: grid;
  gap: 12px
}

.practical-box {
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px
}

.practical-box-title {
  font-size: 12px;
  color: var(--gold-soft);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .4px;
  margin: 0 0 8px
}

.practical-box-content {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.65
}

.socket-grid {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px
}

.socket-card {
  width: 84px;
  background: var(--panel3);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  padding: 10px;
  text-align: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .02)
}

.socket-card img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  margin: 0 auto 8px
}

.socket-card span {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--gold-soft);
  line-height: 1.2
}

.inline-list {
  display: grid;
  gap: 8px
}

.inline-list-item {
  padding-left: 16px;
  position: relative
}

.inline-list-item::before {
  content: '\2022';
  position: absolute;
  left: 0;
  color: var(--gold-dim)
}

.scam-card {
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px
}

.scam-card .scam-country {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .4px;
  margin-bottom: 6px
}

.scam-card h5 {
  margin: 0 0 8px;
  font-size: 14px;
  color: var(--gold-soft)
}

.scam-card p {
  font-size: 13px;
  color: #cfd3dc;
  line-height: 1.6;
  margin: 0
}

.filter-bar {
  display: flex;
  gap: 10px;
  margin-bottom: 18px;
  flex-wrap: wrap
}

.filter-bar select {
  width: auto;
  min-width: 180px
}

@media (max-width:1100px) {
  .report-body {
    grid-template-columns: 1fr
  }
}

@media (max-width:900px) {

  .w4,
  .w6,
  .w8,
  .w3 {
    grid-column: span 12
  }

  .nav {
    padding: 14px 18px;
    align-items: flex-start;
    gap: 14px;
    flex-direction: column
  }

  .nav-links a {
    margin-left: 0;
    margin-right: 18px;
    margin-bottom: 8px;
    display: inline-block
  }

  .wrap {
    padding: 24px 16px 54px
  }

  .report-title-row h1 {
    font-size: 32px
  }

  .report-header {
    align-items: stretch
  }

  .btn-download {
    width: 100%;
    justify-content: center
  }
}

@media (max-width:640px) {
  .hero {
    padding: 62px 18px 38px
  }

  .page-hero {
    padding: 44px 18px 28px
  }

  .card,
  .info-card,
  .redlines-card,
  .sidebar-card {
    padding: 16px
  }

  .report-title-row {
    gap: 10px
  }

  .badge-pill {
    width: fit-content
  }

  .socket-card {
    width: 78px
  }
}