@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  color-scheme: dark;
  --pink: #f780ff;
  --muted: #bdc6da;
  --text-size: 14px;
  --label-size: 12px;
  --heading-size: 24px;
  --gap: 16px
}

* {
  box-sizing: border-box
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 24px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%
}

body {
  margin: 0;
  background: #020b16;
  color: #f7f7ff;
  font: var(--text-size)/1.6 Inter, Arial, sans-serif
}

a {
  color: inherit;
  text-decoration: none
}

button {
  font: inherit;
  cursor: pointer
}

a,
button,
summary {
  touch-action: manipulation;
  -webkit-tap-highlight-color: #d47aff26
}

a:hover {
  color: var(--pink)
}

a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 3px solid #ff9bff;
  outline-offset: 3px
}

h1,
h2,
h3,
p {
  margin: 0
}

img,
svg {
  max-width: 100%
}

h2 {
  font-size: var(--heading-size);
  letter-spacing: -.5px;
  line-height: 1.25
}

p {
  line-height: 1.65
}

main,
.main-column,
.right-column,
.panel {
  min-width: 0
}

main {
  margin-left: 252px
}

.skip-link {
  position: fixed;
  top: -80px;
  left: 16px;
  z-index: 100;
  background: #611d91;
  padding: 12px
}

.skip-link:focus {
  top: 12px
}

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: 252px;
  padding: 20px 14px;
  background: linear-gradient(140deg, #172236, #060f1c 42%, #080d1d);
  border-right: 1px solid #24304b;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #39425a55 transparent;
  z-index: 40
}

.sidebar::-webkit-scrollbar {
  width: 4px
}

.sidebar::-webkit-scrollbar-thumb {
  background: #39425a55;
  border-radius: 8px
}

.brand {
  display: block;
  text-align: center;
  margin-bottom: 24px
}

.brand img {
  display: block;
  width: 185px;
  height: auto;
  margin: auto
}

.brand small {
  display: block;
  font-size: 11px;
  letter-spacing: .5px
}

.side-nav {
  display: grid;
  gap: 16px
}

.nav-group {
  border-bottom: 1px solid #263047;
  padding-bottom: 12px
}

.nav-group:last-child {
  border: 0
}

.nav-group h2 {
  display: flex;
  gap: 9px;
  align-items: center;
  font-size: 14px;
  letter-spacing: 0;
  color: #ef9aff;
  min-height: 38px;
  margin-bottom: 6px
}

.nav-group h2 .ui-icon {
  width: 28px;
  height: 28px;
  flex-basis: 28px
}

.side-nav a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 9px 8px 9px 16px;
  border-radius: 7px;
  font-size: 14px;
  line-height: 1.5;
  color: #d0d9e9
}

.side-nav a:hover {
  background: #6b268143;
  color: #fff
}

.topbar {
  padding: 12px 30px;
  background: linear-gradient(100deg, #10172b, #0b1020);
  border-bottom: 1px solid #39214f
}

.top-nav {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap
}

.top-nav a {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 22px;
  min-height: 46px;
  border-radius: 9px;
  font-weight: 600;
  line-height: 1.5
}

.top-nav a.active {
  background: linear-gradient(105deg, #a62cf3, #651282);
  color: #fff
}

.top-nav a:hover {
  background-color: #602080
}

.menu,
.menu-backdrop {
  display: none
}

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 410px;
  background: #050b1b
}

.hero-art {
  position: absolute;
  z-index: -2;
  inset: 0 0 0 35%;
  background: url('assets/hero.webp') center/cover
}

.hero:after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(90deg, #040b19 3%, #090a23f5 27%, #090a2380 45%, transparent 66%)
}

.hero-copy {
  max-width: 690px;
  padding: 39px 40px 28px
}

.eyebrow {
  color: var(--pink);
  font-size: 12px;
  letter-spacing: 1.5px;
  font-weight: 700;
  margin-bottom: 6px;
  line-height: 1.5
}

h1 {
  font: 800 48px/1.04 'Barlow Condensed', Arial, sans-serif;
  letter-spacing: -.5px;
  text-transform: uppercase;
  margin: 12px 0
}

h1 span {
  display: block;
  color: #f38aff;
  font-size: 43px
}

.hero-copy>p:not(.eyebrow) {
  max-width: 500px;
  text-shadow: 0 1px 5px #000
}

.buttons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  max-width: 480px;
  margin-top: 20px
}

.outline,
.primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 11px 16px;
  border: 1px solid #f38bff;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center
}

.primary {
  background: linear-gradient(115deg, #ed69ff, #ce40f0);
  color: #160522;
  box-shadow: 0 3px 24px #bc25ff33
}

.primary:hover,
.outline:hover {
  filter: brightness(1.15)
}

.buttons a {
  width: 100%;
  min-height: 52px;
  padding: 12px 10px
}

.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 24px;
  gap: 12px
}

.stats>div {
  padding-left: 12px;
  border-left: 1px solid #a33bc5
}

.stats>div:first-child {
  border-left: 0;
  padding-left: 0
}

.stats strong {
  font-size: 18px
}

.stats small {
  display: block;
  font-size: 12px;
  line-height: 1.5;
  margin-top: 4px;
  color: #d3cce1
}

.content {
  padding: 16px 20px 0;
  max-width: 1700px;
  margin: auto
}

.columns {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(260px, 1fr);
  gap: 16px;
  align-items: start
}

.main-column,
.right-column {
  display: flex;
  flex-direction: column;
  gap: var(--gap)
}

.panel {
  width: 100%;
  background: linear-gradient(120deg, #10192e, #031526 55%, #061222);
  border: 1px solid #14243a;
  border-radius: 12px;
  padding: 16px;
  scroll-margin-top: 20px
}

.cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px
}

.cards a {
  height: 150px;
  border: 1px solid #976b25;
  border-radius: 10px;
  position: relative;
  overflow: hidden;
  background-image: linear-gradient(0deg, #041022 0%, #041022dd 24%, transparent 65%), var(--art);
  background-size: cover;
  background-position: center;
  transition: transform .2s, border-color .2s
}

/* Real image elements keep card artwork independent of inline CSS variables. */
#home .cards .home-card-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

#home .cards a::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, #041022 0%, #041022dd 24%, transparent 65%);
  pointer-events: none;
}

#home .cards a span {
  z-index: 1;
}

.cards a:nth-child(2) {
  border-color: #0088d8
}

.cards a:nth-child(3) {
  border-color: #b926a2
}

.cards a:hover {
  transform: translateY(-3px);
  border-color: #e890ff
}

.cards span {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 14px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  text-shadow: 0 2px 4px #000
}

.promotions a {
  height: 130px;
  border-color: #a52cbb
}

.support {
  background: linear-gradient(120deg, #17162f, #0a172b 60%, #10152c);
  border-color: #352846
}

.help-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px
}

.help-grid a {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 76px;
  padding: 12px;
  border: 1px solid #30304d;
  background: #101b31;
  border-radius: 10px;
  font-weight: 600;
  line-height: 1.5
}

.help-grid a:hover {
  background: #241b3d;
  border-color: #9656b4;
  color: #fff
}

.ui-icon {
  display: block;
  width: 40px;
  height: 40px;
  object-fit: contain;
  flex: 0 0 40px
}

.help-grid .ui-icon {
  width: 44px;
  height: 44px;
  flex-basis: 44px
}

.new h2 {
  margin-bottom: 12px
}

.new a {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 8px;
  min-height: 64px;
  padding: 10px;
  border: 1px solid #142840;
  border-radius: 9px;
  background: #09172c
}

.new .ui-icon {
  width: 36px;
  height: 36px;
  flex-basis: 36px;
  padding: 4px;
  border-radius: 9px;
  background: #b34aff20
}

.new a span {
  flex: 1;
  min-width: 0;
  line-height: 1.5
}

.link-chevron {
  flex: 0 0 16px;
  opacity: .65
}

.registration p,
.about p,
.faq p {
  color: var(--muted);
  margin-top: 12px;
  font-size: 14px
}

.contact-button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  border-radius: 9px;
  margin-top: 12px;
  font-weight: 700;
  color: #fff
}

.whatsapp {
  background: linear-gradient(100deg, #12814d, #22b878)
}

.telegram {
  background: linear-gradient(100deg, #006fa7, #2499d7)
}

.faq h2 {
  margin-bottom: 14px
}

.faq details {
  border-top: 1px solid #21304b;
  padding: 0
}

.faq summary {
  min-height: 48px;
  padding: 14px 6px 14px 0;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.6;
  overflow-wrap: anywhere
}

.faq details p {
  margin: 0;
  padding: 0 0 16px
}

.faq details[open] summary {
  color: #ef9bff
}

.right-column .apk-card,
.apk-card {
  position: relative;
  isolation: isolate;
  padding: 16px;
  overflow: hidden;
  border: 1px solid #79417f;
  background: #130d22;
  box-shadow: inset 0 0 20px #9d3fc212
}

.apk-card::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(180deg, #160b2399 0%, transparent 27%, transparent 51%, #100c20 74%), url('assets/apk-latest-v5-2-smooth.webp') center 38%/cover no-repeat;
  opacity: .95;
  image-rendering: auto
}

.apk-heading .eyebrow {
  margin-bottom: 3px;
  color: #f7c9ed;
  letter-spacing: 1.4px
}

.panel .apk-heading h2 {
  font-size: 25px;
  line-height: 1.15;
  letter-spacing: 0;
  text-transform: uppercase;
  max-width: 180px;
  text-shadow: 0 2px 10px #000
}

.apk-heading h2 span {
  display: block;
  font: inherit;
  color: #fff
}

.apk-art {
  height: 166px
}

.apk-details p {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 5px 0;
  color: #f5eef9;
  font-weight: 500
}

.apk-card .apk-details p img {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  object-fit: contain;
  margin: 0;
  transform: none
}

.apk-details .outline {
  display: flex;
  width: 100%;
  margin-top: 13px;
  background: #110b21e8;
  border-color: #d77ae1;
  gap: 10px
}

.safety-card {
  padding: 16px;
  background: radial-gradient(ellipse at top left, #54228580, transparent 72%), #100e24;
  border: 1px solid #63388e
}

.safety-card>.eyebrow {
  color: #dec0fa
}

.panel.safety-card h2 {
  font-size: 20px;
  line-height: 1.25
}

.safety-body {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 15px 0
}

.safety-emblem {
  width: 46px;
  height: 62px;
  flex: 0 0 46px;
  object-fit: contain;
  filter: drop-shadow(0 0 9px #ad35ff70)
}

.safety-links {
  display: grid;
  flex: 1;
  min-width: 0;
  gap: 0
}

.safety-links a {
  display: flex;
  align-items: center;
  min-height: 44px;
  line-height: 1.5;
  color: #e8dff3
}

.safety-cta {
  display: flex;
  gap: 10px;
  width: 100%;
  background: #170e2a;
  border-color: #c47ce3
}

.button-arrow {
  flex: 0 0 18px;
  transition: transform .18s
}

.outline:hover .button-arrow {
  transform: translateX(3px)
}

.site-footer {
  padding: 24px 4px;
  margin-top: 24px;
  border-top: 1px solid #29314a
}

.footer-links {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  flex-wrap: wrap;
  gap: 12px 28px
}

.footer-links a {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 44px;
  font-size: 14px;
  line-height: 1.5
}

@media(min-width:1600px) {
  .hero {
    min-height: 460px
  }

  .hero-copy {
    padding-top: 50px
  }

  h1 {
    font-size: 56px
  }

  h1 span {
    font-size: 50px
  }
}

/* Mobile-only layout; desktop keeps the previous sidebar and columns. */
@media(max-width:680px) {
  main {
    margin-left: 0
  }

  .sidebar {
    width: min(300px, 85vw);
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform .2s, visibility .2s;
    padding-bottom: calc(24px + env(safe-area-inset-bottom));
    padding-top: calc(20px + env(safe-area-inset-top))
  }

  .sidebar.open {
    transform: translateX(0);
    visibility: visible
  }

  .menu {
    display: flex;
    position: fixed;
    top: calc(12px + env(safe-area-inset-top));
    left: calc(12px + env(safe-area-inset-left));
    z-index: 60;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 1px solid #9254b3;
    border-radius: 9px;
    background: #201132;
    color: #fff;
    font-size: 23px
  }

  .menu-backdrop:not([hidden]) {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 30;
    border: 0;
    background: #0009;
    backdrop-filter: blur(3px)
  }

  body.menu-open {
    overflow: hidden
  }

  .topbar {
    padding: calc(12px + env(safe-area-inset-top)) calc(16px + env(safe-area-inset-right)) 12px calc(72px + env(safe-area-inset-left))
  }

  .top-nav {
    gap: 8px
  }

  .top-nav a {
    padding: 11px 15px
  }

  .hero-art {
    inset: 0 0 0 20%;
    opacity: .8
  }

  .hero:after {
    background: linear-gradient(90deg, #060b20f5, #090a23ba 65%, #090a2340)
  }

  .hero-copy {
    max-width: 720px;
    padding: 32px 24px
  }

  .columns {
    display: block
  }

  .main-column {
    gap: 16px
  }

  .right-column:empty {
    display: none
  }

  .main-column>.new,
  .main-column>.registration,
  .main-column>.apk-card,
  .main-column>.safety-card {
    width: 100%
  }

  .new a {
    min-height: 62px
  }

  .apk-card {
    min-height: 380px
  }

  .apk-card::before {
    background-size: auto 120%;
    background-position: right 40%;
    background-repeat: no-repeat;
    background-color: #100c20
  }

  .apk-heading,
  .apk-details {
    max-width: 420px
  }

  .apk-art {
    height: 180px
  }

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

  .registration>.eyebrow,
  .registration>h2,
  .registration>p {
    grid-column: 1/-1
  }

  .registration>p,
  .registration .eyebrow {
    margin: 0
  }

  .registration .contact-button {
    margin: 0
  }

  .registration h2 {
    margin-top: -6px
  }

  .safety-body {
    margin: 12px 0
  }

  .cards {
    grid-template-columns: repeat(4, minmax(0, 1fr))
  }

  .help-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .content {
    padding: 16px 20px 0
  }

  .safety-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 16px
  }

  .safety-cta {
    max-width: 420px
  }

  .site-footer {
    padding-bottom: calc(24px + env(safe-area-inset-bottom))
  }
}

@media(max-width:600px) {
  :root {
    --heading-size: 23px
  }

  .topbar {
    padding-right: 12px
  }

  .top-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    max-width: 370px;
    margin-left: auto
  }

  .top-nav a {
    font-size: 14px;
    padding: 10px 5px;
    min-height: 44px;
    white-space: normal
  }

  .hero {
    min-height: 0
  }

  .hero-copy {
    padding: 28px 16px 24px
  }

  .hero-art {
    inset: 0;
    opacity: .55;
    background-position: 65% center
  }

  .hero:after {
    background: linear-gradient(90deg, #060b20ed, #090a23ad)
  }

  h1 {
    font-size: clamp(34px, 8.8vw, 46px);
    line-height: 1.06;
    letter-spacing: -.3px
  }

  h1 span {
    font-size: clamp(30px, 7.7vw, 40px)
  }

  .hero-copy>p {
    max-width: 100%
  }

  .hero-copy>p:not(.eyebrow) {
    line-height: 1.75
  }

  .buttons {
    max-width: none;
    gap: 12px;
    margin-top: 20px
  }

  .buttons a {
    min-height: 62px;
    padding: 10px 8px
  }

  .stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    margin-top: 24px;
    border: 1px solid #9d48b94d;
    border-radius: 10px;
    background: #080d2399;
    overflow: hidden
  }

  .stats>div,
  .stats>div:first-child {
    padding: 12px;
    border: 0;
    text-align: center;
    min-height: 78px
  }

  .stats>div:nth-child(odd) {
    border-right: 1px solid #9d48b94d
  }

  .stats>div:nth-child(-n+2) {
    border-bottom: 1px solid #9d48b94d
  }

  .content {
    padding: 16px max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left))
  }

  .panel {
    padding: 16px;
    border-radius: 12px
  }

  .cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px
  }

  .cards a,
  .promotions a {
    height: 150px
  }

  .cards span {
    left: 10px;
    right: 10px;
    bottom: 12px
  }

  .help-grid {
    grid-template-columns: 1fr;
    gap: 10px
  }

  .help-grid a {
    min-height: 68px
  }

  .new a {
    padding: 10px;
    min-height: 64px
  }

  .apk-card {
    min-height: 0
  }

  .apk-card::before {
    background-size: cover;
    background-position: center 38%
  }

  .apk-heading,
  .apk-details {
    max-width: none
  }

  .apk-art {
    height: clamp(165px, 49vw, 240px)
  }

  .safety-links {
    grid-template-columns: 1fr
  }

  .safety-cta {
    max-width: none
  }

  .safety-emblem {
    width: 54px;
    height: 72px;
    flex-basis: 54px
  }

  .footer-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 12px
  }

  .footer-links a {
    padding: 6px;
    min-height: 48px
  }

  .faq summary {
    padding-top: 16px;
    padding-bottom: 16px
  }

  .eyebrow {
    letter-spacing: 1.2px
  }
}

@media(max-width:360px) {
  .topbar {
    padding-left: 66px
  }

  .top-nav a {
    padding-left: 3px;
    padding-right: 3px
  }

  .buttons {
    grid-template-columns: 1fr
  }

  .buttons a {
    min-height: 48px
  }

  .panel {
    padding: 14px
  }

  .cards {
    gap: 10px
  }

  .cards a,
  .promotions a {
    height: 146px
  }

  .registration {
    grid-template-columns: 1fr
  }

  .registration .contact-button {
    grid-column: 1
  }

  .safety-body {
    gap: 8px
  }

  .safety-emblem {
    width: 42px;
    flex-basis: 42px
  }
}

@media(hover:none) {
  .cards a:hover {
    transform: none
  }

  .outline:hover .button-arrow {
    transform: none
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior: auto
  }

  *,
  *::before,
  *::after {
    transition: none !important
  }
}

@media(max-width:680px) {
  .sidebar .brand {
    padding-top: 44px
  }
}

/* Restore the PC layout used before the mobile revision. */
@media(min-width:681px) {
  .sidebar {
    width: 252px;
    transform: none;
    visibility: visible;
    padding: 20px 14px
  }

  main {
    margin-left: 252px
  }

  .sidebar .brand {
    padding-top: 0
  }

  .menu,
  .menu-backdrop:not([hidden]) {
    display: none
  }

  .topbar {
    padding: 12px 30px
  }

  .top-nav {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap
  }

  .top-nav a {
    padding: 12px 22px;
    min-height: 0
  }

  .hero-copy {
    padding: 39px 40px 24px;
    max-width: 690px
  }

  .hero-art {
    inset: 0 0 0 35%;
    opacity: 1
  }

  .hero:after {
    background: linear-gradient(90deg, #040b19 3%, #090a23f5 27%, #090a2380 45%, transparent 66%)
  }

  h1 {
    line-height: .99
  }

  .buttons a {
    min-height: 48px
  }

  .stats {
    display: flex;
    gap: 0;
    margin-top: 25px
  }

  .stats>div {
    padding: 0 19px;
    border: 0;
    border-right: 1px solid #a33bc5
  }

  .stats>div:first-child {
    padding-left: 0
  }

  .stats>div:last-child {
    border: 0
  }

  .stats strong {
    font-size: 16px
  }

  .stats small {
    font-size: 12px
  }

  .content {
    padding: 13px 19px 0
  }

  .columns {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(245px, 1fr);
    gap: 14px
  }

  .main-column,
  .right-column {
    gap: 16px
  }

  .panel {
    scroll-margin-top: 15px
  }

  .cards {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 13px;
    gap: 12px
  }

  .cards span {
    bottom: 16px
  }

  .promotions a {
    height: 125px
  }

  .help-grid {
    margin-top: 13px;
    gap: 10px
  }

  .new a {
    margin-top: 5px;
    min-height: 65px
  }

  .contact-button {
    margin-top: 8px;
    min-height: 45px
  }

  .safety-links {
    gap: 9px
  }

  .safety-links a {
    display: block;
    min-height: 0
  }

  .site-footer {
    margin-top: 18px;
    padding: 24px 10px
  }

  .footer-links {
    gap: 14px 30px
  }

  .footer-links a {
    display: inline;
    min-height: 0
  }
}

@media(min-width:681px) and (max-width:1200px) {
  .columns {
    grid-template-columns: minmax(0, 1fr)
  }

  .topbar {
    padding: 12px 19px
  }

  .cards {
    gap: 8px
  }

  .cards a {
    height: 132px
  }

  .promotions a {
    height: 132px
  }

  .right-column {
    display: flex;
    flex-direction: column;
    gap: 16px
  }

  .apk-art {
    height: 190px
  }

  .apk-card {
    min-height: 350px
  }

  .apk-card::before {
    background-size: cover;
    background-position: center 42%
  }
}

@media(min-width:681px) and (max-width:950px) {
  .hero-copy {
    padding-left: 24px;
    max-width: 590px
  }

  .hero-art {
    inset: 0 0 0 15%;
    opacity: .7
  }

  .hero:after {
    background: linear-gradient(90deg, #040b19 0%, #090a23d0 50%, #090a2320)
  }
}

@media(min-width:1600px) {
  .hero-copy {
    padding-top: 50px
  }

  h1 {
    font-size: 56px
  }

  h1 span {
    font-size: 50px
  }
}

/* All four primary links stay in one mobile row. */
@media(max-width:680px) {
  .topbar {
    padding: calc(10px + env(safe-area-inset-top)) calc(8px + env(safe-area-inset-right)) 10px calc(56px + env(safe-area-inset-left))
  }

  .menu {
    top: calc(12px + env(safe-area-inset-top));
    left: calc(8px + env(safe-area-inset-left));
    width: 38px;
    height: 40px;
    font-size: 21px
  }

  .top-nav {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-end;
    gap: 3px;
    max-width: none;
    width: 100%;
    margin: 0;
    overflow-x: auto;
    scrollbar-width: thin
  }

  .top-nav a {
    flex: 0 0 auto;
    min-height: 44px;
    padding: 10px 5px;
    font-size: clamp(12px, 3.1vw, 14px);
    white-space: nowrap;
    line-height: 1.5
  }
}

/* Mobile navigation uses the full row without changing desktop styles. */
@media(max-width:680px) {
  .top-nav {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 0
  }

  .top-nav a {
    flex: 1 0 auto;
    padding: 10px 5px;
    text-align: center
  }

  .footer-links {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    width: 100%;
    overflow-x: auto;
    scrollbar-width: thin
  }

  .footer-links a {
    display: flex;
    flex: 1 0 auto;
    justify-content: center;
    align-items: center;
    min-height: 44px;
    padding: 6px 0;
    white-space: nowrap;
    font-size: clamp(10px, 2.5vw, 14px);
    line-height: 1.5
  }

  .site-footer {
    padding-left: 0;
    padding-right: 0
  }
}

/* Contact shortcuts and back-to-top, kept clear of device safe areas. */
.floating-actions {
  position: fixed;
  right: calc(18px + env(safe-area-inset-right));
  bottom: calc(18px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 25
}

.floating-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  padding: 12px;
  border: 1px solid #ffffff40;
  border-radius: 50%;
  color: #fff;
  box-shadow: 0 4px 15px #0006;
  transition: transform .18s, filter .18s
}

.floating-button svg {
  display: block;
  width: 22px;
  height: 22px;
  flex: none
}

.floating-whatsapp {
  background: linear-gradient(135deg, #22c577, #12834d)
}

.floating-telegram {
  background: linear-gradient(135deg, #28b2eb, #087bad)
}

.back-to-top {
  background: linear-gradient(135deg, #9c35cb, #491c73);
  border-color: #d485ed80
}

.floating-button:hover {
  color: #fff;
  filter: brightness(1.15);
  transform: translateY(-2px)
}

@media(max-width:680px) {
  .floating-actions {
    right: calc(10px + env(safe-area-inset-right));
    bottom: calc(12px + env(safe-area-inset-bottom));
    gap: 8px
  }

  .floating-button {
    width: 44px;
    height: 44px;
    padding: 11px
  }
}

@media(hover:none) {
  .floating-button:hover {
    transform: none
  }
}

/* Restrained motion for contact shortcuts and the main download actions. */
.floating-whatsapp {
  --contact-glow: #22c57780;
  animation: contact-pulse 3.6s ease-out infinite
}

.floating-telegram {
  --contact-glow: #28b2eb80;
  animation: contact-pulse 3.6s ease-out 1.8s infinite
}

.floating-button {
  transition: transform .2s ease, filter .2s ease, background .2s ease
}

.floating-button:active {
  transform: scale(.94)
}

.buttons a {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
  will-change: auto
}

.buttons .primary {
  animation: download-glow 4.8s ease-in-out infinite
}

.buttons .outline {
  background: #0c102780;
  box-shadow: 0 0 16px #d94cff20;
  animation: download-outline-glow 4.8s ease-in-out 1.2s infinite
}

.buttons a::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -70% auto -70% -80%;
  width: 35%;
  transform: skewX(-22deg);
  background: linear-gradient(90deg, transparent, #ffffff55, transparent);
  pointer-events: none;
  animation: download-shine 7s ease-in-out infinite
}

.buttons .outline::after {
  animation-delay: 1.2s;
  background: linear-gradient(90deg, transparent, #ed9eff40, transparent)
}

.buttons a:focus-visible {
  outline: 3px solid #ffd1ff;
  outline-offset: 4px
}

.buttons a:active {
  transform: translateY(1px) scale(.98);
  filter: brightness(1.08)
}

@media(hover:hover) {

  .floating-whatsapp:hover,
  .floating-telegram:hover {
    animation-play-state: paused;
    transform: translateY(-3px) scale(1.08);
    filter: brightness(1.15)
  }

  .floating-button:hover svg {
    transform: rotate(-7deg)
  }

  .floating-button svg {
    transition: transform .2s ease
  }

  .buttons a:hover {
    animation-play-state: paused;
    transform: translateY(-3px);
    border-color: #ffd6ff;
    box-shadow: 0 6px 24px #d54aff55;
    filter: brightness(1.08)
  }

  .buttons a:hover::after {
    animation-duration: 2.5s
  }
}

@keyframes contact-pulse {

  0%,
  70%,
  100% {
    box-shadow: 0 4px 15px #0006, 0 0 0 0 transparent
  }

  12% {
    box-shadow: 0 4px 15px #0006, 0 0 0 0 var(--contact-glow)
  }

  50% {
    box-shadow: 0 4px 15px #0006, 0 0 0 11px transparent
  }
}

@keyframes download-glow {

  0%,
  100% {
    box-shadow: 0 3px 20px #bc25ff33
  }

  50% {
    box-shadow: 0 3px 28px #d447ff65
  }
}

@keyframes download-outline-glow {

  0%,
  100% {
    box-shadow: 0 0 12px #d94cff15;
    border-color: #c96de0
  }

  50% {
    box-shadow: 0 0 22px #d94cff40;
    border-color: #f6b0ff
  }
}

@keyframes download-shine {

  0%,
  65% {
    left: -80%;
    opacity: 0
  }

  68% {
    opacity: .65
  }

  86% {
    left: 145%;
    opacity: 0
  }

  100% {
    left: 145%;
    opacity: 0
  }
}

@media(prefers-reduced-motion:reduce) {

  .floating-whatsapp,
  .floating-telegram,
  .buttons a,
  .buttons a::after {
    animation: none !important
  }

  .buttons a::after {
    display: none
  }

  .floating-button:hover,
  .floating-button:active,
  .floating-button:hover svg,
  .buttons a:hover,
  .buttons a:active {
    transform: none
  }
}

/* Compact footer with balanced space around its single row of links. */
.site-footer {
  margin-top: 16px;
  padding: 16px 10px
}

@media(max-width:680px) {
  .site-footer {
    margin-top: 16px;
    padding: 8px 0 calc(8px + env(safe-area-inset-bottom))
  }
}

strong,
.faq summary {
  font-weight: 700
}