/* ==========================================================================
   Diwa Lucky - diwaluckygames.com
   Structure, geometry and component anatomy are a 1:1 clone of the ALL DIWA
   GAME (Appyn "rounded sidg aprm-2 full-width") reference, read from computed
   styles rather than the theme CSS.
   Customised per brief: colour palette, hero art, download button, content.
   ========================================================================== */

:root {
  /* Accent: electric indigo, hue 251. Chosen as the freest hue on the wheel
     that does not collide with the fixed Download green or Telegram blue. */
  --brand:         #4524db;
  --brand-dark:    #351ba7;   /* hover                                      */
  --brand-on-dark: #9784eb;   /* accent text on the dark chrome (5.17:1)    */
  --brand-soft:    #eeeafd;
  --brand-soft-2:  #e1dbfa;

  /* Neutrals locked to the reference. */
  --page:        #e6e9ef;
  --surface:     #ffffff;
  --tint:        #f7f8fa;     /* cards sitting inside a white box            */
  --chrome:      #1d222d;
  --chrome-deep: #13161d;
  --hair:        #eaeaea;
  --ink:         #4c4c4c;
  --title-ink:   #444444;
  /* Reference secondaries (#a7a7a7 / #ababab / #c6c6c6) measure 2.4 / 2.3 /
     1.7 on white and fail AA, so all three collapse to one AA-safe grey. */
  --sec:         #696969;
  --shadow:      2px 2px 2px 0 #e3e3e3;

  --dl:      #5edd1f;         /* Download APK, reference green               */
  --dl-ink:  #0c2a05;         /* white on that green is 1.77:1, so near-black */
  --tg:      #006fa7;         /* Telegram brand blue                          */

  --measure: 1220px;          /* shared cap: header, content, footer, band    */
  --gutter:  10px;
  --sidebar: 300px;
  --radius:  20px;
  --radius-pill: 50px;
  --radius-app:  25px;

  --t: 200ms cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: 'Open Sans', Arial, sans-serif;
  font-size: 13px;            /* reference parity */
  font-weight: 400;
  color: var(--ink);
  background: var(--page);
}

/* Display face carries the brand; body stays Open Sans for reference parity. */
h1,h2,h3,h4,.title-section,.main-box-title,.box-title,.bav .title,.logo-text,
.subcontainer h1,.subcontainer h2,.viewmore a,.buttond,.widget-title {
  font-family: 'Epilogue', 'Open Sans', Arial, sans-serif;
}

img { max-width: 100%; height: auto; }
a { color: var(--brand); text-decoration: none; transition: color var(--t); }
a:hover { color: var(--brand-dark); }
a, button, summary, [role="button"] { cursor: pointer; }

:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
  border-radius: 4px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--brand); color: #fff; padding: 10px 16px; border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; color: #fff; }

/* --------------------------------------------------------------------------
   Shared measure. The reference runs full-width but reserves a ~257px empty
   ad column, so its real content is ~1200px. We cap instead of reproducing
   an empty gutter: 1220 - 20 padding = 1200 inner = 880 main + 20 + 300 side.
   Header, content, footer and the disclaimer band all share this.
   -------------------------------------------------------------------------- */
.container {
  max-width: var(--measure);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  display: flex;
  position: relative;
}
.container.is-block { display: block; }

/* ============================ HEADER ==================================== */
#header {
  background: var(--chrome);
  height: 60px;
  border-bottom: 2px solid var(--brand);
  position: sticky; top: 0; z-index: 40;
}
#header .container { align-items: center; justify-content: space-between; height: 60px; }

.logo { display: flex; align-items: center; gap: 10px; }
.logo a { display: flex; align-items: center; }
.logo img { height: 40px; width: auto; object-fit: contain; display: block; }

nav.main-nav ul {
  list-style: none; display: flex; align-items: center; gap: 4px; margin: 0; padding: 0;
}
nav.main-nav a {
  display: block; padding: 8px 12px; color: #fff; font-size: 13px; font-weight: 600;
  border-radius: var(--radius); transition: background var(--t), color var(--t);
}
nav.main-nav a:hover { background: rgba(255,255,255,.08); color: #fff; }
nav.main-nav a.is-active { color: var(--brand-on-dark); background: rgba(255,255,255,.06); }
nav.main-nav a.nav-cta {
  background: var(--brand); color: #fff; margin-left: 6px;
}
nav.main-nav a.nav-cta:hover { background: var(--brand-dark); color: #fff; }

.menu-open {
  display: none; color: #fff; background: none; border: 0; padding: 6px;
  line-height: 0; border-radius: 8px;
}

/* ============================ HERO ====================================== */
#subheader {
  position: relative; overflow: hidden;
  padding: 90px 0 40px;
  background: #000;
  color: #fff;
  text-align: center;
  border-bottom: 2px solid var(--brand);
  margin-bottom: 20px;
}
#subheader .imgbg { position: absolute; inset: 0; }
#subheader .imgbg img {
  width: 120%; max-width: none; height: 100%;
  object-fit: cover; opacity: .3;
  margin-left: -10%;
}
/* Scrim keeps the headline zone readable over the generated art. */
#subheader::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(8,6,24,.82) 0%, rgba(8,6,24,.55) 45%, rgba(8,6,24,.88) 100%),
    radial-gradient(60% 55% at 50% 38%, rgba(69,36,219,.32), transparent 70%);
}
.subcontainer { position: relative; z-index: 2; max-width: 730px; margin: 0 auto; padding: 0 10px; }
.subcontainer h1 {
  font-size: 40px; line-height: 46px; font-weight: 300;
  margin: 0; padding: 0 0 20px; color: #fff;
}
.subcontainer h2 {
  font-size: 16px; line-height: 30px; font-weight: 300; margin: 0; color: #fff;
}

/* Search box: real client-side filter over the catalogue, never decorative. */
#searchBox { max-width: 600px; margin: 30px auto 0; position: relative; }
#searchBox form { display: flex; }
.sb_search {
  width: 100%; height: 44px; border: 0; border-radius: var(--radius-pill);
  background: #f2f2f2; color: #43454b; font-size: 16px;
  font-family: inherit;
  padding: 0 110px 0 20px; margin-right: -70px;
  box-shadow: inset 0 1px 1px rgba(0,0,0,.125);
}
.sb_submit {
  width: 70px; height: 44px; flex: 0 0 70px; border: 0; border-radius: var(--radius-pill);
  background: var(--brand); color: #fff; line-height: 0;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--t);
}
.sb_submit:hover { background: var(--brand-dark); }

/* Live results panel */
.sb_results {
  position: absolute; left: 0; right: 0; top: 52px; z-index: 30;
  background: #fff; border-radius: var(--radius); box-shadow: 0 10px 30px rgba(8,6,24,.28);
  overflow: hidden; text-align: left; display: none;
}
.sb_results.is-open { display: block; }
.sb_results a {
  display: flex; align-items: center; gap: 10px; padding: 8px 14px;
  color: var(--ink); font-size: 13px; font-weight: 600;
  border-bottom: 1px solid var(--hair);
}
.sb_results a:last-child { border-bottom: 0; }
.sb_results a:hover, .sb_results a:focus-visible { background: var(--brand-soft); color: var(--brand-dark); }
.sb_results img { width: 28px; height: 28px; border-radius: 8px; }
.sb_results .sb_none { padding: 12px 14px; color: var(--sec); font-size: 13px; }

/* Category row: 40x40 round icons. The reference's row is dead "#" social
   links; ours point at catalogue pages that exist (D5.4). */
.cat-row { position: relative; z-index: 2; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 26px; }
.cat-row a { display: flex; flex-direction: column; align-items: center; gap: 6px; color: #fff; }
.cat-row .ci {
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.14); color: #fff; opacity: .72;
  transition: opacity var(--t), background var(--t), transform var(--t);
}
.cat-row a:hover .ci, .cat-row a:focus-visible .ci { opacity: 1; background: var(--brand); transform: translateY(-2px); }
.cat-row span { font-size: 11px; font-weight: 600; letter-spacing: .02em; }

/* Compact search band on inner pages */
#subheader.np {
  background: var(--surface); color: var(--ink);
  border-radius: 0 0 var(--radius) var(--radius);
  border-bottom: 0; box-shadow: var(--shadow);
  padding: 20px 25px; margin-bottom: 20px; text-align: left;
}
#subheader.np::after { display: none; }
#subheader.np #searchBox { margin: 0 auto; }
#subheader.np .sb_search { background: var(--tint); }

/* ============================ LAYOUT ==================================== */
#main-site { padding-bottom: 10px; }
.sections { width: calc(100% - var(--sidebar) - 20px); }
.container.is-block .sections { width: 100%; }
.section { margin-bottom: 30px; }

#sidebar {
  width: var(--sidebar); flex: 0 0 var(--sidebar); margin-left: 20px;
  position: sticky; top: 80px; align-self: flex-start;
}

/* Section head: 22px/400 with a 1px hairline, plus the chip-edge dash. */
.title-section {
  font-size: 22px; font-weight: 400; color: var(--ink);
  margin: 3px 10px 10px; padding: 0 0 10px;
  border-bottom: 1px solid var(--hair);
  display: flex; align-items: flex-end; justify-content: space-between; gap: 12px;
  position: relative;
}
.title-section::after {
  content: ""; position: absolute; left: 0; bottom: -1px; height: 2px; width: 54px;
  background: var(--brand);
}
.title-section .ts-more { font-size: 12px; font-weight: 600; }

/* ============================ CARDS ===================================== */
.baps { display: flex; flex-wrap: wrap; }
.bav { padding: 10px; text-align: center; }
.bav1 { width: 16.6666%; }
.bav a {
  display: block; background: var(--surface); border-radius: var(--radius);
  padding: 15px; box-shadow: var(--shadow); color: var(--ink);
  border-bottom: 2px solid var(--brand);
  transition: transform var(--t), box-shadow var(--t);
  height: 100%;
}
.bav a:hover, .bav a:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 8px 18px rgba(8,6,24,.14);
  color: var(--ink);
}
.bav .bloque-imagen img {
  width: 100%; height: auto; aspect-ratio: 1; object-fit: cover;
  border-radius: 14px; display: block;
}
.bav .title {
  display: block; font-size: 14px; font-weight: 600; color: var(--title-ink);
  height: 20px; line-height: 20px; margin-top: 10px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bav .meta {
  display: block; font-size: 12px; color: var(--sec);
  height: 18px; line-height: 18px; margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bav .meta.bonus { color: var(--brand); font-weight: 600; }
.bav .cardcta {
  display: block; margin-top: 10px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--brand); border-top: 1px solid var(--hair); padding-top: 8px;
}
.bav a:hover .cardcta { color: var(--brand-dark); }

/* Wide tile rail */
.bav2 { width: 33.3333%; }
.bav2 a { display: flex; align-items: center; gap: 12px; text-align: left; height: 100%; }
.bav2 .bloque-imagen { flex: 0 0 75px; }
.bav2 .bloque-imagen img { width: 75px; height: 75px; border-radius: var(--radius); }
.bav2 .cont-text { min-width: 0; flex: 1; }
.bav2 .title, .bav2 .meta { text-align: left; }
.bav2 .cardcta { border-top: 0; padding-top: 4px; margin-top: 4px; }

/* VIEW MORE pill */
.viewmore { text-align: center; padding: 10px 0 0; }
.viewmore a {
  display: inline-block; width: 225px; max-width: 100%;
  line-height: 40px; border-radius: var(--radius-pill);
  background: var(--brand); color: #fff;
  font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  transition: background var(--t), transform var(--t);
}
.viewmore a:hover { background: var(--brand-dark); color: #fff; transform: translateY(-2px); }

/* ============================ SIDEBAR =================================== */
.widget {
  background: var(--surface); border-radius: var(--radius); padding: 20px;
  box-shadow: var(--shadow); margin-bottom: 20px;
  border-top: 2px solid var(--brand);
}
.widget-title {
  font-size: 17px; font-weight: 700; text-transform: uppercase; color: var(--sec);
  margin: 0 0 14px; padding-bottom: 10px; position: relative;
}
.widget-title::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 34px; height: 3px;
  background: var(--brand);
}
.widget ul { list-style: none; margin: 0; padding: 0; }
.widget li { border-bottom: 1px solid var(--hair); }
.widget li:last-child { border-bottom: 0; }
.widget li a {
  display: flex; align-items: center; gap: 10px; padding: 8px 0;
  color: var(--ink); font-size: 13px; font-weight: 600;
}
.widget li a:hover { color: var(--brand); }
.widget li img { width: 34px; height: 34px; border-radius: 10px; flex: 0 0 34px; }
.widget .w-sub { display: block; font-size: 11px; color: var(--sec); font-weight: 400; }
.widget .cat-list a { justify-content: space-between; }
.widget .cat-list .n {
  background: var(--brand-soft); color: var(--brand-dark);
  border-radius: var(--radius-pill); font-size: 11px; font-weight: 700; padding: 2px 9px;
}
.widget .w-search { display: flex; }
.widget .w-search input {
  flex: 1; min-width: 0; height: 38px; border: 1px solid var(--hair); border-right: 0;
  border-radius: var(--radius-pill) 0 0 var(--radius-pill);
  padding: 0 14px; font-size: 13px; font-family: inherit; background: var(--tint); color: var(--ink);
}
.widget .w-search button {
  border: 0; background: var(--brand); color: #fff; width: 46px; height: 38px;
  border-radius: 0 var(--radius-pill) var(--radius-pill) 0; line-height: 0;
  display: flex; align-items: center; justify-content: center;
}
.widget .w-search button:hover { background: var(--brand-dark); }

/* ============================ SINGLE PAGE =============================== */
.box {
  background: var(--surface); border-radius: var(--radius);
  padding: 20px 25px; box-shadow: var(--shadow); margin: 0 0 20px;
}
.breadcrumb { font-size: 12px; color: var(--sec); margin-bottom: 10px; }
.breadcrumb a { color: var(--sec); }
.breadcrumb a:hover { color: var(--brand); }
.breadcrumb span[aria-current] { color: var(--ink); }

.app-s { display: block; }
/* The reference emits the title block before the icon column and floats the
   icon left, so the H1 precedes the download button in the DOM. */
.app-head { display: flex; align-items: flex-start; gap: 20px; }
.app-icb.s1 { width: 150px; flex: 0 0 150px; order: -1; }
.app-spe.s2 { flex: 1; min-width: 0; }

.image-single {
  width: 150px; height: 150px; border-radius: var(--radius-app);
  background-size: cover; background-position: center; display: block;
}
.buttond {
  display: flex; align-items: center; gap: 8px;
  width: 150px; min-height: 33px; border-radius: var(--radius);
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  padding: 8px 5px 8px 8px; margin-top: 10px;
  color: #fff; position: relative; overflow: hidden;
  transition: filter var(--t), transform var(--t);
}
.buttond .bi {
  width: 30px; flex: 0 0 30px; align-self: stretch; margin: -8px 0 -8px -8px;
  background: rgba(0,0,0,.1); display: flex; align-items: center; justify-content: center;
}
.buttond:hover { filter: brightness(1.06); transform: translateY(-1px); }
.buttond.downloadAPK { background: var(--dl); color: var(--dl-ink); }
.buttond.downloadAPK:hover { color: var(--dl-ink); }
.buttond.t { background: var(--tg); color: #fff; }
.buttond.t:hover { color: #fff; }

.link-report {
  margin-top: 10px; font-size: 12px; color: var(--sec); text-align: center;
  display: flex; align-items: center; justify-content: center; gap: 5px;
}

h1.main-box-title {
  font-size: 38px; line-height: 48px; font-weight: 700; color: var(--ink);
  margin: 0 7px 0 0; display: inline-block;
}
.categoria {
  display: inline-block; font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--brand); margin-bottom: 6px;
}
.fuente { font-size: 12px; color: var(--sec); }
.descripcion { font-size: 13px; line-height: 21px; text-align: justify; margin: 14px 0 6px; }

.tagrow { margin: 10px 0 0; }
.tagrow a {
  display: inline-block; font-size: 13px; font-weight: 600; color: #fff;
  background: var(--brand); border-radius: var(--radius);
  padding: 3px 10px; margin: 8px 8px 0 0;
  transition: background var(--t);
}
.tagrow a:hover { background: var(--brand-dark); color: #fff; }

.data-app { display: flex; flex-wrap: wrap; margin: 15px 0; }
.da-s { width: 33.3333%; padding: 0 10px 0 0; margin: 8px 0 0; font-size: 13px; }
.da-s b { display: block; color: var(--ink); }
.da-s span { color: var(--sec); }

.box-social ul { list-style: none; display: flex; flex-wrap: wrap; margin: 0; padding: 0; }
.box-social li { margin: 5px 5px 0 0; }
.botones_sociales a {
  display: flex; align-items: center; gap: 6px;
  width: 104px; min-height: 31px; border-radius: var(--radius);
  font-size: 11px; color: #fff; padding: 0 8px; text-align: left;
  transition: filter var(--t);
}
.botones_sociales a:hover { filter: brightness(1.1); color: #fff; }
.botones_sociales .facebook  { background: #4864a0; }
.botones_sociales .twitter   { background: #14171a; }
.botones_sociales .pinterest { background: #bd081c; }
.botones_sociales .telegram  { background: var(--tg); }
.botones_sociales .whatsapp  { background: #1d7e36; }

/* .entry h2 (0,1,1) out-specifies a bare .box-title (0,1,0), so the box title
   must be scoped through every wrapper it can appear in. */
.entry h2.box-title, .ed h2.box-title, .box-title {
  font-size: 17px; font-weight: 700; text-transform: uppercase; color: var(--sec);
  padding: 15px 0; margin: -20px 0 15px; position: relative; line-height: 23px;
}
.entry h2.box-title::after, .ed h2.box-title::after, .box-title::after {
  content: ""; position: absolute; left: 0; bottom: 8px; width: 34px; height: 3px;
  background: var(--brand);
}

/* Detail-page badge sits in the flow, never absolute. */
.badge {
  position: static; display: inline-block; vertical-align: middle;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  border-radius: var(--radius-pill); padding: 3px 10px; margin-left: 6px;
}
.badge.new { background: var(--brand-soft); color: var(--brand-dark); }
.badge.hot { background: #ffe9e3; color: #a2330f; }
/* Grid-card badges may stay absolute inside their own card. */
.bav .bloque-imagen { position: relative; }
.bav .bloque-imagen .badge { position: absolute; top: 6px; left: 6px; }

/* Related row fills the full measure: 5 items at 20% each. */
.rlat .baps { margin: 0 -10px; }
.rlat .bav { width: 20%; }

/* ============================ ENTRY (article body) ====================== */
.entry { font-size: 14px; line-height: 25px; color: var(--ink); }
.entry h2 {
  font-size: 21px; line-height: 25px; font-weight: 700; color: var(--ink);
  margin: 20px 0; text-align: start;
}
.entry h3 {
  font-size: 17px; line-height: 24px; font-weight: 700; color: var(--ink); margin: 18px 0 8px;
}
.entry h4 { font-size: 15px; font-weight: 700; margin: 14px 0 6px; }
.entry p { margin: 0 0 15px; }
.entry ul { margin: 0 0 15px; padding-left: 20px; }
.entry li { margin-bottom: 8px; }
.entry > *:first-child { margin-top: 0; }

/* ============================ C11 EDITORIAL ENGINE ====================== */
.ed { font-size: 14px; line-height: 25px; }
.ed-lede p { font-size: 16px; line-height: 28px; color: var(--ink); margin: 0 0 15px; }
.ed-sec { margin: 28px 0 0; }
.entry .ed-sec > h2, .ed-sec > h2 {
  font-size: 21px; line-height: 27px; font-weight: 700; color: var(--ink);
  margin: 0 0 6px; text-align: start; position: relative; padding-bottom: 10px;
}
.entry .ed-sec > h2::after, .ed-sec > h2::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 54px;
  background: var(--brand);
}
.ed-sec > p { margin: 0 0 15px; }
.ed-sec ul { margin: 0 0 15px; padding-left: 20px; }
.ed-sec li { margin-bottom: 8px; }

/* Card grid. Cards are tinted, never white-on-white inside the white box. */
.ed-grid { display: grid; gap: 14px; margin: 16px 0 6px; }
.ed-grid.c4 { grid-template-columns: repeat(4, 1fr); }
.ed-grid.c3 { grid-template-columns: repeat(3, 1fr); }
.ed-card {
  background: var(--tint); border: 1px solid var(--hair); border-radius: var(--radius);
  padding: 16px 16px 14px; position: relative;
  border-bottom: 2px solid var(--brand);
  transition: transform var(--t), box-shadow var(--t);
}
.ed-card:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(8,6,24,.1); }
.ed-badge {
  width: 34px; height: 34px; border-radius: 11px;
  background: var(--brand-soft); color: var(--brand-dark);
  display: flex; align-items: center; justify-content: center; margin-bottom: 10px;
}
.ed-card h3 { font-size: 15px; line-height: 21px; font-weight: 700; color: var(--ink); margin: 0 0 6px; }
.ed-card p { margin: 0 0 10px; font-size: 13px; line-height: 22px; }
.ed-card p:last-child, .ed-card ul:last-child { margin-bottom: 0; }
.ed-card ul { padding-left: 18px; margin: 0 0 10px; }

/* CTA band */
.ed-cta {
  background: linear-gradient(135deg, var(--chrome) 0%, #241d4d 55%, var(--chrome-deep) 100%);
  border-radius: var(--radius); padding: 30px 26px; margin: 28px 0 6px;
  text-align: center; color: #fff; position: relative; overflow: hidden;
}
.ed-cta::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(60% 80% at 50% 0%, rgba(151,132,235,.30), transparent 70%);
}
.ed-cta > * { position: relative; z-index: 1; }
/* .entry h2 sets text-align:start, which a centred band does not override. */
.entry .ed-cta h2, .ed-cta h2 { color: #fff; text-align: center; margin: 0 0 10px; padding-bottom: 0; font-size: 22px; line-height: 30px; }
.entry .ed-cta h2::after, .ed-cta h2::after { display: none; }
.ed-cta p { color: #e6e3f5; margin: 0 auto 8px; }
.ed-cta .ed-cta-btns { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
/* .entry a sets the accent colour and would win over a single button class. */
.entry .hx-btn, .ed .hx-btn, a.hx-btn {
  display: inline-flex; align-items: center; gap: 8px;
  border-radius: var(--radius-pill); padding: 11px 24px;
  font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  transition: background var(--t), color var(--t), transform var(--t);
}
.entry .hx-btn.primary, .ed .hx-btn.primary, a.hx-btn.primary {
  background: #fff; color: var(--brand-dark);
}
.entry .hx-btn.primary:hover, .ed .hx-btn.primary:hover, a.hx-btn.primary:hover {
  background: var(--brand-soft); color: var(--brand-dark); transform: translateY(-2px);
}
.entry .hx-btn.ghost, .ed .hx-btn.ghost, a.hx-btn.ghost {
  background: transparent; color: #fff; box-shadow: inset 0 0 0 2px rgba(255,255,255,.55);
}
.entry .hx-btn.ghost:hover, .ed .hx-btn.ghost:hover, a.hx-btn.ghost:hover {
  background: rgba(255,255,255,.12); color: #fff; transform: translateY(-2px);
}
.entry .hx-btn.solid, .ed .hx-btn.solid, a.hx-btn.solid { background: var(--brand); color: #fff; }
.entry .hx-btn.solid:hover, .ed .hx-btn.solid:hover, a.hx-btn.solid:hover {
  background: var(--brand-dark); color: #fff; transform: translateY(-2px);
}

/* FAQ accordion. Native details/summary: keyboard and SR support for free,
   answers stay in the DOM when collapsed so they remain crawlable. */
.faq { margin: 16px 0 6px; }
.faq details {
  background: var(--tint); border: 1px solid var(--hair); border-radius: var(--radius);
  margin-bottom: 10px; overflow: hidden;
}
.faq summary {
  list-style: none; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 14px 18px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::marker { content: ""; }
.entry .faq-q, .ed .faq-q, .faq-q {
  font-size: 15px; line-height: 22px; font-weight: 700; color: var(--ink); margin: 0;
}
.faq .chev { flex: 0 0 auto; color: var(--brand); transition: transform var(--t); }
.faq details[open] .chev { transform: rotate(180deg); }
.faq details[open] summary { background: var(--brand-soft); }
.faq .faq-a { padding: 0 18px 14px; }
.faq .faq-a > *:last-child { margin-bottom: 0; }
.faq .faq-a p { margin: 0 0 10px; font-size: 13px; line-height: 23px; }
.faq .faq-a ul { margin: 0 0 10px; padding-left: 18px; }

/* ============================ FOOTER ==================================== */
#footer {
  background: var(--chrome); color: #fff; border-top: 2px solid var(--brand);
  margin-top: 10px;
}
#footer .container { display: block; padding-top: 34px; padding-bottom: 10px; }
.footer-promo {
  background: var(--chrome-deep); border-radius: var(--radius);
  padding: 30px 20px; text-align: center; border-top: 3px solid var(--brand);
  box-shadow: 0 -2px 20px rgba(69,36,219,.28);
}
.footer-promo h2 { color: #fff; font-size: 26px; margin: 0 0 10px; font-weight: 700; }
.footer-promo p { color: #d9dbe4; font-size: 14px; line-height: 26px; margin: 0 auto; }
.footer-promo .fp-links { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.footer-promo .fp-links a {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 20px; background: #111522; color: var(--brand-on-dark);
  border: 1px solid var(--brand); border-radius: var(--radius-pill); font-size: 13px; font-weight: 600;
  transition: background var(--t), color var(--t);
}
.footer-promo .fp-links a:hover { background: var(--brand); color: #fff; }

.footer-cols { display: flex; flex-wrap: wrap; gap: 24px; padding: 30px 0 10px; }
.footer-col { flex: 1 1 200px; min-width: 0; }
.footer-col h3 {
  font-size: 13px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--brand-on-dark); margin: 0 0 12px; font-weight: 700;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: 8px; }
.footer-col a { color: #d9dbe4; font-size: 13px; }
.footer-col a:hover { color: #fff; }
.footer-trust { display: flex; flex-wrap: wrap; gap: 10px; }
.footer-trust span {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: #d9dbe4; background: rgba(255,255,255,.06);
  border-radius: var(--radius-pill); padding: 6px 12px;
}
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.12); padding: 16px 0;
  font-size: 12px; color: #b9bdc9; line-height: 22px;
}

/* Disclaimer band shares the measure */
.disclaimer-band { background: var(--chrome-deep); color: #a9aebb; }
.disclaimer-band .container { display: block; padding-top: 16px; padding-bottom: 16px; }
.disclaimer-band p { margin: 0; font-size: 12px; line-height: 21px; }

#toTop {
  position: fixed; right: 18px; bottom: 84px; z-index: 45;
  width: 42px; height: 42px; border-radius: 50%; border: 0;
  background: var(--brand); color: #fff; line-height: 0;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity var(--t), transform var(--t);
  box-shadow: 0 6px 18px rgba(8,6,24,.3);
}
#toTop.is-on { opacity: 1; pointer-events: auto; }
#toTop:hover { transform: translateY(-3px); }

/* Floating gradient CTA pill. The reference's four-stop gradient is kept but
   veiled, because its #00c6ff stop is 2.0:1 against white. */
.float-cta {
  position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 46;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 12px 26px; border-radius: var(--radius-pill);
  color: #fff; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  background:
    linear-gradient(rgba(0,0,0,.4), rgba(0,0,0,.4)),
    linear-gradient(135deg,#00c6ff,#0072ff,#8e2de2,#ff0080);
  background-size: 100% 100%, 300% 300%;
  animation: fcta 9s ease infinite;
  box-shadow: 0 8px 26px rgba(8,6,24,.4);
  white-space: nowrap;
}
.float-cta:hover { color: #fff; transform: translateX(-50%) translateY(-2px); }
@keyframes fcta {
  0%,100% { background-position: 0 0, 0% 50%; }
  50%     { background-position: 0 0, 100% 50%; }
}

/* Reveal. Only below-fold elements get .rv, and a timeout clears them all, so
   content never depends on the observer firing. */
.rv { opacity: 0; transform: translateY(14px); }
.rv.is-in { opacity: 1; transform: none; transition: opacity .5s ease, transform .5s cubic-bezier(.16,1,.3,1); }

/* ============================ RESPONSIVE ================================ */
@media (max-width: 1100px) {
  .bav1 { width: 20%; }
  .rlat .bav { width: 25%; }
}
@media (max-width: 1023px) {
  .container { flex-wrap: wrap; }
  .sections { width: 100%; }
  #sidebar {
    width: 100%; flex: 0 0 100%; margin-left: 0; margin-top: 20px;
    position: static;
  }
  .bav1 { width: 25%; }
  .rlat .bav { width: 33.3333%; }
  .ed-grid.c4 { grid-template-columns: repeat(3, 1fr); }
  .subcontainer h1 { font-size: 34px; line-height: 40px; }
}
@media (max-width: 767px) {
  body { font-size: 16px; }
  .entry, .ed { font-size: 16px; line-height: 27px; }
  .bav .title { font-size: 14px; }
  .bav .meta { font-size: 12px; }
  #header .container { position: relative; }
  .menu-open { display: flex; }
  nav.main-nav ul {
    display: none; position: absolute; top: 60px; right: 10px; left: 10px;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--chrome); border: 1px solid rgba(255,255,255,.12);
    border-radius: var(--radius); padding: 8px; z-index: 50;
    box-shadow: 0 16px 34px rgba(0,0,0,.4);
  }
  nav.main-nav.is-open ul { display: flex; }
  nav.main-nav a { padding: 11px 14px; font-size: 15px; }
  nav.main-nav a.nav-cta { margin: 6px 0 0; text-align: center; }
  #subheader { padding: 50px 0 30px; }
  .subcontainer h1 { font-size: 28px; line-height: 34px; }
  .subcontainer h2 { font-size: 14px; line-height: 24px; }
  .bav1 { width: 33.3333%; }
  .bav2 { width: 100%; }
  .rlat .bav { width: 50%; }
  .ed-grid.c4, .ed-grid.c3 { grid-template-columns: repeat(2, 1fr); }
  .app-head { flex-direction: column; }
  .app-icb.s1 { width: 100%; flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
  .image-single { margin: 0 auto; }
  .buttond { width: calc(50% - 5px); margin-top: 0; }
  .link-report { width: 100%; }
  h1.main-box-title { font-size: 26px; line-height: 34px; }
  .da-s { width: 50%; }
  .box { padding: 18px 16px; }
  .float-cta { font-size: 12px; padding: 11px 18px; }
  #toTop { bottom: 74px; right: 12px; }
}
@media (max-width: 519px) {
  .bav1 { width: 50%; }
  .rlat .bav { width: 50%; }
  .ed-grid.c4, .ed-grid.c3 { grid-template-columns: 1fr; }
  .da-s { width: 100%; }
  .footer-cols { gap: 18px; }
}
@media (max-width: 374px) {
  .bav1 { width: 100%; }
  .buttond { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  .rv { opacity: 1; transform: none; }
  .float-cta { animation: none; }
}