/* Iconfont */
@font-face {
  font-family: font_1256165_39hyv7290ha;
  src: url(https://at.alicdn.com/t/a/font_1256165_39hyv7290ha.eot);
  src: url(https://at.alicdn.com/t/a/font_1256165_39hyv7290ha.eot#iefix) format('embedded-opentype'),
    url(https://at.alicdn.com/t/a/font_1256165_39hyv7290ha.woff2) format('woff2'),
    url(https://at.alicdn.com/t/a/font_1256165_39hyv7290ha.woff) format('woff'),
    url(https://at.alicdn.com/t/a/font_1256165_39hyv7290ha.ttf) format('truetype');
}

html, body {
  font-family: 'font_1256165_39hyv7290ha', -apple-system, 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: #0c0c0c;
  color: #fff;
}
::selection { background: rgba(61,129,227,0.3); }

/* Shiny gradient text animation */
@keyframes shiny {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}
.animate-shiny { animation: shiny 6s linear infinite; }
.gradient-text {
  background-image: linear-gradient(to right,
    #091020 0%, #0B2551 12.5%, #A4F4FD 32.5%,
    #00d2ff 50%, #0B2551 67.5%, #091020 87.5%, #091020 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: url(#c3-noise);
}

/* Fade-in on load */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeUpLarge {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-in { opacity: 0; animation: fadeUp 0.8s cubic-bezier(.22,1,.36,1) forwards; }
.fade-in-large { opacity: 0; animation: fadeUpLarge 0.9s cubic-bezier(.22,1,.36,1) forwards; }

/* Liquid glass */
.liquid-glass {
  background: rgba(255,255,255,0.01);
  background-blend-mode: luminosity;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: none;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.1);
  position: relative;
  overflow: hidden;
}
.liquid-glass::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.4px;
  background: linear-gradient(180deg,
    rgba(255,255,255,0.45) 0%,
    rgba(255,255,255,0.15) 20%,
    rgba(255,255,255,0)    40%,
    rgba(255,255,255,0)    60%,
    rgba(255,255,255,0.15) 80%,
    rgba(255,255,255,0.45) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

/* Chat-style bubbles for feature examples */
.bubble-raw {
  background: linear-gradient(135deg, rgba(91,99,180,0.35), rgba(45,52,120,0.45));
  border: 1px solid rgba(164,244,253,0.15);
  color: rgba(255,255,255,0.85);
  border-radius: 18px;
  padding: 14px 16px;
  font-size: 13px;
  line-height: 1.55;
  box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 8px 30px rgba(11,37,81,0.25);
  position: relative;
}
.bubble-out {
  background: linear-gradient(135deg, rgba(20,32,60,0.85), rgba(11,37,81,0.7));
  border: 1px solid rgba(164,244,253,0.25);
  color: rgba(255,255,255,0.95);
  border-radius: 18px;
  padding: 16px 18px;
  font-size: 13px;
  line-height: 1.6;
  white-space: pre-line;
  box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 8px 30px rgba(0,0,0,0.35);
  position: relative;
}
.bubble-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; color: rgba(164,244,253,0.9);
  padding: 4px 10px; border-radius: 999px;
  background: rgba(0,210,255,0.08);
  border: 1px solid rgba(164,244,253,0.2);
  margin-bottom: 10px;
}
.bubble-tag.gray {
  color: rgba(255,255,255,0.55);
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.1);
}

/* Apple button hover chevron movement */
.apple-btn .chev { transition: transform .2s ease; }
.apple-btn:hover .chev { transform: translateX(1px); }

/* Waveform animation */
@keyframes wave {
  0%, 100% { transform: scaleY(0.4); }
  50%      { transform: scaleY(1); }
}
.wave-bar { animation: wave 1.2s ease-in-out infinite; transform-origin: center; }

/* Fn-key visual */
.fn-key {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border-radius: 8px;
  background: linear-gradient(180deg, #2a2a2e, #1a1a1d);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.08) inset,
    0 -1px 0 rgba(0,0,0,0.5) inset,
    0 6px 14px rgba(0,0,0,0.5);
  color: rgba(255,255,255,0.85);
  font-weight: 600; font-size: 13px;
  letter-spacing: 0.02em;
  position: relative;
}
.fn-key.pressed {
  background: linear-gradient(180deg, #0B2551, #091020);
  border-color: rgba(164,244,253,0.3);
  color: #A4F4FD;
  box-shadow:
    0 0 0 4px rgba(0,210,255,0.15),
    0 0 30px rgba(0,210,255,0.35),
    0 1px 0 rgba(164,244,253,0.2) inset;
}
.fn-glow {
  position: absolute; inset: -2px;
  border-radius: 10px;
  background: radial-gradient(closest-side, rgba(0,210,255,0.4), transparent 70%);
  filter: blur(8px); z-index: -1;
  animation: pulse 1.8s ease-in-out infinite;
}
@keyframes pulse {
  0%,100% { opacity: 0.6; transform: scale(1); }
  50%     { opacity: 1;   transform: scale(1.15); }
}

/* Pulsing red recording dot */
@keyframes recpulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50%     { opacity: 0.4; transform: scale(0.85); }
}
.rec-dot { animation: recpulse 1.2s ease-in-out infinite; }

/* Nice scrollbar */
.nice-scroll::-webkit-scrollbar { width: 6px; }
.nice-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 3px; }

/* ===== Hero brand block ===== */
.brand-mark {
  opacity: 0.30;
  color: #fff;
  font-size: 16px;
  font-family: 'PingFang SC', 'Inter', sans-serif;
  font-weight: 600;
  letter-spacing: 0.80px;
}
.brand-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 40px;
  /* transform: translateX(-36px); */
}
.brand-logo { display: block; width: 60px; height: 60px; }
.brand-title {
  color: #fff;
  font-size: 26px;
  font-family: 'PingFang TC', 'PingFang SC', 'Inter', sans-serif;
  font-weight: 500;
}
.hero-desc { margin-top: 60px; }

/* ===== Apple-style gradient download button ===== */
.apple-btn-grad {
  background: url('button-left.png') center/100% 100% no-repeat;
  border: none;
  box-shadow: 0px 8px 36px rgba(142, 149, 246, 0.45);
}

.android-btn-grad {
  background: url('button-right.png') center/100% 100% no-repeat;
  border: none;
  box-shadow: 0px 8px 36px rgba(142, 149, 246, 0.45);
}

/* ===== Platform links + QR popup ===== */
.platforms-row { margin-top: 40px; }
.qr-box { width: 144px; }
.qr-img { display: block; width: 128px; height: 128px; max-width: none; }