:root { --primary:#5b3df5; --soft:#ece9ff; --line:#CECBF6; }
* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; color:#1a1a2e; line-height:1.6; }

.nav { display:flex; justify-content:space-between; align-items:center; padding:1rem 8%; position:sticky; top:0;
       background:#fff; box-shadow:0 1px 6px rgba(0,0,0,.06); z-index:10; }
.logo { font-weight:800; font-size:1.4rem; color:var(--primary); text-decoration:none; }
.nav nav a { margin-left:1.5rem; text-decoration:none; color:inherit; }

.btn { background:var(--primary); color:#fff !important; padding:.5rem 1.1rem; border-radius:8px; text-decoration:none;
       border:none; cursor:pointer; display:inline-block; font:inherit; }
.btn.big { padding:.9rem 1.8rem; font-size:1.05rem; }
.btn.outline { background:transparent; color:var(--primary) !important; border:2px solid var(--primary); }

.section { padding:5rem 8%; text-align:center; }
.alt { background:#f7f7fb; }
h2 { font-size:2rem; }
.sub { color:#555; max-width:650px; margin:.5rem auto 1.5rem; }

.hero { text-align:center; padding:7rem 10%; background:#f4f2ff; }
.tag { display:inline-block; background:#e4e0ff; color:var(--primary); padding:.3rem .9rem; border-radius:20px;
       font-size:.9rem; font-weight:600; margin-bottom:1rem; }
.hero h1 { font-size:clamp(2rem,5vw,3.2rem); max-width:850px; margin:0 auto 1rem; line-height:1.2; }
.hero p { font-size:1.2rem; color:#444; max-width:700px; margin:0 auto 2rem; }
.actions { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }

.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:1.5rem; margin-top:2rem; }
.card { padding:2rem; border-radius:14px; background:#fff; box-shadow:0 4px 20px rgba(0,0,0,.07); text-align:left; }
.card .icon { font-size:2.2rem; }
.card h3 { color:var(--primary); margin:.5rem 0; }
.card p { color:#555; margin-bottom:1rem; }
.card ul { padding-left:1.2rem; }
.card li { margin-bottom:.4rem; }

.cat-tabs { display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap; margin-top:1.5rem; }
.cat-tab, .uc-btn { font:inherit; cursor:pointer; border:1px solid #d6d3f0; background:#fff; border-radius:8px;
                    padding:.6rem 1rem; color:#1a1a2e; }
.cat-tab.active, .uc-btn.active { background:var(--soft); border-color:var(--primary); color:var(--primary); font-weight:600; }
.explorer { display:grid; grid-template-columns:260px 1fr; gap:1.5rem; text-align:left; max-width:1000px; margin:0 auto; }
.uc-list { display:grid; gap:.5rem; align-content:start; }
.uc-btn { text-align:left; }
.stage { background:#fff; border-radius:14px; padding:.5rem; box-shadow:0 4px 20px rgba(0,0,0,.06); }
#scene { display:block; width:100%; height:auto; }
.cell { fill:#fff; stroke:var(--line); transition:fill .25s; }
.cell.active { fill:var(--soft); }
.label { font-size:10px; fill:#666; }
.label.active { fill:var(--primary); font-weight:600; }
.flow { stroke:#534AB7; stroke-width:1.5; stroke-dasharray:4 4; animation:dash 1s linear infinite; }
@keyframes dash { to { stroke-dashoffset:-16; } }
.hotspot { cursor:pointer; }
.dot { fill:#fff; stroke:#7F77DD; stroke-width:2; }
.ring { fill:#7F77DD; opacity:0; }
.hotspot.active .dot { fill:#534AB7; stroke:#fff; }
.hotspot.active .ring { transform-box:fill-box; transform-origin:center; animation:pulse 1.6s infinite; }
@keyframes pulse { 0% { transform:scale(1); opacity:.6; } 100% { transform:scale(2.6); opacity:0; } }
.legend { font-size:.8rem; color:#888; margin:.5rem 0 0; }
.uc-detail { display:flex; gap:1rem; margin-top:1rem; background:#fff; border-radius:14px; padding:1.25rem;
             box-shadow:0 4px 20px rgba(0,0,0,.06); }
.uc-detail img { width:96px; height:96px; object-fit:contain; flex-shrink:0; }
.uc-detail p { color:#555; margin:.4rem 0 .8rem; }
.chip { display:inline-block; background:var(--soft); color:var(--primary); font-size:.85rem; padding:.25rem .7rem;
        border-radius:6px; margin:0 .4rem .4rem 0; }

.points { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:2rem; margin-top:2rem; text-align:left; }
.point { border-left:4px solid var(--primary); padding-left:1rem; }
.point h3 { font-size:1.1rem; margin-bottom:.3rem; }
.point p, .step p { color:#555; }

.steps { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:2rem; margin-top:2rem; }
.num { width:48px; height:48px; border-radius:50%; background:var(--primary); color:#fff; display:grid;
       place-items:center; font-weight:700; margin:0 auto 1rem; }

.contact-form { display:grid; gap:1rem; max-width:520px; margin:2rem auto 0; }
.contact-form input, .contact-form textarea, .contact-form select { padding:.9rem; border:1px solid #ccc;
       border-radius:8px; font:inherit; background:#fff; }
.hp { display:none; }

.thanks { min-height:60vh; }
footer { text-align:center; padding:2rem; background:#1a1a2e; color:#ccc; }

@media (max-width:760px) {
  .explorer { grid-template-columns:1fr; }
  .nav nav a:not(.btn) { display:none; }
}