/* ============================================================
   BlackAnt Studio — 黑蚁工作室
   Elegant bilingual app showcase
   ============================================================ */

:root {
  --bg: #0b0d12;
  --bg-soft: #12151d;
  --card: rgba(255, 255, 255, 0.045);
  --card-border: rgba(255, 255, 255, 0.09);
  --text: #f4f6fa;
  --text-2: #a7b0c3;
  --text-3: #6b7488;
  --accent: #ff9838;
  --accent-2: #ffd75e;
  --accent-soft: rgba(255, 152, 56, 0.15);
  --radius: 22px;
  --nav-h: 72px;
  --max-w: 1180px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Themes per app ---------- */
body[data-theme="monkey"]  { --accent:#3ddba6; --accent-2:#8ef2c9; --accent-soft:rgba(61,219,166,.14); }
body[data-theme="mystery"] { --accent:#a78bfa; --accent-2:#7dd3fc; --accent-soft:rgba(167,139,250,.15); }
body[data-theme="diary"]   { --accent:#fb7185; --accent-2:#fda4af; --accent-soft:rgba(251,113,133,.14); }
body[data-theme="script"]  { --accent:#fb923c; --accent-2:#fcd34d; --accent-soft:rgba(251,146,60,.14); }
body[data-theme="hanzi"]   { --accent:#f0b429; --accent-2:#f87171; --accent-soft:rgba(240,180,41,.14); }
body[data-theme="tictac"]  { --accent:#5ea0ff; --accent-2:#7dd3fc; --accent-soft:rgba(94,160,255,.14); }
body[data-theme="match"]   { --accent:#f472b6; --accent-2:#a5f3fc; --accent-soft:rgba(244,114,182,.14); }
body[data-theme="block"]   { --accent:#22d3ee; --accent-2:#a3e635; --accent-soft:rgba(34,211,238,.14); }
body[data-theme="funbox"]  { --accent:#facc15; --accent-2:#34d399; --accent-soft:rgba(250,204,21,.14); }
body[data-theme="baby"] { --accent:#f472b6; --accent-2:#f9a8d4; --accent-soft:rgba(244,114,182,.14); }
body[data-theme="chengyu"] { --accent:#a3e635; --accent-2:#4ade80; --accent-soft:rgba(163,230,53,.14); }
body[data-theme="pocketledger"] { --accent:#34d399; --accent-2:#6ee7b7; --accent-soft:rgba(52,211,153,.14); }
body[data-theme="metronome"] { --accent:#fb923c; --accent-2:#fdba74; --accent-soft:rgba(251,146,60,.14); }
body[data-theme="mood"] { --accent:#c084fc; --accent-2:#f0abfc; --accent-soft:rgba(192,132,252,.14); }
body[data-theme="birdcalc"] { --accent:#60a5fa; --accent-2:#93c5fd; --accent-soft:rgba(96,165,250,.14); }
body[data-theme="lovetreasure"] { --accent:#ff8fab; --accent-2:#ffc2d1; --accent-soft:rgba(255,143,171,.14); }
body[data-theme="skinstudio"] { --accent:#5eead4; --accent-2:#99f6e4; --accent-soft:rgba(94,234,212,.14); }
body[data-theme="beads"] { --accent:#fda4af; --accent-2:#fcd34d; --accent-soft:rgba(253,164,175,.14); }
body[data-theme="checkin"] { --accent:#4ade80; --accent-2:#a7f3d0; --accent-soft:rgba(74,222,128,.14); }
body[data-theme="lifehacks"] { --accent:#fbbf24; --accent-2:#fde68a; --accent-soft:rgba(251,191,36,.14); }
body[data-theme="shiguang"] { --accent:#818cf8; --accent-2:#c7d2fe; --accent-soft:rgba(129,140,248,.14); }
body[data-theme="travel"] { --accent:#38bdf8; --accent-2:#7dd3fc; --accent-soft:rgba(56,189,248,.14); }
body[data-theme="xiaolu"] { --accent:#f59e0b; --accent-2:#fcd34d; --accent-soft:rgba(245,158,11,.14); }
body[data-theme="accountkeeper"] { --accent:#94a3b8; --accent-2:#cbd5e1; --accent-soft:rgba(148,163,184,.14); }
body[data-theme="zilv"] { --accent:#2dd4bf; --accent-2:#5eead4; --accent-soft:rgba(45,212,191,.14); }
body[data-theme="snake"] { --accent:#84cc16; --accent-2:#bef264; --accent-soft:rgba(132,204,22,.14); }
body[data-theme="tank"] { --accent:#a16207; --accent-2:#facc15; --accent-soft:rgba(161,98,7,.14); }
body[data-theme="lumen"] { --accent:#e879f9; --accent-2:#a78bfa; --accent-soft:rgba(232,121,249,.14); }
body[data-theme="klotski"] { --accent:#f87171; --accent-2:#fca5a5; --accent-soft:rgba(248,113,113,.14); }
body[data-theme="loveguide"] { --accent:#fb7185; --accent-2:#f9a8d4; --accent-soft:rgba(251,113,133,.14); }
body[data-theme="encphoto"] { --accent:#8b5cf6; --accent-2:#a78bfa; --accent-soft:rgba(139,92,246,.14); }
body[data-theme="darkbox"] { --accent:#10b981; --accent-2:#059669; --accent-soft:rgba(16,185,129,.14); }
body[data-theme="nocturne"] { --accent:#6366f1; --accent-2:#818cf8; --accent-soft:rgba(99,102,241,.14); }
body[data-theme="prism"] { --accent:#a5f3fc; --accent-2:#e879f9; --accent-soft:rgba(165,243,252,.14); }
body[data-theme="sealbox"] { --accent:#f59e0b; --accent-2:#fbbf24; --accent-soft:rgba(245,158,11,.14); }
body[data-theme="learnenglish"] { --accent:#5ea0ff; --accent-2:#a5d8ff; --accent-soft:rgba(94,160,255,.14); }
body[data-theme="learnjapanese"] { --accent:#f43f5e; --accent-2:#fda4af; --accent-soft:rgba(244,63,94,.14); }
body[data-theme="aqua"] { --accent:#06b6d4; --accent-2:#67e8f9; --accent-soft:rgba(6,182,212,.14); }
body[data-theme="learnpinyin"] { --accent:#facc15; --accent-2:#fb923c; --accent-soft:rgba(250,204,21,.14); }
body[data-theme="locklaunch"] { --accent:#64748b; --accent-2:#94a3b8; --accent-soft:rgba(100,116,139,.14); }
body[data-theme="sysdash"] { --accent:#0ea5e9; --accent-2:#22d3ee; --accent-soft:rgba(14,165,233,.14); }
body[data-theme="pockettools"] { --accent:#f97316; --accent-2:#fdba74; --accent-soft:rgba(249,115,22,.14); }
body[data-theme="torchkit"] { --accent:#fde047; --accent-2:#fef9c3; --accent-soft:rgba(253,224,71,.14); }
body[data-theme="ailearn"] { --accent:#7dd3fc; --accent-2:#c4b5fd; --accent-soft:rgba(125,211,252,.14); }
body[data-theme="aimath"] { --accent:#93c5fd; --accent-2:#d9f99d; --accent-soft:rgba(147,197,253,.14); }
body[data-theme="breath"] { --accent:#6ee7b7; --accent-2:#a5f3fc; --accent-soft:rgba(110,231,183,.14); }
.g-baby::before  { background: linear-gradient(140deg, #361928, #863f64 60%, #f472b6); }
.g-chengyu::before  { background: linear-gradient(140deg, #24330c, #5a7f1d 60%, #a3e635); }
.g-pocketledger::before  { background: linear-gradient(140deg, #0b2e22, #1d7454 60%, #34d399); }
.g-metronome::before  { background: linear-gradient(140deg, #37200d, #8a5021 60%, #fb923c); }
.g-mood::before  { background: linear-gradient(140deg, #2a1d37, #6a498b 60%, #c084fc); }
.g-birdcalc::before  { background: linear-gradient(140deg, #152437, #355b8a 60%, #60a5fa); }
.g-lovetreasure::before  { background: linear-gradient(140deg, #381f26, #8c4f5e 60%, #ff8fab); }
.g-skinstudio::before  { background: linear-gradient(140deg, #15332f, #348175 60%, #5eead4); }
.g-beads::before  { background: linear-gradient(140deg, #382427, #8b5a60 60%, #fda4af); }
.g-checkin::before  { background: linear-gradient(140deg, #10311c, #297a46 60%, #4ade80); }
.g-lifehacks::before  { background: linear-gradient(140deg, #372a08, #8a6914 60%, #fbbf24); }
.g-shiguang::before  { background: linear-gradient(140deg, #1c1f37, #474d88 60%, #818cf8); }
.g-travel::before  { background: linear-gradient(140deg, #0c2a37, #1f6888 60%, #38bdf8); }
.g-xiaolu::before  { background: linear-gradient(140deg, #362302, #875706 60%, #f59e0b); }
.g-accountkeeper::before  { background: linear-gradient(140deg, #212428, #515a65 60%, #94a3b8); }
.g-zilv::before  { background: linear-gradient(140deg, #0a2f2a, #197569 60%, #2dd4bf); }
.g-snake::before  { background: linear-gradient(140deg, #1d2d05, #49700c 60%, #84cc16); }
.g-tank::before  { background: linear-gradient(140deg, #231602, #593604 60%, #a16207); }
.g-lumen::before  { background: linear-gradient(140deg, #331b37, #804389 60%, #e879f9); }
.g-klotski::before  { background: linear-gradient(140deg, #371919, #883e3e 60%, #f87171); }
.g-loveguide::before  { background: linear-gradient(140deg, #37191d, #8a3e49 60%, #fb7185); }
.g-encphoto::before  { background: linear-gradient(140deg, #1f1436, #4c3387 60%, #8b5cf6); }
.g-darkbox::before  { background: linear-gradient(140deg, #04291c, #096647 60%, #10b981); }
.g-nocturne::before  { background: linear-gradient(140deg, #161635, #363885 60%, #6366f1); }
.g-prism::before  { background: linear-gradient(140deg, #243537, #5b868b 60%, #a5f3fc); }
.g-sealbox::before  { background: linear-gradient(140deg, #362302, #875706 60%, #f59e0b); }
.g-learnenglish::before  { background: linear-gradient(140deg, #152338, #34588c 60%, #5ea0ff); }
.g-learnjapanese::before  { background: linear-gradient(140deg, #360e15, #862334 60%, #f43f5e); }
.g-aqua::before  { background: linear-gradient(140deg, #01282f, #036475 60%, #06b6d4); }
.g-learnpinyin::before  { background: linear-gradient(140deg, #372d05, #8a700c 60%, #facc15); }
.g-locklaunch::before  { background: linear-gradient(140deg, #161a1f, #37404c 60%, #64748b); }
.g-sysdash::before  { background: linear-gradient(140deg, #032433, #085b80 60%, #0ea5e9); }
.g-pockettools::before  { background: linear-gradient(140deg, #371905, #893f0c 60%, #f97316); }
.g-torchkit::before  { background: linear-gradient(140deg, #383110, #8b7b27 60%, #fde047); }
.g-ailearn::before  { background: linear-gradient(140deg, #1c2e37, #45748b 60%, #7dd3fc); }
.g-aimath::before  { background: linear-gradient(140deg, #202b38, #516c8b 60%, #93c5fd); }
.g-breath::before  { background: linear-gradient(140deg, #183328, #3d7f65 60%, #6ee7b7); }
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro SC", "PingFang SC",
    "Noto Sans SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }

.container { width: min(var(--max-w), 92%); margin: 0 auto; }

::selection { background: var(--accent); color: #0b0d12; }

/* ============ Nav ============ */
.nav {
  position: fixed; inset: 0 0 auto 0; height: var(--nav-h); z-index: 100;
  display: flex; align-items: center;
  transition: background .35s, box-shadow .35s, backdrop-filter .35s;
}
.nav.scrolled {
  background: rgba(11, 13, 18, 0.72);
  backdrop-filter: saturate(160%) blur(18px);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  box-shadow: 0 1px 0 rgba(255,255,255,.07), 0 10px 40px rgba(0,0,0,.35);
}
.nav-inner {
  width: min(var(--max-w), 92%); margin: 0 auto;
  display: flex; align-items: center; gap: 28px;
}
.brand { display: flex; align-items: center; gap: 11px; font-weight: 700; font-size: 1.08rem; letter-spacing: .2px; }
.brand-logo {
  width: 36px; height: 36px; border-radius: 11px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  display: grid; place-items: center; box-shadow: 0 6px 20px var(--accent-soft);
}
.brand-logo svg { width: 20px; height: 20px; }
.brand small { display: block; font-size: .62rem; font-weight: 500; color: var(--text-3); letter-spacing: .12em; line-height: 1; margin-top: 2px; }

.nav-links { display: flex; gap: 6px; margin-left: auto; align-items: center; }
.nav-links a {
  padding: 8px 15px; border-radius: 999px; font-size: .92rem; color: var(--text-2);
  transition: color .25s, background .25s;
}
.nav-links a:hover, .nav-links a.active { color: var(--text); background: rgba(255,255,255,.07); }

.lang-btn {
  margin-left: 8px; padding: 7px 14px; border-radius: 999px;
  border: 1px solid var(--card-border); color: var(--text-2);
  font-size: .85rem; font-weight: 600; letter-spacing: .04em;
  transition: all .25s;
}
.lang-btn:hover { color: var(--text); border-color: var(--accent); background: var(--accent-soft); }

.nav-toggle { display: none; margin-left: auto; font-size: 1.5rem; padding: 6px 10px; color: var(--text-2); }

@media (max-width: 760px) {
  .nav-toggle { display: block; }
  .nav-links {
    position: fixed; top: var(--nav-h); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 4px;
    background: rgba(11,13,18,.96); backdrop-filter: blur(20px);
    padding: 16px 6vw 22px; border-bottom: 1px solid var(--card-border);
    transform: translateY(-12px); opacity: 0; pointer-events: none;
    transition: all .3s var(--ease);
  }
  .nav-links.open { transform: none; opacity: 1; pointer-events: auto; }
  .nav-links a { padding: 13px 16px; font-size: 1rem; }
  .lang-btn { margin: 8px 0 0 6px; width: max-content; }
}

/* ============ Hero (home) ============ */
.hero {
  position: relative; min-height: 92vh; display: flex; align-items: center;
  padding: calc(var(--nav-h) + 40px) 0 80px; overflow: hidden;
}
.aurora { position: absolute; inset: -30%; z-index: 0; filter: blur(90px); opacity: .55; pointer-events: none; }
.aurora span { position: absolute; border-radius: 50%; animation: drift 22s ease-in-out infinite alternate; }
.aurora span:nth-child(1) { width: 46vw; height: 46vw; left: 4%; top: 12%; background: radial-gradient(circle, #ff98384d, transparent 65%); }
.aurora span:nth-child(2) { width: 38vw; height: 38vw; right: 6%; top: 6%; background: radial-gradient(circle, #ffd75e3d, transparent 65%); animation-delay: -7s; }
.aurora span:nth-child(3) { width: 34vw; height: 34vw; right: 22%; bottom: 4%; background: radial-gradient(circle, #7c5cff33, transparent 65%); animation-delay: -13s; }
@keyframes drift {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(6%, -8%) scale(1.18); }
}
.grain {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .5;
  background-image: radial-gradient(rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, #000 30%, transparent 75%);
}

/* ---------- Dragon Ball decorations ---------- */
.hero-emblem {
  position: absolute; z-index: 1; left: 50%; top: 44%;
  transform: translate(-50%, -50%);
  width: min(560px, 86vw); aspect-ratio: 1;
  color: var(--accent); opacity: .07; pointer-events: none;
}
.db-orbs { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.db-orbs .orb {
  position: absolute; border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #ffe3a3, #ff9838 52%, #b64f0e 96%);
  box-shadow:
    0 0 34px rgba(255, 152, 56, .55),
    inset -6px -9px 14px rgba(80, 20, 0, .45),
    inset 5px 7px 10px rgba(255, 255, 255, .4);
  display: grid; place-items: center;
  animation: orbFloat 10s ease-in-out infinite;
}
.db-orbs .orb svg { width: 40%; height: 40%; }
.db-orbs .orb:nth-child(1) { left: 6%;  top: 20%;   width: 64px; height: 64px; }
.db-orbs .orb:nth-child(2) { right: 9%; top: 13%;  width: 48px; height: 48px; animation-delay: -2s; }
.db-orbs .orb:nth-child(3) { left: 15%; bottom: 20%; width: 40px; height: 40px; animation-delay: -4s; }
.db-orbs .orb:nth-child(4) { right: 18%; bottom: 27%; width: 58px; height: 58px; animation-delay: -6s; }
.db-orbs .orb:nth-child(5) { left: 43%; top: 9%;    width: 34px; height: 34px; animation-delay: -3s; }
.db-orbs .orb:nth-child(6) { right: 38%; top: 7%;   width: 26px; height: 26px; animation-delay: -5s; }
.db-orbs .orb:nth-child(7) { left: 27%; top: 30%;   width: 22px; height: 22px; animation-delay: -8s; opacity: .85; }
@keyframes orbFloat {
  50% { transform: translateY(-20px) rotate(8deg); }
}
@media (max-width: 760px) {
  .db-orbs .orb:nth-child(3), .db-orbs .orb:nth-child(4), .db-orbs .orb:nth-child(7) { display: none; }
  .db-orbs .orb:nth-child(1) { left: 4%; top: 16%; width: 46px; height: 46px; }
  .db-orbs .orb:nth-child(2) { right: 6%; top: 11%; width: 38px; height: 38px; }
}

.hero-inner { position: relative; z-index: 2; text-align: center; }
.hero-badge {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 18px; border-radius: 999px; margin-bottom: 30px;
  border: 1px solid var(--card-border); background: rgba(255,255,255,.05);
  font-size: .85rem; color: var(--text-2); letter-spacing: .03em;
  backdrop-filter: blur(8px);
}
.hero-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px var(--accent); animation: pulse 2.2s infinite; }
@keyframes pulse { 50% { opacity: .4; } }

.hero h1 {
  font-size: clamp(2.6rem, 6.4vw, 4.6rem); line-height: 1.14; font-weight: 800;
  letter-spacing: -.02em; margin-bottom: 26px;
}
.hero h1 .grad {
  background: linear-gradient(100deg, var(--accent), var(--accent-2) 55%, var(--accent));
  background-size: 200% auto; -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: shine 7s linear infinite;
}
@keyframes shine { to { background-position: 200% center; } }
.hero p.sub {
  max-width: 620px; margin: 0 auto 42px; font-size: clamp(1.02rem, 2vw, 1.2rem);
  color: var(--text-2);
}
.hero-cta { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 30px; border-radius: 999px; font-weight: 600; font-size: .98rem;
  transition: transform .25s var(--ease), box-shadow .25s, background .25s, border-color .25s;
}
.btn svg { width: 18px; height: 18px; }
.btn-primary { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #0b0d12; box-shadow: 0 10px 32px var(--accent-soft); }
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 16px 40px var(--accent-soft); }
.btn-ghost { border: 1px solid var(--card-border); color: var(--text-2); background: rgba(255,255,255,.03); }
.btn-ghost:hover { color: var(--text); border-color: var(--accent); transform: translateY(-3px); }
.btn-privacy {
  border: 1px solid var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}
.btn-privacy:hover {
  color: #0b0d12;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-color: transparent;
  transform: translateY(-3px);
  box-shadow: 0 10px 28px var(--accent-soft);
}

/* stats strip */
.stats { position: relative; z-index: 2; margin-top: 78px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.stat {
  background: var(--card); border: 1px solid var(--card-border); border-radius: 18px;
  padding: 22px 14px; text-align: center; backdrop-filter: blur(6px);
}
.stat b { display: block; font-size: 1.9rem; font-weight: 800; background: linear-gradient(135deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.stat span { font-size: .84rem; color: var(--text-3); }
@media (max-width: 760px) { .stats { grid-template-columns: repeat(2, 1fr); } }

/* ============ Sections ============ */
.section { padding: 110px 0; position: relative; }
.section-head { text-align: center; max-width: 640px; margin: 0 auto 64px; }
.section-kicker {
  display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: .22em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 14px;
}
.section-head h2 { font-size: clamp(1.9rem, 4vw, 2.7rem); font-weight: 800; letter-spacing: -.01em; margin-bottom: 16px; }
.section-head p { color: var(--text-2); font-size: 1.04rem; }

/* ============ Filter pills ============ */
.filters { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 50px; }
.filter {
  padding: 9px 20px; border-radius: 999px; font-size: .9rem; font-weight: 600;
  color: var(--text-2); border: 1px solid var(--card-border); background: rgba(255,255,255,.03);
  transition: all .25s;
}
.filter:hover { color: var(--text); border-color: var(--accent); }
.filter.active { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #0b0d12; border-color: transparent; }

/* ============ App cards ============ */
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 1000px) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .grid { grid-template-columns: 1fr; } }

.app-card {
  position: relative; border-radius: var(--radius); overflow: hidden;
  background: var(--card); border: 1px solid var(--card-border);
  transition: transform .4s var(--ease), box-shadow .4s, border-color .4s;
  display: flex; flex-direction: column;
}
.app-card:hover { transform: translateY(-8px); border-color: rgba(255,255,255,.2); box-shadow: 0 24px 60px rgba(0,0,0,.5); }
.app-card.hidden { display: none; }

.card-glow { height: 150px; position: relative; display: grid; place-items: center; }
.card-glow::before { content: ""; position: absolute; inset: 0; opacity: .85; }
.g-monkey::before  { background: linear-gradient(140deg, #0f3d33, #1b8a63 60%, #3ddba6); }
.g-mystery::before { background: linear-gradient(140deg, #241b4d, #6d28d9 60%, #a78bfa); }
.g-diary::before   { background: linear-gradient(140deg, #4a0f24, #be3455 60%, #fb7185); }
.g-script::before  { background: linear-gradient(140deg, #4a2506, #c2410c 60%, #fb923c); }
.g-hanzi::before   { background: linear-gradient(140deg, #4d1d0b, #dc2626 55%, #fbbf24); }
.g-tictac::before  { background: linear-gradient(140deg, #0b2447, #2563eb 60%, #7dd3fc); }
.g-match::before   { background: linear-gradient(140deg, #4a1035, #db2777 55%, #a5f3fc); }
.g-block::before   { background: linear-gradient(140deg, #06283d, #0891b2 60%, #22d3ee); }
.g-funbox::before  { background: linear-gradient(140deg, #4d3d06, #d97706 55%, #facc15); }
.card-glow::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 30% 0%, rgba(255,255,255,.28), transparent 55%);
}
.app-icon {
  position: relative; z-index: 2; width: 86px; height: 86px; border-radius: 24px;
  background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(10px); display: grid; place-items: center;
  box-shadow: 0 16px 40px rgba(0,0,0,.45);
  transform: translateY(38px); transition: transform .4s var(--ease);
}
.app-card:hover .app-icon { transform: translateY(34px) scale(1.06) rotate(-3deg); }
.app-icon svg { width: 46px; height: 46px; }

.card-body { padding: 52px 24px 24px; display: flex; flex-direction: column; flex: 1; }
.card-cat {
  align-self: flex-start; font-size: .72rem; font-weight: 700; letter-spacing: .1em;
  color: var(--accent); background: var(--accent-soft);
  padding: 4px 12px; border-radius: 999px; margin-bottom: 12px;
}
.card-body h3 { font-size: 1.28rem; font-weight: 700; margin-bottom: 4px; }
.card-body .en-name { font-size: .8rem; color: var(--text-3); letter-spacing: .05em; margin-bottom: 10px; }
.card-body p { font-size: .92rem; color: var(--text-2); flex: 1; margin-bottom: 18px; }
.card-actions { display: flex; gap: 10px; }
.card-actions a, .card-actions .soon {
  flex: 1; text-align: center; padding: 11px 0; border-radius: 13px; font-size: .88rem; font-weight: 600;
  transition: all .25s;
}
.card-link { border: 1px solid var(--card-border); color: var(--text-2); }
.card-link:hover { color: var(--text); border-color: var(--accent); background: var(--accent-soft); }
.card-store { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #0b0d12; }
.card-store:hover { filter: brightness(1.12); }
.card-actions .soon { background: var(--accent-soft); color: var(--accent-2); border: 1px solid var(--card-border); cursor: default; }

/* ============ Values (about / why) ============ */
.values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 900px) { .values { grid-template-columns: 1fr; } }
.value {
  padding: 34px 28px; border-radius: var(--radius);
  background: var(--card); border: 1px solid var(--card-border);
  transition: all .35s var(--ease);
}
.value:hover { transform: translateY(-6px); border-color: var(--accent); box-shadow: 0 20px 50px rgba(0,0,0,.4); }
.value-icon {
  width: 52px; height: 52px; border-radius: 16px; margin-bottom: 18px;
  background: var(--accent-soft); border: 1px solid var(--card-border);
  display: grid; place-items: center; color: var(--accent);
}
.value-icon svg { width: 26px; height: 26px; }
.value h3 { font-size: 1.1rem; margin-bottom: 8px; }
.value p { font-size: .92rem; color: var(--text-2); }

/* ============ App detail page ============ */
.app-hero {
  position: relative; padding: calc(var(--nav-h) + 70px) 0 90px; overflow: hidden;
}
.app-hero .hero-bg { position: absolute; inset: 0; opacity: .16; filter: blur(80px); pointer-events: none;
  background:
    radial-gradient(40% 60% at 18% 20%, var(--accent), transparent 70%),
    radial-gradient(45% 60% at 85% 25%, var(--accent-2), transparent 70%);
}
.app-hero-inner {
  position: relative; z-index: 2; display: grid;
  grid-template-columns: 1.15fr .85fr; gap: 60px; align-items: center;
}
.app-hero-inner .hero-cta { justify-content: flex-start; }
@media (max-width: 880px) {
  .app-hero-inner { grid-template-columns: 1fr; text-align: center; }
  .app-hero-inner .hero-cta { justify-content: center; }
}
.app-hero .app-icon-lg {
  width: 110px; height: 110px; border-radius: 30px; margin-bottom: 26px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  display: grid; place-items: center; color: #0b0d12;
  box-shadow: 0 24px 60px var(--accent-soft);
}
@media (max-width: 880px) { .app-hero .app-icon-lg { margin-inline: auto; } }
.app-hero .app-icon-lg svg { width: 56px; height: 56px; }
.app-hero h1 { font-size: clamp(2.1rem, 5vw, 3.3rem); font-weight: 800; letter-spacing: -.02em; margin-bottom: 8px; }
.app-hero .subtitle-en { color: var(--text-3); font-size: .95rem; letter-spacing: .1em; margin-bottom: 20px; }
.app-hero .lead { color: var(--text-2); font-size: 1.06rem; max-width: 560px; margin-bottom: 34px; }
@media (max-width: 880px) { .app-hero .lead { margin-inline: auto; } }
.meta-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 34px; }
.meta-chip {
  font-size: .8rem; color: var(--text-2); padding: 7px 14px; border-radius: 999px;
  border: 1px solid var(--card-border); background: rgba(255,255,255,.04);
}
.meta-chip b { color: var(--text); font-weight: 600; }
@media (max-width: 880px) { .meta-row { justify-content: center; } }

/* phone mockup */
.phone-wrap { display: grid; place-items: center; position: relative; }
.phone-wrap::before {
  content: ""; position: absolute; width: 320px; height: 320px; border-radius: 50%;
  background: radial-gradient(circle, var(--accent-soft), transparent 70%); filter: blur(30px);
}
.phone {
  position: relative; width: min(280px, 74vw); aspect-ratio: 9 / 19;
  border-radius: 44px; padding: 12px;
  background: linear-gradient(160deg, #2a2f3d, #10131b);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 40px 90px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.12);
  animation: float 7s ease-in-out infinite;
}
@keyframes float { 50% { transform: translateY(-14px); } }
.phone-screen {
  height: 100%; border-radius: 34px; overflow: hidden; position: relative;
  background: linear-gradient(170deg, #171b26, #0d0f16);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
}
.phone-screen svg.screen-art { width: 62%; height: auto; }
.phone-notch {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  width: 90px; height: 22px; border-radius: 999px; background: #05060a; z-index: 3;
}

/* features */
.features { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
@media (max-width: 820px) { .features { grid-template-columns: 1fr; } }
.feature {
  display: flex; gap: 18px; padding: 30px 28px; border-radius: var(--radius);
  background: var(--card); border: 1px solid var(--card-border);
  transition: all .35s var(--ease);
}
.feature:hover { border-color: var(--accent); transform: translateY(-5px); box-shadow: 0 18px 46px rgba(0,0,0,.4); }
.feature-num {
  flex: none; width: 44px; height: 44px; border-radius: 14px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #0b0d12;
  display: grid; place-items: center; font-weight: 800; font-size: 1.05rem;
}
.feature h3 { font-size: 1.05rem; margin-bottom: 6px; }
.feature p { font-size: .92rem; color: var(--text-2); }

/* CTA band */
.cta-band {
  position: relative; border-radius: 28px; overflow: hidden; text-align: center;
  padding: 70px 30px; border: 1px solid var(--card-border);
  background: radial-gradient(70% 130% at 50% 0%, var(--accent-soft), transparent 60%), var(--bg-soft);
}
.cta-band h2 { font-size: clamp(1.7rem, 4vw, 2.4rem); font-weight: 800; margin-bottom: 14px; }
.cta-band p { color: var(--text-2); margin-bottom: 34px; }

/* ============ Other pages ============ */
.page-hero { padding: calc(var(--nav-h) + 80px) 0 70px; text-align: center; position: relative; }
.page-hero .hero-bg { position: absolute; inset: -40% 0 auto; height: 130%; opacity: .14; filter: blur(90px); pointer-events: none;
  background: radial-gradient(50% 50% at 30% 40%, var(--accent), transparent 70%),
              radial-gradient(50% 50% at 72% 45%, var(--accent-2), transparent 70%);
}
.page-hero-inner { position: relative; z-index: 2; }
.page-hero h1 { font-size: clamp(2.2rem, 5.5vw, 3.4rem); font-weight: 800; letter-spacing: -.02em; margin-bottom: 18px; }
.page-hero p { max-width: 620px; margin: 0 auto; color: var(--text-2); font-size: 1.06rem; }

.about-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 60px; align-items: center; }
@media (max-width: 880px) { .about-grid { grid-template-columns: 1fr; } }
.about-grid h2 { font-size: 1.8rem; margin-bottom: 18px; }
.about-grid p { color: var(--text-2); margin-bottom: 16px; }
.about-card {
  padding: 40px 36px; border-radius: var(--radius);
  background: var(--card); border: 1px solid var(--card-border);
}
.about-card h3 { font-size: 1.1rem; margin-bottom: 22px; color: var(--accent); }
.about-row { display: flex; justify-content: space-between; padding: 13px 0; border-bottom: 1px dashed rgba(255,255,255,.09); font-size: .94rem; }
.about-row:last-child { border: none; }
.about-row span { color: var(--text-3); }
.about-row b { font-weight: 600; }

/* contact */
.contact-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; max-width: 860px; margin: 0 auto; }
@media (max-width: 760px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-card {
  padding: 40px 32px; text-align: center; border-radius: var(--radius);
  background: var(--card); border: 1px solid var(--card-border);
  transition: all .35s var(--ease);
}
.contact-card:hover { transform: translateY(-6px); border-color: var(--accent); }
.contact-card .value-icon { margin-inline: auto; }
.contact-card h3 { margin-bottom: 6px; }
.contact-card p { color: var(--text-3); font-size: .88rem; margin-bottom: 10px; }
.contact-card a.link { color: var(--accent); font-weight: 600; font-size: 1rem; word-break: break-all; }
.contact-card a.link:hover { text-decoration: underline; }

/* ============ Privacy policy pages ============ */
.lang-block.nb-hide { display: none; }

.privacy-doc { max-width: 840px; margin: 0 auto; }
.pp-card {
  padding: 44px 48px; border-radius: var(--radius);
  background: var(--card); border: 1px solid var(--card-border);
}
@media (max-width: 640px) { .pp-card { padding: 28px 22px; } }
.pp-card h2 { font-size: 1.18rem; margin: 30px 0 10px; }
.pp-card h2:first-child { margin-top: 0; }
.pp-card p { color: var(--text-2); font-size: .95rem; margin-bottom: 12px; }
.pp-card ul { margin: 0 0 16px 22px; }
.pp-card li { color: var(--text-2); font-size: .95rem; margin-bottom: 6px; }
.pp-card b, .pp-card strong { color: var(--text); font-weight: 600; }
.pp-card .pp-accent { color: var(--accent); }
a.pp-mail { color: var(--accent); font-weight: 600; }
a.pp-mail:hover { text-decoration: underline; }

/* privacy list (overview page) */
.pp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 900px) { .pp-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .pp-grid { grid-template-columns: 1fr; } }
.pp-item {
  display: flex; flex-direction: column; gap: 12px;
  padding: 26px 24px; border-radius: var(--radius);
  background: var(--card); border: 1px solid var(--card-border);
  transition: all .35s var(--ease);
}
.pp-item:hover { transform: translateY(-5px); border-color: var(--accent); box-shadow: 0 18px 46px rgba(0,0,0,.4); }
.pp-item .pp-app { display: flex; align-items: center; gap: 12px; }
.pp-item .pp-icon {
  flex: none; width: 46px; height: 46px; border-radius: 13px;
  background: rgba(0,0,0,.3); border: 1px solid var(--card-border);
  display: grid; place-items: center;
}
.pp-item .pp-icon svg { width: 27px; height: 27px; }
.pp-item h3 { font-size: 1.02rem; line-height: 1.3; }
.pp-item .en-name { font-size: .76rem; color: var(--text-3); letter-spacing: .05em; }
.pp-item .pp-note { font-size: .86rem; color: var(--text-2); }
.pp-item .pp-go { margin-top: auto; font-size: .88rem; font-weight: 600; color: var(--accent); }

/* ============ Footer ============ */
.footer { border-top: 1px solid var(--card-border); padding: 56px 0 40px; margin-top: 40px; }
.footer-inner { display: flex; flex-wrap: wrap; gap: 30px; justify-content: space-between; align-items: flex-start; }
.footer-brand p { color: var(--text-3); font-size: .88rem; margin-top: 14px; max-width: 320px; }
.footer-links { display: flex; gap: 26px; flex-wrap: wrap; }
.footer-links a { color: var(--text-2); font-size: .92rem; transition: color .2s; }
.footer-links a:hover { color: var(--accent); }
.footer-bottom {
  margin-top: 44px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.06);
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between;
  color: var(--text-3); font-size: .82rem;
}

/* ============ Reveal animation ============ */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.visible { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; } .reveal.d2 { transition-delay: .16s; }
.reveal.d3 { transition-delay: .24s; } .reveal.d4 { transition-delay: .32s; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}