@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Space+Grotesk:wght@600;700&display=swap");

:root {
  --ripikso-ink: #171323;
  --ripikso-paper: #f7f5f1;
  --ripikso-purple: #7448f4;
  --ripikso-coral: #ff685d;
  --ripikso-yellow: #ffd752;
  --ripikso-mint: #55ddc7;
  --ripikso-line: rgba(23, 19, 35, .14);
}

body {
  color: var(--ripikso-ink);
  background: var(--ripikso-paper);
  font-family: "Manrope", ui-sans-serif, system-ui, sans-serif;
}

.store-page {
  display: flow-root;
  background:
    radial-gradient(circle at 82% 4%, rgba(var(--accent-rgb), .2), transparent 27%),
    radial-gradient(circle at 2% 42%, rgba(116, 72, 244, .1), transparent 25%),
    var(--ripikso-paper);
}

.store-page::before { opacity: .035; }
.store-page.dattdart { --accent: var(--ripikso-mint); --accent-rgb: 85, 221, 199; }
.store-page.kelimeler { --accent: var(--ripikso-coral); --accent-rgb: 255, 104, 93; }
.store-page.okey { --accent: var(--ripikso-yellow); --accent-rgb: 255, 215, 82; }
.store-page.bububble { --accent: var(--ripikso-purple); --accent-rgb: 116, 72, 244; }

.brand-main,
.product-main h1,
.section-heading h2,
.release-board-head h2,
.about-copy h2,
.feature h3,
.studio-logo,
.studio-strip h3,
.quick-links h4,
.updates h4 { font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif; }

.nav {
  height: 74px;
  margin-top: 18px;
  padding: 0 24px;
  border: 1px solid rgba(255, 255, 255, .76);
  border-radius: 24px;
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 16px 50px rgba(55, 39, 98, .12);
  backdrop-filter: blur(18px);
}

.brand { color: var(--ripikso-ink); }
.brand-main { font-size: 28px; }
.brand-dot { color: var(--ripikso-coral); }
.brand-by { color: #8b8395; }
.nav-actions a { color: #5f5869; }
.nav-actions a:hover { color: var(--ripikso-purple); }
.breadcrumb { margin-top: 12px; color: #91899b; }
.breadcrumb a { color: #6f6879; }
.breadcrumb a:hover { color: var(--ripikso-purple); }
.breadcrumb-separator { color: rgba(23, 19, 35, .24); }
.breadcrumb [aria-current="page"] { color: var(--ripikso-ink); }

.language-switch {
  border-color: var(--ripikso-line);
  background: rgba(255, 255, 255, .7);
  box-shadow: none;
}

.language-switch button { color: #8a8292; }
.language-switch button:hover { color: var(--ripikso-ink); }
.language-switch button[aria-pressed="true"] {
  color: #fff;
  background: var(--ripikso-purple);
  box-shadow: 0 6px 16px rgba(116, 72, 244, .22);
}

.product-hero { padding-top: 26px; }
.product-stage {
  min-height: 460px;
  border-color: rgba(23, 19, 35, .12);
  border-radius: 42px;
  box-shadow: 0 28px 72px rgba(55, 39, 98, .18);
}

.product-stage::before {
  background-image:
    linear-gradient(90deg, rgba(23, 19, 35, .98) 0%, rgba(23, 19, 35, .84) 42%, rgba(23, 19, 35, .18) 78%, rgba(23, 19, 35, .5) 100%),
    var(--cover);
}

.bububble .product-stage::before {
  background-image:
    linear-gradient(90deg, rgba(23, 11, 55, .98) 0%, rgba(38, 20, 83, .8) 43%, rgba(45, 23, 96, .14) 77%, rgba(23, 11, 55, .38) 100%),
    var(--cover);
}

.product-main { color: #fff; }
.product-main p { color: rgba(255, 255, 255, .78); }
.product-icon { border-radius: 31px; box-shadow: 0 24px 52px rgba(0, 0, 0, .38); }
.meta-row span { color: #fff; border-color: rgba(255, 255, 255, .23); background: rgba(23, 19, 35, .52); }
.store-link { color: var(--ripikso-ink); border: 0; border-radius: 16px; background: var(--ripikso-yellow); }
.store-link:hover { color: #fff; background: var(--ripikso-purple); }

.section + .section { border-color: var(--ripikso-line); }
.kicker { color: var(--ripikso-purple); }
.section-heading h2,
.release-board-head h2,
.about-copy h2 { color: var(--ripikso-ink); }
.section-heading p,
.about-copy > p { color: #6f6879; }

.gallery-button {
  color: var(--ripikso-ink);
  border-color: var(--ripikso-line);
  border-radius: 14px;
  background: rgba(255, 255, 255, .72);
  box-shadow: 0 8px 22px rgba(55, 39, 98, .07);
}

.gallery-button:hover { color: #fff; border-color: var(--ripikso-purple); background: var(--ripikso-purple); }
.shot { border-color: rgba(23, 19, 35, .12); box-shadow: 0 18px 42px rgba(55, 39, 98, .16); }

.store-update-card,
.release-archive,
.feature,
.info-card {
  border-color: var(--ripikso-line);
  background: rgba(255, 255, 255, .72);
  box-shadow: 0 18px 46px rgba(55, 39, 98, .08);
}

.store-update-card--next { background: linear-gradient(145deg, rgba(var(--accent-rgb), .16), rgba(255, 255, 255, .76) 60%); }
.store-update-meta strong,
.release-archive-summary strong,
.info-row dd,
.info-link,
.feature h3 { color: var(--ripikso-ink); }
.store-update-meta time,
.release-archive-summary small,
.about-copy > p,
.feature p,
.info-row dt { color: #756e7d; }
.store-update-notes li { color: #595262; }
.release-archive-item,
.info-row { border-color: var(--ripikso-line); }
.release-archive-summary .ui-icon { color: #81798a; }
.info-link:hover { color: var(--ripikso-purple); }
.feature-index { color: var(--ripikso-ink); background: rgba(var(--accent-rgb), .25); }

.site-footer {
  margin-top: 56px;
  color: #fff;
  border-top: 0;
  background:
    radial-gradient(circle at 16% 110%, rgba(116, 72, 244, .45), transparent 29%),
    var(--ripikso-ink);
}

.studio-logo,
.studio-strip h3,
.quick-links h4,
.updates h4 { color: #fff; }
.studio-logo span { color: var(--ripikso-coral); }
.quick-links a,
.updates p { color: #bcb5c7; }
.quick-links a:hover { color: var(--ripikso-yellow); }
.footer { color: #a9a2b3; border-color: rgba(255, 255, 255, .14); }
.footer a { color: #c9c3d1; }
.footer a:hover { color: var(--ripikso-yellow); }
.updates-form input { border-color: rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .07); }

.scroll-top {
  color: #fff;
  border-color: rgba(255, 255, 255, .18);
  background: rgba(23, 19, 35, .9);
}

.scroll-top:hover { border-color: var(--ripikso-purple); background: var(--ripikso-purple); }

.legal-main {
  border-color: var(--ripikso-line);
  background: rgba(255, 255, 255, .78);
  box-shadow: 0 28px 72px rgba(55, 39, 98, .12);
}

.legal-main h1 { color: var(--ripikso-ink); font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif; }
.legal-main h2 { color: var(--ripikso-purple); }
.legal-main h3 { color: #3d7f75; }
.legal-main p,
.legal-main li { color: #5f5869; }
.legal-main strong { color: var(--ripikso-ink); }
.legal-main a { color: var(--ripikso-purple); }
.legal-main a:hover { color: var(--ripikso-coral); }
.legal-main hr,
.legal-main .policy-meta { border-color: var(--ripikso-line); }
.legal-main .policy-warning { border-color: rgba(255, 176, 36, .34); background: rgba(255, 215, 82, .18); }
.legal-sync { color: #6f6879 !important; }
.legal-footer-links { display: grid; gap: 10px; margin-top: 16px; }
.legal-footer-links a { color: #d0cad6; text-decoration: none; }
.legal-footer-links a:hover { color: var(--ripikso-yellow); }

@media (max-width: 640px) {
  .nav { height: 70px !important; margin-top: 10px; padding: 0 15px; border-radius: 20px; }
  .brand-main { font-size: 24px !important; }
  .brand-by { font-size: 6px; letter-spacing: 1.35px; }
  .product-stage { min-height: 520px; border-radius: 30px; }
  .product-stage::before { background-position: 58% center; }
}