:root {
  color-scheme: dark;
  --accent: #58e8ff;
  --accent-rgb: 88, 232, 255;
  --violet: #9b87ff;
  --green: #55e6b3;
  --ink: #030712;
  --panel: rgba(7, 19, 38, 0.82);
  --line: rgba(111, 193, 235, 0.17);
  --muted: rgba(205, 226, 240, 0.7);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  color: #f5fbff;
  background:
    radial-gradient(circle at 10% 5%, rgba(var(--accent-rgb), 0.12), transparent 27%),
    radial-gradient(circle at 91% 15%, rgba(147, 114, 255, 0.13), transparent 29%),
    linear-gradient(180deg, #030712 0%, #071120 50%, #030712 100%);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
main { padding-top: 74px; }

.detail-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(470px, 0.72fr);
  gap: clamp(46px, 6vw, 94px);
  align-items: center;
  min-height: 690px;
  padding: 72px max(5vw, calc((100vw - 1380px) / 2));
  overflow: hidden;
  border-bottom: 1px solid rgba(111, 193, 235, 0.13);
}
.detail-hero::before { position: absolute; inset: 0; opacity: 0.55; background-image: linear-gradient(rgba(var(--accent-rgb), 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--accent-rgb), 0.035) 1px, transparent 1px); background-size: 58px 58px; mask-image: linear-gradient(90deg, #000, transparent 92%); content: ""; pointer-events: none; }
.detail-hero-copy, .detail-visual { position: relative; z-index: 1; }
.breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 24px; color: rgba(190, 219, 235, 0.56); font-size: 12px; }
.breadcrumbs a:hover { color: var(--accent); }
.breadcrumbs i { color: rgba(var(--accent-rgb), 0.35); font-style: normal; }
.detail-kicker { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--accent); font: 800 11px/1.3 ui-monospace, Consolas, monospace; letter-spacing: 0.15em; }
.detail-kicker::before { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 13px rgba(85, 230, 179, 0.85); content: ""; }
.detail-hero h1 { max-width: 760px; margin: 22px 0 0; font-size: clamp(43px, 4.2vw, 68px); line-height: 1.08; letter-spacing: -0.045em; }
.detail-hero h1 em { color: transparent; background: linear-gradient(90deg, var(--accent), #8dcaff 52%, var(--violet)); background-clip: text; font-style: normal; }
.detail-lead { max-width: 720px; margin: 24px 0 0; color: rgba(215, 234, 246, 0.76); font-size: clamp(16px, 1.2vw, 19px); line-height: 1.9; }
.detail-actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 30px; }
.detail-actions a { display: inline-flex; min-height: 49px; align-items: center; justify-content: center; gap: 18px; padding: 0 22px; border: 1px solid rgba(var(--accent-rgb), 0.27); border-radius: 999px; font-size: 14px; font-weight: 850; transition: 0.22s ease; }
.detail-actions a:hover { transform: translateY(-2px); }
.detail-actions .primary { color: #03141f; background: linear-gradient(90deg, var(--accent), #91c9ff); box-shadow: 0 14px 32px rgba(var(--accent-rgb), 0.16); }
.detail-actions .secondary { background: rgba(var(--accent-rgb), 0.055); }
.detail-meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 27px 0 0; padding: 0; list-style: none; }
.detail-meta li { padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; color: rgba(218, 236, 247, 0.68); background: rgba(8, 24, 43, 0.6); font-size: 12px; }

.detail-visual { position: relative; min-height: 430px; padding: 15px; overflow: hidden; border: 1px solid rgba(var(--accent-rgb), 0.26); border-radius: 28px; background: linear-gradient(145deg, rgba(var(--accent-rgb), 0.08), rgba(8, 13, 34, 0.96)); box-shadow: 0 34px 90px rgba(0, 0, 0, 0.4), 0 0 55px rgba(var(--accent-rgb), 0.06); isolation: isolate; }
.detail-visual::before { position: absolute; z-index: -1; inset: 0; opacity: 0.35; background-image: linear-gradient(rgba(var(--accent-rgb), 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--accent-rgb), 0.06) 1px, transparent 1px); background-size: 30px 30px; content: ""; }
.detail-visual::after { position: absolute; top: -80px; right: 12px; left: 12px; height: 70px; opacity: 0; background: linear-gradient(180deg, transparent, rgba(var(--accent-rgb), 0.035) 70%, rgba(var(--accent-rgb), 0.24)); content: ""; animation: detail-scan 7s ease-in-out infinite; pointer-events: none; }
.visual-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 3px 4px 14px; color: rgba(224, 240, 249, 0.78); font-size: 12px; font-weight: 800; }
.visual-head span { display: flex; align-items: center; gap: 7px; }
.visual-head span::before { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px rgba(85, 230, 179, 0.82); content: ""; }
.visual-head small { color: rgba(173, 211, 231, 0.48); font: 800 9px/1 monospace; letter-spacing: 0.12em; }
.visual-frame { position: relative; height: 370px; overflow: hidden; border: 1px solid rgba(var(--accent-rgb), 0.15); border-radius: 19px; background: #071326; }
.visual-frame img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform 0.5s ease; }
.detail-visual:hover .visual-frame img { transform: scale(1.018); }
.detail-visual.is-app .visual-frame { background: linear-gradient(145deg, #0d2943, #10142e); }
.detail-visual.is-app .visual-frame img { object-fit: contain; padding: 15px; }
.detail-visual.is-wide .visual-frame img { object-fit: contain; background: #061020; }
.visual-badge { position: absolute; right: 29px; bottom: 28px; z-index: 2; padding: 8px 11px; border: 1px solid rgba(var(--accent-rgb), 0.35); border-radius: 999px; color: #e8fbff; background: rgba(3, 12, 27, 0.82); font-size: 10px; font-weight: 850; backdrop-filter: blur(12px); }

.detail-section { width: min(1380px, calc(100% - 40px)); margin: 0 auto; padding-top: 96px; }
.section-head { display: grid; grid-template-columns: 1fr minmax(320px, 500px); gap: 18px 66px; align-items: end; margin-bottom: 34px; }
.section-head small { grid-column: 1 / -1; color: var(--accent); font: 800 11px/1.3 monospace; letter-spacing: 0.14em; }
.section-head h2 { margin: 0; font-size: clamp(31px, 3vw, 48px); line-height: 1.16; letter-spacing: -0.035em; }
.section-head p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.82; }
.insight-grid, .feature-grid, .related-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; }
.insight-card, .feature-card, .related-card { position: relative; min-height: 210px; padding: 23px; overflow: hidden; border: 1px solid var(--line); border-radius: 19px; background: linear-gradient(145deg, rgba(var(--accent-rgb), 0.055), rgba(6, 16, 33, 0.84)); transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; }
.insight-card:hover, .feature-card:hover, .related-card:hover { border-color: rgba(var(--accent-rgb), 0.34); box-shadow: 0 17px 38px rgba(0, 0, 0, 0.2); transform: translateY(-3px); }
.card-number { display: inline-flex; align-items: center; gap: 7px; min-height: 30px; padding: 6px 9px; border: 1px solid rgba(var(--accent-rgb), 0.22); border-radius: 9px; color: var(--accent); background: rgba(var(--accent-rgb), 0.065); font: 800 11px/1 monospace; }
.card-number::before { width: 5px; height: 5px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; content: ""; }
.insight-card h3, .feature-card h3, .related-card h3 { margin: 25px 0 0; font-size: 20px; line-height: 1.35; }
.insight-card p, .feature-card p, .related-card p { margin: 10px 0 0; color: var(--muted); font-size: 14px; line-height: 1.75; }
.feature-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.feature-card { min-height: 235px; }
.feature-card ul { margin: 16px 0 0; padding: 0; list-style: none; }
.feature-card li { position: relative; margin-top: 8px; padding-left: 15px; color: rgba(221, 237, 247, 0.72); font-size: 13px; line-height: 1.55; }
.feature-card li::before { position: absolute; top: 7px; left: 0; width: 5px; height: 5px; border-radius: 50%; background: var(--green); content: ""; }
.process-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: 22px; background: rgba(5, 15, 31, 0.74); }
.process-strip article { position: relative; min-height: 145px; padding: 20px 16px; border: 1px solid rgba(var(--accent-rgb), 0.12); border-radius: 14px; background: rgba(var(--accent-rgb), 0.035); }
.process-strip article:not(:last-child)::after { position: absolute; top: 50%; right: -16px; z-index: 2; display: grid; width: 22px; height: 22px; place-items: center; border: 1px solid rgba(var(--accent-rgb), 0.23); border-radius: 50%; color: var(--accent); background: #071326; content: "→"; transform: translateY(-50%); font-size: 11px; }
.process-strip b { color: var(--accent); font: 850 14px/1 monospace; }
.process-strip strong { display: block; margin-top: 24px; font-size: 16px; }
.process-strip span { display: block; margin-top: 7px; color: rgba(200, 224, 238, 0.58); font-size: 11px; line-height: 1.55; }
.content-panel { padding: 28px; border: 1px solid var(--line); border-radius: 22px; background: rgba(6, 18, 36, 0.75); }
.content-panel p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.9; }
.content-panel p + p { margin-top: 14px; }
.keyword-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 0; padding: 18px 0 0; border-top: 1px solid var(--line); list-style: none; }
.keyword-list li { padding: 8px 10px; border-radius: 8px; color: rgba(220, 237, 247, 0.72); background: rgba(var(--accent-rgb), 0.055); font-size: 12px; }
.related-card { min-height: 190px; }
.related-card a { position: absolute; right: 22px; bottom: 20px; color: var(--accent); font-size: 13px; font-weight: 850; }
.faq-list { display: grid; gap: 10px; }
.faq-list details { border: 1px solid var(--line); border-radius: 15px; background: rgba(6, 18, 36, 0.75); }
.faq-list summary { padding: 19px 22px; cursor: pointer; color: #edf9ff; font-size: 16px; font-weight: 800; }
.faq-list details p { margin: 0; padding: 0 22px 20px; color: var(--muted); font-size: 14px; line-height: 1.8; }
.detail-cta { display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center; width: min(1420px, calc(100% - 28px)); margin: 96px auto 62px; padding: 42px clamp(26px, 5vw, 68px); border: 1px solid rgba(var(--accent-rgb), 0.22); border-radius: 26px; background: linear-gradient(120deg, rgba(var(--accent-rgb), 0.13), rgba(20, 20, 58, 0.94)); }
.detail-cta small { color: var(--accent); font: 800 10px/1.2 monospace; letter-spacing: 0.14em; }
.detail-cta h2 { margin: 13px 0 0; font-size: clamp(27px, 2.8vw, 42px); }
.detail-cta p { margin: 10px 0 0; color: var(--muted); font-size: 14px; line-height: 1.75; }
.detail-cta > a { display: flex; min-width: 190px; min-height: 51px; align-items: center; justify-content: center; padding: 0 23px; border-radius: 999px; color: #03141f; background: linear-gradient(90deg, var(--accent), #91c9ff); font-size: 15px; font-weight: 900; }
.detail-footer { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 94px; padding: 22px max(5vw, calc((100vw - 1380px) / 2)); border-top: 1px solid rgba(111, 193, 235, 0.12); background: rgba(2, 7, 15, 0.85); }
.detail-footer img { width: 172px; height: 38px; object-fit: contain; object-position: left; }
.detail-footer p, .detail-footer span { color: rgba(184, 212, 228, 0.53); font-size: 12px; }
.floating-contact { position: fixed; right: 16px; bottom: 28px; z-index: 30; display: flex; width: 50px; min-height: 116px; align-items: center; justify-content: center; padding: 12px 8px; border: 1px solid rgba(var(--accent-rgb), 0.35); border-radius: 22px; color: #eafcff; background: rgba(5, 19, 37, 0.88); box-shadow: 0 16px 38px rgba(0, 0, 0, 0.3); font-size: 12px; font-weight: 850; line-height: 1.35; text-align: center; writing-mode: vertical-rl; backdrop-filter: blur(15px); }
.floating-contact::before { width: 7px; height: 7px; margin-bottom: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 11px rgba(85, 230, 179, 0.88); content: ""; }
@keyframes detail-scan { 0%, 14% { opacity: 0; transform: translateY(0); } 22% { opacity: 0.75; } 74% { opacity: 0.16; } 84%, 100% { opacity: 0; transform: translateY(520px); } }

@media (max-width: 1120px) {
  .detail-hero { grid-template-columns: 1fr minmax(410px, 0.74fr); gap: 36px; }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .process-strip { grid-template-columns: repeat(3, 1fr); }
  .process-strip article:not(:last-child)::after { display: none; }
}
@media (max-width: 900px) {
  .detail-hero { grid-template-columns: 1fr; min-height: 0; padding: 70px 24px 62px; }
  .detail-visual { width: min(100%, 700px); justify-self: center; }
  .section-head { grid-template-columns: 1fr; }
  .section-head small { grid-column: auto; }
  .insight-grid, .related-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
  main { padding-top: 64px; }
  .detail-hero { padding: 54px 17px 52px; }
  .detail-hero h1 { font-size: clamp(38px, 10.6vw, 53px); }
  .detail-lead { font-size: 15px; }
  .detail-actions, .detail-actions a { width: 100%; }
  .detail-visual { min-height: 0; padding: 11px; border-radius: 21px; }
  .visual-frame { height: 260px; }
  .visual-badge { right: 21px; bottom: 21px; }
  .detail-section { width: min(100% - 28px, 680px); padding-top: 74px; }
  .section-head h2 { font-size: 34px; }
  .insight-grid, .feature-grid, .related-grid, .process-strip { grid-template-columns: 1fr; }
  .insight-card, .feature-card { min-height: 0; }
  .content-panel { padding: 22px 18px; }
  .detail-cta { grid-template-columns: 1fr; margin-top: 76px; border-radius: 22px; }
  .detail-cta > a { width: 100%; }
  .detail-footer { align-items: flex-start; flex-direction: column; padding: 27px 18px; }
  .detail-footer p { margin: 0; }
  .floating-contact { right: 10px; bottom: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .detail-visual::after { animation: none; }
  .detail-actions a, .visual-frame img, .insight-card, .feature-card, .related-card { transition: none; }
}