/* ==========================================================================
   Diwa Lucky - diwaluckyapk.com
   Appyn clone geometry (measured from the reference, not from its theme CSS):
   20px cards/boxes/buttons, 50px pills, 25px single-page icon, 2px accent
   bottom border, 2px 2px 2px #e3e3e3 shadow, Open Sans 13/25 body.
   Palette is this site's own: grape accent replaces the reference magenta.
   ========================================================================== */

:root {
  /* accent: hue 289 grape. 6.70:1 on white and 5.51:1 on the page ground, so
     white labels on every accent fill clear AA. Chosen because it is the only
     unused hue family that also sits 89deg from the fixed Telegram blue and
     171deg from the fixed Download green. */
  --accent: #9426ac;
  --accent-dark: #7a1c8e;      /* hover, 8.81:1 on white */
  --accent-soft: #f7eafa;      /* tint, carries accent text at 5.78:1 */
  --accent-on-dark: #de9beb;   /* accent text on the chrome, 7.58:1 on #1d222d */

  --ground: #e6e9ef;
  --surface: #fff;
  --tint: #f7f8fa;             /* cards inside a white box, so they never vanish */
  --hair: #eaeaea;
  --chrome: #1d222d;
  --chrome-deep: #13161d;

  --ink: #4c4c4c;
  --ink-strong: #444;
  /* The reference runs its secondary text at #a7a7a7 / #ababab / #c6c6c6, which
     measure 2.4:1, 2.3:1 and 1.7:1 on white and fail WCAG AA. C10's 4.5:1 floor
     outranks visual parity, so all three collapse to #767676 (4.54:1). This and
     the 11px card developer line are the only deliberate deviations from the
     measured reference values. */
  --muted: #767676;
  --muted-2: #767676;
  --crumb: #767676;

  --gold: #f9bd00;
  --go: #5edd1f;               /* Download APK fill, fixed by the reference */
  --go-ink: #0c2a05;           /* its label: white on that green is only 1.77:1 */
  --tg: #006fa7;               /* Telegram, fixed by the reference */

  --measure: 1220px;
  --radius: 20px;
  --pill: 50px;
  --shadow: 2px 2px 2px 0 #e3e3e3;

  --body: "Open Sans", Arial, sans-serif;
  --display: "Bricolage Grotesque", "Open Sans", Arial, sans-serif;
}

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

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 400 13px/normal var(--body);
  -webkit-text-size-adjust: 100%;
}

img { max-width: 100%; }
a { color: var(--accent); text-decoration: none; cursor: pointer; }
a:hover { color: var(--accent-dark); }
button { font: inherit; cursor: pointer; }

.ic { display: block; flex: none; }

.sr-only, .skip {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip:focus {
  position: fixed; top: 8px; left: 8px; z-index: 200; width: auto; height: auto;
  clip: auto; margin: 0; padding: 10px 16px; background: var(--surface);
  color: var(--accent-dark); border-radius: var(--radius); box-shadow: var(--shadow);
}

:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
#header :focus-visible, #subheader :focus-visible, .float-cta:focus-visible,
.ecta :focus-visible { outline-color: var(--accent-on-dark); }

/* ------------------------------------------------------- shared measure
   Header, content, footer and the disclaimer band all share this cap and
   centring so every column lines up on one vertical edge (D1). */
.container {
  width: 100%;
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 10px;
  display: flex;
  position: relative;
}
.container.is-block { display: block; }

/* --------------------------------------------------------------- header */
#header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 90;
  height: 60px; background: var(--chrome);
  border-bottom: 2px solid var(--accent);
}
#header .container { height: 60px; justify-content: space-between; align-items: center; }

.logo { display: flex; align-items: center; gap: 10px; color: #fff; }
.logo img { width: 40px; height: 40px; object-fit: contain; border-radius: 10px; }
.logo-t { font: 600 17px/1 var(--display); letter-spacing: .2px; }
.logo:hover { color: var(--accent-on-dark); }

.menu-open {
  display: none; background: none; border: 0; color: #fff; padding: 8px;
  border-radius: 12px;
}
.menu-main-menu-container ul.menu {
  display: flex; align-items: center; gap: 0; margin: 0; padding: 0; list-style: none;
}
#header .menu a {
  display: block; padding: 0 15px; font: 600 13px/35px var(--body); color: #fff;
  border-radius: var(--pill); transition: color .2s ease, background-color .2s ease;
}
#header .menu a:hover { color: var(--accent-on-dark); }
#header .menu .current-menu-item > a { color: var(--accent-on-dark); }
#header .menu .menu-cta a {
  background: var(--accent); margin-left: 8px; padding: 0 18px;
}
#header .menu .menu-cta a:hover { background: var(--accent-dark); color: #fff; }
#header .menu .menu-cta.current-menu-item > a { background: var(--accent-dark); color: #fff; }

/* ----------------------------------------------------------- hero band */
#subheader {
  position: relative; overflow: hidden; text-align: center; color: #fff;
  background: #000; padding: 90px 0 40px; margin-bottom: 20px;
  border-bottom: 2px solid var(--accent);
}
#subheader .imgbg { position: absolute; inset: 0; }
#subheader .imgbg img {
  /* max-width:none: the global img cap would clamp this deliberate 120% overscan */
  position: absolute; top: 0; left: -10%; width: 120%; max-width: none; height: 100%;
  object-fit: cover; opacity: .45;
}
/* scrim keeps the headline zone readable over the generated art */
#subheader .imgbg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.18) 48%, rgba(0,0,0,.6) 100%);
}
#subheader .subcontainer {
  position: relative; width: 730px; max-width: 100%; margin: 0 auto; padding: 0 10px;
}
#subheader h1 {
  font: 300 40px/46px var(--display); margin: 0; padding: 0 0 20px; color: #fff;
}
#subheader h2 { font: 300 16px/30px var(--body); margin: 0; color: #fff; }

#searchBox { position: relative; width: 600px; max-width: 100%; margin: 30px auto 0; }
#searchBox form { display: flex; }
input.sb_search {
  width: 100%; height: 44px; border: 0; border-radius: var(--pill);
  background: #f2f2f2; color: #43454b; font: 400 16px/44px Arial, sans-serif;
  padding: 0 110px 0 20px; margin: 0 -70px 0 0;
  box-shadow: inset 0 1px 1px rgba(0,0,0,.125);
}
input.sb_search::placeholder { color: #75787f; }
button.sb_submit {
  width: 70px; height: 44px; flex: none; border: 0; border-radius: var(--pill);
  background: var(--accent); color: #fff; display: flex; align-items: center;
  justify-content: center; transition: background-color .2s ease;
}
button.sb_submit:hover { background: var(--accent-dark); }

/* round category row, one brand colour each, pointing at real sections */
.cats { display: flex; justify-content: center; gap: 18px; margin: 26px 0 0; padding: 0; list-style: none; flex-wrap: wrap; }
.cats a { display: flex; flex-direction: column; align-items: center; gap: 7px; color: #fff; opacity: .72; transition: opacity .2s ease, transform .2s ease; }
.cats a:hover { opacity: 1; transform: translateY(-2px); color: #fff; }
.cats .ci {
  width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; color: #fff;
}
.cats .c1 .ci { background: #c2255c; }
.cats .c2 .ci { background: #2b7a5b; }
.cats .c3 .ci { background: #2f5fb0; }
.cats .c4 .ci { background: #b07d1f; }
.cats span.cl { font-size: 11px; line-height: 14px; letter-spacing: .3px; }

/* ------------------------------------------------------- main + layout */
#main-site { padding-bottom: 20px; }
.sections { flex: 1 1 auto; min-width: 0; }
#sidebar {
  width: 300px; flex: none; margin-left: 20px;
  position: sticky; top: 80px; align-self: flex-start;
}
#sidebar > ul { margin: 0; padding: 0; list-style: none; }

.section { margin: 0 0 30px; }

.title-section {
  font-size: 22px; font-weight: 400;
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin: 3px 10px 10px; padding: 0 0 10px; border-bottom: 1px solid var(--hair);
}
.title-section h2 { font: 400 22px/1.3 var(--display); margin: 0; color: var(--ink); }
.title-section .ts-more { font-size: 12px; font-weight: 600; white-space: nowrap; }

/* --------------------------------------------------------------- cards */
.baps { display: flex; flex-wrap: wrap; margin: 0; padding: 0; }

.bav { padding: 10px; text-align: center; }
.bav1 { width: 16.6667%; }
.bav > a {
  display: block; background: var(--surface); border-radius: var(--radius);
  padding: 15px; box-shadow: var(--shadow); border-bottom: 2px solid var(--accent);
  color: inherit; height: 100%;
  transition: transform .2s ease, box-shadow .2s ease;
}
.bav > a:hover { transform: translateY(-3px); box-shadow: 3px 5px 10px 0 #dcdde2; color: inherit; }

.bloque-imagen {
  position: relative; padding-bottom: 100%; border-radius: var(--radius);
  overflow: hidden; background: var(--tint);
}
.bloque-imagen img {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;
}
.bloque-imagen.w75 { width: 75px; height: 75px; padding-bottom: 0; flex: none; margin: 0 10px 0 0; }
.bloque-imagen.w75 img { position: static; }

.bav .title {
  display: block; font: 600 14px/20px var(--body); color: var(--ink-strong);
  margin: 10px 0 0; height: 20px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap;
}
.bav .version, .bav .developer {
  display: block; font: 400 12px/18px var(--body); color: var(--muted); margin: 2px 0 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* 11px, not the reference's 12px: the only deliberate metric deviation, so
   "diwaluckyapk.com" clears the 96.7px cell without ellipsis */
.bav1 .developer { font-size: 11px; }
.px-postmeta {
  margin: 10px -15px -15px; padding: 0 16px 10px;
  border-radius: 0 0 var(--radius) var(--radius);
}
.px-postmeta .rating { display: flex; align-items: center; justify-content: center; gap: 6px; }
.px-postmeta .rating b { font-size: 12px; color: var(--muted); font-weight: 700; }

/* real 5-glyph star row clipped to the stated rating, never a solid bar */
.stars-row { position: relative; display: inline-block; height: 15px; line-height: 0; }
.stars-bg, .stars-fg { display: flex; gap: 1px; }
.stars-bg { color: #dfe2e8; }
.stars-fg {
  position: absolute; top: 0; left: 0; color: var(--gold); overflow: hidden;
  white-space: nowrap;
}
.stars-row svg { width: 14px; height: 14px; flex: none; }

/* wide top-rated tile */
.bav2 { width: 33.3333%; }
.bav2 > a { display: flex; align-items: flex-start; text-align: left; }
.bav2 .bap-c { min-width: 0; flex: 1; }
.bav2 .title { margin: 0; text-align: left; }
.bav2 .version, .bav2 .developer { text-align: left; }
.bav2 .px-postmeta { margin: 6px 0 0; padding: 0; }
.bav2 .px-postmeta .rating { justify-content: flex-start; }

/* VIEW MORE pill */
.viewmore-wrap { text-align: center; padding: 10px 0 0; }
a.viewmore {
  display: inline-block; width: 225px; max-width: 100%; line-height: 40px;
  border-radius: var(--pill); background: var(--accent); color: #fff;
  font: 700 12px/40px var(--body); text-transform: uppercase; letter-spacing: .6px;
  transition: background-color .2s ease;
}
a.viewmore:hover { background: var(--accent-dark); color: #fff; }

/* -------------------------------------------------------------- widgets */
.widget {
  background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow);
  margin: 0 0 20px; padding: 14px 16px; list-style: none;
}
.widget-title {
  font: 700 13px/1.4 var(--display); text-transform: uppercase; letter-spacing: .7px;
  color: var(--muted-2); padding-bottom: 10px; margin-bottom: 10px;
  border-bottom: 1px solid var(--hair); position: relative;
}
.widget-title::after {
  content: ""; position: absolute; left: 0; bottom: -2px; width: 34px; height: 3px;
  background: var(--accent); border-radius: 2px;
}
.sb-form { display: flex; }
.widget .sb_search { font-size: 14px; padding: 0 78px 0 16px; margin-right: -62px; }
.widget .sb_submit { width: 62px; }

.w-list { margin: 0; padding: 0; list-style: none; }
.w-list li + li { border-top: 1px solid var(--hair); }
.w-list a { display: flex; align-items: center; gap: 10px; padding: 8px 0; color: var(--ink-strong); }
.w-list img { width: 44px; height: 44px; border-radius: 12px; object-fit: cover; flex: none; }
.wl-t { font: 600 13px/18px var(--body); min-width: 0; }
.wl-t small { display: block; font: 400 11px/16px var(--body); color: var(--muted); }
.w-list a:hover .wl-t { color: var(--accent); }

.w-cats { margin: 0; padding: 0; list-style: none; }
.w-cats li + li { border-top: 1px solid var(--hair); }
.w-cats a {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 9px 0; font-weight: 600; color: var(--ink-strong);
}
.w-cats a:hover { color: var(--accent); }
.w-cats span {
  background: var(--accent-soft); color: var(--accent-dark); font-size: 11px;
  font-weight: 700; border-radius: var(--pill); padding: 1px 9px;
}

/* ------------------------------------------------------ box + editorial
   .box is deliberately unscoped: the same white surface has to work inside
   .sections on the homepage and inside .app-s on a single page. */
.box {
  background: var(--surface); border-radius: var(--radius); padding: 20px 25px;
  margin: 0 0 20px; box-shadow: var(--shadow);
}
.box-title {
  position: relative; display: block; font: 700 17px/1.4 var(--display);
  text-transform: uppercase; letter-spacing: .8px; color: var(--muted-2);
  padding: 15px 0; margin: -20px 0 15px;
}
.box-title::after {
  content: ""; position: absolute; left: 0; bottom: 6px; width: 34px; height: 3px;
  background: var(--accent); border-radius: 2px;
}

.entry { font-size: 14px; line-height: 25px; color: var(--ink); }
.entry h2 { font: 700 21px/28px var(--display); margin: 20px 0; text-align: start; color: var(--ink); }
.entry h3 { font: 600 17px/26px var(--display); margin: 18px 0 8px; text-align: start; color: var(--ink-strong); }
.entry p { margin: 0 0 15px; }
.entry a { color: var(--accent); text-decoration: underline; }
.entry a:hover { color: var(--accent-dark); }
.entry-list { margin: 0 0 15px; padding-left: 20px; }
.entry-list li { margin: 0 0 5px; }

.ed-lede p { font-size: 15px; line-height: 27px; }
.ed-lede p:first-child { font-size: 16px; line-height: 28px; color: var(--ink-strong); }

.ed-s { margin: 0 0 6px; }
.ed-head { margin: 26px 0 14px; }
.ed-head h2 {
  font: 600 21px/28px var(--display); margin: 0 0 8px; text-align: start; color: var(--ink);
}
.ed-rule { display: block; width: 44px; height: 3px; background: var(--accent); border-radius: 2px; }

.ed-grid { display: grid; gap: 14px; margin: 14px 0 22px; }
.ed-grid.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ed-grid.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ed-grid.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ed-grid.c1 { grid-template-columns: minmax(0, 1fr); }

/* tinted, not white: the editorial column is already a white box */
.ed-c {
  background: var(--tint); border: 1px solid #e7eaf0; border-radius: var(--radius);
  border-bottom: 2px solid var(--accent); padding: 16px 16px 14px;
}
.ed-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 12px;
  background: var(--accent-soft); color: var(--accent-dark); margin-bottom: 10px;
}
.ed-c h3 { font: 600 15px/22px var(--display); margin: 0 0 6px; color: var(--ink-strong); }
.ed-c p { margin: 0 0 8px; font-size: 13px; line-height: 23px; }
.ed-c p:last-child { margin-bottom: 0; }

/* CTA band */
.ecta {
  position: relative; overflow: hidden; border-radius: var(--radius);
  background: var(--chrome); color: #fff; padding: 30px 28px; margin: 26px 0 22px;
  text-align: center;
}
.ecta::before {
  content: ""; position: absolute; top: -60%; left: 50%; width: 460px; height: 460px;
  transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(circle, rgba(148,38,172,.55) 0%, rgba(148,38,172,0) 70%);
}
.ecta > * { position: relative; }
/* set directly: .entry h2 / .ed-head h2 both force text-align:start */
.ed .ecta .ecta-h, .ecta .ecta-h {
  font: 600 24px/32px var(--display); margin: 0 0 12px; color: #fff; text-align: center;
}
.ecta-b p { margin: 0 auto 12px; color: #d9dde6; font-size: 14px; line-height: 26px; }
.ecta-btns { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 18px; }
/* out-specify .entry a / .ed a so the labels never render accent-on-accent */
.ed .ecta a.hx-btn, .entry a.hx-btn, a.hx-btn {
  display: inline-block; border-radius: var(--pill); padding: 0 26px;
  font: 700 13px/42px var(--body); text-transform: uppercase; letter-spacing: .6px;
  text-decoration: none; transition: background-color .2s ease, color .2s ease;
}
.ed .ecta a.hx-btn-p, .entry a.hx-btn-p, a.hx-btn-p { background: var(--accent); color: #fff; }
.ed .ecta a.hx-btn-p:hover, a.hx-btn-p:hover { background: var(--accent-dark); color: #fff; }
.ed .ecta a.hx-btn-g, .entry a.hx-btn-g, a.hx-btn-g {
  background: transparent; color: #fff; box-shadow: inset 0 0 0 2px rgba(255,255,255,.55);
}
.ed .ecta a.hx-btn-g:hover, a.hx-btn-g:hover { background: rgba(255,255,255,.12); color: #fff; }

/* FAQ accordion, native details/summary */
.faq { margin: 8px 0 20px; }
.faq-i {
  background: var(--tint); border: 1px solid #e7eaf0; border-radius: var(--radius);
  margin: 0 0 10px; overflow: hidden;
}
.faq-i > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 13px 16px; cursor: pointer; list-style: none;
}
.faq-i > summary::-webkit-details-marker { display: none; }
.faq-i > summary::marker { content: ""; }
/* out-specify .entry h3, which would otherwise set this to 17px by accident */
.entry .faq-q, .ed .faq-q, .faq-q {
  font: 600 15px/23px var(--display); margin: 0; color: var(--ink-strong); text-align: start;
}
.faq-ch { color: var(--accent); flex: none; transition: transform .2s ease; }
.faq-i[open] > summary .faq-ch { transform: rotate(180deg); }
.faq-i[open] { border-bottom: 2px solid var(--accent); }
.faq-a { padding: 0 16px 14px; }
.faq-a p { margin: 0 0 8px; font-size: 13px; line-height: 23px; }
.faq-a p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------ APK single page */
.app-s { flex: 1 1 auto; min-width: 0; }

.app-head { display: flex; align-items: flex-start; flex-wrap: wrap; }
.a-main { order: 2; flex: 1 1 320px; min-width: 0; }
.a-icb { order: 1; width: 150px; flex: none; margin: 0 20px 0 0; }

#breadcrumbs { margin: 0 0 6px; padding: 0; list-style: none; font-size: 13px; color: var(--crumb); }
#breadcrumbs li { display: inline; }
#breadcrumbs a { color: var(--crumb); }
#breadcrumbs a:hover { color: var(--accent); }

h1.main-box-title {
  font: 700 38px/48px var(--display); color: var(--ink); margin: 0 7px 0 0;
}
.app-cat {
  display: block; font: 600 20px/27px var(--body); color: var(--muted); margin: 4px 0 0;
  text-transform: uppercase; letter-spacing: .4px;
}
.meta-cats { margin: 12px 0 0; }
.meta-cats ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.meta-cats a {
  display: inline-block; background: var(--accent); color: #fff; border-radius: var(--radius);
  font: 600 12px/1.5 var(--body); padding: 2px 10px 3px;
}
.meta-cats a:hover { background: var(--accent-dark); color: #fff; }
.descripcion { font: 400 13px/21px var(--body); text-align: justify; margin: 14px 0 6px; }

.image-single {
  width: 150px; height: 150px; border-radius: 25px; overflow: hidden; background: var(--tint);
}
.image-single img { width: 100%; height: 100%; object-fit: cover; display: block; }

.buttond {
  position: relative; display: block; width: 100%; min-height: 33px;
  border-radius: var(--radius); color: #fff; font: 700 12px/17px var(--body);
  text-transform: uppercase; text-align: center; padding: 8px 5px 8px 38px;
  margin: 10px 0 0; transition: filter .2s ease;
}
.buttond:hover { filter: brightness(.92); color: #fff; }
.buttond .bi {
  position: absolute; left: 0; top: 0; bottom: 0; width: 30px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.1); border-radius: var(--radius) 0 0 var(--radius);
}
/* white on #5edd1f is 1.77:1. D5 allows customising this button, so the
   reference's green fill stays and the label goes near-black: 8.78:1. */
.buttond.downloadAPK { background: var(--go); color: var(--go-ink); }
.buttond.downloadAPK:hover { color: var(--go-ink); }
.buttond.downloadAPK .bi { background: rgba(0,0,0,.14); }
.buttond.t { background: var(--tg); }

.box-rating { margin: 12px 0 0; text-align: center; }
.box-rating .rating { display: flex; justify-content: center; }
.rating-average { display: block; font-size: 12px; color: var(--muted); margin-top: 4px; }
.rating-average b { color: var(--ink-strong); font-size: 14px; }
.link-report {
  display: flex; align-items: center; gap: 6px; justify-content: center;
  font-size: 11px; color: var(--muted); margin-top: 10px;
}

.box-data-app { border-radius: var(--radius); margin: 16px 0 0; }
.data-app { display: flex; flex-wrap: wrap; max-width: 700px; margin: 0 0 15px; }
.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(--muted); }

.box-social { margin-top: 6px; }
.botones_sociales { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.botones_sociales a {
  display: flex; align-items: center; gap: 6px; width: 104px; min-height: 31px;
  border-radius: var(--radius); color: #fff; font: 400 11px/1.3 var(--body);
  padding: 0 17px 0 5px; transition: filter .2s ease;
}
.botones_sociales a:hover { filter: brightness(.9); color: #fff; }
.botones_sociales .facebook { background: #4864a0; }
.botones_sociales .twitter { background: #14171a; }
.botones_sociales .pinterest { background: #bd081c; }
.botones_sociales .telegram { background: #0088cc; }
.botones_sociales .whatsapp { background: #25d366; }

/* related row: 5 across the full measure, not the reference's 12.5% */
.rlat { padding: 20px 25px 5px; }
.rlat .baps { margin: 0 -10px; }
.rlat .bav1.rl { width: 20%; }

.warn-note {
  display: flex; gap: 10px; align-items: flex-start; background: var(--accent-soft);
  border: 1px solid #ecd9f3; border-left: 3px solid var(--accent);
  border-radius: var(--radius); padding: 14px 16px; margin: 16px 0 0;
  font-size: 12px; line-height: 21px; color: #5a4360;
}
.warn-note .ic { color: var(--accent-dark); margin-top: 2px; }

.tips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.tips li {
  display: flex; align-items: center; gap: 6px; background: var(--tint);
  border: 1px solid #e7eaf0; border-radius: var(--pill); padding: 5px 14px 5px 10px;
  font-size: 12px; color: var(--ink-strong);
}
.tips .ic { color: var(--accent); }

/* ---------------------------------------------------------- static page */
.page-hero {
  position: relative; overflow: hidden; border-radius: var(--radius);
  background: var(--chrome); color: #fff; margin: 0 0 20px; padding: 44px 28px;
  box-shadow: var(--shadow);
}
.page-hero .ph-bg {
  position: absolute; inset: 0; background: url('/assets/img/logo.webp') center / cover no-repeat;
  filter: blur(22px); opacity: .34; transform: scale(1.12);
}
.page-hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(120deg, rgba(19,22,29,.9) 0%, rgba(19,22,29,.5) 60%, rgba(148,38,172,.42) 100%);
}
.page-hero > * { position: relative; z-index: 1; }
.page-hero h1 { font: 700 34px/44px var(--display); margin: 0; color: #fff; }
.page-hero .ph-c { font-size: 12px; color: #c9cedb; margin: 0 0 8px; }
.page-hero .ph-c a { color: #c9cedb; }
.page-hero .ph-c a:hover { color: #fff; }

/* --------------------------------------------------------------- footer */
#footer { background: var(--chrome); border-top: 2px solid var(--accent); color: #fff; margin-top: 10px; }
#footer .container { display: block; padding-top: 34px; padding-bottom: 10px; }

.f-promo {
  background: var(--chrome-deep); border-radius: var(--radius); padding: 26px 24px;
  text-align: center; border-top: 3px solid var(--accent);
}
.f-promo-head { display: flex; align-items: center; justify-content: center; gap: 12px; }
.f-promo-head img { width: 52px; height: 52px; object-fit: contain; border-radius: 12px; }
.f-promo h2 {
  font: 700 26px/1.2 var(--display); margin: 0; color: var(--accent-on-dark);
  letter-spacing: .5px;
}
.f-promo p { color: #cfd4de; font-size: 13px; line-height: 25px; margin: 12px auto 0; }
.f-btns { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 20px; }
.f-btns a {
  display: flex; align-items: center; gap: 8px; background: #111520;
  color: var(--accent-on-dark); border: 1px solid #33283a; border-radius: var(--pill);
  padding: 9px 18px; font-size: 12px; font-weight: 600;
  transition: background-color .2s ease, color .2s ease;
}
.f-btns a:hover { background: var(--accent); color: #fff; border-color: var(--accent); }

.f-cols {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px;
  padding: 28px 0 22px;
}
.f-ct {
  font: 700 12px/1.4 var(--display); text-transform: uppercase; letter-spacing: .9px;
  color: var(--accent-on-dark); margin-bottom: 12px;
}
.f-col ul { margin: 0; padding: 0; list-style: none; }
.f-col li { margin: 0 0 8px; }
.f-col a { color: #c5cad6; font-size: 13px; }
.f-col a:hover { color: #fff; }
.f-tl li { display: flex; align-items: center; gap: 8px; color: #c5cad6; font-size: 12px; line-height: 20px; }
.f-tl .ic { color: var(--accent-on-dark); flex: none; }

.f-disc { background: var(--chrome-deep); border-top: 1px solid #262c39; padding: 20px 0; }
.f-disc .container { display: block; }
.f-disc p { color: #9aa1b0; font-size: 12px; line-height: 22px; margin: 0; }
.f-disc strong { color: var(--accent-on-dark); display: inline-flex; align-items: center; gap: 6px; }
.f-disc strong .ic { display: inline-block; }
.f-copy { margin-top: 12px; color: #9aa1b0; }

/* floating gradient CTA pill */
.float-cta {
  position: fixed; left: 50%; bottom: 18px; z-index: 80; transform: translateX(-50%);
  display: flex; align-items: center; gap: 8px; padding: 11px 22px;
  border-radius: var(--pill); color: #fff; font: 700 12px/1 var(--body);
  text-transform: uppercase; letter-spacing: .6px;
  background: linear-gradient(135deg, #00c6ff, #0072ff, #8e2de2, #ff0080);
  background-size: 300% 300%; animation: fcta 9s ease infinite;
  box-shadow: 0 6px 22px rgba(0,0,0,.28);
  isolation: isolate;
}
/* The reference's gradient runs through #00c6ff, where a white label measures
   2.0:1. A 40% veil keeps all four hues and lifts the worst stop to 5.12:1. */
.float-cta::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: rgba(0,0,0,.4); pointer-events: none; z-index: 0;
}
.float-cta > * { position: relative; z-index: 1; }
.float-cta:hover { color: #fff; filter: brightness(1.06); }
@keyframes fcta { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

#backtotop {
  position: fixed; right: 15px; bottom: 74px; z-index: 80; width: 40px; height: 40px;
  border: 0; border-radius: 50%; background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s ease;
}
#backtotop.on { opacity: 1; visibility: visible; }
#backtotop:hover { background: var(--accent-dark); }

/* ------------------------------------------------------------- 404 page */
.nf { text-align: center; padding: 30px 0; }
.nf h1 { font: 700 72px/1 var(--display); color: var(--accent); margin: 0 0 10px; }
.nf p { font-size: 15px; }

/* ------------------------------------------------------- locale mirror */
.mirror-note {
  background: var(--accent-soft); border: 1px solid #ecd9f3; border-radius: var(--radius);
  padding: 12px 16px; font-size: 13px; margin: 0 0 20px;
}

/* --------------------------------------------------------- reveal + rm */
.rv { opacity: 0; transform: translateY(14px); transition: opacity .45s ease, transform .45s ease; }
.rv.in { opacity: 1; transform: none; }

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

/* --------------------------------------------------------- breakpoints */
@media (max-width: 1439px) {
  .container { max-width: 1220px; }
}

@media (max-width: 1023px) {
  #main-site .container { display: block; }
  #sidebar { width: auto; margin: 20px 0 0; position: static; }
  .bav1 { width: 25%; }
  .bav2 { width: 50%; }
  .rlat .bav1.rl { width: 25%; }
  .ed-grid.c4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  h1.main-box-title { font-size: 32px; line-height: 40px; }
  #subheader h1 { font-size: 34px; line-height: 40px; }
}

@media (max-width: 767px) {
  body { font-size: 16px; line-height: 26px; }
  .entry, .ed-lede p, .faq-a p, .ed-c p { font-size: 16px; line-height: 27px; }
  #header .menu a { font-size: 15px; }
  .menu-open { display: block; }
  .menu-main-menu-container {
    position: fixed; top: 62px; left: 10px; right: 10px; z-index: 95;
    background: var(--chrome-deep); border: 1px solid #2b313f; border-radius: var(--radius);
    padding: 8px; display: none; box-shadow: 0 14px 40px rgba(0,0,0,.4);
  }
  .menu-main-menu-container.open { display: block; }
  .menu-main-menu-container ul.menu { flex-direction: column; align-items: stretch; }
  #header .menu a { line-height: 44px; padding: 0 14px; }
  #header .menu .menu-cta a { margin: 6px 0 0; text-align: center; }

  #subheader { padding: 80px 0 32px; }
  #subheader h1 { font-size: 28px; line-height: 36px; }
  .bav1 { width: 33.3333%; }
  .bav2 { width: 100%; }
  .rlat .bav1.rl { width: 33.3333%; }
  .ed-grid.c3, .ed-grid.c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app-head { display: block; }
  .a-icb { width: 150px; margin: 0 auto 16px; }
  .image-single { margin: 0 auto; }
  h1.main-box-title { font-size: 26px; line-height: 34px; }
  .da-s { width: 50%; }
  .box { padding: 16px 16px; }
  .rlat { padding: 16px 16px 5px; }
  .box-title { margin: -16px 0 12px; }
  .f-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 519px) {
  .bav1, .rlat .bav1.rl { width: 50%; }
  .ed-grid.c2, .ed-grid.c3, .ed-grid.c4 { grid-template-columns: minmax(0, 1fr); }
  .da-s { width: 100%; }
  .f-cols { grid-template-columns: minmax(0, 1fr); }
  #subheader h1 { font-size: 24px; line-height: 32px; }
  .float-cta { font-size: 11px; padding: 10px 16px; }
  .cats { gap: 12px; }
}

/* ------------------------------------------------- pieces used by templates */

/* compact hero band on inner pages */
#subheader.sh-compact {
  padding: 74px 0 18px; margin-bottom: 20px;
  border-radius: 0 0 var(--radius) var(--radius);
}
#subheader.sh-compact #searchBox { margin-top: 0; }

/* detail-page New/Hot badge: static, never absolute (C7) */
.badge {
  display: inline-block; vertical-align: middle; position: static;
  background: var(--accent); color: #fff; border-radius: var(--pill);
  font: 700 10px/1 var(--body); text-transform: uppercase; letter-spacing: .8px;
  padding: 4px 9px; margin-left: 8px;
}

/* homepage editorial H1, inside the white box under the section label */
.ed-h1 {
  font: 700 27px/36px var(--display); color: var(--ink); margin: 0 0 14px; text-align: start;
}

/* catalogue filter chips */
.cat-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 10px 14px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; background: var(--surface);
  border-radius: var(--pill); box-shadow: var(--shadow); padding: 6px 14px;
  font: 600 12px/1.4 var(--body); color: var(--ink-strong);
  transition: background-color .2s ease, color .2s ease;
}
.chip span {
  background: var(--accent-soft); color: var(--accent-dark); border-radius: var(--pill);
  font-size: 11px; font-weight: 700; padding: 0 7px;
}
.chip:hover { background: var(--accent-soft); color: var(--accent-dark); }
.chip.on { background: var(--accent); color: #fff; }
.chip.on span { background: rgba(255,255,255,.22); color: #fff; }

/* catalogue grid: 5 across the full measure, 25 apps = 5 clean rows */
.bav1.g5 { width: 20%; }

.no-hit { margin: 10px; font-size: 14px; color: var(--ink); }

.nf-wrap { padding-top: 90px; }

@media (max-width: 1023px) { .bav1.g5 { width: 25%; } }
@media (max-width: 767px)  { .bav1.g5 { width: 33.3333%; } .nf-wrap { padding-top: 80px; } }
@media (max-width: 519px)  { .bav1.g5 { width: 50%; } }