/* 369apps: sapphire, champagne gold and liquid-glass surfaces. */
:root {
  --bg: #030b20;
  --surface: #0c1e40;
  --surface-hover: #142e58;
  --panel: #0a1835;
  --text: #f4f7ff;
  --muted: #c0cde4;
  --faint: #a0b4d2;
  --line: #8fbaff36;
  --accent: #f1d28d;
  --accent-text: #15223a;
  --violet: #fff0c6;
  --header: #091b39b8;
  --shadow: 0 18px 50px #00000030;
  --glow: #217cff38;
  --glass-base: #0b2149bb;
  --glass-top: #d9eaff1c;
  --glass-edge: #e8f2ff66;
  --glass-bottom: #6aa5ff12;
  --glass-control: #15376966;
  --glass-shine: #eef7ff40;
  --glass-shadow: #00081755;
  --gold-glass: #88601955;
}
:root[data-theme=light] {
  --bg: #eaf1fc;
  --surface: #f7faff;
  --surface-hover: #ffffff;
  --panel: #e2ecfa;
  --text: #122c52;
  --muted: #354f75;
  --faint: #4b6181;
  --line: #3c629c3d;
  --accent: #75500f;
  --accent-text: #15223a;
  --violet: #97651a;
  --header: #f3f7ffcf;
  --shadow: 0 18px 45px #123d7820;
  --glow: #3a8cff22;
  --glass-base: #f3f8ffcf;
  --glass-top: #ffffffbd;
  --glass-edge: #ffffff;
  --glass-bottom: #6494db12;
  --glass-control: #e2edfc99;
  --glass-shine: #ffffffab;
  --glass-shadow: #164a8b20;
  --gold-glass: #edc97145;
}
body {
  background-color: var(--bg);
  background-image: radial-gradient(ellipse 85% 700px at 88% 8%, #16499b3b, transparent 75%),
    radial-gradient(ellipse 60% 550px at 0% 36%, #135db82b, transparent 78%),
    radial-gradient(ellipse 65% 500px at 100% 78%, #286dd326, transparent 76%);
}
::selection { background: #d4b46e; color: #07162e; }
main, footer { max-width: 1600px; }
.header {
  max-width: 1504px;
  margin: 20px auto 0;
  padding: 16px 24px;
  border: 1px solid var(--line);
  border-top-color: var(--glass-edge);
  border-radius: 28px;
  background: linear-gradient(155deg, var(--glass-top), transparent 54%), var(--header);
  box-shadow: inset 0 1px 0 var(--glass-edge), inset 0 -1px 0 #6aa5ff18, 0 12px 38px var(--glass-shadow);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  backdrop-filter: blur(22px) saturate(160%);
}
.wordmark > span { color: var(--accent); }
.wordmark img { border-radius: 50%; }
.header nav a { color: var(--muted); }
.header nav a:hover { color: var(--accent); }
.preferences { margin-inline-start: auto; }
.hero { gap: 48px; padding-block: 72px 76px; }
.hero::before, .hero::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: -1;
  border-radius: 50%;
}
.hero::before {
  inset: 10% 2% 4% 43%;
  background: radial-gradient(ellipse, #167bff25 0%, #0b48ab14 40%, transparent 72%);
}
.hero::after {
  width: 78%; height: 30%; inset-inline-end: 4%; bottom: 10%;
  border-top: 1px solid #6aa5ff30;
  border-bottom: 1px solid #e6c87f20;
  transform: rotate(-11deg);
  box-shadow: 0 -10px 36px -25px #3e9eff;
}
h1 { font-weight: 680; }
h1 em {
  background-image: linear-gradient(110deg, #c69242, #ffe9ae 38%, #f1ce83 70%, #c99749);
  text-shadow: 0 0 45px #d7a44814;
}
[data-theme=light] h1 em { background-image: linear-gradient(110deg, #80530b, #654617 55%, #946414); }
.eyebrow { color: var(--accent); }
.hero-description { max-width: 500px; }
.note-line { background: linear-gradient(90deg, var(--accent), transparent); width: 34px; }
.hero-collection { padding: 10px 0; }
.brand-visual {
  position: relative;
  overflow: hidden;
  max-width: 466px;
  margin-inline: auto;
  padding: 22px 22px 20px;
  border: 1px solid var(--line);
  border-top-color: var(--glass-edge);
  border-radius: 44px;
  background: linear-gradient(145deg, var(--glass-top), transparent 42%), var(--glass-base);
  box-shadow: inset 0 1px 0 var(--glass-edge), inset 0 -1px 0 #6aa5ff2b, 0 26px 70px var(--glass-shadow), 0 0 65px #266dcb1c;
  -webkit-backdrop-filter: blur(18px) saturate(145%);
  backdrop-filter: blur(18px) saturate(145%);
}
.brand-art, [data-theme=light] .brand-art {
  display: block;
  width: 100%; max-width: 402px; height: auto;
  margin: 0 auto 17px;
  border-radius: 50%;
  mix-blend-mode: normal;
  box-shadow: 0 14px 36px #0012394d;
}
.brand-launch { border-radius: 50%; }
.brand-caption { color: var(--muted); font-size: 11px; letter-spacing: .12em; }
.brand-caption::before, .brand-caption::after { background: var(--accent); opacity: .45; }
.brand-play { inset-inline-end: 4%; inset-block-end: 8%; background: #0b2149e6; color: #ffe5a5; border-color: #e9cb805c; }
.featured-row { max-width: 466px; margin-top: 18px; gap: 10px; }
.feature-mini, .app-card, .channel-section, .share-fallback {
  border: 1px solid var(--line);
  border-top-color: var(--glass-edge);
  background: linear-gradient(145deg, var(--glass-top), transparent 42%, var(--glass-bottom)), var(--glass-base);
  box-shadow: inset 0 1px 0 #ffffff12, inset 0 -1px 0 #8abaff15, var(--shadow);
  -webkit-backdrop-filter: blur(16px) saturate(145%);
  backdrop-filter: blur(16px) saturate(145%);
}
.feature-mini, .app-card { isolation: isolate; }
.feature-mini { position: relative; overflow: hidden; border-radius: 22px; }
.app-card { border-radius: 28px; padding: 24px; transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.app-card::before {
  height: 1px; inset: 0 12% auto;
  background: linear-gradient(90deg, transparent, #cbe6ff99, #f1d28d8c, transparent);
  opacity: .8;
  pointer-events: none;
}
.app-card::after, .feature-mini::after, .brand-visual::after {
  content: "";
  position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(ellipse 290px 180px at var(--glass-x, 20%) var(--glass-y, 0%), var(--glass-shine), transparent 75%);
  opacity: .2;
  pointer-events: none;
  z-index: -1;
  transition: opacity .25s ease;
}
.app-card h3 { color: var(--text); }
.app-card .tagline { color: var(--accent); }
.category-label { color: var(--muted); }
.app-icon, .initial-icon { box-shadow: 0 7px 18px #000a1e2e; border-radius: 16px; }
.card-footer { border-top-color: var(--line); }
.catalog { border-top-color: var(--line); position: relative; }
.filters { gap: 10px; }

/* Translucent, convex controls with a specular rim and a pressed state. */
.button, .open-app, .filter, .theme-button, .language-trigger, .intro-close, .brand-play {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid var(--line);
  border-top-color: var(--glass-edge);
  border-bottom-color: #7fafff38;
  border-radius: 999px;
  background: linear-gradient(165deg, var(--glass-top), transparent 52%, #a2c9ff0d), var(--glass-control);
  color: var(--text);
  box-shadow: inset 0 1px 0 var(--glass-edge), inset 0 -1px 1px #8dbdff26, inset 1px 0 1px #d7eaff1f, 0 6px 20px var(--glass-shadow);
  -webkit-backdrop-filter: blur(18px) saturate(175%);
  backdrop-filter: blur(18px) saturate(175%);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background-color .22s ease;
}
.button::before, .open-app::before, .filter::before, .theme-button::before, .language-trigger::before {
  content: "";
  position: absolute; z-index: -1; inset: 1px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(120deg, #ffffff32, #ffffff08 30%, transparent 45%, #c2e6ff12 70%, transparent);
}
.button::after, .open-app::after, .filter::after, .theme-button::after, .language-trigger::after {
  content: "";
  position: absolute; z-index: -1; inset: 1px;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(ellipse at var(--glass-x, 50%) var(--glass-y, 0%), var(--glass-shine), transparent 65%);
  opacity: 0;
  transition: opacity .22s ease;
}
.button { min-height: 54px; padding-inline: 24px; font-weight: 650; }
.button.primary, [data-theme=light] .button.primary {
  border-color: #f0d69b80;
  border-top-color: #fff0c9bb;
  background: linear-gradient(155deg, #fff1c636, transparent 48%, #b883361c), var(--gold-glass);
  color: var(--accent);
  box-shadow: inset 0 1px 0 #fff1c6a3, inset 0 -1px 1px #d8b66d4d, 0 7px 26px #b3812421;
}
.share-button svg { color: var(--accent); }
.open-app { min-height: 44px; padding: 10px 20px; color: var(--accent); }
.filter { min-height: 46px; color: var(--muted); padding-inline: 19px; }
.filter[aria-pressed=true] {
  color: var(--accent);
  border-color: #d6b77488;
  border-top-color: #fff0c99c;
  background: linear-gradient(150deg, #fff3d126, transparent 65%), var(--gold-glass);
  box-shadow: inset 0 1px 0 #fff0c980, 0 4px 18px #bb8a271a;
}
.theme-button { width: 46px; height: 46px; color: var(--accent); }
.language-trigger { min-height: 46px; padding-inline: 18px; }
.language-trigger[aria-expanded=true] { border-color: var(--accent); }
.language-menu {
  border-color: var(--line);
  border-top-color: var(--glass-edge);
  border-radius: 24px;
  background: linear-gradient(145deg, var(--glass-top), transparent 60%), var(--surface);
  box-shadow: inset 0 1px 0 var(--glass-edge), 0 18px 60px var(--glass-shadow);
}
.language-option { border-radius: 16px; }
.language-option[aria-selected=true] { background: var(--gold-glass); }
.language-option:hover { background: var(--surface-hover); }
.button:active, .open-app:active, .filter:active, .theme-button:active, .language-trigger:active {
  transform: scale(.96);
  box-shadow: inset 0 2px 7px #00133240, inset 0 1px 0 var(--glass-edge), 0 2px 8px var(--glass-shadow);
}
.button:disabled { opacity: .65; transform: none; }
.app-card:focus-within, .feature-mini:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--shadow); }
.button:focus-visible, .open-app:focus-visible, .filter:focus-visible, .theme-button:focus-visible, .language-trigger:focus-visible {
  outline: 3px solid var(--accent); outline-offset: 4px;
}
.about { border-top-color: var(--line); }
.text-link { color: var(--accent); }
.channel-section { border-radius: 30px; }
.channel-brand {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  direction: ltr; min-height: 170px; padding: 24px;
  color: #e9f2ff; font-size: clamp(42px, 6vw, 72px); font-weight: 550; letter-spacing: -.06em;
  background: radial-gradient(ellipse at 50% 100%, #167aff52, transparent 60%),
    linear-gradient(120deg, #091631 4%, #123f7a 49%, #081932 95%);
  border-bottom: 1px solid var(--line);
  text-shadow: 0 2px 0 #05142d, 0 0 32px #67b7ff3d;
}
.channel-brand span { color: #f1d28d; font-weight: 800; text-shadow: 0 2px 0 #60400c, 0 0 30px #eec56f2e; }
.channel-content .button { background: linear-gradient(155deg, var(--glass-top), transparent 55%), var(--glass-control); }
footer { border-top-color: var(--line); }
.intro-orbit { border-top-color: #f1d28d; border-bottom-color: #428dff; }
.intro-wordmark { color: #f1d28d; }
.intro-progress span { background: linear-gradient(90deg, #317dff, #f1d28d); }

@media (hover: hover) and (pointer: fine) {
  .app-card:hover, .feature-mini:hover {
    transform: translateY(-5px);
    border-color: #d4bb7d75;
    background: linear-gradient(145deg, var(--glass-top), transparent 42%, var(--glass-bottom)), var(--glass-base);
    box-shadow: inset 0 1px 0 var(--glass-edge), 0 22px 48px var(--glass-shadow), 0 0 24px #2b7aff1f;
  }
  .app-card:hover::after, .feature-mini:hover::after, .brand-visual:hover::after { opacity: .65; }
  .button:hover, .open-app:hover, .filter:hover, .theme-button:hover, .language-trigger:hover {
    transform: translateY(-2px);
    border-color: #d4c29199;
    box-shadow: inset 0 1px 0 var(--glass-edge), inset 0 -1px 0 #b1d4ff40, 0 9px 28px var(--glass-shadow), 0 0 18px #4d9aff21;
  }
  .button:hover::after, .open-app:hover::after, .filter:hover::after, .theme-button:hover::after, .language-trigger:hover::after { opacity: .7; }
  .button:active, .open-app:active, .filter:active, .theme-button:active, .language-trigger:active { transform: scale(.96); }
}
@media (min-width: 1440px) {
  .app-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
  .app-card { padding: 20px 17px; }
  .app-card h3 { font-size: 18px; }
  .card-top { flex-wrap: wrap; gap: 12px; }
  .category-label { font-size: 11px; }
  .card-footer { flex-wrap: wrap; gap: 12px; }
  .card-footer .open-app { width: 100%; }
  .hero { grid-template-columns: 1.2fr 1fr; min-height: 700px; }
}
@media (max-width: 1550px) { .header { margin-inline: 32px; } }
@media (max-width: 1050px) {
  .header { gap: 22px; padding: 14px 20px; }
  .hero { gap: 30px; }
  .brand-visual { padding: 16px; border-radius: 34px; }
  .brand-caption { letter-spacing: .06em; font-size: 10px; }
}
@media (max-width: 800px) {
  .header { border-radius: 24px; margin-top: 14px; }
  .header nav { display: none; }
  .hero { padding-block: 46px 50px; }
  .hero-collection { gap: 20px; width: 100%; }
  .brand-visual { width: 58%; }
  .brand-art, [data-theme=light] .brand-art { width: 100%; margin: 0 auto 10px; }
  .featured-row { width: 42%; margin: 0; }
  .feature-mini { border-radius: 18px; }
  .hero::after { width: 85%; height: 20%; bottom: 8%; }
}
@media (max-width: 540px) {
  .header { margin: 12px 12px 0; padding: 12px; gap: 8px; border-radius: 25px; }
  .header .wordmark { font-size: 21px; }
  .header .wordmark img { width: 32px; height: 32px; margin-inline-end: 4px; }
  .preferences { gap: 7px; }
  .language-trigger { padding-inline: 12px; font-size: 13px; gap: 7px; }
  .theme-button { width: 44px; height: 44px; }
  .hero { padding: 36px 20px 40px; gap: 28px; }
  .hero-copy { min-width: 0; }
  .hero-actions { gap: 10px; }
  .hero-actions .button { width: 100%; min-height: 52px; }
  .hero-collection { gap: 12px; padding: 0; align-items: stretch; }
  .brand-visual { width: 54%; padding: 10px; border-radius: 27px; display: grid; align-items: center; }
  .brand-art, [data-theme=light] .brand-art { margin: 0; box-shadow: 0 8px 22px #0012394d; }
  .featured-row { width: 46%; gap: 8px; justify-content: center; }
  .feature-mini { min-height: 48px; padding: 10px; }
  .feature-mini strong { font-size: 11px; }
  .filter { font-size: 13px; min-height: 44px; padding-inline: 14px; }
  .filters { gap: 8px; }
  .app-card { border-radius: 27px; padding: 23px; }
  .card-footer .open-app { min-width: 112px; }
  .channel-section { border-radius: 26px; }
  .channel-brand { min-height: 120px; font-size: 52px; }
  .channel-content .button { width: 100%; }
}
@media (max-width: 380px) {
  .header .wordmark { font-size: 19px; gap: 1px; }
  .header .wordmark img { width: 28px; height: 28px; margin-inline-end: 2px; }
}
/* Static reflections on touch devices avoid scroll-linked rendering work. */
@media (hover: none), (pointer: coarse) {
  .app-card:hover, .feature-mini:hover { transform: none; }
  .app-card, .feature-mini { -webkit-backdrop-filter: blur(9px) saturate(135%); backdrop-filter: blur(9px) saturate(135%); }
}
@media (prefers-reduced-motion: reduce) {
  .app-card, .feature-mini, .button, .open-app, .filter, .theme-button, .language-trigger { transition: none; }
  .app-card:hover, .feature-mini:hover, .button:hover, .button:active, .open-app:hover, .open-app:active,
  .filter:hover, .filter:active, .theme-button:hover, .theme-button:active, .language-trigger:hover, .language-trigger:active { transform: none; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .header, .brand-visual, .app-card, .feature-mini, .channel-section, .share-fallback { background-color: var(--surface); }
  .button, .open-app, .filter, .theme-button, .language-trigger { background-color: var(--panel); }
  .button.primary, .filter[aria-pressed=true] { background-color: var(--surface); }
}
@media (prefers-contrast: more) {
  .app-card, .feature-mini, .header, .brand-visual { background: var(--surface); }
  .button, .open-app, .filter, .theme-button, .language-trigger { background: var(--panel); border-color: var(--text); }
}

/* Round artwork retains its complete rim in the header, hero and intro. */
.wordmark img{object-fit:contain}
.intro-mark{mask-image:none;-webkit-mask-image:none;mix-blend-mode:normal}