/* ==========================================================================
   KAIJING / MINI PREVIEW — porcelain cloud
   ========================================================================== */
.mini-body {
  background:
    radial-gradient(700px 520px at 0% -6%, #ffe4da 0%, rgba(255, 228, 218, 0) 62%),
    radial-gradient(700px 540px at 105% 4%, #e6e0ff 0%, rgba(230, 224, 255, 0) 58%),
    linear-gradient(180deg, #fbfaff, #f4f1fb 44%, #eefbf7 100%);
  background-attachment: fixed;
}
.mini-nav {
  background: rgba(255, 255, 255, 0.74);
  border-bottom: 1px solid rgba(255, 255, 255, 0.86);
  box-shadow: 0 12px 40px -34px rgba(58, 45, 104, 0.38);
  backdrop-filter: blur(22px) saturate(1.1);
}
.mini-nav.is-scrolled { background: rgba(255, 255, 255, 0.9); }
.mini-nav-inner { height: 68px; }
.mini-actions .btn-primary {
  background: linear-gradient(135deg, #ff9678 0%, #ff6b57 48%, #f65b72 100%);
  border-color: rgba(255, 255, 255, 0.34);
  color: #fff;
  box-shadow: var(--shadow-glow), inset 0 1px 0 rgba(255, 255, 255, 0.34);
}
.mini-hero { padding-top: calc(var(--nav-h) + 66px); }
.mini-display,
.mini-h2,
.mini-h3,
.mini-tab h3,
.mini-link-card b,
.mini-cta h2 {
  font-family: var(--font-display);
  font-weight: 790;
  letter-spacing: -0.055em;
}
.mini-display { line-height: 0.96; }
.mini-display em {
  font-style: normal;
  color: transparent;
  background: linear-gradient(135deg, #ff9b78, #ff6b57 52%, #f45b7c);
  -webkit-background-clip: text;
  background-clip: text;
}
.mini-lead { color: var(--ink-3); }
.mini-kicker {
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.6);
  box-shadow: var(--shadow-xs), var(--shadow-inset);
}
.mini-brand-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}
.mini-brand-row span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px 5px 6px;
  border: 1px solid rgba(255, 255, 255, 0.94);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: var(--shadow-xs), var(--shadow-inset);
  font-size: 10px;
  font-weight: 600;
  color: var(--ink-3);
}
.mini-brand-row img { width: 22px; height: 22px; border-radius: 7px; object-fit: cover; }
.mini-specs {
  gap: 10px;
  border: 0;
}
.mini-specs > div {
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.94);
  border-left: 1px solid rgba(255, 255, 255, 0.94);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.62);
  box-shadow: var(--shadow-sm), var(--shadow-inset);
}
.mini-specs > div:first-child { border-left: 1px solid rgba(255, 255, 255, 0.94); }
.mini-specs b { font-family: var(--font-display); font-weight: 780; }
.mini-phone {
  border: 9px solid #262036;
  border-radius: 48px;
  background: #262036;
  box-shadow: 0 48px 100px -36px rgba(38, 32, 54, 0.58), inset 0 1px 0 rgba(255, 255, 255, 0.24);
}
.mini-phone iframe { border-radius: 39px; background: #fff; }
.mini-phone-notch { background: #1c1729; }
.mini-section { border: 0; }
.mini-section-tint {
  margin: 42px auto 0;
  width: min(var(--max), calc(100% - var(--pad-x) * 2));
  border: 1px solid rgba(255, 255, 255, 0.94);
  border-radius: 36px;
  background:
    radial-gradient(600px 400px at 86% 0%, rgba(255, 218, 203, 0.56), rgba(255, 218, 203, 0) 68%),
    linear-gradient(160deg, rgba(255, 255, 255, 0.8), rgba(248, 244, 255, 0.8));
  box-shadow: var(--shadow-md), var(--shadow-inset);
  backdrop-filter: blur(10px);
}
.mini-section-ink {
  margin: 42px auto 0;
  width: min(var(--max), calc(100% - var(--pad-x) * 2));
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 36px;
  background:
    radial-gradient(500px 340px at 84% 12%, rgba(255, 139, 113, 0.28), rgba(255, 139, 113, 0) 70%),
    radial-gradient(420px 320px at 10% 92%, rgba(141, 123, 246, 0.3), rgba(141, 123, 246, 0) 70%),
    linear-gradient(155deg, #3a3054 0%, #241e37 58%, #342a4c 100%);
  box-shadow: var(--shadow-lg);
}
.mini-section-head { align-items: flex-end; }
.mini-section-note { color: var(--ink-3); }
.mini-section-ink .mini-kicker { color: rgba(255, 255, 255, 0.55); background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.16); }
.mini-section-ink .mini-h2 { color: #fff; }
.mini-section-ink .mini-section-note { color: rgba(255, 255, 255, 0.62); }
.mini-tab-grid { gap: 14px; }
.mini-tab,
.mini-link-card,
.mini-flow-card,
.mini-code,
.mini-import-grid > div {
  border: 1px solid rgba(255, 255, 255, 0.94);
  border-radius: 22px;
  background: linear-gradient(165deg, #fff, #fbfaff);
  box-shadow: var(--shadow-sm), var(--shadow-inset);
  transition: transform 0.4s var(--spring), box-shadow 0.4s var(--ease);
}
.mini-tab:hover,
.mini-link-card:hover,
.mini-flow-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md), var(--shadow-inset); }
.mini-tab .mini-tab-icon,
.mini-link-card .mini-link-icon {
  border-radius: 14px;
  background: linear-gradient(135deg, #fff0ea, #ffe3ee);
  box-shadow: inset 0 1px 0 #fff;
}
.mini-tag { border-radius: 999px; border: 1px solid rgba(255,255,255,.9); background: rgba(255,255,255,.7); box-shadow: var(--shadow-xs); }
.mini-code { background: linear-gradient(155deg, #2d2740, #211c31); border-color: rgba(255,255,255,0.08); color: #efeaff; box-shadow: var(--shadow-md); }
.mini-import-grid > div { background: rgba(255,255,255,.6); }
.mini-cta {
  margin: 54px auto 0;
  width: min(var(--max), calc(100% - var(--pad-x) * 2));
  border: 1px solid rgba(255, 255, 255, 0.94);
  border-radius: 36px;
  background:
    radial-gradient(520px 360px at 82% 16%, rgba(255, 209, 191, 0.8), rgba(255, 209, 191, 0) 70%),
    radial-gradient(420px 320px at 8% 88%, rgba(202, 191, 255, 0.68), rgba(202, 191, 255, 0) 70%),
    linear-gradient(160deg, #fffdfb, #f7f3ff);
  box-shadow: var(--shadow-md), var(--shadow-inset);
}
.mini-footer { background: rgba(255, 255, 255, 0.42); border-top: 1px solid rgba(72, 60, 112, 0.08); }

@media (max-width: 900px) {
  .mini-nav {
    left: 10px;
    right: 10px;
    width: auto;
    top: 10px;
    border: 1px solid rgba(72, 60, 112, 0.1);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.86);
    box-shadow: 0 24px 54px -26px rgba(58, 45, 104, 0.42), inset 0 1px 0 #fff;
  }
  .mini-nav-inner { height: 58px; padding: 0 14px; }
  .mini-hero { padding-top: 96px; }
  .mini-specs { grid-template-columns: 1fr 1fr; }
  .mini-specs > div,
  .mini-specs > div:first-child { border: 1px solid rgba(255,255,255,0.94); }
  .mini-section-tint,
  .mini-section-ink,
  .mini-cta { border-radius: 28px; width: calc(100% - 24px); }
  .mini-section-head { flex-direction: column; align-items: flex-start; gap: 16px; }
}

@media (max-width: 560px) {
  .mini-display { font-size: clamp(2.6rem, 12vw, 3.8rem); }
  .mini-specs b { font-size: 30px; }
  .mini-phone { height: 690px; border-radius: 40px; border-width: 7px; }
  .mini-phone iframe { border-radius: 33px; }
  .mini-actions .btn { padding: 0 12px; font-size: 11px; }
}