/* ===== appclick-main pages/assets/css/style.css ===== */
:root {
  --blue: #3866f5;
  --violet: #695ff1;
  --ink: #111827;
  --muted: #6d7890;
  --line: #e8edf6;
  --soft: #f5f8ff;
  --navy: #0b1425;
  --shadow: 0 12px 30px rgba(48, 67, 128, .10)
}

* {
  box-sizing: border-box
}

html {
  scroll-behavior: smooth
}

body {
  margin: 0;
  font-family: Inter, Arial, sans-serif;
  color: var(--ink);
  background: #fff
}

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

.container {
  width: min(1370px, calc(100% - 48px));
  margin: auto
}

.site-header {
  height: 74px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20
}

.nav-wrap {
  height: 74px;
  display: flex;
  align-items: center;
  gap: 28px
}

.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 800;
  font-size: 17px
}

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

.nav {
  margin: auto;
  display: flex;
  gap: 36px;
  font-size: 15px;
  font-weight: 600
}

.nav a:hover {
  color: var(--blue)
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 13px 25px;
  font-size: 12px;
  font-weight: 700;
  transition: .25s
}

.btn-primary {
  color: #fff;
  background: linear-gradient(135deg, #2475f5, #6b5df4);
  box-shadow: 0 9px 20px rgba(58, 92, 240, .28)
}

.btn-primary:hover {
  transform: translateY(-2px)
}

.btn-light,
.btn-outline {
  background: #fff;
  border: 1px solid var(--line)
}

.btn-small {
  padding: 10px 21px
}

.menu-toggle {
  display: none;
  border: 0;
  background: none;
  font-size: 24px
}

.hero {
  position: relative;
  overflow: hidden;
  padding: 145px 0 105px;
  min-height: 705px;
  background: radial-gradient(circle at 88% 10%, #dce9ff 0, rgba(220, 233, 255, .5) 16%, transparent 36%), linear-gradient(#fff, #fff)
}

.hero:after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  background: #f3f5fa
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  align-items: center;
  gap: 70px
}

.eyebrow {
  display: inline-block;
  color: #4770f6;
  background: #f3f7ff;
  border-radius: 999px;
  padding: 7px 13px;
  font-size: 9px;
  letter-spacing: 1.7px;
  font-weight: 800
}

.hero h1 {
  font-family: Poppins, Inter, sans-serif;
  font-size: 68px;
  line-height: .99;
  letter-spacing: -2.8px;
  margin: 20px 0 22px
}

.hero h1 span {
  color: #5368f4
}

.hero-copy>p {
  font-size: 17px;
  line-height: 1.85;
  color: var(--muted);
  max-width: 510px
}

.hero-actions {
  display: flex;
  gap: 14px;
  margin: 28px 0 30px
}

.mini-stats {
  display: flex;
  gap: 37px
}

.mini-stats div {
  padding-left: 14px;
  border-left: 1px solid #dfe5ef
}

.mini-stats b {
  display: block;
  font-size: 17px
}

.mini-stats span {
  font-size: 9px;
  color: var(--muted)
}

.hero-art {
  position: relative;
  display: flex;
  justify-content: center;
  min-height: 430px
}

.hero-art:before {
  content: "";
  position: absolute;
  width: 420px;
  height: 420px;
  border: 1px solid #e9edf8;
  border-radius: 50%;
  top: 15px
}

.hero-art:after {
  content: "";
  position: absolute;
  width: 330px;
  height: 330px;
  border: 1px dashed #e8edf9;
  border-radius: 50%;
  top: 61px
}

.phone {
  position: relative;
  z-index: 2;
  width: 330px;
  filter: drop-shadow(0 25px 28px rgba(34, 44, 93, .25))
}

.float-card {
  position: absolute;
  z-index: 3;
  background: #fff;
  border-radius: 12px;
  padding: 10px 13px;
  display: flex;
  gap: 9px;
  align-items: center;
  box-shadow: var(--shadow);
  font-size: 11px
}

.float-card>span {
  font-size: 22px;
  color: #ffb01f
}

.float-card b,
.float-card small {
  display: block
}

.float-card small {
  font-size: 8px;
  color: var(--muted);
  margin-top: 2px
}

.card-new {
  left: 4px;
  top: 55px
}

.card-rating {
  right: -5px;
  top: 185px
}

.card-rating>span {
  color: #22bb82
}

.card-session {
  left: -15px;
  bottom: 58px
}

.card-session>span {
  color: #7a6dff
}

.section {
  padding: 95px 0
}

.expertise,
.apps {
  background: var(--soft)
}

.section-head {
  text-align: center;
  margin-bottom: 48px
}

.eyebrow.centered {
  background: transparent;
  padding: 0
}

.section-head h2 {
  font-family: Poppins, Inter, sans-serif;
  font-size: 44px;
  line-height: 1.15;
  letter-spacing: -1.3px;
  margin: 14px 0
}

.section-head p {
  font-size: 16px;
  color: var(--muted)
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px
}

.feature-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 28px 26px;
  min-height: 205px;
  box-shadow: 0 8px 18px rgba(31, 52, 112, .035)
}

.icon {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 18px;
  box-shadow: 0 8px 18px rgba(55, 91, 223, .22)
}

.blue {
  background: #5468f6
}

.cyan {
  background: #19a8f4
}

.purple {
  background: #8c46ef
}

.teal {
  background: #10b7ac
}

.orange {
  background: #ff7b1a
}

.pink {
  background: #d849c7
}

.feature-card h3 {
  font-family: Poppins, Inter, sans-serif;
  font-size: 20px;
  margin: 18px 0 10px
}

.feature-card p {
  font-size: 14px;
  line-height: 1.75;
  color: var(--muted);
  margin: 0
}

.product-grid,
.app-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 23px
}

.product-card,
.app-card {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 10px 22px rgba(31, 52, 112, .08)
}

.product-card>img {
  width: 100%;
  height: 175px;
  object-fit: cover;
  display: block
}

.product-body,
.app-body {
  padding: 14px 18px 17px
}

.tag {
  font-size: 8px;
  color: #3969f2;
  background: #edf3ff;
  border-radius: 999px;
  padding: 4px 7px;
  max-width: fit-content;
}

.product-card h3,
.app-card h3 {
  font-family: Poppins, Inter, sans-serif;
  font-size: 18px;
  margin: 10px 0 12px
}

.download {
  display: block;
  text-align: center;
  color: #fff;
  background: linear-gradient(90deg, #246df4, #7060f5);
  border-radius: 999px;
  padding: 8px;
  font-size: 9px;
  font-weight: 700
}

.center {
  text-align: center;
  margin-top: 38px
}

.btn-outline {
  padding: 10px 22px
}

.apps {
  padding-top: 100px
}

.app-top {
  height: 245px;
  background: #f8fbff;
  overflow: hidden
}

.app-top img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block
}

.app-body p {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.55;
  min-height: 48px
}

.stats-band {
  background: var(--navy);
  padding: 55px 0;
  color: #dce8ff
}

.stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  text-align: center
}

.stat-row b {
  display: block;
  font-size: 38px
}

.stat-row span {
  font-size: 10px;
  color: #a8b6cd
}

.why-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 15px
}

.why-grid article {
  background: #f4f7ff;
  border-radius: 13px;
  padding: 20px 17px;
  min-height: 130px
}

.why-grid small {
  font-size: 9px;
  color: #526cf5;
  font-weight: 800
}

.why-grid h3 {
  font-family: Poppins, Inter, sans-serif;
  font-size: 16px;
  margin: 12px 0 8px
}

.why-grid p {
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted)
}

.cta {
  margin: 80px auto 0;
  text-align: center;
  color: #fff;
  background: linear-gradient(135deg, #2f70ef, #6f62f0);
  border-radius: 24px;
  padding: 63px 30px
}

.cta h2 {
  font-family: Poppins, Inter, sans-serif;
  font-size: 42px;
  margin: 0 0 14px
}

.cta p {
  font-size: 15px;
  opacity: .86
}

.cta .btn {
  margin: 14px 5px 0
}

.btn-white {
  background: #fff;
  color: #3f64ee
}

.btn-ghost {
  background: rgba(255, 255, 255, .13);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .18)
}

footer {
  background: var(--navy);
  color: #dbe4f4;
  padding: 65px 0 25px
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr .7fr .7fr .9fr;
  gap: 55px
}

.footer-brand {
  color: #fff
}

.footer-grid p {
  max-width: 330px;
  font-size: 13px;
  line-height: 1.7;
  color: #93a2b9
}

.footer-heading {
  font-family: Poppins, Inter, sans-serif;
  font-size: 17px;
  color: #fff;
  margin: 7px 0 18px
}

.footer-grid>div>a:not(.brand) {
  display: block;
  font-size: 13px;
  color: #9ca9bd;
  margin: 0 0 12px
}

.socials {
  display: flex;
  gap: 9px;
  margin-top: 18px
}

.socials a {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  background: #162237;
  border: 1px solid #26344d;
  border-radius: 7px;
  font-size: 10px
}

.footer-bottom {
  border-top: 1px solid #1d2a3e;
  margin-top: 45px;
  padding-top: 22px;
  display: flex;
  justify-content: space-between;
  color: #75849b;
  font-size: 12px
}

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: .65s ease
}

.reveal.visible {
  opacity: 1;
  transform: none
}

.delay-1 {
  transition-delay: .15s
}

@media(max-width:900px) {
  .nav {
    display: none;
    position: absolute;
    top: 70px;
    left: 20px;
    right: 20px;
    background: #fff;
    padding: 20px;
    border-radius: 16px;
    box-shadow: var(--shadow);
    flex-direction: column
  }

  .nav.open {
    display: flex
  }

  .menu-toggle {
    display: block;
    margin-left: auto
  }

  .nav-cta {
    display: none
  }

  .hero-grid {
    grid-template-columns: 1fr;
    text-align: center
  }

  .hero-copy>p {
    margin-inline: auto
  }

  .hero-actions,
  .mini-stats {
    justify-content: center
  }

  .hero-art {
    margin-top: 20px
  }

  .feature-grid,
  .product-grid,
  .app-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .why-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .footer-grid {
    grid-template-columns: repeat(2, 1fr)
  }
}

@media(max-width:600px) {
  .container {
    width: min(100% - 28px, 1370px)
  }

  .hero {
    padding-top: 115px
  }

  .hero h1 {
    font-size: 40px
  }

  .hero-art {
    transform: scale(.85);
    margin: -20px -35px
  }

  .feature-grid,
  .product-grid,
  .app-grid,
  .why-grid {
    grid-template-columns: 1fr
  }

  .section {
    padding: 72px 0
  }

  .stat-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px
  }

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

  .footer-bottom {
    flex-direction: column;
    gap: 10px
  }

  .mini-stats {
    gap: 16px
  }

  .mini-stats div {
    padding-left: 9px
  }

  .card-rating {
    right: 0
  }

  .card-new {
    left: 0
  }

  .card-session {
    left: 0
  }
}


h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: Poppins, Inter, sans-serif;
  font-weight: 700;
  color: var(--ink)
}

.product-body,
.app-body {
  padding: 20px 22px 22px
}

.tag {
  font-size: 11px
}

.download {
  font-size: 12px;
  padding: 10px
}

.btn {
  font-size: 14px
}

.eyebrow {
  font-size: 11px
}

.mini-stats b {
  font-size: 21px
}

.mini-stats span {
  font-size: 11px
}

.stat-row span {
  font-size: 13px
}

.footer-brand img {
  width: 170px;
  filter: brightness(0) invert(1)
}

@media(max-width:900px) {
  .hero h1 {
    font-size: 56px
  }

  .section-head h2 {
    font-size: 38px
  }
}

@media(max-width:600px) {
  .hero h1 {
    font-size: 42px
  }

  .section-head h2 {
    font-size: 32px
  }

  .cta h2 {
    font-size: 32px
  }

  .brand img {
    width: 130px
  }
}

/* Requested section refinements */
.games .product-card>img,
#games .product-card>img {
  height: 285px;
}

.why {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 10% 15%, rgba(68, 112, 246, .11), transparent 28%),
    radial-gradient(circle at 92% 72%, rgba(117, 86, 242, .10), transparent 30%),
    linear-gradient(180deg, #ffffff 0%, #f8faff 100%);
}

.why:before,
.why:after {
  content: "";
  position: absolute;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  border: 1px solid rgba(72, 105, 237, .10);
  pointer-events: none;
}

.why:before {
  left: -170px;
  top: 90px
}

.why:after {
  right: -180px;
  bottom: 120px
}

.why .container {
  position: relative;
  z-index: 1
}

.why .section-head {
  max-width: 780px;
  margin-left: auto;
  margin-right: auto
}

.why .section-head h2 {
  font-size: 48px
}

.why-grid {
  gap: 20px
}

.why-grid article {
  position: relative;
  min-height: 190px;
  padding: 30px 24px 26px;
  overflow: hidden;
  background: rgba(255, 255, 255, .9);
  border: 1px solid rgba(220, 228, 248, .95);
  border-radius: 20px;
  box-shadow: 0 18px 45px rgba(38, 61, 127, .09);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.why-grid article:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #3475f3, #765cf0);
}

.why-grid article:after {
  content: "";
  position: absolute;
  width: 90px;
  height: 90px;
  right: -36px;
  bottom: -38px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(57, 112, 244, .10), rgba(117, 91, 241, .04));
}

.why-grid article:hover {
  transform: translateY(-8px);
  border-color: rgba(79, 107, 240, .28);
  box-shadow: 0 26px 55px rgba(38, 61, 127, .15);
}

.why-grid small {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  color: #fff;
  background: linear-gradient(135deg, #3675f3, #725ef1);
  box-shadow: 0 8px 20px rgba(66, 92, 231, .25);
  font-size: 11px;
}

.why-grid h3 {
  font-size: 19px;
  margin: 18px 0 10px
}

.why-grid p {
  font-size: 14px;
  line-height: 1.75;
  margin: 0
}

.cta h2 {
  color: #fff !important;
}

@media(max-width:900px) {

  .games .product-card>img,
  #games .product-card>img {
    height: 235px
  }

  .why .section-head h2 {
    font-size: 42px
  }
}

@media(max-width:600px) {

  .games .product-card>img,
  #games .product-card>img {
    height: 220px
  }

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

  .why-grid article {
    min-height: auto
  }
}


/* Enhanced expertise icons */
.feature-card {
  position: relative;
  overflow: hidden;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease
}

.feature-card:before {
  content: "";
  position: absolute;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  right: -54px;
  top: -58px;
  background: linear-gradient(135deg, rgba(72, 109, 246, .12), rgba(112, 96, 245, .02));
  transition: .35s ease
}

.feature-card:hover {
  transform: translateY(-7px);
  border-color: #d9e2ff;
  box-shadow: 0 20px 45px rgba(43, 67, 142, .13)
}

.feature-card:hover:before {
  transform: scale(1.45)
}

.icon {
  width: 54px;
  height: 54px;
  border-radius: 16px;
  position: relative;
  isolation: isolate
}

.icon:after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 20px;
  background: inherit;
  opacity: .16;
  filter: blur(7px);
  z-index: -1
}

.icon svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round
}

.feature-card:hover .icon {
  transform: rotate(-5deg) scale(1.06)
}

.icon {
  transition: transform .3s ease
}

/* Animated achievements band */
.stats-band {
  position: relative;
  overflow: hidden;
  padding: 76px 0;
  background: linear-gradient(115deg, #071225 0%, #102452 48%, #27245f 100%);
  isolation: isolate
}

.stats-band:before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to right, transparent, #000, transparent);
  z-index: -2
}

.stats-band:after {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, #77a4ff, transparent);
  box-shadow: 0 0 30px #5f7fff
}

.stats-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(2px);
  z-index: -1;
  opacity: .55
}

.stats-orb-one {
  width: 260px;
  height: 260px;
  left: -90px;
  top: -130px;
  background: radial-gradient(circle, #2f70ef, transparent 70%)
}

.stats-orb-two {
  width: 300px;
  height: 300px;
  right: -100px;
  bottom: -180px;
  background: radial-gradient(circle, #7d50e8, transparent 70%)
}

.stat-row {
  gap: 20px;
  position: relative
}

.stat-item {
  position: relative;
  padding: 18px 20px 16px;
  border-right: 1px solid rgba(255, 255, 255, .12)
}

.stat-item:last-child {
  border-right: 0
}

.stat-icon {
  width: 42px;
  height: 42px;
  margin: 0 auto 13px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: linear-gradient(135deg, rgba(74, 128, 255, .28), rgba(139, 91, 255, .24));
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: inset 0 1px rgba(255, 255, 255, .18), 0 12px 28px rgba(0, 0, 0, .18);
  font-size: 16px;
  color: #fff
}

.stat-row b {
  font-family: Poppins, Inter, sans-serif;
  font-size: 48px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -1.8px;
  color: #fff;
  text-shadow: 0 5px 25px rgba(80, 123, 255, .34)
}

.stat-row span:not(.stat-icon) {
  display: block;
  margin-top: 10px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .2px;
  color: #b8c8e7
}

@media(max-width:600px) {
  .stats-band {
    padding: 58px 0
  }

  .stat-item {
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .1)
  }

  .stat-row b {
    font-size: 40px
  }

  .stat-row {
    gap: 8px
  }
}

/* Games page */
.nav a.active {
  color: #365cf5;
  font-weight: 700
}

.games-hero {
  position: relative;
  overflow: hidden;
  padding: 150px 0 105px;
  background: linear-gradient(180deg, #f7f9ff 0%, #fff 100%)
}

.games-hero:before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(76, 99, 255, .11) 1px, transparent 0);
  background-size: 28px 28px;
  mask-image: linear-gradient(to bottom, #000, transparent 80%)
}

.games-hero-inner {
  position: relative;
  text-align: center;
  max-width: 900px
}

.games-hero h1 {
  font-size: clamp(54px, 6vw, 88px);
  line-height: 1.02;
  margin: 18px 0 24px;
  color: #11182b
}

.games-hero h1 span {
  background: linear-gradient(90deg, #2867f5, #7956f6);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent
}

.games-hero p {
  max-width: 780px;
  margin: 0 auto;
  font-size: 19px;
  line-height: 1.85;
  color: #66708a
}

.games-hero-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  margin-top: 34px
}

.games-hero-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(15px);
  opacity: .42
}

.glow-a {
  width: 360px;
  height: 360px;
  background: #89b8ff;
  left: -130px;
  top: -80px
}

.glow-b {
  width: 300px;
  height: 300px;
  background: #bca7ff;
  right: -90px;
  bottom: -100px
}

.games-catalog {
  background: #fff
}

.games-page-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px
}

.game-page-card {
  background: #fff;
  border: 1px solid #e8ecf6;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(27, 50, 110, .08);
  transition: .35s ease
}

.game-page-card:hover {
  transform: translateY(-9px);
  box-shadow: 0 26px 70px rgba(42, 72, 160, .16);
  border-color: #cfd8ff
}

.game-image-link {
  display: block;
  height: 330px;
  overflow: hidden;
  background: #eef2ff
}

.game-image-link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s ease
}

.game-page-card:hover .game-image-link img {
  transform: scale(1.06)
}

.game-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #202b78, #5967ff 55%, #9f63ff);
  color: #fff;
  font-family: Poppins, sans-serif;
  font-size: 44px;
  font-weight: 800;
  line-height: 1;
  text-align: center;
  letter-spacing: -2px
}

.game-page-body {
  padding: 25px 25px 28px
}

.game-page-body h3 {
  font-size: 23px;
  line-height: 1.35;
  margin: 12px 0 12px
}

.game-page-body h3 a {
  color: #141a2d;
  text-decoration: none
}

.game-page-body p {
  font-size: 16px;
  line-height: 1.75;
  color: #6c7489;
  margin-bottom: 22px
}

.game-detail-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 17px;
  border-radius: 13px;
  background: linear-gradient(90deg, #2d68f6, #6858f5);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  box-shadow: 0 10px 24px rgba(65, 89, 245, .24)
}

.game-detail-btn span {
  font-size: 22px;
  transition: transform .25s
}

.game-detail-btn:hover span {
  transform: translateX(4px)
}

.games-bottom-cta {
  padding-top: 30px
}

@media(max-width:1000px) {
  .games-page-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .game-image-link {
    height: 300px
  }
}

@media(max-width:640px) {
  .games-hero {
    padding: 125px 0 75px
  }

  .games-hero h1 {
    font-size: 45px
  }

  .games-hero p {
    font-size: 17px
  }

  .games-hero-actions {
    flex-direction: column;
    align-items: center
  }

  .games-page-grid {
    grid-template-columns: 1fr
  }

  .game-image-link {
    height: 290px
  }

  .game-page-body h3 {
    font-size: 22px
  }
}

/* Inner pages */
.page-hero {
  padding: 150px 0 95px;
  background: radial-gradient(circle at 15% 20%, rgba(132, 78, 255, .28), transparent 30%), radial-gradient(circle at 85% 25%, rgba(37, 190, 255, .20), transparent 30%), linear-gradient(135deg, #101029, #24205d);
  color: #fff;
  text-align: center;
  overflow: hidden
}

.page-hero h1 {
  max-width: 950px;
  margin: 14px auto;
  font-size: clamp(46px, 6vw, 78px);
  line-height: 1.05
}

.page-hero p {
  max-width: 760px;
  margin: 0 auto;
  color: rgba(255, 255, 255, .78);
  font-size: 20px
}

.breadcrumbs {
  font-weight: 700;
  color: #c9c5ff
}

.content-grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 54px;
  align-items: center
}

.content-grid img {
  width: 100%;
  border-radius: 26px;
  box-shadow: 0 30px 70px rgba(25, 20, 80, .18)
}

.feature-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px
}

.feature-tile {
  padding: 30px;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 16px 42px rgba(28, 24, 80, .09);
  border: 1px solid rgba(108, 78, 255, .10)
}

.feature-tile .icon {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  font-size: 28px;
  background: linear-gradient(135deg, #6f4cff, #25c2ff);
  color: #fff;
  margin-bottom: 18px
}

.feature-tile h3 {
  font-size: 23px;
  margin: 0 0 10px
}

.stats-band {
  background: linear-gradient(135deg, #111126, #302674);
  color: #fff;
  padding: 65px 0
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  text-align: center
}

.stats-grid strong {
  display: block;
  font: 800 46px Poppins, sans-serif
}

.stats-grid span {
  color: #d9d5ff
}

.app-grid,
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px
}

.app-card {
  background: #fff;
  border-radius: 24px;
  padding: 24px;
  box-shadow: 0 16px 44px rgba(31, 24, 84, .09);
  border: 1px solid rgba(95, 76, 220, .1)
}

.app-card img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  border-radius: 18px
}

.app-card h3 {
  font-size: 25px
}

.gallery-grid img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  border-radius: 22px;
  box-shadow: 0 18px 45px rgba(24, 19, 70, .12)
}

.contact-layout {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 34px
}

.contact-card,
.contact-form {
  background: #fff;
  border-radius: 26px;
  padding: 36px;
  box-shadow: 0 18px 50px rgba(29, 24, 77, .09)
}

.contact-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 16px 18px;
  border: 1px solid #ddd9f3;
  border-radius: 14px;
  font: inherit
}

.contact-form textarea {
  grid-column: 1/-1;
  min-height: 160px
}

.contact-form button {
  grid-column: 1/-1
}

.legal {
  max-width: 980px
}

.legal h2 {
  margin-top: 40px
}

.game-detail-hero {
  padding: 140px 0 85px;
  background: linear-gradient(135deg, #12112b, #2b226f);
  color: #fff
}

.game-detail-wrap {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 48px;
  align-items: center
}

.game-detail-wrap img {
  width: 100%;
  max-height: 560px;
  object-fit: cover;
  border-radius: 28px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .3)
}

.game-detail-wrap h1 {
  font-size: clamp(42px, 5vw, 68px);
  line-height: 1.06
}

.game-detail-wrap p {
  font-size: 19px;
  color: #ddd9ff
}

.game-copy {
  max-width: 900px;
  margin: auto
}

.game-copy p {
  font-size: 18px;
  line-height: 1.85
}

.game-features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px
}

.game-features li {
  list-style: none;
  background: #fff;
  padding: 18px;
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(29, 24, 77, .08)
}

.game-features li:before {
  content: '✓';
  margin-right: 10px;
  color: #6f4cff;
  font-weight: 800
}

.store-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap
}

.store-row a {
  display: inline-flex;
  padding: 14px 22px;
  border-radius: 12px;
  background: #111;
  color: #fff;
  font-weight: 700
}

.not-found {
  min-height: 70vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 120px 20px
}

.not-found strong {
  font: 800 clamp(90px, 18vw, 220px) Poppins, sans-serif;
  background: linear-gradient(135deg, #6f4cff, #25c2ff);
  -webkit-background-clip: text;
  color: transparent
}

@media(max-width:900px) {

  .content-grid,
  .contact-layout,
  .game-detail-wrap {
    grid-template-columns: 1fr
  }

  .feature-list,
  .app-grid,
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr)
  }
}

@media(max-width:620px) {

  .feature-list,
  .app-grid,
  .gallery-grid,
  .stats-grid,
  .game-features {
    grid-template-columns: 1fr
  }

  .contact-form {
    grid-template-columns: 1fr
  }

  .contact-form textarea,
  .contact-form button {
    grid-column: auto
  }

  .page-hero {
    padding-top: 125px
  }

  .app-card img,
  .gallery-grid img {
    height: 230px
  }
}


/* Unified inner page hero based on the homepage design */
.inner-hero {
  position: relative;
  overflow: hidden;
  padding: 145px 0 95px;
  min-height: 680px;
  background: radial-gradient(circle at 88% 8%, #dce9ff 0, rgba(220, 233, 255, .55) 17%, transparent 38%), linear-gradient(180deg, #fff, #f9fbff)
}

.inner-hero:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: #edf1f8
}

.inner-hero-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  align-items: center;
  gap: 72px
}

.inner-hero-copy h1 {
  font-family: Poppins, Inter, sans-serif;
  font-size: clamp(50px, 5.5vw, 76px);
  line-height: 1.02;
  letter-spacing: -2.6px;
  margin: 20px 0 22px;
  max-width: 760px
}

.inner-hero-copy h1 span {
  color: #5668f5
}

.inner-hero-copy>p {
  font-size: 19px;
  line-height: 1.8;
  color: var(--muted);
  max-width: 650px
}

.inner-hero-art {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 440px
}

.inner-hero-art>img {
  position: relative;
  z-index: 2;
  width: min(100%, 500px);
  height: 430px;
  object-fit: cover;
  border-radius: 32px;
  box-shadow: 0 30px 70px rgba(34, 44, 93, .24)
}

.inner-hero-art img[src$="phone-hero.svg"] {
  object-fit: contain;
  box-shadow: none;
  border-radius: 0;
  height: 470px
}

.hero-glow {
  position: absolute;
  width: 470px;
  height: 470px;
  border-radius: 50%;
}

.inner-hero .card-new {
  left: -10px;
  top: 72px
}

.inner-hero .card-rating {
  right: -10px;
  top: auto;
  bottom: 74px
}

.image-card-grid,
.full-image-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px
}

.image-info-card {
  background: #fff;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 16px 44px rgba(31, 52, 112, .09);
  transition: .3s
}

.image-info-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 25px 60px rgba(31, 52, 112, .16)
}

.image-info-card>img {
  width: 100%;
  height: 265px;
  object-fit: cover;
  display: block
}

.image-info-card>div {
  padding: 25px
}

.image-info-card h3 {
  font-family: Poppins, sans-serif;
  font-size: 23px;
  margin: 0 0 10px
}

.image-info-card p {
  color: var(--muted);
  line-height: 1.7;
  margin: 0
}

.full-image-card {
  position: relative;
  min-height: 500px;
  border-radius: 26px;
  overflow: hidden;
  background: #101827;
  box-shadow: 0 20px 55px rgba(20, 34, 80, .18)
}

.full-image-card>a,
.full-image-card>a>img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block
}

.full-image-card img {
  object-fit: cover;
  transition: transform .55s ease
}

.full-image-card:hover img {
  transform: scale(1.07)
}

.full-image-card:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 28%, rgba(7, 13, 29, .25) 48%, rgba(7, 13, 29, .96) 100%);
  pointer-events: none
}

.full-card-overlay {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 30px;
  color: #fff
}

.full-card-overlay h3 {
  font-family: Poppins, sans-serif;
  font-size: 28px;
  line-height: 1.2;
  margin: 12px 0 10px
}

.full-card-overlay p {
  color: rgba(255, 255, 255, .78);
  line-height: 1.65;
  margin: 0 0 18px
}

.full-card-overlay .tag {
  color: #fff;
  background: rgba(255, 255, 255, .17);
  backdrop-filter: blur(8px)
}

.games-full-grid {
  grid-template-columns: repeat(3, 1fr)
}

.game-list-card {
  min-height: 540px
}

.gallery-grid-new {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px
}

.gallery-item {
  position: relative;
  height: 340px;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 16px 45px rgba(24, 19, 70, .12)
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: .45s
}

.gallery-item:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent 55%, rgba(8, 14, 30, .78))
}

.gallery-item span {
  position: absolute;
  z-index: 2;
  left: 22px;
  bottom: 18px;
  color: #fff;
  font-weight: 700
}

.gallery-item:hover img {
  transform: scale(1.07)
}

.check-list {
  padding: 0;
  margin: 24px 0
}

.check-list li {
  list-style: none;
  margin: 13px 0;
  color: var(--muted)
}

.check-list li:before {
  content: '✓';
  display: inline-grid;
  place-items: center;
  width: 25px;
  height: 25px;
  margin-right: 10px;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, #5369f6, #24bff5);
  font-weight: 800
}

.contact-detail {
  padding: 18px 0;
  border-bottom: 1px solid var(--line)
}

.contact-detail b,
.contact-detail span,
.contact-detail a {
  display: block
}

.contact-detail span,
.contact-detail a {
  color: var(--muted);
  margin-top: 6px
}

.contact-image {
  width: 100%;
  height: 230px;
  object-fit: cover;
  border-radius: 20px;
  margin-top: 25px
}

.contact-form label {
  font-weight: 700;
  font-size: 14px
}

.contact-form label input,
.contact-form label textarea {
  margin-top: 8px
}

.full-field {
  grid-column: 1/-1
}

.legal p {
  font-size: 17px;
  line-height: 1.85;
  color: var(--muted)
}

@media(max-width:1050px) {
  .inner-hero-grid {
    grid-template-columns: 1fr;
    text-align: center
  }

  .inner-hero-copy h1,
  .inner-hero-copy>p {
    margin-left: auto;
    margin-right: auto
  }

  .inner-hero .hero-actions,
  .inner-hero .mini-stats {
    justify-content: center
  }

  .inner-hero-art {
    margin-top: 10px
  }

  .games-full-grid,
  .full-image-grid,
  .image-card-grid {
    grid-template-columns: repeat(2, 1fr)
  }
}

@media(max-width:650px) {
  .inner-hero {
    padding: 120px 0 70px
  }

  .inner-hero-copy h1 {
    font-size: 42px;
    letter-spacing: -1.5px
  }

  .inner-hero-copy>p {
    font-size: 17px
  }

  .inner-hero-art>img {
    height: 330px
  }

  .inner-hero .float-card {
    display: none
  }

  .full-image-grid,
  .games-full-grid,
  .image-card-grid,
  .gallery-grid-new {
    grid-template-columns: 1fr
  }

  .full-image-card {
    min-height: 470px
  }

  .gallery-item {
    height: 300px
  }

  .image-info-card>img {
    height: 240px
  }
}


/* July 2026 card image, simplified hero and detail-page refinements */
.simple-page-hero {
  position: relative;
  overflow: hidden;
  padding: 155px 0 105px;
  background: radial-gradient(circle at 15% 20%, rgba(96, 110, 255, .34), transparent 31%), radial-gradient(circle at 86% 15%, rgba(45, 194, 255, .25), transparent 28%), linear-gradient(135deg, #10142b 0%, #25225f 55%, #4435a5 100%);
  color: #fff;
  text-align: center
}

.simple-page-hero:before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .13) 1px, transparent 0);
  background-size: 30px 30px;
  mask-image: linear-gradient(to bottom, #000, transparent)
}

.simple-page-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 980px
}

.simple-page-hero .eyebrow {
  color: #9edcff;
  justify-content: center
}

.simple-page-hero h1 {
  font-size: clamp(48px, 6vw, 82px);
  line-height: 1.04;
  letter-spacing: -2.7px;
  margin: 18px auto 20px;
  color: #fff
}

.simple-page-hero h1 span {
  color: #9fb2ff
}

.simple-page-hero p {
  max-width: 800px;
  margin: 0 auto;
  font-size: 20px;
  line-height: 1.8;
  color: rgba(255, 255, 255, .82)
}

/* Home: show complete uncropped artwork */
#games .product-card,
.games .product-card {
  overflow: hidden
}

#games .product-card>img,
.games .product-card>img {
  width: 100%;
  height: 390px !important;
  object-fit: contain !important;
  object-position: center;
  background: linear-gradient(145deg, #10182f, #243c77);
  padding: 16px
}

#apps .app-top,
.apps .app-top {
  height: 390px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: linear-gradient(145deg, #eef3ff, #f8f6ff)
}

#apps .app-top img,
.apps .app-top img {
  width: 100%;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center;
  filter: drop-shadow(0 18px 30px rgba(30, 37, 92, .18))
}

/* White card headings for Games and Apps listing pages */
.games-full-grid .full-card-overlay h3,
.games-full-grid .full-card-overlay h3 a,
.full-image-grid .full-card-overlay h3,
.full-image-grid .full-card-overlay h3 a {
  color: #fff !important
}

.full-image-card {
  background: #11162d
}

.full-image-card>a:first-child {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  background: linear-gradient(145deg, #10182f, #273c78)
}

.full-image-card>a:first-child img {
  object-fit: contain !important;
  object-position: center;
  width: 100%;
  height: 100%;
  padding: 18px
}

.full-image-card:after {
  background: linear-gradient(to top, rgba(8, 10, 27, .98) 2%, rgba(8, 10, 27, .72) 40%, rgba(8, 10, 27, .10) 76%) !important
}

/* More premium game and app detail content */
.game-copy {
  background: #fff;
  border: 1px solid rgba(92, 82, 210, .10);
  border-radius: 30px;
  padding: 52px;
  box-shadow: 0 25px 70px rgba(29, 25, 85, .10)
}

.game-copy .section-head h2 {
  font-size: clamp(34px, 4vw, 54px)
}

.game-features li {
  border: 1px solid rgba(93, 76, 220, .10);
  transition: .3s ease
}

.game-features li:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 38px rgba(29, 24, 77, .13)
}

.app-showcase {
  background: #fff
}

.app-showcase-grid {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 70px;
  align-items: center
}

.app-showcase-media {
  min-height: 560px;
  border-radius: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 38px;
  background: radial-gradient(circle at 25% 20%, rgba(91, 112, 255, .26), transparent 30%), linear-gradient(145deg, #edf3ff, #f8f6ff);
  box-shadow: 0 25px 70px rgba(35, 31, 100, .12)
}

.app-showcase-media img {
  width: 100%;
  height: 500px;
  object-fit: contain;
  filter: drop-shadow(0 25px 35px rgba(29, 34, 85, .22))
}

.app-showcase-copy h2 {
  font-size: clamp(38px, 4.4vw, 60px);
  line-height: 1.12;
  margin: 15px 0 20px
}

.app-showcase-copy p {
  font-size: 19px;
  line-height: 1.85;
  color: var(--muted)
}

.soft-section {
  background: linear-gradient(180deg, #f5f7ff, #fff)
}

.app-feature-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px
}

.app-feature-panel {
  padding: 30px;
  border-radius: 22px;
  background: #fff;
  border: 1px solid rgba(95, 76, 220, .10);
  box-shadow: 0 16px 42px rgba(29, 24, 77, .08);
  transition: .3s
}

.app-feature-panel:hover {
  transform: translateY(-7px)
}

.app-feature-panel>span {
  width: 52px;
  height: 52px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(135deg, #4f6cf5, #8b54f6);
  font-size: 22px;
  margin-bottom: 20px
}

.app-feature-panel h3 {
  font-size: 21px;
  margin: 0 0 10px
}

.app-feature-panel p {
  color: var(--muted);
  line-height: 1.7
}

.related-apps {
  text-align: center
}

.related-apps .btn {
  margin-top: 12px
}

@media(max-width:900px) {

  #games .product-card>img,
  .games .product-card>img,
  #apps .app-top,
  .apps .app-top {
    height: 330px !important
  }

  .app-showcase-grid {
    grid-template-columns: 1fr
  }

  .app-feature-grid {
    grid-template-columns: repeat(2, 1fr)
  }
}

@media(max-width:600px) {
  .simple-page-hero {
    padding: 125px 0 75px
  }

  .simple-page-hero h1 {
    font-size: 42px;
    letter-spacing: -1.5px
  }

  .simple-page-hero p {
    font-size: 17px
  }

  .simple-page-hero .eyebrow {
    font-size: 12px
  }

  #games .product-card>img,
  .games .product-card>img,
  #apps .app-top,
  .apps .app-top {
    height: 290px !important;
    padding: 12px
  }

  .full-image-card>a:first-child img {
    padding: 12px
  }

  .game-copy {
    padding: 28px 20px
  }

  .app-showcase-media {
    min-height: 390px;
    padding: 22px
  }

  .app-showcase-media img {
    height: 340px
  }

  .app-feature-grid {
    grid-template-columns: 1fr
  }
}


/* Final unified page and full-image improvements */
.page-home-hero {
  background: radial-gradient(circle at 88% 10%, #dce9ff 0, rgba(220, 233, 255, .5) 16%, transparent 38%), linear-gradient(180deg, #fff 0%, #fbfcff 100%);
  color: var(--ink)
}

.page-home-hero .inner-hero-art>img {
  object-fit: contain !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  max-height: 470px;
  padding: 0 !important
}

.page-home-hero .inner-hero-art:before {
  content: "";
  position: absolute;
  width: 430px;
  height: 430px;
  border: 1px solid #e5ebf7;
  border-radius: 50%
}

.page-home-hero .inner-hero-art:after {
  content: "";
  position: absolute;
  width: 340px;
  height: 340px;
  border: 1px dashed #dfe6f4;
  border-radius: 50%
}

.full-image-grid,
.games-full-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px
}

.full-image-card {
  display: flex;
  flex-direction: column;
  min-height: 600px;
  background: #fff;
  border: 1px solid #e7ecf5;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 18px 44px rgba(26, 44, 92, .10);
  transition: .35s ease
}

.full-image-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 28px 60px rgba(28, 48, 105, .16)
}

.full-image-card>a:first-child {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 390px;
  padding: 0;
  background: transparent !important;
  overflow: hidden
}

.full-image-card>a:first-child img {
  width: 100%;
  height: 100%;
  object-fit: contain !important;
  object-position: center;
  background: transparent !important;
  padding: 0 !important;
  transition: .4s ease
}

.full-image-card:hover>a:first-child img {
  transform: scale(1.025)
}

.full-card-overlay {
  position: relative !important;
  inset: auto !important;
  margin: 0 !important;
  min-height: 210px;
  padding: 28px !important;
  background: linear-gradient(135deg, #111a31, #27365e) !important;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: flex-start
}

.full-card-overlay h3,
.full-card-overlay h3 a {
  color: #fff !important;
  font-size: 24px;
  line-height: 1.25;
  margin: 12px 0 10px
}

.full-card-overlay p {
  color: rgba(255, 255, 255, .76) !important;
  line-height: 1.65;
  margin: 0 0 20px
}

.full-card-overlay .btn {
  margin-top: auto
}

.full-card-overlay .tag {
  color: #bcd0ff;
  background: rgba(255, 255, 255, .1)
}

.content-grid img,
.image-info-card img,
.app-showcase-media img {
  object-fit: contain !important;
  background: transparent !important
}

.image-info-card {
  overflow: hidden;
  background: #fff;
  border-radius: 24px;
  border: 1px solid #e5eaf3;
  box-shadow: 0 18px 45px rgba(22, 39, 84, .1)
}

.image-info-card>img {
  width: 100%;
  height: 300px;
  padding: 0 !important
}

.image-info-card>div {
  padding: 26px
}

.game-copy {
  max-width: 1180px;
  padding: 42px;
  border-radius: 30px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(25, 42, 92, .09);
  border: 1px solid #e9edf5
}

.game-copy .content-grid {
  align-items: stretch
}

.game-copy .content-grid>img {
  min-height: 500px;
  object-fit: contain !important
}

.check-list {
  padding: 0;
  display: grid;
  gap: 12px
}

.check-list li {
  list-style: none;
  padding: 14px 16px 14px 45px;
  background: #f5f8ff;
  border-radius: 13px;
  position: relative
}

.check-list li:before {
  content: '✓';
  position: absolute;
  left: 16px;
  color: #5368f4;
  font-weight: 800
}

.related-section {
  background: #f5f8ff
}

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

.related-card {
  background: #fff;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid #e4eaf4;
  box-shadow: 0 14px 38px rgba(24, 43, 91, .09);
  transition: .3s
}

.related-card:hover {
  transform: translateY(-6px)
}

.related-card>a {
  display: block
}

.related-card img {
  width: 100%;
  height: 280px;
  object-fit: contain;
  background: transparent
}

.related-card div {
  padding: 24px;
  background: #101a31;
  color: #fff
}

.related-card span {
  font-size: 11px;
  letter-spacing: 1.4px;
  color: #9db7ff;
  font-weight: 800
}

.related-card h3 {
  font-size: 21px;
  margin: 8px 0;
  color: #fff
}

.related-card p {
  font-size: 14px;
  color: #b9c4d9;
  line-height: 1.6;
  margin: 0
}

@media(max-width:1050px) {

  .full-image-grid,
  .games-full-grid,
  .related-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .full-image-card>a:first-child {
    height: 340px
  }
}

@media(max-width:650px) {

  .full-image-grid,
  .games-full-grid,
  .related-grid {
    grid-template-columns: 1fr
  }

  .full-image-card {
    min-height: 0
  }

  .full-image-card>a:first-child {
    height: 320px
  }

  .full-card-overlay {
    min-height: 225px
  }

  .page-home-hero .inner-hero-art>img {
    height: 330px !important
  }

  .game-copy {
    padding: 22px
  }

  .game-copy .content-grid>img {
    min-height: 320px
  }

  .related-card img {
    height: 250px
  }
}


/* Final layout refinements: centered inner-page heroes and uncropped media cards */
.simple-centered-hero {
  position: relative;
  min-height: 430px;
  padding: 145px 0 90px;
  display: flex;
  align-items: center;
  overflow: hidden;
  color: var(--ink);
  text-align: center;
  background:
    radial-gradient(circle at 88% 10%, #dce9ff 0, rgba(220, 233, 255, .5) 16%, transparent 36%),
    linear-gradient(#fff, #fff);
  border-bottom: 1px solid #f3f5fa;
}

.simple-centered-hero:before {
  content: "";
  position: absolute;
  width: 520px;
  height: 520px;
  border: 1px solid rgba(219, 228, 246, .72);
  border-radius: 50%;
  right: -180px;
  top: -210px;
  pointer-events: none;
}

.simple-centered-hero:after {
  content: "";
  position: absolute;
  width: 360px;
  height: 360px;
  border: 1px dashed rgba(215, 225, 245, .8);
  border-radius: 50%;
  left: -150px;
  bottom: -210px;
  pointer-events: none;
}

.simple-centered-hero__content {
  position: relative;
  z-index: 2;
  max-width: 920px;
  margin: auto
}

.simple-centered-hero .eyebrow {
  font-size: 11px
}

.simple-centered-hero h1 {
  font-family: Poppins, Inter, sans-serif;
  font-size: clamp(44px, 5.5vw, 76px);
  line-height: 1.06;
  letter-spacing: -2.5px;
  margin: 20px auto 20px;
  max-width: 950px;
}

.simple-centered-hero h1 span {
  color: #5368f4
}

.simple-centered-hero p {
  max-width: 790px;
  margin: 0 auto;
  color: var(--muted);
  font-size: 19px;
  line-height: 1.8;
}

/* Games and Apps listing cards: image first, content second, no image-area background */
.games-full-grid,
.full-image-grid {
  align-items: stretch
}

.full-image-card {
  display: flex;
  flex-direction: column;
  min-height: 0 !important;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff !important;
  box-shadow: 0 14px 34px rgba(29, 45, 102, .09);
}

.full-image-card>a:first-child {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 390px !important;
  padding: 0 !important;
  background: transparent !important;
  overflow: hidden;
}

.full-image-card>a:first-child img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100%;
  object-fit: contain !important;
  object-position: center;
  padding: 0 !important;
  margin: 0;
  display: block;
  background: transparent !important;
  border-radius: 0 !important;
  filter: none !important;
  transform: none !important;
}

.full-image-card:hover>a:first-child img {
  transform: none !important
}

.full-card-overlay {
  position: static !important;
  inset: auto !important;
  display: block !important;
  flex: 1;
  min-height: 235px !important;
  padding: 28px 26px 30px !important;
  background: linear-gradient(145deg, #121d35, #25365f) !important;
  color: #fff;
}

.full-card-overlay:before {
  display: none !important
}

.full-card-overlay h3,
.full-card-overlay h3 a {
  color: #fff !important
}

.full-card-overlay p {
  color: rgba(255, 255, 255, .78) !important;
  line-height: 1.7
}

.full-card-overlay .tag {
  color: #dbe4ff;
  background: rgba(255, 255, 255, .1)
}

/* Home page featured Games and Apps: full media, no colored image backing */
#games .product-card,
.games .product-card,
#apps .app-card,
.apps .app-card {
  background: #fff
}

#games .product-card>img,
.games .product-card>img {
  width: 100%;
  height: 360px !important;
  object-fit: contain !important;
  object-position: center;
  background: transparent !important;
  padding: 0 !important;
}

#apps .app-top,
.apps .app-top {
  height: 360px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  padding: 0 !important;
}

#apps .app-top img,
.apps .app-top img {
  width: 100%;
  height: 100%;
  object-fit: contain !important;
  object-position: center;
  background: transparent !important;
  padding: 0 !important;
}

@media(max-width:900px) {
  .simple-centered-hero {
    min-height: 380px;
    padding: 125px 0 76px
  }

  .simple-centered-hero p {
    font-size: 17px
  }

  .full-image-card>a:first-child {
    height: 340px !important
  }

  #games .product-card>img,
  .games .product-card>img,
  #apps .app-top,
  .apps .app-top {
    height: 320px !important
  }
}

@media(max-width:600px) {
  .simple-centered-hero {
    min-height: 340px;
    padding: 112px 0 64px
  }

  .simple-centered-hero h1 {
    font-size: 40px;
    letter-spacing: -1.4px
  }

  .simple-centered-hero p {
    font-size: 16px;
    line-height: 1.7
  }

  .full-image-card>a:first-child {
    height: 310px !important
  }

  .full-card-overlay {
    min-height: 0 !important;
    padding: 24px 20px 26px !important
  }

  #games .product-card>img,
  .games .product-card>img,
  #apps .app-top,
  .apps .app-top {
    height: 290px !important
  }
}


/* === July 2026 premium inner-page and full-image card refinements === */
.full-image-grid {
  align-items: start
}

.full-image-card,
.game-list-card {
  overflow: hidden;
  padding: 0;
  background: #fff;
  border: 1px solid #e3e9f5;
  border-radius: 22px;
  box-shadow: 0 18px 45px rgba(29, 48, 89, .10);
  display: flex;
  flex-direction: column;
  height: auto !important;
  min-height: 0 !important
}

.full-image-card>a:first-child,
.game-list-card>a:first-child {
  display: block;
  width: 100%;
  line-height: 0;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important
}

.full-image-card>a:first-child img,
.game-list-card>a:first-child img,
.games-full-grid img,
.apps-full-grid img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  object-position: center !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border-radius: 0 !important
}

.full-card-overlay {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  background: #172447 !important;
  color: #fff !important;
  padding: 26px 24px 28px !important;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1
}

.full-card-overlay:before,
.full-card-overlay:after {
  display: none !important
}

.full-card-overlay h3,
.full-card-overlay h3 a,
.game-list-card h3,
.game-list-card h3 a {
  color: #fff !important
}

.full-card-overlay p {
  color: #d8e2ff !important
}

.full-card-overlay .tag {
  background: rgba(255, 255, 255, .12) !important;
  color: #dce5ff !important
}

.full-card-overlay .btn {
  margin-top: auto
}

/* Home cards: edge-to-edge full artwork */
.home-games .game-card,
.featured-games .game-card,
.apps-grid .app-card,
.featured-apps .app-card {
  overflow: hidden
}

.home-games .game-card img,
.featured-games .game-card img,
.apps-grid .app-card img,
.featured-apps .app-card img {
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important
}

.product-detail-hero {
  position: relative;
  overflow: hidden;
  background: radial-gradient(circle at 84% 22%, rgba(90, 112, 255, .20), transparent 28%), linear-gradient(110deg, #fff 0%, #f7faff 48%, #eaf2ff 100%);
  padding: 86px 0 70px
}

.product-detail-hero:before {
  content: "";
  position: absolute;
  width: 560px;
  height: 560px;
  border: 1px solid rgba(71, 99, 255, .10);
  border-radius: 50%;
  right: -120px;
  top: -170px;
  box-shadow: 0 0 0 52px rgba(71, 99, 255, .025), 0 0 0 105px rgba(71, 99, 255, .018)
}

.product-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(380px, .98fr);
  gap: 72px;
  align-items: center;
  position: relative;
  z-index: 1
}

.product-detail-hero h1 {
  font-size: clamp(48px, 5.6vw, 84px);
  line-height: 1.02;
  letter-spacing: -.045em;
  margin: 16px 0 22px;
  color: #0f1830
}

.product-detail-hero p {
  font-size: 19px;
  line-height: 1.8;
  color: #66728c;
  max-width: 680px
}

.product-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 30px
}

.product-hero-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  margin-top: 34px
}

.product-hero-metrics div {
  border-left: 1px solid #dce3f1;
  padding-left: 18px
}

.product-hero-metrics strong {
  display: block;
  font: 700 17px Poppins, sans-serif;
  color: #111a31
}

.product-hero-metrics span {
  font-size: 12px;
  color: #78839a;
  text-transform: uppercase;
  letter-spacing: .05em
}

.product-visual {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 500px
}

.product-visual:before {
  content: "";
  position: absolute;
  width: 430px;
  height: 430px;
  border: 1px solid rgba(61, 92, 255, .13);
  border-radius: 50%;
  box-shadow: 0 0 0 44px rgba(61, 92, 255, .025)
}

.product-visual img {
  position: relative;
  z-index: 2;
  display: block;
  width: min(100%, 520px);
  height: auto;
  max-height: 560px;
  object-fit: contain;
  filter: drop-shadow(0 30px 35px rgba(24, 40, 83, .22));
  border-radius: 28px
}

.float-note {
  position: absolute;
  z-index: 3;
  background: #fff;
  border: 1px solid #edf1f8;
  border-radius: 14px;
  padding: 12px 15px;
  box-shadow: 0 16px 35px rgba(30, 48, 86, .12);
  font-weight: 700;
  font-size: 13px;
  color: #121c35
}

.float-note small {
  display: block;
  font-weight: 500;
  color: #8791a5;
  font-size: 10px
}

.float-note.one {
  left: 0;
  top: 23%
}

.float-note.two {
  right: 0;
  bottom: 19%
}

.detail-section {
  padding: 100px 0
}

.detail-section.soft {
  background: #f5f8ff
}

.detail-section .section-head {
  max-width: 820px;
  margin: 0 auto 54px
}

.feature-tile-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px
}

.feature-tile {
  background: #eef4ff;
  border: 1px solid #e1e9fa;
  border-radius: 22px;
  padding: 28px;
  min-height: 220px;
  transition: .25s
}

.feature-tile:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(36, 63, 121, .11)
}

.feature-icon {
  width: 52px;
  height: 52px;
  border-radius: 15px;
  background: linear-gradient(135deg, #2380ff, #6058ff);
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 24px;
  box-shadow: 0 12px 24px rgba(45, 95, 255, .25);
  margin-bottom: 20px
}

.feature-tile h3 {
  font-size: 20px;
  margin: 0 0 10px
}

.feature-tile p {
  margin: 0;
  color: #67738c;
  line-height: 1.7
}

.screenshot-band {
  background: linear-gradient(110deg, #edf4ff, #e7fbfb);
  overflow: hidden
}

.screenshot-track {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  align-items: end
}

.shot-card {
  background: transparent;
  border-radius: 24px;
  overflow: hidden
}

.shot-card img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  background: transparent;
  filter: drop-shadow(0 24px 25px rgba(30, 45, 80, .18))
}

.shot-card:nth-child(2) {
  transform: translateY(-24px)
}

.detail-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 75px;
  align-items: center
}

.detail-split.reverse .detail-copy {
  order: 2
}

.detail-split.reverse .detail-media {
  order: 1
}

.detail-copy h2 {
  font-size: clamp(38px, 4vw, 58px);
  line-height: 1.08;
  letter-spacing: -.035em;
  margin: 12px 0 20px
}

.detail-copy p {
  font-size: 17px;
  color: #67738c;
  line-height: 1.85
}

.detail-media img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 30px;
  filter: drop-shadow(0 28px 40px rgba(26, 43, 82, .17))
}

.inline-checks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 24px;
  margin-top: 28px
}

.inline-checks span {
  font-weight: 600;
  color: #27344f
}

.inline-checks span:before {
  content: "✓";
  color: #2874ff;
  margin-right: 9px
}

.product-cta {
  margin: 20px auto 90px;
  max-width: 1180px;
  background: linear-gradient(135deg, #2480ff, #553eff);
  border-radius: 28px;
  padding: 70px 30px;
  text-align: center;
  color: #fff;
  box-shadow: 0 28px 60px rgba(45, 76, 235, .25)
}

.product-cta h2 {
  color: #fff;
  font-size: clamp(38px, 4vw, 58px);
  margin: 12px 0
}

.product-cta p {
  color: #dfe7ff;
  max-width: 650px;
  margin: 0 auto 28px;
  font-size: 17px
}

.product-cta .eyebrow {
  color: #fff;
  background: rgba(255, 255, 255, .14)
}

.related-section .related-card {
  overflow: hidden
}

.related-card img {
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  display: block;
  background: transparent !important
}

.related-card>a {
  display: block
}

.related-card>a>div {
  background: #172447;
  color: #fff
}

.related-card h3 {
  color: #fff
}

@media(max-width:900px) {

  .product-hero-grid,
  .detail-split {
    grid-template-columns: 1fr;
    gap: 45px
  }

  .product-visual {
    min-height: 380px
  }

  .product-detail-hero {
    text-align: center
  }

  .product-detail-hero p {
    margin-left: auto;
    margin-right: auto
  }

  .product-hero-actions,
  .product-hero-metrics {
    justify-content: center
  }

  .feature-tile-grid {
    grid-template-columns: 1fr 1fr
  }

  .screenshot-track {
    grid-template-columns: 1fr 1fr
  }

  .shot-card:nth-child(2) {
    transform: none
  }

  .detail-split.reverse .detail-copy,
  .detail-split.reverse .detail-media {
    order: initial
  }
}

@media(max-width:600px) {
  .product-detail-hero {
    padding: 62px 0 48px
  }

  .product-detail-hero h1 {
    font-size: 42px
  }

  .product-hero-grid {
    grid-template-columns: 1fr
  }

  .product-visual {
    min-height: 300px
  }

  .product-visual img {
    max-height: 390px
  }

  .float-note {
    display: none
  }

  .feature-tile-grid,
  .screenshot-track,
  .inline-checks {
    grid-template-columns: 1fr
  }

  .detail-section {
    padding: 72px 0
  }

  .full-card-overlay {
    padding: 22px 20px 24px !important
  }
}

/* === Final card media and colorful archive buttons === */
/* Every Games/Apps card uses edge-to-edge media at the top. */
.product-card,
.app-card,
.full-image-card,
.game-list-card,
.related-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0 !important;
}

.product-card>img,
.product-card>a:first-child,
.app-card>.app-top,
.app-card>a:first-child,
.full-image-card>a:first-child,
.game-list-card>a:first-child,
.related-card>a:first-child {
  order: -1;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  line-height: 0;
  overflow: hidden;
}

.product-card>img,
.product-card>a:first-child>img,
.app-card>.app-top>img,
.app-card>a:first-child>img,
.full-image-card>a:first-child>img,
.game-list-card>a:first-child>img,
.related-card>a:first-child>img {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  object-fit: contain !important;
  object-position: center !important;
}

/* Remove fixed image wrappers that create visible side gutters. */
#apps .app-top,
.apps .app-top,
#games .product-card>img,
.games .product-card>img {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  display: block !important;
}

/* Colorful View All buttons consistent with the AppClick brand. */
.center .btn-outline,
a[href="games.html"].btn-outline,
a[href="our-apps.html"].btn-outline {
  color: #fff !important;
  border: 0 !important;
  background: linear-gradient(100deg, #2378f5 0%, #4967f5 48%, #7359f2 100%) !important;
  box-shadow: 0 12px 28px rgba(67, 91, 239, .28) !important;
  padding: 13px 28px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}

.center .btn-outline:hover,
a[href="games.html"].btn-outline:hover,
a[href="our-apps.html"].btn-outline:hover {
  transform: translateY(-3px);
  box-shadow: 0 17px 34px rgba(67, 91, 239, .36) !important;
}

/* === Guaranteed visible media for Games and Apps archive cards === */
.games-full-grid .full-image-card,
.apps-full-grid .full-image-card {
  display: flex !important;
  flex-direction: column !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.games-full-grid .full-image-card>a:first-child,
.apps-full-grid .full-image-card>a:first-child {
  position: static !important;
  inset: auto !important;
  display: block !important;
  order: -1 !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  line-height: 0 !important;
  overflow: visible !important;
}

.games-full-grid .full-image-card>a:first-child>img,
.apps-full-grid .full-image-card>a:first-child>img {
  position: static !important;
  inset: auto !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
  object-fit: contain !important;
  object-position: center !important;
  transform: none !important;
  background: transparent !important;
}

.games-full-grid .full-image-card::after,
.apps-full-grid .full-image-card::after {
  display: none !important;
}

.games-full-grid .full-card-overlay,
.apps-full-grid .full-card-overlay {
  position: static !important;
  inset: auto !important;
  z-index: auto !important;
  width: 100% !important;
  min-height: 220px !important;
  flex: 1 !important;
}

@media(max-width:650px) {

  .games-full-grid .full-card-overlay,
  .apps-full-grid .full-card-overlay {
    min-height: 0 !important;
  }
}

/* === Equal-height Games and Apps archive cards === */
.games-full-grid,
.apps-full-grid {
  align-items: stretch !important;
  grid-auto-rows: 1fr;
}

.games-full-grid .full-image-card,
.apps-full-grid .full-image-card {
  height: 100% !important;
  min-height: 610px !important;
}

.games-full-grid .full-image-card>a:first-child,
.apps-full-grid .full-image-card>a:first-child {
  aspect-ratio: 1 / 1 !important;
  flex: 0 0 auto !important;
  overflow: hidden !important;
}

.games-full-grid .full-image-card>a:first-child>img,
.apps-full-grid .full-image-card>a:first-child>img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
}

.games-full-grid .full-card-overlay,
.apps-full-grid .full-card-overlay {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 235px !important;
}

.games-full-grid .full-card-overlay .btn,
.apps-full-grid .full-card-overlay .btn {
  margin-top: auto !important;
  align-self: flex-start;
}

@media (max-width: 900px) {

  .games-full-grid .full-image-card,
  .apps-full-grid .full-image-card {
    min-height: 560px !important;
  }
}

@media (max-width: 650px) {

  .games-full-grid,
  .apps-full-grid {
    grid-auto-rows: auto;
  }

  .games-full-grid .full-image-card,
  .apps-full-grid .full-image-card {
    min-height: 0 !important;
  }

  .games-full-grid .full-card-overlay,
  .apps-full-grid .full-card-overlay {
    min-height: 220px !important;
  }
}

/* About page redesign */
.about-story-section {
  padding-top: 110px
}

.about-story-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 80px;
  align-items: center
}

.about-story-copy h2 {
  font-size: clamp(36px, 4vw, 58px);
  line-height: 1.12;
  margin: 14px 0 24px
}

.about-story-copy p {
  font-size: 18px;
  line-height: 1.85;
  color: var(--muted);
  margin-bottom: 18px
}

.about-visual-card {
  min-height: 500px;
  border-radius: 32px;
  background: linear-gradient(145deg, #eef5ff, #f8f5ff);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 44px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 24px 70px rgba(44, 79, 160, .14)
}

.about-visual-card:before,
.about-visual-card:after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(2px)
}

.about-visual-card:before {
  width: 260px;
  height: 260px;
  background: rgba(52, 111, 255, .12);
  right: -90px;
  top: -80px
}

.about-visual-card:after {
  width: 190px;
  height: 190px;
  background: rgba(125, 84, 255, .12);
  left: -70px;
  bottom: -70px
}

.about-visual-card img {
  width: 100%;
  height: auto;
  position: relative;
  z-index: 1
}

.about-dreams-section {
  background: linear-gradient(135deg, #f6f9ff 0%, #eef4ff 58%, #f7f4ff 100%)
}

.about-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  margin-top: 48px
}

.about-stat-grid article {
  background: #fff;
  border: 1px solid #e7edfa;
  border-radius: 22px;
  padding: 34px 24px;
  text-align: center;
  box-shadow: 0 16px 45px rgba(42, 70, 135, .08)
}

.about-stat-grid strong {
  display: block;
  font-family: Poppins, sans-serif;
  font-size: clamp(28px, 3vw, 44px);
  line-height: 1.15;
  color: #17264d;
  margin-bottom: 8px
}

.about-stat-grid span {
  color: var(--muted);
  font-weight: 600
}

.about-service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  margin-top: 50px
}

.about-service-card {
  border: 1px solid #e8edf8;
  border-radius: 26px;
  padding: 38px 30px;
  background: #fff;
  box-shadow: 0 18px 50px rgba(34, 59, 120, .08);
  transition: .3s ease
}

.about-service-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 28px 65px rgba(34, 59, 120, .14)
}

.about-service-icon {
  width: 92px;
  height: 92px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px
}

.about-service-icon img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain
}

.about-service-card h3 {
  font-size: 24px;
  margin-bottom: 12px
}

.about-service-card p {
  color: var(--muted);
  line-height: 1.75
}

.about-values-section {
  background: #0d1831;
  color: #fff;
  overflow: hidden;
  position: relative
}

.about-values-section:before {
  content: "";
  position: absolute;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: rgba(65, 105, 255, .18);
  filter: blur(20px);
  right: -130px;
  top: -160px
}

.about-values-grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 70px;
  align-items: center;
  position: relative
}
.about-values-grid .eyebrow {
  color: #fff;
  background: linear-gradient(135deg, #2475f5, #6b5df4);
  box-shadow: 0 9px 20px rgba(58, 92, 240, .28);
}
.about-values-grid h2 {
  color: #fff;
  font-size: clamp(36px, 4vw, 58px);
  margin: 14px 0 20px
}

.about-values-grid p {
  color: #cad4eb;
  font-size: 18px;
  line-height: 1.8
}

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

.about-checks span {
  font-weight: 600;
  color: #eef3ff
}

.about-values-panel {
  background: linear-gradient(145deg, rgba(64, 105, 255, .95), rgba(111, 82, 255, .94));
  padding: 42px;
  border-radius: 28px;
  box-shadow: 0 25px 70px rgba(0, 0, 0, .24)
}

.about-values-panel h3 {
  font-size: 30px;
  color: #fff
}

.about-values-panel p {
  color: #edf1ff
}

.about-values-panel a {
  display: block;
  color: #fff;
  font-weight: 700;
  margin-top: 18px
}

.about-cta h2 {
  color: #fff
}

.about-cta p {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto
}

.btn-ghost-light {
  border: 1px solid rgba(255, 255, 255, .55);
  color: #fff;
  background: rgba(255, 255, 255, .08)
}

.btn-ghost-light:hover {
  background: #fff;
  color: #315cff
}

@media(max-width:900px) {

  .about-story-grid,
  .about-values-grid {
    grid-template-columns: 1fr
  }

  .about-story-grid {
    gap: 45px
  }

  .about-stat-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .about-service-grid {
    grid-template-columns: 1fr
  }

  .about-visual-card {
    min-height: auto
  }

  .about-checks {
    grid-template-columns: 1fr
  }
}

@media(max-width:560px) {
  .about-story-section {
    padding-top: 70px
  }

  .about-stat-grid {
    grid-template-columns: 1fr
  }

  .about-story-copy h2,
  .about-values-grid h2 {
    font-size: 34px
  }

  .about-visual-card {
    padding: 24px;
    border-radius: 22px
  }

  .about-values-panel {
    padding: 28px
  }
}

/* === Colorful About Journey === */
.about-dreams-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 10% 15%, rgba(48, 111, 255, .15), transparent 30%),
    radial-gradient(circle at 88% 78%, rgba(132, 78, 255, .14), transparent 32%),
    linear-gradient(135deg, #f7faff 0%, #eef4ff 52%, #faf7ff 100%);
}

.about-dreams-section:before,
.about-dreams-section:after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.about-dreams-section:before {
  width: 240px;
  height: 240px;
  left: -90px;
  top: 70px;
  background: rgba(40, 116, 255, .08)
}

.about-dreams-section:after {
  width: 300px;
  height: 300px;
  right: -120px;
  bottom: -110px;
  background: rgba(119, 72, 255, .08)
}

.about-dreams-section .container {
  position: relative;
  z-index: 1
}

.about-stat-grid {
  gap: 24px
}

.about-stat-grid .journey-card {
  position: relative;
  overflow: hidden;
  min-height: 230px;
  padding: 30px 26px 28px;
  text-align: left;
  border: 0;
  color: #fff;
  box-shadow: 0 24px 60px rgba(31, 57, 121, .18);
  transition: transform .35s ease, box-shadow .35s ease;
}

.about-stat-grid .journey-card:before {
  content: "";
  position: absolute;
  width: 170px;
  height: 170px;
  border-radius: 50%;
  right: -65px;
  top: -55px;
  background: rgba(255, 255, 255, .14);
}

.about-stat-grid .journey-card:after {
  content: "";
  position: absolute;
  width: 90px;
  height: 90px;
  border-radius: 24px;
  left: -30px;
  bottom: -35px;
  transform: rotate(26deg);
  background: rgba(255, 255, 255, .09);
}

.about-stat-grid .journey-card:hover {
  transform: translateY(-10px) scale(1.015);
  box-shadow: 0 32px 75px rgba(31, 57, 121, .25);
}

.journey-blue {
  background: linear-gradient(145deg, #1769ff, #4c7cff)
}

.journey-purple {
  background: linear-gradient(145deg, #7048ff, #9a5dff)
}

.journey-cyan {
  background: linear-gradient(145deg, #00a8c8, #20c7bb)
}

.journey-orange {
  background: linear-gradient(145deg, #ff7a31, #ff4f76)
}

.journey-icon {
  position: relative;
  z-index: 1;
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  margin-bottom: 24px;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 18px;
  background: rgba(255, 255, 255, .18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35);
  font-size: 27px;
}

.about-stat-grid .journey-kicker,
.about-stat-grid .journey-label {
  position: relative;
  z-index: 1;
  display: block;
  color: rgba(255, 255, 255, .9)
}

.about-stat-grid .journey-kicker {
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.about-stat-grid .journey-card strong {
  position: relative;
  z-index: 1;
  display: block;
  margin: 0 0 10px;
  color: #fff;
 font-size: clamp(25px, 2.3vw, 32px);
  line-height: 1.08;
}

.about-stat-grid .journey-card strong.journey-location {
  font-size: clamp(25px, 2.3vw, 32px)
}

.about-stat-grid .journey-label {
  font-size: 14px;
  line-height: 1.55;
  font-weight: 600
}

@media(max-width:900px) {
  .about-stat-grid .journey-card {
    min-height: 250px
  }
}

@media(max-width:560px) {
  .about-stat-grid .journey-card {
    min-height: 235px;
    padding: 26px 24px
  }
}

/* Final About page section fixes */
.about-stat-grid .journey-card.journey-blue {
  background: linear-gradient(145deg, #1769ff 0%, #4c7cff 100%) !important
}

.about-stat-grid .journey-card.journey-purple {
  background: linear-gradient(145deg, #7048ff 0%, #9a5dff 100%) !important
}

.about-stat-grid .journey-card.journey-cyan {
  background: linear-gradient(145deg, #00a8c8 0%, #20c7bb 100%) !important
}

.about-stat-grid .journey-card.journey-orange {
  background: linear-gradient(145deg, #ff7a31 0%, #ff4f76 100%) !important
}

.about-stat-grid .journey-card,
.about-stat-grid .journey-card span,
.about-stat-grid .journey-card strong {
  color: #fff !important
}

.about-stat-grid .journey-card .journey-kicker {
  color: rgba(255, 255, 255, .82) !important
}

.about-stat-grid .journey-card .journey-label {
  color: rgba(255, 255, 255, .94) !important
}

.about-cta .hero-actions {
  justify-content: center;
  margin: 28px 0 0
}

.about-cta .btn-light {
  background: #fff !important;
  color: #315cff !important;
  border-color: #fff !important;
  min-width: 172px
}

.about-cta .btn-light:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(18, 37, 120, .22)
}

.about-cta .btn-ghost-light {
  min-width: 155px;
  color: #fff !important
}

.about-cta .eyebrow {
  color: rgba(255, 255, 255, .78) !important;
  background: rgba(255, 255, 255, .12) !important;
  padding: 7px 13px
}

/* Home hero product showcase */
.hero-products-showcase {
  min-height: 520px;
  display: block;
  position: relative;
  isolation: isolate
}

.hero-products-showcase:before {
  width: 470px;
  height: 470px;
  top: 22px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(145deg, rgba(56, 102, 245, .07), rgba(105, 95, 241, .04));
  border-color: #dfe7fb
}

.hero-products-showcase:after {
  width: 380px;
  height: 380px;
  top: 67px;
  left: 50%;
  transform: translateX(-50%)
}

.showcase-glow {
  position: absolute;
  z-index: -1;
  width: 390px;
  height: 390px;
  left: 50%;
  top: 72px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(72, 110, 246, .25), rgba(105, 95, 241, .08) 48%, transparent 70%);
  filter: blur(10px)
}

.showcase-card {
  position: absolute;
  z-index: 2;
  display: block;
  overflow: hidden;
  border-radius: 22px;
  background: #fff;
  border: 5px solid #fff;
  box-shadow: 0 22px 55px rgba(30, 48, 112, .19);
  transition: transform .3s ease, box-shadow .3s ease
}

.showcase-card:hover {
  transform: translateY(-7px) rotate(0deg) !important;
  box-shadow: 0 30px 70px rgba(30, 48, 112, .27)
}

.showcase-card img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover
}

.showcase-card span {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 20px 18px 15px;
  color: #fff;
  background: linear-gradient(transparent, rgba(7, 15, 39, .92));
  text-align: left
}

.showcase-card span b,
.showcase-card span small {
  display: block
}

.showcase-card span b {
  font-family: Poppins, Inter, sans-serif;
  font-size: 20px
}

.showcase-card span small {
  font-size: 10px;
  margin-top: 3px;
  opacity: .88
}

.showcase-main {
  width: 275px;
  height: 355px;
  left: 50%;
  top: 75px;
  transform: translateX(-50%);
  z-index: 4
}

.showcase-top {
  width: 165px;
  height: 165px;
  left: 25px;
  top: 25px;
  transform: rotate(-7deg)
}

.showcase-right {
  width: 175px;
  height: 175px;
  right: 10px;
  top: 55px;
  transform: rotate(7deg)
}

.showcase-bottom {
  width: 195px;
  height: 210px;
  right: 20px;
  bottom: 15px;
  transform: rotate(4deg);
  z-index: 3
}

.showcase-left {
  width: 170px;
  height: 205px;
  left: 10px;
  bottom: 30px;
  transform: rotate(-5deg);
  z-index: 3
}

.showcase-mini {
  width: 120px;
  height: 120px;
  left: 175px;
  bottom: 0;
  transform: rotate(7deg);
  z-index: 5;
  border-radius: 18px
}

.showcase-badge {
  position: absolute;
  z-index: 8;
  background: rgba(255, 255, 255, .95);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(227, 233, 248, .9);
  border-radius: 14px;
  padding: 12px 16px;
  box-shadow: 0 14px 30px rgba(34, 48, 101, .14)
}

.showcase-badge b,
.showcase-badge small {
  display: block
}

.showcase-badge b {
  font: 700 12px Poppins, Inter, sans-serif
}

.showcase-badge small {
  font-size: 9px;
  color: var(--muted);
  margin-top: 2px
}

.badge-products {
  left: 118px;
  top: 6px
}

.badge-rating {
  right: 45px;
  bottom: 3px
}

@media(max-width:1100px) {
  .hero-products-showcase {
    transform: scale(.9);
    margin-inline: -30px
  }
}

@media(max-width:900px) {
  .hero-products-showcase {
    width: min(100%, 620px);
    margin: 20px auto 0;
    transform: none
  }

  .showcase-top {
    left: 5%
  }

  .showcase-right {
    right: 4%
  }

  .showcase-left {
    left: 3%
  }

  .showcase-bottom {
    right: 3%
  }
}

@media(max-width:600px) {
  .hero-products-showcase {
    min-height: 430px;
    transform: scale(.82);
  }

  .showcase-main {
    width: 240px;
    height: 310px
  }

  .showcase-top {
    width: 135px;
    height: 135px
  }

  .showcase-right {
    width: 140px;
    height: 140px
  }

  .showcase-left {
    width: 140px;
    height: 170px
  }

  .showcase-bottom {
    width: 155px;
    height: 175px
  }

  .showcase-mini {
    width: 95px;
    height: 95px;
    left: 155px
  }

  .showcase-badge {
    display: none
  }
}


/* July 28 refinements: more visible, premium inner-page hero backgrounds */
.simple-centered-hero {
  background:
    radial-gradient(circle at 12% 30%, rgba(96, 132, 255, .25) 0, rgba(96, 132, 255, .12) 18%, transparent 42%),
    radial-gradient(circle at 88% 18%, rgba(109, 85, 245, .22) 0, rgba(109, 85, 245, .10) 20%, transparent 44%),
    linear-gradient(135deg, #f7faff 0%, #edf4ff 48%, #f4efff 100%);
}

.simple-centered-hero:before {
  width: 600px;
  height: 600px;
  right: -220px;
  top: -270px;
  border: 1px solid rgba(89, 114, 238, .20);
  box-shadow: 0 0 0 55px rgba(106, 126, 244, .035), 0 0 0 110px rgba(106, 126, 244, .025);
}

.simple-centered-hero:after {
  width: 430px;
  height: 430px;
  left: -180px;
  bottom: -250px;
  border: 1px dashed rgba(78, 112, 237, .28);
  box-shadow: 0 0 0 45px rgba(69, 146, 255, .035);
}

.simple-centered-hero__content:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(920px, 92vw);
  height: 230px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255, 255, 255, .82) 0%, rgba(255, 255, 255, .38) 45%, transparent 74%);
  filter: blur(2px);
}

.simple-centered-hero h1 {
  text-shadow: 0 8px 30px rgba(50, 72, 150, .08)
}

.simple-centered-hero .eyebrow {
  background: rgba(255, 255, 255, .72);
  box-shadow: 0 8px 24px rgba(63, 88, 167, .08)
}


/* Store badges, mobile screenshot sliders and tailored install panels */
.store-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 24px
}

.store-badge {
  min-width: 182px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding: 12px 18px;
  border-radius: 15px;
  background: #081326;
  color: #fff !important;
  box-shadow: 0 12px 25px rgba(8, 19, 38, .18);
  transition: .25s
}

.store-badge:hover {
  transform: translateY(-3px);
  background: #12203a
}

.store-symbol {
  font-size: 24px;
  line-height: 1
}

.store-badge small,
.store-badge strong {
  display: block;
  line-height: 1.05
}

.store-badge small {
  font-size: 9px;
  color: #dbe3f3;
  font-weight: 700
}

.store-badge strong {
  font: 700 18px Poppins, Inter, sans-serif;
  margin-top: 3px
}

.product-screenshots {
  overflow: hidden;
  background: radial-gradient(circle at 92% 8%, rgba(77, 214, 231, .25), transparent 28%), linear-gradient(135deg, #f0f5ff, #eef8ff)
}

.slider-shell {
  position: relative
}

.mobile-screen-slider {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(245px, 1fr);
  gap: 26px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 12px 8px 34px;
  scrollbar-width: none
}

.mobile-screen-slider::-webkit-scrollbar {
  display: none
}

.screen-slide {
  scroll-snap-align: start;
  text-align: center
}

.phone-frame {
  height: 520px;
  border: 8px solid #202838;
  border-radius: 38px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 24px 55px rgba(26, 49, 101, .18);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative
}

.phone-frame:before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 17px;
  background: #202838;
  border-radius: 0 0 12px 12px;
  z-index: 2
}

.phone-frame img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  background: transparent
}

.screen-slide>span {
  display: block;
  margin-top: 15px;
  font-weight: 700;
  color: #34425f
}

.slider-arrow {
  position: absolute;
  z-index: 5;
  top: 45%;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, #2678f7, #6b58f3);
  color: #fff;
  font-size: 31px;
  line-height: 1;
  box-shadow: 0 12px 25px rgba(58, 86, 225, .28);
  cursor: pointer
}

.slider-arrow.prev {
  left: -19px
}

.slider-arrow.next {
  right: -19px
}

.product-cta .store-buttons {
  justify-content: center
}

.product-cta .store-badge {
  box-shadow: 0 16px 32px rgba(0, 0, 0, .18)
}

.cta-product-icon {
  width: 88px;
  height: 88px;
  margin: 0 auto 18px;
  border-radius: 24px;
  background: rgba(255, 255, 255, .16);
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 15px 35px rgba(12, 33, 110, .22)
}

.cta-product-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 16px
}

.product-detail-hero .store-buttons {
  margin-top: 22px
}

@media(max-width:900px) {
  .mobile-screen-slider {
    grid-auto-columns: minmax(230px, 46%)
  }

  .phone-frame {
    height: 460px
  }

  .slider-arrow.prev {
    left: -8px
  }

  .slider-arrow.next {
    right: -8px
  }
}

@media(max-width:600px) {
  .store-buttons {
    justify-content: center
  }

  .store-badge {
    min-width: 155px;
    padding: 11px 13px
  }

  .store-badge strong {
    font-size: 15px
  }

  .mobile-screen-slider {
    grid-auto-columns: 82%;
    gap: 18px
  }

  .phone-frame {
    height: 430px
  }

  .slider-arrow {
    display: none
  }

  .product-screenshots .section-head h2 {
    font-size: 34px
  }
}

/* Google Play-only controls and cursor-driven screenshot sliders */
.store-buttons {
  align-items: center
}

.store-badge {
  cursor: pointer
}

.mobile-screen-slider {
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  overscroll-behavior-inline: contain
}

.mobile-screen-slider.is-dragging {
  cursor: grabbing;
  scroll-behavior: auto;
  scroll-snap-type: none
}

.mobile-screen-slider.is-dragging img {
  pointer-events: none
}

.phone-frame {
  background: #fff
}

.phone-frame img {
  object-fit: contain
}

@media (hover:hover) {
  .screen-slide {
    transition: transform .25s ease
  }

  .screen-slide:hover {
    transform: translateY(-6px)
  }
}

/* App Store badge phone icon */
.store-phone {
  width: 16px;
  height: 24px;
  border: 2px solid currentColor;
  border-radius: 3px;
  display: inline-block;
  position: relative;
  flex: 0 0 auto;
  box-sizing: border-box
}

.store-phone:after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  transform: translateX(-50%)
}

/* Premium contact page */
.contact-shell {
  display: grid;
  grid-template-columns: .88fr 1.35fr;
  gap: 34px;
  align-items: stretch
}

.contact-intro,
.contact-form-premium {
  position: relative;
  border: 1px solid #e3eaff;
  border-radius: 30px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(32, 63, 140, .10);
  overflow: hidden
}

.contact-intro {
  padding: 48px;
  background: linear-gradient(145deg, #0c1832 0%, #172958 58%, #263d80 100%);
  color: #fff
}

.contact-intro:before,
.contact-intro:after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none
}

.contact-intro:before {
  width: 260px;
  height: 260px;
  right: -120px;
  top: -90px;
  background: rgba(102, 91, 255, .28)
}

.contact-intro:after {
  width: 180px;
  height: 180px;
  left: -100px;
  bottom: -80px;
  background: rgba(23, 163, 255, .22)
}

.contact-intro>* {
  position: relative;
  z-index: 1
}

.contact-intro .eyebrow {
  color: #8db4ff;
  background: rgba(255, 255, 255, .08)
}

.contact-intro h2 {
  font-size: clamp(32px, 3vw, 50px);
  line-height: 1.08;
  margin: 22px 0 18px;
  color: #fff
}

.contact-intro>p {
  font-size: 17px;
  line-height: 1.8;
  color: #c9d7f5;
  margin: 0 0 30px
}

.contact-benefits {
  display: grid;
  gap: 14px
}

.contact-benefits article {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 18px;
  background: rgba(255, 255, 255, .07);
  backdrop-filter: blur(8px)
}

.contact-benefits article>span {
  display: grid;
  place-items: center;
  flex: 0 0 42px;
  height: 42px;
  border-radius: 13px;
  background: linear-gradient(135deg, #2587ff, #7655ff);
  font: 700 13px Poppins, sans-serif
}

.contact-benefits h3 {
  font-size: 17px;
  color: #fff;
  margin: 0 0 5px
}

.contact-benefits p {
  font-size: 14px;
  line-height: 1.6;
  color: #bfcbea;
  margin: 0
}

.contact-email-card {
  margin-top: 20px;
  padding: 20px 22px;
  border-radius: 18px;
  background: #fff;
  color: #101a33
}

.contact-email-card small {
  display: block;
  color: #5570a7;
  font-weight: 700;
  letter-spacing: .12em
}

.contact-email-card a {
  display: block;
  font: 700 20px Poppins, sans-serif;
  color: #236cf5;
  margin: 6px 0
}

.contact-email-card p {
  margin: 0;
  color: #687899;
  font-size: 13px
}

.contact-form-premium {
  padding: 48px
}

.contact-form-premium:before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 6px;
  background: linear-gradient(90deg, #2587ff, #6c58ff)
}

.form-heading {
  margin-bottom: 30px
}

.form-heading>span {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .16em;
  color: #416df6
}

.form-heading h2 {
  font-size: clamp(30px, 2.5vw, 44px);
  margin: 8px 0 10px
}

.form-heading p {
  margin: 0;
  color: #667796
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px
}

.contact-form-premium label {
  display: flex;
  flex-direction: column;
  gap: 9px;
  font-weight: 700;
  color: #17213a
}

.contact-form-premium .full-field {
  grid-column: 1/-1
}

.contact-form-premium input,
.contact-form-premium select,
.contact-form-premium textarea {
  width: 100%;
  border: 1px solid #dce4f7;
  border-radius: 15px;
  background: #f8faff;
  padding: 16px 17px;
  font: 500 15px Inter, sans-serif;
  color: #17213a;
  outline: none;
  transition: .2s ease
}

.contact-form-premium input:focus,
.contact-form-premium select:focus,
.contact-form-premium textarea:focus {
  border-color: #4d6eff;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(77, 110, 255, .10)
}

.contact-form-premium textarea {
  min-height: 180px;
  resize: vertical
}

.contact-submit {
  width: 100%;
  margin-top: 24px;
  min-height: 58px;
  border: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  font-size: 16px
}

.contact-submit b {
  font-size: 22px
}

.form-note {
  text-align: center;
  color: #8490a8;
  font-size: 13px;
  margin: 13px 0 0
}

@media(max-width:980px) {
  .contact-shell {
    grid-template-columns: 1fr
  }

  .contact-intro,
  .contact-form-premium {
    padding: 34px
  }
}

@media(max-width:640px) {
  .form-grid {
    grid-template-columns: 1fr
  }

  .contact-form-premium .full-field {
    grid-column: auto
  }

  .contact-intro,
  .contact-form-premium {
    padding: 25px;
    border-radius: 22px
  }

  .contact-intro h2 {
    font-size: 32px
  }
}


/* Simplified premium contact form */
.contact-form-simple {
  display: block;
  padding: 52px;
  background: linear-gradient(145deg, #ffffff 0%, #fbfcff 60%, #f5f7ff 100%)
}

.contact-form-simple:after {
  content: "";
  position: absolute;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  right: -120px;
  bottom: -140px;
  background: radial-gradient(circle, rgba(78, 103, 255, .12), transparent 70%);
  pointer-events: none
}

.simple-form-grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 24px
}

.simple-field {
  display: grid;
  gap: 10px
}

.simple-field-label {
  font: 700 15px Poppins, Inter, sans-serif;
  color: #15213d
}

.simple-input-wrap {
  position: relative;
  display: block
}

.simple-input-wrap svg {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  fill: none;
  stroke: #5471ed;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  z-index: 2;
  pointer-events: none
}

.contact-form-simple .simple-input-wrap input,
.contact-form-simple .simple-input-wrap textarea {
  display: block;
  width: 100%;
  margin: 0;
  border: 1px solid #dce5f8;
  border-radius: 18px;
  background: #f7f9ff;
  padding: 19px 20px 19px 58px;
  font: 500 16px Inter, sans-serif;
  color: #14203b;
  outline: none;
  box-shadow: 0 8px 24px rgba(48, 70, 140, .04);
  transition: border-color .22s ease, box-shadow .22s ease, background .22s ease, transform .22s ease
}

.contact-form-simple .simple-input-wrap input {
  min-height: 62px
}

.contact-form-simple .simple-input-wrap textarea {
  min-height: 190px;
  resize: vertical;
  padding-top: 20px;
  line-height: 1.65
}

.simple-textarea-wrap svg {
  top: 22px;
  transform: none
}

.contact-form-simple .simple-input-wrap input::placeholder,
.contact-form-simple .simple-input-wrap textarea::placeholder {
  color: #8a96ad
}

.contact-form-simple .simple-input-wrap input:focus,
.contact-form-simple .simple-input-wrap textarea:focus {
  border-color: #4f70ff;
  background: #fff;
  box-shadow: 0 0 0 5px rgba(75, 106, 255, .10), 0 16px 34px rgba(48, 70, 140, .09);
  transform: translateY(-1px)
}

.simple-submit {
  position: relative;
  z-index: 1;
  min-height: 64px;
  margin-top: 28px;
  border-radius: 18px;
  font-size: 17px;
  box-shadow: 0 16px 36px rgba(66, 81, 231, .26);
  overflow: hidden
}

.simple-submit:before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 20%, rgba(255, 255, 255, .22) 45%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .55s ease
}

.simple-submit:hover:before {
  transform: translateX(120%)
}

.simple-submit span,
.simple-submit b {
  position: relative;
  z-index: 1
}

.simple-submit:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 44px rgba(66, 81, 231, .34)
}

.simple-form-status {
  position: relative;
  z-index: 1;
  min-height: 22px;
  margin: 14px 0 0;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: #2c6b45
}

@media(max-width:640px) {
  .contact-form-simple {
    padding: 26px 20px
  }

  .contact-form-simple .simple-input-wrap input {
    min-height: 58px
  }

  .contact-form-simple .simple-input-wrap textarea {
    min-height: 165px
  }

  .simple-submit {
    min-height: 58px;
    border-radius: 16px
  }
}


/* Full screenshot presentation for every game and app page */
.mobile-screen-slider {
  align-items: start
}

.phone-frame {
  height: auto !important;
  aspect-ratio: 168/296;
  overflow: hidden
}

.phone-frame img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center;
  background: #fff
}

@media(max-width:900px) {
  .phone-frame {
    height: auto !important
  }
}

@media(max-width:600px) {
  .mobile-screen-slider {
    grid-auto-columns: min(82%, 280px);
    justify-items: stretch
  }

  .phone-frame {
    height: auto !important;
    width: 100%;
    aspect-ratio: 168/296;
    border-width: 6px;
    border-radius: 30px
  }

  .phone-frame:before {
    width: 68px;
    height: 14px
  }
}


/* Frameless full screenshot presentation for all game and app pages */
.product-screenshots .mobile-screen-slider {
  grid-auto-columns: minmax(245px, 1fr);
  align-items: start
}

.product-screenshots .phone-frame {
  height: auto !important;
  aspect-ratio: 168/296;
  width: 100%;
  padding: 0;
  border: 0 !important;
  border-radius: 18px !important;
  overflow: hidden;
  background: transparent !important;
  box-shadow: 0 18px 42px rgba(26, 49, 101, .16) !important;
  display: block !important
}

.product-screenshots .phone-frame:before {
  display: none !important;
  content: none !important
}

.product-screenshots .phone-frame img {
  display: block;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 168/296;
  object-fit: contain !important;
  object-position: center;
  background: transparent !important;
  border: 0;
  border-radius: 18px
}

@media(max-width:900px) {
  .product-screenshots .mobile-screen-slider {
    grid-auto-columns: minmax(230px, 46%)
  }
}

@media(max-width:600px) {
  .product-screenshots .mobile-screen-slider {
    grid-auto-columns: 82%;
    gap: 18px
  }

  .product-screenshots .phone-frame,
  .product-screenshots .phone-frame img {
    border-radius: 15px !important
  }
}

\n\n

/* Premium repeating screenshot slider — all game and app detail pages */
.product-screenshots .slider-shell {
  padding: 0 34px
}

.product-screenshots .mobile-screen-slider {
  scrollbar-width: none;
  scroll-snap-type: x mandatory
}

.product-screenshots .screen-slide {
  scroll-snap-align: start
}

.product-screenshots .phone-frame,
.product-screenshots .phone-frame img {
  border: 1px solid rgba(18, 38, 72, .24) !important
}

.product-screenshots .phone-frame {
  box-shadow: 0 18px 44px rgba(26, 49, 101, .17) !important;
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease
}

.product-screenshots .screen-slide:hover .phone-frame {
  transform: translateY(-5px);
  box-shadow: 0 25px 54px rgba(26, 49, 101, .24) !important;
  border-color: rgba(77, 83, 230, .65) !important
}

.product-screenshots .slider-arrow {
  top: calc(50% - 34px);
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .7);
  background: linear-gradient(135deg, #216ef4, #7454f5);
  font-size: 34px;
  font-weight: 500;
  line-height: 1;
  box-shadow: 0 14px 34px rgba(54, 70, 210, .34), inset 0 1px 0 rgba(255, 255, 255, .32);
  transition: transform .22s ease, box-shadow .22s ease, filter .22s ease
}

.product-screenshots .slider-arrow:hover {
  transform: translateY(-2px) scale(1.08);
  filter: saturate(1.15);
  box-shadow: 0 19px 42px rgba(54, 70, 210, .43), inset 0 1px 0 rgba(255, 255, 255, .38)
}

.product-screenshots .slider-arrow:active {
  transform: scale(.96)
}

.product-screenshots .slider-arrow.prev {
  left: 0
}

.product-screenshots .slider-arrow.next {
  right: 0
}

.product-screenshots .landscape-screen-slider {
  grid-auto-columns: min(78%, 526px) !important;
  gap: 24px
}

.product-screenshots .landscape-screen-slider .phone-frame {
  aspect-ratio: 526/296 !important;
  border-radius: 15px !important;
  background: #0c1424 !important
}

.product-screenshots .landscape-screen-slider .phone-frame img {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: 526/296 !important;
  object-fit: cover !important;
  border-radius: 14px !important
}

@media(max-width:900px) {
  .product-screenshots .slider-shell {
    padding: 0 24px
  }

  .product-screenshots .landscape-screen-slider {
    grid-auto-columns: min(88%, 526px) !important
  }

  .product-screenshots .slider-arrow.prev {
    left: -3px
  }

  .product-screenshots .slider-arrow.next {
    right: -3px
  }
}

@media(max-width:600px) {
  .product-screenshots .slider-shell {
    padding: 0
  }

  .product-screenshots .landscape-screen-slider {
    grid-auto-columns: 92% !important;
    gap: 15px
  }

  .product-screenshots .slider-arrow {
    display: grid;
    width: 42px;
    height: 42px;
    font-size: 28px;
    background: rgba(25, 39, 75, .88);
    backdrop-filter: blur(10px)
  }

  .product-screenshots .slider-arrow.prev {
    left: 6px
  }

  .product-screenshots .slider-arrow.next {
    right: 6px
  }

  .product-screenshots .screen-slide>span {
    font-size: 13px
  }
}


/* July 2026 screenshot gallery polish — all games and apps */
.product-screenshots .screen-slide>span {
  display: none !important
}

.product-screenshots .mobile-screen-slider {
  padding-bottom: 18px
}

.product-screenshots .slider-arrow {
  width: 58px;
  height: 58px;
  border-radius: 18px !important;
  border: 1px solid rgba(255, 255, 255, .88) !important;
  background: linear-gradient(145deg, rgba(30, 47, 92, .96), rgba(91, 67, 224, .96)) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  font-family: Arial, sans-serif;
  font-size: 25px !important;
  font-weight: 700 !important;
  box-shadow: 0 16px 35px rgba(35, 49, 126, .36), inset 0 1px 1px rgba(255, 255, 255, .4) !important;
}

.product-screenshots .slider-arrow:hover {
  transform: translateY(-3px) scale(1.08) rotate(-2deg) !important;
  background: linear-gradient(145deg, #6f52f5, #1d75f3) !important;
  box-shadow: 0 22px 46px rgba(45, 61, 184, .48), 0 0 0 5px rgba(100, 86, 238, .12) !important;
}

.product-screenshots .slider-arrow.next:hover {
  transform: translateY(-3px) scale(1.08) rotate(2deg) !important
}

.product-screenshots .slider-arrow:focus-visible {
  outline: 3px solid rgba(88, 95, 240, .32);
  outline-offset: 4px
}

.product-screenshots .slider-arrow:active {
  transform: scale(.94) !important
}

.product-screenshots .landscape-screen-slider .phone-frame,
.product-screenshots .landscape-screen-slider .phone-frame img {
  border: 1px solid rgba(22, 38, 71, .35) !important
}

@media(max-width:600px) {
  .product-screenshots .slider-arrow {
    width: 44px;
    height: 44px;
    border-radius: 14px !important;
    font-size: 20px !important
  }

  .product-screenshots .mobile-screen-slider {
    padding-bottom: 10px
  }
}

/* Product-specific sticky section header */
.app-product-header {
  position: sticky;
  top: 0;
  z-index: 950;
  background: rgba(10, 12, 27, .92);
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  box-shadow: 0 12px 35px rgba(0, 0, 0, .22);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.app-product-header-inner {
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px
}

.app-product-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  text-decoration: none;
  min-width: 0
}

.app-product-logo {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border-radius: 13px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .2);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .28);
  background: #171a35
}

.app-product-logo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover
}

.app-product-name {
  max-width: 360px;
  font-family: Poppins, sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.app-product-nav {
  display: flex;
  align-items: center;
  gap: 6px
}

.app-product-nav a {
  position: relative;
  padding: 11px 15px;
  border-radius: 12px;
  color: rgba(255, 255, 255, .78);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: .25s ease
}

.app-product-nav a:hover,
.app-product-nav a.active {
  color: #fff;
  background: rgba(255, 255, 255, .09)
}

.app-product-nav .app-product-download {
  color: #fff;
  background: linear-gradient(135deg, #7c3aed, #a855f7);
  box-shadow: 0 9px 24px rgba(124, 58, 237, .3)
}

.app-product-nav .app-product-download:hover {
  transform: translateY(-2px);
  box-shadow: 0 13px 30px rgba(124, 58, 237, .42)
}

.app-product-menu {
  display: none;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .07);
  color: #fff;
  border-radius: 12px;
  padding: 10px 13px;
  font: 700 14px Inter, sans-serif;
  cursor: pointer
}

#features,
#screenshots,
#get-app {
  scroll-margin-top: 96px
}

@media(max-width:760px) {
  .app-product-header-inner {
    min-height: 68px;
    gap: 12px;
    position: relative
  }

  .app-product-logo {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
    border-radius: 11px
  }

  .app-product-name {
    max-width: 180px;
    font-size: 14px
  }

  .app-product-menu {
    display: inline-flex;
    align-items: center;
    gap: 7px
  }

  .app-product-nav {
    display: none;
    position: absolute;
    left: 16px;
    right: 16px;
    top: calc(100% + 9px);
    padding: 10px;
    flex-direction: column;
    align-items: stretch;
    background: #12152d;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 16px;
    box-shadow: 0 18px 45px rgba(0, 0, 0, .4)
  }

  .app-product-header.is-open .app-product-nav {
    display: flex
  }

  .app-product-nav a {
    text-align: center;
    padding: 13px
  }
}

/* Four official Google Play app cards */
.apps-full-grid .full-image-card>a>img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.app-product-logo img,
.cta-product-icon img {
  object-fit: cover
}


/* App-specific branded headers, unique heroes and compact footers */
body.app-screen {
  --app: #ef3340;
  --app2: #ff715b;
  --deep: #26070d;
  --soft: #fff1f2;
  --glow: rgba(239, 51, 64, .34)
}

body.app-vault {
  --app: #0eb46e;
  --app2: #39d9a0;
  --deep: #052b21;
  --soft: #ecfff7;
  --glow: rgba(14, 180, 110, .34)
}

body.app-collage {
  --app: #a43cf3;
  --app2: #ff4f9b;
  --deep: #260b42;
  --soft: #fff0fb;
  --glow: rgba(164, 60, 243, .34)
}

body.app-smarty {
  --app: #1769e8;
  --app2: #55b4ff;
  --deep: #061d49;
  --soft: #edf6ff;
  --glow: rgba(23, 105, 232, .34)
}

body[class*="app-"] .site-header {
  background: linear-gradient(100deg, var(--deep), color-mix(in srgb, var(--deep) 78%, var(--app)));
  border-bottom-color: rgba(255, 255, 255, .1)
}

body[class*="app-"] .site-header .nav a,
body[class*="app-"] .site-header .brand {
  color: #fff
}

body[class*="app-"] .site-header .btn-primary {
  background: linear-gradient(135deg, var(--app), var(--app2));
  box-shadow: 0 12px 25px var(--glow)
}

body[class*="app-"] .app-product-header {
  background: color-mix(in srgb, var(--deep) 92%, transparent);
  border-bottom-color: color-mix(in srgb, var(--app) 32%, transparent)
}

body[class*="app-"] .app-product-nav .app-product-download {
  background: linear-gradient(135deg, var(--app), var(--app2));
  box-shadow: 0 9px 24px var(--glow)
}

body[class*="app-"] .app-product-nav a:hover,
body[class*="app-"] .app-product-nav a.active {
  background: color-mix(in srgb, var(--app) 18%, transparent)
}

.app-unique-hero {
  position: relative;
  overflow: hidden;
  padding: 96px 0 90px;
  background: linear-gradient(135deg, var(--soft), #fff 50%, color-mix(in srgb, var(--soft) 75%, var(--app2)));
  isolation: isolate
}

.app-unique-hero:before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(color-mix(in srgb, var(--app) 6%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--app) 6%, transparent) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to right, black, transparent 74%);
  z-index: -2
}

.app-hero-grid {
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  gap: 70px;
  align-items: center
}

.app-hero-copy {
  position: relative;
  z-index: 2
}

.app-hero-copy h1 {
  font-size: clamp(44px, 5.8vw, 78px);
  line-height: 1.03;
  letter-spacing: -.045em;
  max-width: 760px;
  margin: 18px 0 22px;
  color: var(--deep)
}

.app-hero-copy>p {
  font-size: 18px;
  line-height: 1.75;
  max-width: 650px;
  color: #526078
}

.app-hero-copy .eyebrow {
  color: var(--app);
  background: color-mix(in srgb, var(--app) 10%, white);
  border: 1px solid color-mix(in srgb, var(--app) 20%, white)
}

.hero-app-id {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-top: 27px
}

.hero-app-id img {
  width: 54px;
  height: 54px;
  border-radius: 15px;
  object-fit: cover;
  box-shadow: 0 10px 24px var(--glow)
}

.hero-app-id strong,
.hero-app-id span {
  display: block
}

.hero-app-id strong {
  font: 700 15px Poppins, sans-serif;
  color: var(--deep)
}

.hero-app-id span {
  font-size: 12px;
  color: #7b879b;
  margin-top: 2px
}

.hero-section-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-radius: 15px;
  color: var(--deep);
  font-weight: 800;
  border: 1px solid color-mix(in srgb, var(--app) 25%, #dce3ef);
  background: rgba(255, 255, 255, .7);
  backdrop-filter: blur(8px)
}

.hero-section-link:hover {
  transform: translateY(-3px);
  border-color: var(--app);
  color: var(--app)
}

.hero-feature-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 25px
}

.hero-feature-chips span {
  padding: 9px 12px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid color-mix(in srgb, var(--app) 16%, #e4eaf2);
  font-size: 12px;
  font-weight: 800;
  color: #344057;
  box-shadow: 0 7px 20px rgba(32, 47, 90, .06)
}

.app-hero-art {
  min-height: 570px;
  position: relative;
  display: grid;
  place-items: center
}

.art-halo {
  position: absolute;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--app2) 42%, white), color-mix(in srgb, var(--app) 14%, transparent) 55%, transparent 72%);
  filter: blur(3px)
}

.hero-phone {
  position: relative;
  z-index: 4;
  width: 245px;
  padding: 9px;
  border-radius: 39px;
  background: #111827;
  box-shadow: 0 40px 80px rgba(12, 24, 59, .28), 0 0 0 10px rgba(255, 255, 255, .55);
  transform: rotate(-5deg)
}

.hero-phone:before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 72px;
  height: 16px;
  border-radius: 0 0 12px 12px;
  background: #111827
}

.hero-phone img {
  display: block;
  width: 100%;
  aspect-ratio: 168/296;
  object-fit: cover;
  border-radius: 31px
}

.hero-artwork {
  position: absolute;
  z-index: 3;
  width: 255px;
  max-height: 370px;
  object-fit: contain;
  right: -10px;
  bottom: 20px;
  filter: drop-shadow(0 28px 34px rgba(15, 30, 74, .24));
  transform: rotate(5deg)
}

.float-card {
  position: absolute;
  z-index: 6;
  padding: 13px 16px;
  border-radius: 15px;
  background: rgba(255, 255, 255, .88);
  border: 1px solid rgba(255, 255, 255, .9);
  backdrop-filter: blur(14px);
  font-size: 12px;
  font-weight: 900;
  color: var(--deep);
  box-shadow: 0 16px 34px rgba(31, 45, 93, .16);
  animation: appFloat 4.6s ease-in-out infinite
}

.float-one {
  left: 5px;
  top: 80px
}

.float-two {
  right: 0;
  top: 170px;
  animation-delay: -1.2s
}

.float-three {
  left: 30px;
  bottom: 75px;
  animation-delay: -2.4s
}

.hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(2px);
  z-index: -1
}

.orb-a {
  width: 220px;
  height: 220px;
  right: 3%;
  top: 7%;
  background: color-mix(in srgb, var(--app) 14%, transparent)
}

.orb-b {
  width: 150px;
  height: 150px;
  left: 43%;
  bottom: -45px;
  background: color-mix(in srgb, var(--app2) 15%, transparent)
}

body.app-vault .app-unique-hero {
  background: radial-gradient(circle at 85% 15%, rgba(57, 217, 160, .24), transparent 28%), linear-gradient(135deg, #edfff8, #f8fffd 55%, #e7fff5)
}

body.app-vault .hero-phone {
  transform: rotate(4deg)
}

body.app-vault .hero-artwork {
  right: 5px;
  transform: rotate(-4deg)
}

body.app-collage .app-unique-hero {
  background: radial-gradient(circle at 85% 10%, rgba(255, 79, 155, .24), transparent 28%), radial-gradient(circle at 12% 80%, rgba(164, 60, 243, .16), transparent 30%), linear-gradient(135deg, #fff5fd, #fff 50%, #f8edff)
}

body.app-collage .hero-phone {
  transform: rotate(-7deg)
}

body.app-collage .hero-artwork {
  width: 290px;
  right: -20px;
  transform: rotate(7deg)
}

body.app-smarty .app-unique-hero {
  background: radial-gradient(circle at 80% 15%, rgba(85, 180, 255, .27), transparent 30%), linear-gradient(135deg, #edf6ff, #fff 50%, #e7f2ff)
}

body.app-smarty .hero-phone {
  transform: rotate(3deg)
}

body.app-smarty .hero-artwork {
  width: 300px;
  right: -35px;
  bottom: 5px;
  transform: rotate(-3deg)
}

@keyframes appFloat {

  0%,
  100% {
    transform: translateY(0)
  }

  50% {
    transform: translateY(-12px)
  }
}

.app-footer {
  background: linear-gradient(135deg, var(--deep), color-mix(in srgb, var(--deep) 70%, var(--app)));
  color: #fff;
  padding: 52px 0 28px;
  border-top: 4px solid var(--app)
}

.app-footer-inner {
  text-align: center
}

.app-footer-logo {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: #fff;
  margin-bottom: 25px
}

.app-footer-logo img {
  width: 68px;
  height: 68px;
  border-radius: 19px;
  object-fit: cover;
  box-shadow: 0 14px 28px rgba(0, 0, 0, .27)
}

.app-footer-logo strong {
  font: 700 18px Poppins, sans-serif
}

.app-footer nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px 30px;
  margin-bottom: 24px
}

.app-footer nav a {
  color: rgba(255, 255, 255, .83);
  font-weight: 700
}

.app-footer nav a:hover {
  color: #fff;
  transform: translateY(-2px)
}

.app-footer p {
  margin: 0;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .14);
  color: rgba(255, 255, 255, .65);
  font-size: 13px
}

@media(max-width:900px) {
  .app-hero-grid {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 30px
  }

  .app-hero-copy>p {
    margin-inline: auto
  }

  .hero-app-id,
  .store-buttons,
  .hero-feature-chips {
    justify-content: center
  }

  .app-hero-art {
    min-height: 500px;
    max-width: 600px;
    margin: auto;
    width: 100%
  }

  .hero-artwork {
    right: 3%
  }

  .float-one {
    left: 8%
  }

  .float-two {
    right: 5%
  }
}

@media(max-width:600px) {
  .app-unique-hero {
    padding: 66px 0 54px
  }

  .app-hero-copy h1 {
    font-size: 42px
  }

  .app-hero-copy>p {
    font-size: 16px
  }

  .app-hero-art {
    min-height: 410px
  }

  .hero-phone {
    width: 190px;
    border-radius: 31px
  }

  .hero-phone img {
    border-radius: 24px
  }

  .hero-artwork {
    width: 180px !important;
    right: -10px !important;
    bottom: 15px !important
  }

  .float-card {
    padding: 9px 11px;
    font-size: 10px
  }

  .float-one {
    left: 0;
    top: 60px
  }

  .float-two {
    right: 0;
    top: 135px
  }

  .float-three {
    left: 8px;
    bottom: 45px
  }

  .app-footer-logo {
    flex-direction: column
  }

  .app-footer nav {
    gap: 14px 20px
  }
}


/* 2026 app feature and store CTA refinements */
.feature-tile .feature-icon {
  width: 68px;
  height: 68px;
  border-radius: 20px;
  display: grid;
  place-items: center;
  margin-bottom: 22px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--app-primary) 16%, white), color-mix(in srgb, var(--app-primary) 6%, white));
  box-shadow: 0 14px 32px color-mix(in srgb, var(--app-primary) 18%, transparent);
  transition: transform .3s ease, box-shadow .3s ease
}

.feature-tile:hover .feature-icon {
  transform: translateY(-5px) rotate(-2deg) scale(1.04);
  box-shadow: 0 20px 38px color-mix(in srgb, var(--app-primary) 26%, transparent)
}

.feature-tile .feature-icon svg {
  width: 36px;
  height: 36px;
  fill: none;
  stroke: var(--app-primary);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round
}

.feature-tile {
  position: relative;
  overflow: hidden
}

.feature-tile:after {
  content: "";
  position: absolute;
  width: 100px;
  height: 100px;
  right: -45px;
  top: -45px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--app-primary) 8%, transparent);
  transition: transform .35s ease
}

.feature-tile:hover:after {
  transform: scale(1.35)
}

.product-cta {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  background: linear-gradient(135deg, var(--app-primary), var(--app-dark));
  border-radius: 0;
  color: #fff;
  box-shadow: none;
  text-align: center;
  position: relative;
  overflow: hidden
}

.product-cta:before,
.product-cta:after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, .09);
  pointer-events: none
}

.product-cta:before {
  width: 360px;
  height: 360px;
  left: -150px;
  top: -190px
}

.product-cta:after {
  width: 280px;
  height: 280px;
  right: -100px;
  bottom: -160px
}

.product-cta-inner {
  position: relative;
  z-index: 1;
  padding: 78px 24px 82px;
  display: flex;
  flex-direction: column;
  align-items: center
}

.product-cta .eyebrow,
.product-cta h2,
.product-cta p {
  color: #fff
}

.product-cta p {
  max-width: 720px;
  opacity: .9
}

.product-cta .cta-product-icon {
  width: 92px;
  height: 92px;
  border: 0;
  outline: 0;
  padding: 0;
  background: transparent;
  box-shadow: 0 16px 36px rgba(0, 0, 0, .2);
  border-radius: 24px;
  overflow: hidden
}

.product-cta .cta-product-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border: 0;
  outline: 0;
  border-radius: 24px
}

.product-cta .store-buttons {
  justify-content: center;
  margin-top: 26px;
  gap: 14px;
  flex-wrap: wrap
}

.product-cta .store-badge,
.app-hero-copy .app-store-badge {
  background: #0b0b0d;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .35);
  min-width: 190px;
  justify-content: flex-start
}

.product-cta .store-badge:hover,
.app-hero-copy .app-store-badge:hover {
  transform: translateY(-3px);
  background: #000;
  border-color: #fff
}

.apple-symbol {
  font-size: 0;
  position: relative;
  width: 22px;
  height: 26px
}

.apple-symbol:before {
  content: "◆";
  font-size: 22px;
  line-height: 1;
  display: block;
  transform: rotate(8deg)
}

.apple-symbol:after {
  content: "";
  position: absolute;
  width: 7px;
  height: 5px;
  background: #fff;
  border-radius: 7px 0 7px 0;
  right: 0;
  top: -3px;
  transform: rotate(-25deg)
}

@media(max-width:700px) {
  .product-cta-inner {
    padding: 58px 18px 62px
  }

  .product-cta .store-buttons,
  .app-hero-copy .store-buttons {
    width: 100%
  }

  .product-cta .store-badge,
  .app-hero-copy .store-badge {
    width: 100%;
    max-width: 280px;
    justify-content: center
  }

  .feature-tile .feature-icon {
    width: 60px;
    height: 60px;
    border-radius: 18px
  }

  .feature-tile .feature-icon svg {
    width: 32px;
    height: 32px
  }
}


/* July 28 final app-page visual alignment */
body.app-screen {
  --hero-bg: radial-gradient(circle at 82% 14%, rgba(255, 113, 91, .28), transparent 29%), radial-gradient(circle at 12% 82%, rgba(239, 51, 64, .13), transparent 31%), linear-gradient(135deg, #fff1f2 0%, #fff8f8 52%, #ffe9eb 100%)
}

body.app-vault {
  --hero-bg: radial-gradient(circle at 85% 15%, rgba(57, 217, 160, .24), transparent 28%), linear-gradient(135deg, #edfff8, #f8fffd 55%, #e7fff5)
}

body.app-collage {
  --hero-bg: radial-gradient(circle at 85% 10%, rgba(255, 79, 155, .24), transparent 28%), radial-gradient(circle at 12% 80%, rgba(164, 60, 243, .16), transparent 30%), linear-gradient(135deg, #fff5fd, #fff 50%, #f8edff)
}

body.app-smarty {
  --hero-bg: radial-gradient(circle at 80% 15%, rgba(85, 180, 255, .27), transparent 30%), linear-gradient(135deg, #edf6ff, #fff 50%, #e7f2ff)
}

body[class*="app-"] .app-unique-hero,
body[class*="app-"] .app-feature-section,
body[class*="app-"] .product-cta {
  background: var(--hero-bg) !important
}

body[class*="app-"] .app-feature-section {
  position: relative;
  overflow: hidden
}

body[class*="app-"] .app-feature-section:before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(color-mix(in srgb, var(--app) 5%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--app) 5%, transparent) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to bottom, black, transparent 86%);
  pointer-events: none
}

body[class*="app-"] .app-feature-section>.container {
  position: relative;
  z-index: 1
}

.app-hero-art {
  min-height: 570px
}

.hero-screenshot-only {
  position: relative;
  z-index: 4;
  width: min(390px, 84%);
  padding: 12px;
  border-radius: 36px;
  background: rgba(255, 255, 255, .82);
  border: 1px solid rgba(255, 255, 255, .95);
  box-shadow: 0 38px 85px rgba(12, 24, 59, .24), 0 0 0 10px rgba(255, 255, 255, .38);
  backdrop-filter: blur(12px);
  transform: rotate(-2deg)
}

.hero-screenshot-only img {
  display: block;
  width: 100%;
  max-height: 580px;
  object-fit: contain;
  border-radius: 27px;
  background: transparent
}

body.app-vault .hero-screenshot-only {
  width: min(500px, 92%);
  transform: rotate(2deg)
}

body.app-collage .hero-screenshot-only {
  transform: rotate(-3deg)
}

body.app-smarty .hero-screenshot-only {
  transform: rotate(2deg)
}

.feature-tile-grid {
  align-items: stretch
}

body[class*="app-"] .feature-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: linear-gradient(145deg, rgba(255, 255, 255, .94), color-mix(in srgb, var(--app) 7%, white));
  border: 1px solid color-mix(in srgb, var(--app) 18%, white);
  box-shadow: 0 18px 45px color-mix(in srgb, var(--app) 12%, transparent)
}

body[class*="app-"] .feature-tile .feature-icon {
  order: 0;
  margin: 0 auto 20px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--app) 22%, white), color-mix(in srgb, var(--app2) 10%, white));
  box-shadow: 0 14px 32px color-mix(in srgb, var(--app) 20%, transparent)
}

body[class*="app-"] .feature-tile .feature-icon svg {
  stroke: var(--app)
}

body[class*="app-"] .feature-tile h3 {
  order: 1;
  margin-top: 0
}

body[class*="app-"] .feature-tile p {
  order: 2
}

body[class*="app-"] .product-cta {
  color: var(--deep);
  border-top: 1px solid color-mix(in srgb, var(--app) 15%, white);
  border-bottom: 1px solid color-mix(in srgb, var(--app) 15%, white)
}

body[class*="app-"] .product-cta:before,
body[class*="app-"] .product-cta:after {
  background: color-mix(in srgb, var(--app) 10%, transparent)
}

body[class*="app-"] .product-cta .eyebrow {
  color: var(--app);
  background: rgba(255, 255, 255, .76);
  border: 1px solid color-mix(in srgb, var(--app) 18%, white)
}

body[class*="app-"] .product-cta h2 {
  color: var(--deep)
}

body[class*="app-"] .product-cta p {
  color: #526078;
  opacity: 1
}

body[class*="app-"] .store-badge,
body[class*="app-"] .store-badge.app-store-badge,
body[class*="app-"] .product-cta .store-badge,
body[class*="app-"] .app-hero-copy .app-store-badge {
  background: linear-gradient(135deg, var(--app), var(--app2));
  border: 1px solid color-mix(in srgb, var(--app) 65%, white);
  color: #fff !important;
  box-shadow: 0 13px 28px var(--glow)
}

body[class*="app-"] .store-badge:hover,
body[class*="app-"] .store-badge.app-store-badge:hover,
body[class*="app-"] .product-cta .store-badge:hover,
body[class*="app-"] .app-hero-copy .app-store-badge:hover {
  background: linear-gradient(135deg, var(--app2), var(--app));
  border-color: #fff;
  transform: translateY(-3px)
}

body[class*="app-"] .store-badge small {
  color: rgba(255, 255, 255, .84)
}

@media(max-width:900px) {
  .app-hero-art {
    min-height: 470px
  }

  .hero-screenshot-only {
    width: min(360px, 80%)
  }

  body.app-vault .hero-screenshot-only {
    width: min(500px, 94%)
  }
}

@media(max-width:600px) {
  .app-hero-art {
    min-height: 390px
  }

  .hero-screenshot-only {
    width: min(285px, 86%);
    padding: 8px;
    border-radius: 27px
  }

  .hero-screenshot-only img {
    border-radius: 21px;
    max-height: 430px
  }

  body.app-vault .hero-screenshot-only {
    width: 96%
  }
}

/* July 28 page-wide app theme alignment */
body.app-vault {
  --app: #ec2f8f;
  --app2: #ff6bb5;
  --deep: #4b0a2d;
  --soft: #fff0f7;
  --glow: rgba(236, 47, 143, .34);
  --hero-bg:
    radial-gradient(circle at 84% 14%, rgba(255, 107, 181, .30), transparent 29%),
    radial-gradient(circle at 10% 82%, rgba(236, 47, 143, .14), transparent 31%),
    linear-gradient(135deg, #fff0f7 0%, #fff8fc 52%, #ffe5f2 100%);
}

/* Theme every major section and its typography from the active app palette */
body[class*="app-"] main>section {
  position: relative;
}

body[class*="app-"] .detail-section:not(.app-feature-section):not(.product-screenshots) {
  background: linear-gradient(135deg, color-mix(in srgb, var(--soft) 74%, white), #fff 58%, color-mix(in srgb, var(--app2) 7%, white));
}

body[class*="app-"] .product-screenshots {
  background:
    radial-gradient(circle at 90% 8%, color-mix(in srgb, var(--app2) 20%, transparent), transparent 29%),
    linear-gradient(135deg, color-mix(in srgb, var(--soft) 88%, white), #fff 54%, color-mix(in srgb, var(--app) 8%, white));
}

body[class*="app-"] .section-head .eyebrow,
body[class*="app-"] .detail-copy .eyebrow,
body[class*="app-"] .app-hero-copy .eyebrow {
  color: var(--app);
  background: color-mix(in srgb, var(--app) 9%, white);
  border: 1px solid color-mix(in srgb, var(--app) 17%, white);
}

body[class*="app-"] .app-hero-copy h1,
body[class*="app-"] .section-head h2,
body[class*="app-"] .detail-copy h2,
body[class*="app-"] .feature-tile h3,
body[class*="app-"] .product-cta h2 {
  color: var(--deep);
}

body[class*="app-"] .app-hero-copy>p,
body[class*="app-"] .section-head>p,
body[class*="app-"] .detail-copy>p,
body[class*="app-"] .feature-tile p,
body[class*="app-"] .product-cta p {
  color: color-mix(in srgb, var(--deep) 68%, #65738b);
}

body[class*="app-"] .hero-app-id,
body[class*="app-"] .hero-feature-chips span {
  border-color: color-mix(in srgb, var(--app) 20%, white);
  background: rgba(255, 255, 255, .78);
  box-shadow: 0 13px 30px color-mix(in srgb, var(--app) 12%, transparent);
}

body[class*="app-"] .hero-app-id strong,
body[class*="app-"] .hero-feature-chips span {
  color: var(--deep);
}

body[class*="app-"] .hero-app-id span {
  color: var(--app);
}

body[class*="app-"] .feature-tile {
  border-color: color-mix(in srgb, var(--app) 24%, white);
}

body[class*="app-"] .feature-tile:hover {
  border-color: color-mix(in srgb, var(--app) 48%, white);
  box-shadow: 0 26px 58px color-mix(in srgb, var(--app) 20%, transparent);
}

body[class*="app-"] .inline-checks span {
  color: var(--deep);
  background: color-mix(in srgb, var(--app) 8%, white);
  border: 1px solid color-mix(in srgb, var(--app) 18%, white);
}

body[class*="app-"] .inline-checks span:before {
  background: linear-gradient(135deg, var(--app), var(--app2));
  color: #fff;
}

body[class*="app-"] .detail-media {
  background: linear-gradient(145deg, color-mix(in srgb, var(--app) 13%, white), color-mix(in srgb, var(--app2) 7%, white));
  border-color: color-mix(in srgb, var(--app) 20%, white);
  box-shadow: 0 24px 58px color-mix(in srgb, var(--app) 15%, transparent);
}

body[class*="app-"] .phone-frame {
  border-color: var(--deep);
  box-shadow: 0 24px 55px color-mix(in srgb, var(--app) 18%, transparent);
}

body[class*="app-"] .phone-frame:before {
  background: var(--deep);
}

body[class*="app-"] .slider-arrow {
  background: linear-gradient(135deg, var(--app), var(--app2));
  box-shadow: 0 12px 28px var(--glow);
}

body[class*="app-"] .slider-arrow:hover {
  transform: translateY(-2px) scale(1.05);
}

body[class*="app-"] .app-product-header {
  border-bottom-color: color-mix(in srgb, var(--app) 18%, white);
  box-shadow: 0 9px 28px color-mix(in srgb, var(--app) 10%, transparent);
}

body[class*="app-"] .app-product-name,
body[class*="app-"] .app-product-nav a:hover,
body[class*="app-"] .app-product-nav a:focus {
  color: var(--app);
}

body[class*="app-"] .app-product-download {
  background: linear-gradient(135deg, var(--app), var(--app2)) !important;
  color: #fff !important;
  box-shadow: 0 12px 26px var(--glow);
}

body[class*="app-"] .app-footer nav a:hover {
  color: color-mix(in srgb, var(--app2) 55%, white);
}

/* VidVault explicitly uses a pink family throughout */
body.app-vault .app-unique-hero,
body.app-vault .app-feature-section,
body.app-vault .product-cta {
  background: var(--hero-bg) !important;
}

/* FINAL APP-SPECIFIC COLOR SYSTEM — every app page follows its own brand */
body.app-screen {
  --app: #f2384a;
  --app2: #ff7a59;
  --deep: #3a0710;
  --soft: #fff1f3;
  --soft2: #fff8f6;
  --glow: rgba(242, 56, 74, .30);
  --hero-bg: radial-gradient(circle at 84% 12%, rgba(255, 122, 89, .31), transparent 28%), radial-gradient(circle at 12% 82%, rgba(242, 56, 74, .15), transparent 31%), linear-gradient(135deg, #fff0f2 0%, #fff8f7 54%, #ffe8e5 100%);
}

body.app-vault {
  --app: #e72d8b;
  --app2: #ff70ba;
  --deep: #4a0a2d;
  --soft: #fff0f7;
  --soft2: #fff8fc;
  --glow: rgba(231, 45, 139, .30);
  --hero-bg: radial-gradient(circle at 84% 13%, rgba(255, 112, 186, .32), transparent 29%), radial-gradient(circle at 10% 82%, rgba(231, 45, 139, .16), transparent 31%), linear-gradient(135deg, #fff0f7 0%, #fff8fc 54%, #ffe4f1 100%);
}

body.app-collage {
  --app: #8d3de8;
  --app2: #f24f9a;
  --deep: #2d0a48;
  --soft: #f8efff;
  --soft2: #fff5fb;
  --glow: rgba(141, 61, 232, .30);
  --hero-bg: radial-gradient(circle at 84% 12%, rgba(242, 79, 154, .28), transparent 28%), radial-gradient(circle at 10% 82%, rgba(141, 61, 232, .18), transparent 31%), linear-gradient(135deg, #f8efff 0%, #fff7fc 54%, #f4e8ff 100%);
}

body.app-smarty {
  --app: #1268d9;
  --app2: #28b9db;
  --deep: #071f47;
  --soft: #edf6ff;
  --soft2: #effcff;
  --glow: rgba(18, 104, 217, .29);
  --hero-bg: radial-gradient(circle at 83% 13%, rgba(40, 185, 219, .28), transparent 29%), radial-gradient(circle at 10% 82%, rgba(18, 104, 217, .15), transparent 31%), linear-gradient(135deg, #edf6ff 0%, #f6fcff 54%, #e5f7fb 100%);
}

body[class*="app-"] {
  color: color-mix(in srgb, var(--deep) 82%, #526077);
  background: var(--soft2);
}

body[class*="app-"] .site-header {
  border-bottom: 1px solid color-mix(in srgb, var(--app) 18%, white);
  box-shadow: 0 8px 28px color-mix(in srgb, var(--app) 10%, transparent);
}

body[class*="app-"] .site-header .nav a:hover,
body[class*="app-"] .site-header .nav a:focus,
body[class*="app-"] .site-header .nav a.active {
  color: var(--app)
}

body[class*="app-"] .site-header .nav a:after {
  background: linear-gradient(90deg, var(--app), var(--app2))
}

body[class*="app-"] .site-header .btn-primary,
body[class*="app-"] .site-header .nav-cta {
  background: linear-gradient(135deg, var(--app), var(--app2));
  border-color: var(--app);
  box-shadow: 0 11px 24px var(--glow);
  color: #fff;
}

body[class*="app-"] .site-header .btn-primary:hover,
body[class*="app-"] .site-header .nav-cta:hover {
  background: linear-gradient(135deg, var(--app2), var(--app));
  color: #fff
}

body[class*="app-"] .app-product-header {
  background: color-mix(in srgb, var(--soft) 87%, white)
}

body[class*="app-"] .app-product-nav a {
  color: color-mix(in srgb, var(--deep) 78%, #5d6980)
}

body[class*="app-"] .app-product-nav a:hover {
  background: color-mix(in srgb, var(--app) 8%, white);
  color: var(--app)
}

body[class*="app-"] .app-unique-hero,
body[class*="app-"] .app-feature-section,
body[class*="app-"] .product-cta {
  background: var(--hero-bg) !important
}

body[class*="app-"] .app-unique-hero:before,
body[class*="app-"] .app-feature-section:before {
  background-image: linear-gradient(color-mix(in srgb, var(--app) 7%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--app) 7%, transparent) 1px, transparent 1px)
}

body[class*="app-"] .hero-orb {
  background: linear-gradient(135deg, var(--app), var(--app2));
  opacity: .14
}

body[class*="app-"] .art-halo {
  background: radial-gradient(circle, color-mix(in srgb, var(--app2) 33%, transparent), transparent 69%)
}

body[class*="app-"] .hero-screenshot-only {
  border-color: color-mix(in srgb, var(--app) 28%, white);
  box-shadow: 0 28px 70px color-mix(in srgb, var(--app) 22%, transparent)
}

body[class*="app-"] .feature-tile {
  background: linear-gradient(145deg, rgba(255, 255, 255, .94), color-mix(in srgb, var(--soft) 78%, white));
  border: 1px solid color-mix(in srgb, var(--app) 24%, white);
  box-shadow: 0 16px 38px color-mix(in srgb, var(--app) 11%, transparent);
}

body[class*="app-"] .feature-tile .feature-icon {
  background: linear-gradient(135deg, var(--app), var(--app2));
  color: #fff;
  box-shadow: 0 13px 27px var(--glow);
}

body[class*="app-"] .feature-tile .feature-icon svg {
  stroke: #fff;
  fill: none
}

body[class*="app-"] .feature-tile:hover .feature-icon {
  transform: translateY(-4px) rotate(-3deg) scale(1.05)
}

body[class*="app-"] .product-screenshots {
  background: radial-gradient(circle at 90% 8%, color-mix(in srgb, var(--app2) 19%, transparent), transparent 29%), linear-gradient(135deg, var(--soft), #fff 55%, color-mix(in srgb, var(--app) 8%, white)) !important;
}

body[class*="app-"] .product-screenshots .phone-frame,
body[class*="app-"] .product-screenshots .phone-frame img {
  border-color: color-mix(in srgb, var(--app) 38%, white) !important
}

body[class*="app-"] .product-screenshots .screen-slide:hover .phone-frame {
  border-color: var(--app) !important;
  box-shadow: 0 25px 54px color-mix(in srgb, var(--app) 25%, transparent) !important
}

body[class*="app-"] .product-screenshots .slider-arrow {
  background: linear-gradient(135deg, var(--app), var(--app2)) !important;
  box-shadow: 0 14px 34px var(--glow) !important
}

body[class*="app-"] .product-screenshots .slider-arrow:focus-visible {
  outline-color: color-mix(in srgb, var(--app) 35%, transparent)
}

body[class*="app-"] .detail-section:not(.app-feature-section):not(.product-screenshots) {
  background: linear-gradient(135deg, var(--soft2), #fff 56%, color-mix(in srgb, var(--app2) 7%, white)) !important
}

body[class*="app-"] .detail-media img {
  filter: drop-shadow(0 18px 26px color-mix(in srgb, var(--app) 17%, transparent))
}

body[class*="app-"] a:not(.store-badge):not(.btn):not(.brand):not(.app-footer-logo) {
  transition: color .2s ease, background .2s ease, transform .2s ease
}

body[class*="app-"] main a:not(.store-badge):not(.btn) {
  color: var(--app)
}

body[class*="app-"] ::selection {
  background: color-mix(in srgb, var(--app) 30%, white);
  color: var(--deep)
}

body[class*="app-"] .product-cta {
  border-top: 1px solid color-mix(in srgb, var(--app) 18%, white);
  border-bottom: 1px solid color-mix(in srgb, var(--app) 18%, white)
}

body[class*="app-"] .product-cta-inner {
  background: linear-gradient(135deg, color-mix(in srgb, var(--deep) 92%, var(--app)), color-mix(in srgb, var(--deep) 63%, var(--app)));
  box-shadow: 0 26px 64px var(--glow)
}

body[class*="app-"] .cta-product-icon {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  outline: 0 !important;
  padding: 0 !important
}

body[class*="app-"] .cta-product-icon img {
  box-shadow: none !important;
  border: 0 !important;
  outline: 0 !important
}

body[class*="app-"] .app-footer {
  background: linear-gradient(135deg, var(--deep), color-mix(in srgb, var(--deep) 66%, var(--app)));
  border-top-color: var(--app)
}

body[class*="app-"] .app-footer-logo img {
  box-shadow: 0 14px 30px color-mix(in srgb, var(--app) 25%, rgba(0, 0, 0, .35))
}

/* SCREEN-ACCURATE APP PALETTES — sampled from each app's real screenshots */
body.app-screen {
  --app: #e02926;
  --app2: #62a1bb;
  --deep: #2f1716;
  --soft: #fff0ee;
  --soft2: #f3f9fc;
  --glow: rgba(224, 41, 38, .28);
  --hero-bg: radial-gradient(circle at 84% 13%, rgba(98, 161, 187, .27), transparent 30%), radial-gradient(circle at 11% 84%, rgba(224, 41, 38, .17), transparent 31%), linear-gradient(135deg, #fff0ee 0%, #fffafa 52%, #eaf5f9 100%);
}

body.app-vault {
  --app: #ed2f8d;
  --app2: #8c3fd7;
  --deep: #35132d;
  --soft: #fff0f7;
  --soft2: #f9f1ff;
  --glow: rgba(237, 47, 141, .29);
  --hero-bg: radial-gradient(circle at 84% 13%, rgba(140, 63, 215, .23), transparent 30%), radial-gradient(circle at 11% 84%, rgba(237, 47, 141, .18), transparent 31%), linear-gradient(135deg, #fff0f7 0%, #fff9fc 52%, #f4ebff 100%);
}

body.app-collage {
  --app: #fc4658;
  --app2: #27365d;
  --deep: #202b4b;
  --soft: #fff0f1;
  --soft2: #f2f5fb;
  --glow: rgba(252, 70, 88, .28);
  --hero-bg: radial-gradient(circle at 84% 13%, rgba(39, 54, 93, .18), transparent 31%), radial-gradient(circle at 11% 84%, rgba(252, 70, 88, .18), transparent 31%), linear-gradient(135deg, #fff0f1 0%, #fffafa 52%, #eef2f8 100%);
}

body.app-smarty {
  --app: #f94753;
  --app2: #3390cc;
  --deep: #243b4b;
  --soft: #fff0f1;
  --soft2: #edf6fc;
  --glow: rgba(249, 71, 83, .28);
  --hero-bg: radial-gradient(circle at 84% 13%, rgba(51, 144, 204, .24), transparent 30%), radial-gradient(circle at 11% 84%, rgba(249, 71, 83, .17), transparent 31%), linear-gradient(135deg, #fff0f1 0%, #fffafa 52%, #eaf5fc 100%);
}

/* Use both real screenshot colors consistently across every component */
body[class*="app-"] .app-hero-copy h1,
body[class*="app-"] .section-head h2,
body[class*="app-"] .detail-copy h2,
body[class*="app-"] .feature-tile h3 {
  color: var(--deep)
}

body[class*="app-"] .app-hero-copy p,
body[class*="app-"] .section-head p,
body[class*="app-"] .detail-copy p,
body[class*="app-"] .feature-tile p {
  color: color-mix(in srgb, var(--deep) 68%, #788397)
}

body[class*="app-"] .eyebrow,
body[class*="app-"] .hero-app-id strong,
body[class*="app-"] .inline-checks span:before {
  color: var(--app)
}

body[class*="app-"] .hero-feature-chips span:nth-child(even),
body[class*="app-"] .inline-checks span:nth-child(even):before {
  color: var(--app2)
}

body[class*="app-"] .feature-tile:nth-child(even) .feature-icon,
body[class*="app-"] .slider-arrow.next {
  background: linear-gradient(135deg, var(--app2), var(--app)) !important
}

body[class*="app-"] .feature-tile:nth-child(odd) .feature-icon,
body[class*="app-"] .slider-arrow.prev {
  background: linear-gradient(135deg, var(--app), var(--app2)) !important
}

body[class*="app-"] .store-badge {
  background: linear-gradient(135deg, var(--app), var(--app2)) !important;
  border-color: color-mix(in srgb, var(--app) 58%, white) !important
}

body[class*="app-"] .store-badge:hover {
  background: linear-gradient(135deg, var(--app2), var(--app)) !important
}

body[class*="app-"] .app-product-logo,
body[class*="app-"] .hero-app-id img {
  box-shadow: 0 12px 28px color-mix(in srgb, var(--app) 22%, transparent)
}



/* App listing previews: show the actual app page screenshots clearly */
.apps-full-grid .full-image-card {
  overflow: hidden
}

.apps-full-grid .full-image-card>a {
  display: flex;
  height: 436px;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #fff7f8, #f5f7ff);
  padding: 0
}

.apps-full-grid .full-image-card .app-page-preview {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  background: #fff
}

@media(max-width:760px) {
  .apps-full-grid .full-image-card>a {
    height: 520px
  }

  .apps-full-grid .full-image-card .app-page-preview {
    object-fit: contain
  }
}

/* Consistent official store icons */
a.store-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px
}

a.store-btn .store-icon {
  display: grid;
  place-items: center;
  flex: 0 0 30px;
  width: 30px;
  height: 30px
}

a.store-btn .store-icon svg {
  display: block;
  width: 30px;
  height: 30px
}

a.store-btn .store-copy {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
  text-align: left
}


/* Shared contact section for main website pages */
.site-contact-cta {
  padding: 88px 0;
  background: linear-gradient(135deg, #2f70ef 0%, #6f62f0 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
}

.site-contact-cta::before,
.site-contact-cta::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, .10);
}

.site-contact-cta::before {
  width: 280px;
  height: 280px;
  top: -150px;
  right: 8%;
}

.site-contact-cta::after {
  width: 190px;
  height: 190px;
  bottom: -115px;
  left: 7%;
}

.site-contact-cta__wrap {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr);
  gap: 48px;
  align-items: center;
}

.site-contact-cta__eyebrow {
  display: inline-block;
  margin-bottom: 14px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .16em;
  color: rgba(255, 255, 255, .78);
}

.site-contact-cta h2 {
  margin: 0 0 16px;
  color: #fff;
  font-size: clamp(34px, 4vw, 58px);
  line-height: 1.08;
}

.site-contact-cta p {
  margin: 0;
  max-width: 760px;
  color: rgba(255, 255, 255, .86);
  font-size: 18px;
  line-height: 1.75;
}

.site-contact-cta__action {
  padding: 28px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 24px;
  background: rgba(15, 15, 45, .18);
  backdrop-filter: blur(8px);
  box-shadow: 0 22px 60px rgba(34, 20, 91, .22);
}

.site-contact-cta__action span {
  display: block;
  margin-bottom: 10px;
  color: rgba(255, 255, 255, .72);
  font-size: 14px;
  font-weight: 700;
}

.site-contact-cta__action>a:first-of-type {
  display: block;
  margin-bottom: 22px;
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  word-break: break-word;
}

.site-contact-cta__action .btn {
  width: 100%;
  justify-content: center;
}

.site-footer-main .footer-grid>div:last-child p {
  margin: 0 0 10px;
}

@media (max-width: 820px) {
  .site-contact-cta {
    padding: 64px 0;
  }

  .site-contact-cta__wrap {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .site-contact-cta__action {
    max-width: 520px;
  }
}

@media (max-width: 520px) {
  .site-contact-cta {
    padding: 52px 0;
  }

  .site-contact-cta h2 {
    font-size: 34px;
  }

  .site-contact-cta p {
    font-size: 16px;
  }

  .site-contact-cta__action {
    padding: 22px;
    border-radius: 18px;
  }

  .site-contact-cta__action>a:first-of-type {
    font-size: 17px;
  }
}


/* Contact page gradient redesign */
.contact-gradient-page {
  padding: 72px 0 96px;
  background: #fff
}

.contact-gradient-card {
  position: relative;
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 44px;
  align-items: center;
  padding: 72px;
  border-radius: 28px;
  overflow: hidden;
  background: linear-gradient(120deg, #3475ed 0%, #5965ef 52%, #6a57e9 100%);
  box-shadow: 0 30px 80px rgba(63, 77, 205, .22)
}

.contact-gradient-card:before,
.contact-gradient-card:after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none
}

.contact-gradient-card:before {
  width: 420px;
  height: 420px;
  left: -210px;
  bottom: -260px;
  background: rgba(255, 255, 255, .08)
}

.contact-gradient-card:after {
  width: 340px;
  height: 340px;
  right: -150px;
  top: -180px;
  background: rgba(255, 255, 255, .09)
}

.contact-gradient-copy,
.contact-gradient-form {
  position: relative;
  z-index: 1
}

.contact-gradient-eyebrow,
.contact-gradient-form-head>span {
  display: inline-flex;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .15);
  color: #fff;
  font: 700 12px Poppins, sans-serif;
  letter-spacing: 1.5px
}

.contact-gradient-copy h1 {
  margin: 20px 0 18px;
  color: #fff;
  font-size: clamp(42px, 5vw, 66px);
  line-height: 1.04;
  letter-spacing: -2.2px
}

.contact-gradient-copy h1 span {
  color: #dce6ff
}

.contact-gradient-copy>p {
  max-width: 600px;
  margin: 0;
  color: rgba(255, 255, 255, .86);
  font-size: 18px;
  line-height: 1.8
}

.contact-gradient-email {
  margin-top: 30px;
  padding: 20px 22px;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 18px;
  background: rgba(255, 255, 255, .11);
  backdrop-filter: blur(8px)
}

.contact-gradient-email small {
  display: block;
  margin-bottom: 7px;
  color: rgba(255, 255, 255, .72);
  font-weight: 700;
  letter-spacing: 1.2px
}

.contact-gradient-email a {
  color: #fff;
  font: 600 20px Poppins, sans-serif
}

.contact-gradient-points {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px
}

.contact-gradient-points span {
  padding: 9px 13px;
  border-radius: 999px;
  background: rgba(18, 28, 91, .22);
  color: #fff;
  font-weight: 600;
  font-size: 13px
}

.contact-gradient-form {
  display: grid;
  gap: 16px;
  padding: 38px;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 26px 65px rgba(21, 31, 105, .22)
}

.contact-gradient-form-head h2 {
  margin: 12px 0 6px;
  color: #17213a;
  font-size: 31px;
  line-height: 1.2
}

.contact-gradient-form-head>span {
  background: #eef1ff;
  color: #5365ef
}

.contact-gradient-form label {
  display: grid;
  gap: 8px;
  color: #202a43;
  font-weight: 700;
  font-size: 14px
}

.contact-gradient-form input,
.contact-gradient-form textarea {
  width: 100%;
  border: 1px solid #dfe5f4;
  border-radius: 14px;
  background: #f8faff;
  padding: 15px 16px;
  font: 500 15px Inter, sans-serif;
  color: #17213a;
  outline: none;
  transition: .2s ease
}

.contact-gradient-form textarea {
  min-height: 145px;
  resize: vertical
}

.contact-gradient-form input:focus,
.contact-gradient-form textarea:focus {
  border-color: #5969ef;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(89, 105, 239, .12)
}

.contact-gradient-submit {
  min-height: 56px;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(120deg, #3475ed, #6b58e9);
  color: #fff;
  font: 700 16px Poppins, sans-serif;
  cursor: pointer;
  box-shadow: 0 14px 30px rgba(78, 88, 220, .25);
  transition: transform .2s ease, box-shadow .2s ease
}

.contact-gradient-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 34px rgba(78, 88, 220, .32)
}

.contact-gradient-submit b {
  margin-left: 8px;
  font-size: 20px
}

.contact-gradient-form .simple-form-status {
  margin: 0;
  text-align: center;
  color: #5f6b85;
  font-size: 13px
}

@media(max-width:980px) {
  .contact-gradient-card {
    grid-template-columns: 1fr;
    padding: 50px
  }

  .contact-gradient-copy {
    text-align: center
  }

  .contact-gradient-copy>p {
    margin-left: auto;
    margin-right: auto
  }

  .contact-gradient-email {
    max-width: 520px;
    margin-left: auto;
    margin-right: auto
  }

  .contact-gradient-points {
    justify-content: center
  }
}

@media(max-width:640px) {
  .contact-gradient-page {
    padding: 34px 0 60px
  }

  .contact-gradient-card {
    padding: 30px 20px;
    border-radius: 22px;
    gap: 30px
  }

  .contact-gradient-copy h1 {
    font-size: 39px;
    letter-spacing: -1.4px
  }

  .contact-gradient-copy>p {
    font-size: 16px;
    line-height: 1.7
  }

  .contact-gradient-form {
    padding: 24px 18px;
    border-radius: 19px
  }

  .contact-gradient-form-head h2 {
    font-size: 27px
  }

  .contact-gradient-email a {
    font-size: 17px
  }
}

/* Final contact container adjustment */
.contact-gradient-page {
  padding: 120px 0 90px;
  background: #fff;
}

.contact-gradient-page>.container {
  width: min(1400px, calc(100% - 48px));
  margin-inline: auto;
  padding: 0;
}

.contact-gradient-card {
  width: 100%;
  margin: 0 auto;
  border-radius: 30px;
  background: linear-gradient(120deg, #3475ed 0%, #5965ef 52%, #6a57e9 100%);
  overflow: hidden;
}

@media(max-width:760px) {
  .contact-gradient-page {
    padding: 100px 0 58px;
  }

  .contact-gradient-page>.container {
    width: min(100% - 28px, 1400px);
  }

  .contact-gradient-card {
    border-radius: 22px;
  }
}

/* Final store icon de-duplication */
a[href*="play.google.com"]::before,
a[href*="apps.apple.com"]::before,
a[href*="play.google.com"]::after,
a[href*="apps.apple.com"]::after {
  content: none !important;
  display: none !important
}

a[href*="play.google.com"] .play-icon,
a[href*="apps.apple.com"] .apple-symbol {
  display: none !important
}

/* Store badge alignment fix: keep icon and copy side by side */
a.store-btn,
.store-actions a.store-btn,
.actions a.store-btn,
.download a.store-btn {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  min-height: 60px;
  padding: 10px 18px !important;
  line-height: 1 !important;
  text-align: left !important;
}

a.store-btn .store-icon {
  display: grid !important;
  place-items: center !important;
  flex: 0 0 30px !important;
  width: 30px !important;
  height: 34px !important;
  margin: 0 !important;
}

a.store-btn .store-icon svg {
  display: block !important;
  width: 30px !important;
  height: 34px !important;
}

a.store-btn .store-copy {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 2px !important;
  min-width: 0;
  line-height: 1 !important;
  text-align: left !important;
}

a.store-btn .store-copy small,
a.store-btn .store-copy strong {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  white-space: nowrap;
}

a.store-btn .store-copy small {
  font-size: 9px !important;
  line-height: 1.05 !important;
  letter-spacing: .02em;
}

a.store-btn .store-copy strong {
  font-size: 18px !important;
  line-height: 1.05 !important;
}

@media (max-width: 480px) {

  a.store-btn,
  .store-actions a.store-btn,
  .actions a.store-btn,
  .download a.store-btn {
    width: 100%;
    min-width: 0 !important;
    justify-content: center !important;
  }
}


/* Polished app listing cards */
.apps-listing-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch
}

.app-listing-card {
  display: flex;
  flex-direction: column;
  border-radius: 22px;
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
  overflow: hidden
}

.app-listing-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 55px rgba(31, 52, 112, .16);
  border-color: rgba(82, 104, 246, .28)
}

.app-card-media {
  display: block;
  height: 300px;
  overflow: hidden;
  background: linear-gradient(145deg, #eef4ff, #f8f4ff);
  padding: 18px
}

.app-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 16px;
  transition: transform .45s ease
}

.app-listing-card:hover .app-card-media img {
  transform: scale(1.035)
}

.app-listing-card .app-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 22px
}

.app-listing-card .app-body h3 {
  font-size: 20px;
  line-height: 1.3;
  margin: 13px 0 10px
}

.app-listing-card .app-body p {
  min-height: 0;
  flex: 1;
  margin: 0 0 20px
}

.app-listing-card .download {
  padding: 11px 18px;
  font-size: 11px
}

.product-card[data-href],
.app-card[data-href] {
  cursor: pointer
}

@media(max-width:900px) {
  .apps-listing-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }
}

@media(max-width:600px) {
  .apps-listing-grid {
    grid-template-columns: 1fr
  }

  .app-card-media {
    height: 280px
  }
}

/* Corlenz listing card: landscape artwork without a mobile-device frame. */
.app-listing-card:first-child .app-card-media img {
  object-fit: cover;
  object-position: center;
}

/* Final app-page hero image and screenshot slider behavior */
body[class*="app-"] .hero,
body.page-corlenz .hero,
body.corlenz-page .hero {
  overflow: hidden;
  padding-bottom: 0 !important;
}

body[class*="app-"] .hero-grid,
body.page-corlenz .hero-grid,
body.corlenz-page .hero-grid {
  align-items: stretch !important;
}

body[class*="app-"] .hero-art,
body.page-corlenz .hero-art,
body.corlenz-page .hero-art,
body[class*="app-"] .recorder-showcase,
body[class*="app-"] .smarty-showcase,
body[class*="app-"] .hero-phone {
  align-self: end !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  min-height: 0 !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
  background: none !important;
  background-color: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
}

body[class*="app-"] .hero-art::before,
body[class*="app-"] .hero-art::after,
body.page-corlenz .hero-art::before,
body.page-corlenz .hero-art::after,
body.corlenz-page .hero-art::before,
body.corlenz-page .hero-art::after {
  content: none !important;
  display: none !important;
}

body[class*="app-"] .hero-art img,
body.page-corlenz .hero-art img,
body.corlenz-page .hero-art img,
body[class*="app-"] img.hero-first-screenshot {
  display: block !important;
  margin: auto auto 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  filter: none !important;
  transform: none !important;
  object-fit: contain !important;
  object-position: center bottom !important;
  max-height: 610px !important;
}

/* Left/right controls on every app screenshot slider */
body[class*="app-"] .slider-wrap,
.corlenz-slider-wrap {
  position: relative !important
}

body[class*="app-"] .slide-btn,
.corlenz-slider-wrap .slide-btn {
  position: absolute !important;
  z-index: 20 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  display: grid !important;
  place-items: center !important;
  width: 50px !important;
  height: 50px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, var(--app, #2468ef), var(--app2, #7557ef)) !important;
  color: #fff !important;
  font-size: 34px !important;
  line-height: 1 !important;
  cursor: pointer !important;
  box-shadow: 0 12px 28px rgba(31, 48, 116, .28) !important;
}

body[class*="app-"] .slide-btn.prev,
.corlenz-slider-wrap .slide-btn.prev {
  left: -22px !important
}

body[class*="app-"] .slide-btn.next,
.corlenz-slider-wrap .slide-btn.next {
  right: -22px !important
}

@media(max-width:700px) {

  body[class*="app-"] .hero-art img,
  body.page-corlenz .hero-art img,
  body.corlenz-page .hero-art img,
  body[class*="app-"] img.hero-first-screenshot {
    max-height: 500px !important;
    width: auto !important;
    max-width: 100% !important;
  }

  body[class*="app-"] .slide-btn,
  .corlenz-slider-wrap .slide-btn {
    display: none !important
  }
}
/* Games listing uses the same polished card system as the Apps page */
.games-listing-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
}

.games-listing-grid .game-listing-card .app-card-media {
  background: linear-gradient(145deg, #eef4ff, #f8f4ff);
}

.games-listing-grid .game-listing-card .app-card-media img {
  object-fit: cover;
  object-position: center;
}

.games-listing-grid .game-listing-card .tag {
  align-self: flex-start;
}

.games-listing-grid .game-listing-card .download {
  align-self: flex-start;
  width: 100%;
}

@media (max-width: 900px) {
  .games-listing-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .games-listing-grid {
    grid-template-columns: 1fr;
  }
}


/* Contact form submit feedback */
.contact-form-honeypot {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

.contact-gradient-submit:disabled {
  cursor: wait;
  opacity: .78;
  transform: none;
}

.contact-gradient-form .simple-form-status {
  display: none;
  min-height: 0;
  margin-top: -2px;
  padding: 12px 14px;
  border-radius: 12px;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
}

.contact-gradient-form .simple-form-status.is-loading,
.contact-gradient-form .simple-form-status.is-success,
.contact-gradient-form .simple-form-status.is-error {
  display: block;
}

.contact-gradient-form .simple-form-status.is-loading {
  color: #41507a;
  background: #f3f6ff;
  border: 1px solid #dce5ff;
}

.contact-gradient-form .simple-form-status.is-success {
  color: #146c43;
  background: #ecf9f1;
  border: 1px solid #bfe8cf;
  box-shadow: 0 10px 26px rgba(20, 108, 67, .08);
}

.contact-gradient-form .simple-form-status.is-error {
  color: #a12626;
  background: #fff1f1;
  border: 1px solid #f2c4c4;
  box-shadow: 0 10px 26px rgba(161, 38, 38, .07);
}
.page-home .hero .btn-primary{
  z-index: 1;
}
header .btn-primary{
  font-size: 16px !important;
   padding: 13px 23px !important;
   font-weight: 600 !important;
}