@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&display=swap');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root { --red:#CC1A1A; --red-dk:#a81414; }

body {
  font-family:'DM Sans','PingFang TC','Microsoft JhengHei',sans-serif;
  color:#1a1a1a;
  min-height:100vh;
  padding-top:64px;
  padding-bottom:50px;
}

/* ── Tongle Lab Navbar (integrated) ── */
.tl-nav {
  position:fixed; top:0; left:0; right:0; z-index:9000;
  height:64px;
  background:#fff;
  border-bottom:1px solid rgba(0,0,0,.07);
  box-shadow:0 2px 16px rgba(0,0,0,.06);
}
.tl-nav-inner {
  max-width:1240px; margin:0 auto;
  height:100%; padding:0 24px;
  display:flex; align-items:center; gap:16px;
}
.tl-logo { flex-shrink:0; line-height:0; }
.tl-logo img { width:100px; height:auto; display:block; }
.tl-breadcrumb {
  flex:1; display:flex; align-items:center; gap:8px;
  font-size:13px; color:#aaa; overflow:hidden;
}
.tl-breadcrumb a {
  color:#aaa; text-decoration:none; white-space:nowrap;
  transition:color .18s;
}
.tl-breadcrumb a:hover { color:var(--red); }
.tl-breadcrumb .bc-sep { opacity:.4; }
.tl-breadcrumb .bc-current { color:#555; font-weight:500; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.demo-badge {
  flex-shrink:0;
  background:rgba(204,26,26,.09);
  color:var(--red);
  font-size:11px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase;
  padding:3px 9px; border-radius:4px;
  border:1px solid rgba(204,26,26,.2);
}
.tl-nav-links {
  display:flex; align-items:center; gap:20px;
  font-size:13.5px;
}
.tl-nav-links a {
  color:#555; text-decoration:none; font-weight:500;
  white-space:nowrap; transition:color .18s;
}
.tl-nav-links a:hover { color:var(--red); }
.tl-cta {
  background:var(--red); color:#fff;
  text-decoration:none;
  padding:9px 18px; border-radius:7px;
  font-size:13.5px; font-weight:700;
  white-space:nowrap; transition:background .18s;
  flex-shrink:0;
}
.tl-cta:hover { background:var(--red-dk); }


/* ── Toast (left) ── */
.toast {
  position:fixed; bottom:24px; left:24px; z-index:9999;
  background:#1a1a1a; color:#fff;
  padding:12px 20px; border-radius:8px;
  font-size:14px; font-weight:500;
  display:flex; align-items:center; gap:8px;
  box-shadow:0 8px 24px rgba(0,0,0,.2);
  transform:translateY(80px); opacity:0;
  transition:all .35s cubic-bezier(.34,1.56,.64,1);
}
.toast.show { transform:translateY(0); opacity:1; }
.toast.success { background:#15803d; }

/* ── Footer (fixed bottom) ── */
.tl-footer {
  position:fixed; bottom:0; left:0; right:0; z-index:7000;
  height:50px;
  background:#111; border-top:1px solid rgba(255,255,255,.08);
}
.tl-footer-inner {
  max-width:1240px; margin:0 auto; padding:0 24px;
  height:100%;
  display:flex; align-items:center; justify-content:space-between;
}
.tl-footer-left { display:flex; align-items:center; gap:12px; }
.tl-footer-left img { width:64px; height:auto; opacity:.85; }
.tl-footer-copy { font-size:12px; color:#fff; }
.tl-footer-right { display:flex; align-items:center; gap:7px; font-size:12px; color:#fff; }
.status-dot-sm {
  width:6px; height:6px; border-radius:50%; background:#22c55e;
  box-shadow:0 0 0 2px rgba(34,197,94,.2);
  animation:pdot 2s ease-in-out infinite;
}
@keyframes pdot { 0%,100%{opacity:1} 50%{opacity:.45} }

/* ── Floating CTA Card (right) ── */
.float-card {
  position:fixed; bottom:74px; right:24px; z-index:8000;
  background:#fff; border-radius:14px;
  border:1px solid rgba(0,0,0,.07);
  box-shadow:0 8px 32px rgba(0,0,0,.13), 0 2px 8px rgba(0,0,0,.05);
  padding:17px 18px 18px; width:226px;
  transform:translateY(18px); opacity:0; pointer-events:none;
  transition:transform .4s cubic-bezier(.34,1.56,.64,1), opacity .3s ease;
}
.float-card.show { transform:translateY(0); opacity:1; pointer-events:all; }
.float-card-top {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:9px;
}
.float-brand {
  font-size:10.5px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--red);
}
.float-close {
  background:none; border:none; cursor:pointer;
  color:#ccc; font-size:13px; font-family:inherit;
  width:22px; height:22px; border-radius:5px;
  display:flex; align-items:center; justify-content:center;
  transition:background .15s, color .15s;
}
.float-close:hover { background:#f0f0f0; color:#555; }
.float-title { font-size:14.5px; font-weight:700; line-height:1.4; margin-bottom:4px; }
.float-sub { font-size:12px; color:#bbb; margin-bottom:13px; }
.float-cta {
  display:block; background:var(--red); color:#fff;
  text-decoration:none; text-align:center;
  padding:10px 14px; border-radius:8px;
  font-size:13px; font-weight:700;
  transition:background .18s;
}
.float-cta:hover { background:var(--red-dk); }

/* ── CTA Section ── */
.case-cta {
  background:#111;
  color:#fff;
  padding:64px 24px;
  text-align:center;
}
.case-cta-label {
  font-size:11.5px; font-weight:700;
  letter-spacing:.15em; text-transform:uppercase;
  color:var(--red); margin-bottom:14px;
}
.case-cta h2 { font-size:26px; font-weight:700; margin-bottom:10px; }
.case-cta p { color:rgba(255,255,255,.55); font-size:14.5px; margin-bottom:26px; }
.case-cta-btn {
  display:inline-block;
  background:var(--red); color:#fff;
  text-decoration:none;
  padding:13px 30px; border-radius:8px;
  font-size:15px; font-weight:700;
  transition:background .2s, transform .2s;
}
.case-cta-btn:hover { background:var(--red-dk); transform:translateY(-2px); }
.outcome-strip {
  display:flex; justify-content:center; gap:48px;
  margin-top:36px; padding-top:28px;
  border-top:1px solid rgba(255,255,255,.08);
  flex-wrap:wrap;
}
.outcome-item { text-align:center; }
.outcome-val { display:block; font-size:26px; font-weight:700; color:var(--red); }
.outcome-lbl { font-size:12.5px; color:rgba(255,255,255,.45); margin-top:3px; }

/* ── Shared UI atoms ── */
.spin {
  display:inline-block; width:16px; height:16px;
  border:2px solid rgba(255,255,255,.3);
  border-top-color:#fff; border-radius:50%;
  animation:spin .7s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }

.cursor-blink {
  display:inline-block; width:2px; height:1em;
  background:currentColor; margin-left:2px;
  vertical-align:text-bottom;
  animation:blink .7s step-end infinite;
}
@keyframes blink { 50% { opacity:0; } }

/* ── Guide tip ── */
.guide-tip {
  background:rgba(204,26,26,.07);
  border:1px solid rgba(204,26,26,.2);
  border-radius:6px;
  padding:6px 12px;
  font-size:12.5px; color:var(--red); font-weight:500;
}

/* ── Other cases section ── */
.other-cases { margin-top:22px; }
.other-cases-hd {
  font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:#999; margin-bottom:12px;
}
.case-cards { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.case-card {
  background:#fff; border-radius:9px; border:1px solid #eaeaea;
  padding:16px 18px; text-decoration:none; color:inherit;
  display:block; transition:box-shadow .2s, transform .2s, border-color .2s;
}
.case-card:hover { box-shadow:0 4px 18px rgba(0,0,0,.10); transform:translateY(-2px); border-color:#ccc; }
.case-card-icon { font-size:22px; margin-bottom:8px; }
.case-card-title { font-size:14px; font-weight:700; margin-bottom:4px; }
.case-card-desc { font-size:12.5px; color:#888; line-height:1.6; margin-bottom:10px; }
.case-card-tags { display:flex; flex-wrap:wrap; gap:5px; }
.case-tag {
  font-size:11px; font-weight:600; padding:2px 8px; border-radius:100px;
  background:#f0f4ff; color:#1d4ed8;
}
.case-card-link {
  display:inline-flex; align-items:center; gap:4px;
  margin-top:11px; font-size:12.5px; font-weight:700;
  color:var(--red);
}