[hidden]{display:none!important}
.intro{min-height:100vh;background:#f8fafc;padding:28px clamp(20px,5vw,80px) 30px;color:var(--ink)}
.intro-inner{max-width:1280px;margin:auto}.intro-header{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:50px;padding-bottom:22px;border-bottom:1px solid var(--line)}
.intro-brand{display:flex;align-items:center;gap:12px;font-size:24px;font-weight:750;letter-spacing:.03em}.intro-brand small{display:block;font-size:10px;letter-spacing:.16em;color:var(--muted);margin-top:3px}.intro-tag{font-size:13px;color:var(--muted)}
.intro-hero{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center}.intro h1{font-size:clamp(34px,3.8vw,54px);line-height:1.28;letter-spacing:-.035em;margin:0 0 24px;font-weight:750}.intro h1 em{font-style:normal;color:var(--teal)}.intro-description{font-size:17px;line-height:1.9;color:var(--muted);margin:0 0 30px}.intro-start{display:flex;align-items:center;gap:18px;flex-wrap:wrap}.intro-start .primary{padding:15px 26px;font-size:16px;min-height:54px}.intro-start>span{color:var(--muted);font-size:13px}.intro-start .primary span{font-size:20px;color:inherit}
.intro-photo{margin:0;min-width:0}.intro-photo img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:14px}.intro-photo figcaption{font-size:12px;color:var(--muted);margin-top:10px}
.intro-problems{margin:40px 0 0;padding:26px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.pain-points{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;counter-reset:pain}.pain-points li{font-size:14px;line-height:1.9;color:var(--muted);padding:0;position:static}.pain-points li::before{content:none}.pain-points b{color:var(--ink);display:block;font-size:16px;margin-bottom:5px}
.intro-workflow{margin-top:40px}.architecture{margin:0;background:white;border:1px solid var(--line);border-radius:14px;padding:28px;color:var(--ink)}.architecture figcaption{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:22px;font-weight:650;margin-bottom:28px}.architecture figcaption span{font-size:13px;color:var(--muted);font-weight:400}.arch-flow{display:grid;grid-template-columns:1fr 24px 1fr 24px 1fr 24px 1.1fr;align-items:stretch;gap:10px}.arch-node{padding:16px;background:#f2f5fa;border-radius:10px;border:0;display:flex;flex-direction:column;justify-content:center}.arch-step{font-size:12px;font-weight:650;color:var(--muted);margin-bottom:12px}.arch-node b{display:block;font-size:14px;line-height:1.7;margin-bottom:7px}.arch-node small{display:block;font-size:12px;color:var(--muted);line-height:1.8}.arch-node.highlight{background:#eaf1fc}.arch-node.highlight b{color:var(--teal)}.arch-arrow{display:grid;place-items:center;color:var(--muted);font-size:22px}.arch-split{display:grid;grid-template-columns:1fr;gap:10px}.arch-split .arch-node{padding:12px 14px}.arch-node.critical{background:#fff0ee}.arch-node.critical b{color:#a12c2c}.arch-node.critical small{color:#854141}.arch-source{border-top:1px solid var(--line);margin:24px 0 0;padding-top:17px;font-size:12px;line-height:1.8;color:var(--muted)}
.intro-cases{display:grid;grid-template-columns:.8fr 1.2fr;gap:52px;align-items:start;margin-top:44px}.intro-cases-head h2{font-size:26px;margin:0 0 12px;letter-spacing:-.02em}.intro-cases-head p{font-size:13px;color:var(--muted);margin:0 0 22px}.intro-cases-head img{width:100%;height:170px;object-fit:cover;border-radius:12px;display:block}.case-grid{display:grid;gap:0;border-top:1px solid var(--line)}.case-card{width:100%;text-align:left;display:flex;gap:18px;align-items:center;border:0;border-bottom:1px solid var(--line);background:transparent;border-radius:0;padding:22px 12px;color:var(--ink);transition:background .18s}.case-card:hover{background:#eaf1fc}.case-grade{flex-shrink:0;display:grid;place-content:center;text-align:center;width:58px;min-height:62px;border-radius:10px;background:#eaf5ef;color:#276449;font-size:30px;font-weight:750;line-height:1}.case-grade small{font-size:11px;margin-top:7px;font-weight:400}.case-card.caution .case-grade{background:#fff2de;color:#8e5109}.case-card.critical .case-grade{background:#ffebe8;color:#a12c2c;font-size:21px}.case-copy{flex:1;min-width:0}.case-copy b{font-size:17px;display:block;margin-bottom:5px}.case-copy small{font-size:13px;line-height:1.7;color:var(--muted);display:block}.case-arrow{color:var(--teal);font-size:22px}.intro-foot{border-top:1px solid var(--line);padding-top:22px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:40px;color:var(--muted);font-size:12px;line-height:1.8}
.demo-controls{margin:16px 36px 0;padding:16px 20px;border:1px solid var(--line);border-radius:12px;background:white}.demo-control-head{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:12px}.demo-control-head b{font-size:14px}.demo-control-head span{font-size:12px;color:var(--muted)}.demo-case-buttons{display:flex;gap:8px;flex-wrap:wrap}.demo-case-buttons button{font-size:13px;min-height:44px;padding:9px 14px;border:1px solid var(--line);border-radius:8px;background:#f7f9fc;color:var(--ink);cursor:pointer}.demo-case-buttons button:hover{background:#eaf1fc}.demo-case-buttons button[aria-pressed=true]{background:var(--teal);color:white;border-color:var(--teal)}.demo-progress{margin-top:15px;border-top:1px solid var(--line);padding-top:15px;display:flex;justify-content:space-between;gap:14px;align-items:center;flex-wrap:wrap}.demo-progress p{font-size:14px;margin:0;line-height:1.8}.demo-progress small{display:block;color:var(--muted);font-size:13px}.demo-progress-actions{display:flex;gap:8px;flex-wrap:wrap}.demo-notice{margin:0 0 12px;padding:14px;border:1px solid var(--line);border-radius:10px;background:#edf3fc;color:var(--teal-dark);font-size:13px;line-height:1.8}
@media(max-width:1100px){.intro-hero{gap:30px}.intro-description{font-size:15px}.desktop-break{display:none}.arch-flow{grid-template-columns:1fr 24px 1fr}.arch-flow>.arch-arrow:nth-child(4){display:none}.arch-flow>.arch-node.highlight{grid-column:1}.architecture{padding:24px}.arch-flow>.arch-node,.arch-flow>.arch-split{min-height:150px}.intro-cases{gap:32px}.demo-controls{margin-left:24px;margin-right:24px}}
@media(max-width:720px){.intro{padding:20px}.intro-header{gap:14px;margin-bottom:30px;padding-bottom:18px;align-items:flex-start}.intro-brand{font-size:21px}.intro-tag{font-size:11px;max-width:135px;text-align:right;line-height:1.8}.intro-hero{grid-template-columns:1fr;gap:26px}.intro h1{font-size:36px;margin-bottom:18px}.intro-description{font-size:15px;margin-bottom:24px}.intro-start{gap:12px}.intro-photo img{max-height:290px}.intro-problems{margin-top:30px;padding:24px 0}.pain-points{grid-template-columns:1fr;gap:20px}.pain-points b{margin-bottom:3px}.intro-workflow{margin-top:30px}.architecture{padding:22px 18px}.architecture figcaption{font-size:19px;display:block;margin-bottom:22px}.architecture figcaption span{display:block;font-size:12px;margin-top:7px}.arch-flow{grid-template-columns:1fr;gap:8px}.arch-flow>.arch-arrow:nth-child(4){display:grid}.arch-flow>.arch-node,.arch-flow>.arch-split{min-height:0}.arch-arrow{height:24px;font-size:0}.arch-arrow:before{content:'↓';font-size:20px}.arch-node{padding:18px}.arch-step{margin-bottom:5px}.arch-node small br{display:none}.arch-split{grid-template-columns:1fr 1fr;gap:10px}.intro-cases{grid-template-columns:1fr;gap:20px;margin-top:32px}.intro-cases-head h2{font-size:24px}.intro-cases-head img{display:none}.intro-cases-head p{margin-bottom:0}.case-card{padding:20px 4px;gap:15px}.case-copy b{font-size:16px}.case-copy small{font-size:12px}.intro-foot{display:block;margin-top:30px}.intro-foot span{display:block;margin-top:6px}.demo-controls{margin:12px 16px 0}.demo-control-head{gap:5px}.demo-case-buttons{gap:6px}.demo-case-buttons button{font-size:12px;padding:8px 10px}}
@media(prefers-reduced-motion:reduce){.case-card{transition:none}}
@media print{.intro,.demo-controls,#open-intro{display:none!important}}