[hidden]{display:none!important}
.intro{min-height:100vh;background:radial-gradient(ellipse at 85% 10%,#dceee8 0,transparent 45%),#f5f8f6;padding:30px clamp(22px,5vw,84px) 24px;color:var(--ink)}
.intro-inner{max-width:1320px;margin:auto}
.intro-header{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:48px}
.intro-brand{display:flex;align-items:center;gap:12px;font-size:24px;font-weight:800;letter-spacing:.03em}
.intro-brand small{display:block;font-size:9px;letter-spacing:.21em;color:var(--muted);margin-top:3px}
.intro-tag{font-size:12px;color:var(--teal-dark);background:#fff9;border:1px solid #cbdfd7;border-radius:30px;padding:8px 15px}
.intro-hero{display:grid;grid-template-columns:1.02fr 1fr;gap:60px;align-items:center}
.intro-kicker{font-size:11px;letter-spacing:.16em;font-weight:800;color:var(--teal);margin:0 0 17px}
.intro h1{font-size:clamp(32px,3.5vw,50px);line-height:1.2;letter-spacing:-.04em;margin:0 0 24px;font-weight:800}
.intro h1 em{font-style:normal;color:var(--teal)}
.pain-points{list-style:none;padding:0;margin:0 0 24px;display:grid;gap:12px;counter-reset:pain}
.pain-points li{counter-increment:pain;position:relative;padding-left:35px;font-size:14px;line-height:1.8;color:var(--muted)}
.pain-points li::before{content:'0' counter(pain);position:absolute;left:0;top:0;color:var(--teal);font-size:11px;font-weight:800;line-height:25px}
.pain-points b{color:var(--ink)}
.intro-start{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.intro-start .primary{padding:15px 27px;border-radius:12px;font-size:16px;box-shadow:0 6px 16px #0a786b22}
.intro-start span{color:var(--muted);font-size:12px}
.architecture{margin:0;background:var(--navy);border:1px solid #254b53;border-radius:23px;padding:25px 27px;color:#fff;box-shadow:0 20px 45px #133c4415;position:relative}
.architecture figcaption{display:flex;justify-content:space-between;gap:12px;align-items:center;font-size:17px;font-weight:700;margin-bottom:22px}
.architecture figcaption span{font-size:9px;font-weight:500;color:#9dc7bf;letter-spacing:.13em}
.arch-node{border:1px solid #4c7279;border-radius:11px;padding:12px 16px;background:#ffffff09}
.arch-node b{display:block;font-size:14px;margin:0 0 4px}
.arch-node small{display:block;font-size:11px;color:#bdd2d4;line-height:1.5}
.arch-node.highlight{border-color:#8ed7be;background:#21645e}
.arch-arrow{text-align:center;color:#88b0ac;height:24px;line-height:24px;font-size:17px}
.arch-split{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.arch-node.critical{border-color:#ce958b;background:#634445}
.arch-node.critical small{color:#efd6d1}
.arch-source{border-top:1px solid #46606a;margin:17px 0 0;padding-top:13px;color:#bdd2d4;font-size:11px;line-height:1.7}
.intro-cases{margin-top:42px}
.intro-cases-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:14px}
.intro-cases h2{font-size:19px;margin:0}
.intro-cases-head p{font-size:12px;color:var(--muted);margin:0}
.case-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}
.case-card{text-align:left;display:flex;gap:16px;align-items:center;border:1px solid #d5e2dd;background:#fff;border-radius:14px;padding:21px 18px;color:var(--ink);cursor:pointer;transition:transform .15s,border-color .15s,box-shadow .15s}
.case-card:hover{transform:translateY(-3px);border-color:var(--teal);box-shadow:0 8px 20px #123c4310}
.case-grade{flex-shrink:0;display:grid;place-content:center;text-align:center;width:51px;height:60px;border-radius:10px;background:#e9f5ef;color:#127663;font-size:27px;font-weight:800;line-height:1}
.case-grade small{font-size:10px;margin-top:5px;font-weight:500}
.case-card.caution .case-grade{background:#fff2dc;color:#946123}
.case-card.critical .case-grade{background:#fcece8;color:#a0443a;font-size:19px}
.case-card b{font-size:16px;display:block;margin-bottom:7px}
.case-card .case-copy{flex:1;min-width:0}
.case-card .case-copy small{font-size:11px;line-height:1.6;color:var(--muted);display:block}
.case-card .case-arrow{color:var(--teal);font-size:19px}
.intro-foot{display:flex;justify-content:space-between;gap:15px;flex-wrap:wrap;margin-top:20px;color:var(--muted);font-size:11px;line-height:1.7}
.demo-controls{margin:16px 36px 0;padding:14px 18px;border:1px solid #c8ded7;border-radius:12px;background:#eff7f3}
.demo-control-head{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:10px}
.demo-control-head b{font-size:13px}
.demo-control-head span{font-size:11px;color:var(--muted)}
.demo-case-buttons{display:flex;gap:8px;flex-wrap:wrap}
.demo-case-buttons button{font-size:12px;padding:8px 12px;border:1px solid #c6dcd3;border-radius:8px;background:white;color:var(--teal-dark);cursor:pointer}
.demo-case-buttons button[aria-pressed=true]{background:var(--teal);color:white;border-color:var(--teal)}
.demo-progress{margin-top:13px;border-top:1px solid #cbded5;padding-top:12px;display:flex;justify-content:space-between;gap:14px;align-items:center;flex-wrap:wrap}
.demo-progress p{font-size:12px;margin:0;line-height:1.7}
.demo-progress small{display:block;color:var(--muted)}
.demo-progress .primary,.demo-progress .quiet{font-size:12px;padding:9px 12px}
.demo-progress-actions{display:flex;gap:8px;flex-wrap:wrap}
.demo-notice{margin:0 0 12px;padding:12px;border:1px solid #d2dfd8;border-radius:10px;background:#eff7f3;color:var(--teal-dark);font-size:12px;line-height:1.7}
.intro button:focus-visible,.demo-controls button:focus-visible{outline:3px solid #cf9336;outline-offset:4px}
@media(min-width:1450px){.intro{padding-top:40px}.intro-header{margin-bottom:55px}.intro-cases{margin-top:52px}}
@media(max-width:1000px){.intro-hero{gap:30px}.intro h1{font-size:36px}.architecture{padding:22px}.case-card{padding:17px 12px;gap:10px}.case-card b{font-size:14px}.case-grade{width:42px}.demo-controls{margin-left:24px;margin-right:24px}}
@media(max-width:720px){.intro{padding:22px 20px}.intro-header{margin-bottom:32px}.intro-tag{font-size:10px;padding:7px 9px}.intro-brand{font-size:21px}.intro-hero{grid-template-columns:1fr;gap:30px}.intro h1{font-size:36px}.intro-cases{margin-top:30px}.intro-cases-head{display:block}.intro-cases-head p{margin-top:8px}.case-grid{grid-template-columns:1fr;gap:10px}.case-card{padding:16px}.case-card b{font-size:16px}.case-grade{width:47px;height:54px}.architecture{padding:22px}.demo-controls{margin:12px 16px 0}.demo-control-head span{line-height:1.6}.intro-foot{display:block}.intro-foot span{display:block}}
@media(prefers-reduced-motion:reduce){.case-card{transition:none}.case-card:hover{transform:none}}
@media print{.intro,.demo-controls,#open-intro{display:none!important}}