/* ============================================================
   Case pages
   ============================================================ */
.case-page .header { position: fixed; }
.case-page main { padding-top: 0; }
@media (max-width: 900px) {
  .case-page .nav { position: static; transform: none; opacity: 1; pointer-events: auto; flex-direction: row; gap: 14px; background: none; backdrop-filter: none; }
  .case-page .nav a:not(.btn) { font-size: 14px; font-family: var(--font-body); font-weight: 500; color: var(--text-2); }
  .case-page .nav a.hide-m { display: none; }
  .case-page .nav a { white-space: nowrap; }
  .case-page .nav__cta { margin-top: 0; }
}
@media (max-width: 480px) {
  .case-page .logo { font-size: 15px; }
  .case-page .header__inner { gap: 8px; }
  .case-page .nav { gap: 10px; }
  .case-page .nav__cta { padding: 9px 12px; font-size: 13px; }
}

.cp-hero { position: relative; z-index: 1; padding: 150px 0 60px; overflow: hidden; }
.cp-hero::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(700px 400px at 10% 0%, rgba(124, 92, 255, 0.22), transparent 60%),
    radial-gradient(600px 400px at 90% 20%, rgba(56, 211, 255, 0.12), transparent 60%);
}
.cp-hero__grid { display: grid; grid-template-columns: 1.3fr 0.7fr; gap: 48px; align-items: end; }
.cp-hero h1 { font-size: clamp(30px, 4.2vw, 52px); font-weight: 700; margin: 0 0 22px; }
.cp-hero .lead { font-size: 18px; color: var(--text-2); max-width: 760px; margin-bottom: 28px; }
.cp-hero .case__tags { margin-bottom: 20px; }
.cp-actions { display: flex; gap: 12px; flex-wrap: wrap; }

.cp-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cp-fact {
  padding: 18px 20px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border);
}
.cp-fact b { display: block; font-family: var(--font-display); font-size: 22px; margin-bottom: 4px;
  background: var(--gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cp-fact span { font-size: 13px; color: var(--text-3); }

/* ---- Viewer ---- */
.cp-viewer { position: relative; z-index: 1; padding: 40px 0 90px; }
.cp-viewer__head { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 22px; }
.cp-viewer__head h2 { font-size: 26px; }
.cp-viewer__head p { color: var(--text-3); font-size: 14px; margin-top: 6px; }
.seg { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); gap: 4px; }
.seg button { padding: 8px 16px; border-radius: 999px; font-size: 14px; font-weight: 500; color: var(--text-2); transition: all 0.2s; }
.seg button:hover { color: var(--text); }
.seg button.is-active { background: var(--text); color: var(--bg); }
.seg button[disabled] { opacity: 0.35; cursor: not-allowed; }

.cp-layout { display: grid; grid-template-columns: 260px 1fr; gap: 20px; align-items: start; }
.cp-list { position: sticky; top: 88px; display: flex; flex-direction: column; gap: 4px; max-height: calc(100vh - 110px); overflow: auto; padding-right: 4px; }
.cp-list__title { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); padding: 8px 12px 6px; }
.cp-list button {
  text-align: left; padding: 11px 14px; border-radius: 10px; font-size: 14px; font-weight: 500;
  color: var(--text-2); border: 1px solid transparent; transition: all 0.2s; display: flex; justify-content: space-between; gap: 8px;
}
.cp-list button small { color: var(--text-3); font-weight: 400; font-size: 12px; white-space: nowrap; }
.cp-list button:hover { background: var(--surface); color: var(--text); }
.cp-list button.is-active { background: var(--surface-2); border-color: var(--border-strong); color: var(--text); }
.cp-list button > span { flex: 1; }
.cp-list button.is-sub { padding-left: 22px; font-size: 13px; }
.cp-list button.is-sub::before { content: '↳'; color: var(--text-3); margin-right: 8px; }
.cp-viewer { scroll-margin-top: 70px; }

.frame {
  border-radius: 16px; border: 1px solid var(--border-strong); background: #0d0f16;
  overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,0.5);
}
.frame__bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: #171a24; border-bottom: 1px solid var(--border); }
.frame__dots { display: flex; gap: 6px; }
.frame__dots i { width: 11px; height: 11px; border-radius: 50%; background: #3a3f52; }
.frame__dots i:nth-child(1) { background: #ff5f57; } .frame__dots i:nth-child(2) { background: #febc2e; } .frame__dots i:nth-child(3) { background: #28c840; }
.frame__url { flex: 1; font-size: 12px; color: var(--text-3); background: #0d0f16; border-radius: 8px; padding: 6px 12px; font-family: ui-monospace, monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.frame__open { font-size: 12px; color: var(--accent-2); white-space: nowrap; }
.frame__open:hover { color: var(--text); }
.frame__body { position: relative; height: min(78vh, 820px); overflow: auto; background: #fff; scroll-behavior: smooth; }
.frame__body img { display: block; width: 100%; height: auto; }
.frame__body iframe { width: 100%; height: 100%; border: 0; display: block; }
.frame__hint { padding: 8px 14px; font-size: 12px; color: var(--text-3); background: #171a24; border-top: 1px solid var(--border); }
.frame--mobile { width: 400px; margin: 0 auto; border-radius: 34px; border: 8px solid #1c1f2a; }
.frame--mobile .frame__bar { justify-content: center; }
.frame--mobile .frame__body { height: min(78vh, 820px); }
.frame--mobile .frame__url { display: none; }
.frame__loading { position: absolute; inset: 0; display: grid; place-items: center; color: #888; font-size: 14px; background: #fff; }

.frame__body.is-demo { background: #f4f5f8; }

/* ---- Details ---- */
.cp-details { position: relative; z-index: 1; padding: 90px 0; background: var(--bg-2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.cp-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.cp-col { padding: 28px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); }
.cp-col h3 { font-size: 18px; margin-bottom: 16px; }
.cp-col ul { display: flex; flex-direction: column; gap: 10px; }
.cp-col li { position: relative; padding-left: 22px; font-size: 15px; color: var(--text-2); }
.cp-col li::before { content: ''; position: absolute; left: 0; top: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--gradient); }
.cp-col p { color: var(--text-2); font-size: 15px; margin-bottom: 12px; }

.cp-nav { position: relative; z-index: 1; padding: 60px 0; }
.cp-nav__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.cp-nav a { display: block; padding: 24px 28px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); transition: border-color 0.2s, transform 0.3s var(--ease); }
.cp-nav a:hover { border-color: var(--border-strong); transform: translateY(-3px); }
.cp-nav a span { display: block; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); margin-bottom: 8px; }
.cp-nav a b { font-family: var(--font-display); font-size: 17px; font-weight: 600; }
.cp-nav a.next { text-align: right; }

.demo-note {
  display: flex; gap: 12px; align-items: flex-start; padding: 14px 18px; border-radius: 12px; margin-bottom: 22px;
  background: rgba(124, 92, 255, 0.1); border: 1px solid rgba(124, 92, 255, 0.35); font-size: 14px; color: var(--text-2);
}
.demo-note b { color: var(--text); }

@media (max-width: 1000px) {
  .cp-hero__grid { grid-template-columns: 1fr; }
  .cp-cols { grid-template-columns: 1fr; }
  .cp-layout { grid-template-columns: 1fr; }
  .cp-list { position: static; max-height: none; flex-direction: row; flex-wrap: wrap; }
  .cp-list__title { width: 100%; }
  .cp-list button.is-sub { padding-left: 14px; }
  .cp-list button.is-sub::before { content: ''; }
}
@media (max-width: 640px) {
  .cp-hero { padding: 110px 0 40px; }
  .cp-facts { grid-template-columns: 1fr 1fr; }
  .frame--mobile { width: 100%; }
  .cp-nav__grid { grid-template-columns: 1fr; }
  .frame__body { height: 70vh; }
}