:root{--bg:#f5f7fa;--surface:#fff;--border:#dbe1e8;--text:#172033;--mute:#5b6678;--blue:#0284c7;--violet:#7c4dff;--orange:#ff7a1a;--green:#4ade80;--teal:#0f766e}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font-family:"Segoe UI",system-ui,-apple-system,BlinkMacSystemFont,sans-serif;background:var(--bg);color:var(--text);line-height:1.6;overflow-x:hidden}
a{color:var(--blue);text-decoration:none}
code{background:#eaf0f6;padding:.1rem .4rem;border-radius:6px;font-size:.88em}
.bg{position:fixed;inset:0;z-index:-1;background:var(--bg)}



@keyframes float{50%{transform:translateY(-40px) translateX(20px)}}
header{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:2rem;padding:.6rem 2rem;backdrop-filter:blur(14px);background:#ffffffd9;border-bottom:1px solid var(--border)}
.logo{display:flex;align-items:center}.logo img{height:44px;display:block;transition:transform .3s}.logo:hover img{transform:scale(1.06) rotate(-2deg)}
nav{margin-left:auto;display:flex;gap:1.5rem;font-size:.95rem}nav a{color:var(--mute);transition:.2s}nav a:hover{color:var(--text)}
.btn{display:inline-block;padding:.8rem 1.6rem;border-radius:999px;font-weight:600;color:#fff;background:var(--blue);box-shadow:0 2px 8px #17203322;transition:.25s}
.btn:hover{transform:translateY(-3px);box-shadow:0 14px 36px #ff7a1a55}
.btn.ghost{background:var(--surface);color:var(--text);border:1px solid var(--border);box-shadow:none}
.hero{text-align:center;padding:6rem 1.5rem 4rem;max-width:960px;margin:auto}
.pill{display:inline-block;padding:.3rem .9rem;border:1px solid var(--border);border-radius:999px;color:var(--teal);font-size:.85rem;background:var(--surface)}
h1{font-size:clamp(2.4rem,6vw,4.6rem);line-height:1.05;margin:1.2rem 0}
.grad{color:var(--blue)}
@keyframes shift{to{background-position:250%}}
.hero p{color:var(--mute);font-size:1.15rem;max-width:760px;margin:0 auto 2rem}
.cta{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
.term{max-width:780px;margin:3rem auto 0;text-align:left;background:#0f172a;border-radius:14px;box-shadow:0 30px 70px #17203340;overflow:hidden;color:#e2e8f0}
.term .bar{display:flex;gap:6px;padding:.7rem 1rem;background:#1e293b}.term .bar i{width:11px;height:11px;border-radius:50%;background:#ff5f57}.term .bar i:nth-child(2){background:#febc2e}.term .bar i:nth-child(3){background:#28c840}
.term pre{margin:0;padding:1.2rem 1.4rem;font:.9rem/1.7 Consolas,monospace;overflow-x:auto}
.c{color:#7b8aa8}.g{color:#4ade80}.y{color:#fbbf24}.b{color:#38bdf8}
section{max-width:1180px;margin:auto;padding:4rem 1.5rem}
h2{font-size:2.2rem;margin:0 0 .5rem}.sub{color:var(--mute);margin-bottom:2.5rem;max-width:720px}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1rem;margin-top:3rem}
.stat{padding:1.3rem;border:1px solid var(--border);border-radius:16px;background:var(--surface);text-align:center;box-shadow:0 2px 10px #17203308}.stat b{display:block;font-size:2.1rem;color:var(--text)}.stat span{color:var(--mute);font-size:.9rem}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.2rem}
.card{padding:1.5rem;border:1px solid var(--border);border-radius:18px;background:var(--surface);transition:.3s;position:relative;overflow:hidden;box-shadow:0 2px 10px #17203308}
.card::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--blue);transform:scaleX(0);transform-origin:left;transition:.4s}
.card:hover{transform:translateY(-6px);box-shadow:0 18px 40px #7c4dff22}.card:hover::before{transform:scaleX(1)}
.card .ic{font-size:1.8rem}.card h3{margin:.6rem 0 .3rem}.card p{margin:0;color:var(--mute);font-size:.95rem}
.tag{display:inline-block;margin:.8rem .3rem 0 0;font-size:.75rem;padding:.15rem .6rem;border-radius:999px;border:1px solid var(--border);color:var(--mute)}
.tag.man{color:#7a4b00;background:#fff8e8;border-color:#f3dc9a}
.timeline{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.5rem;counter-reset:s}
.step{padding:1.6rem;border-left:4px solid var(--violet);background:var(--surface);border-radius:0 16px 16px 0;box-shadow:0 2px 10px #17203308}
.step:nth-child(2){border-color:var(--blue)}.step:nth-child(3){border-color:var(--green)}.step:nth-child(4){border-color:var(--orange)}
.step::before{counter-increment:s;content:"0" counter(s);font-size:2rem;font-weight:800;color:var(--violet);display:block}
.step h3{margin:.2rem 0}.step p{color:var(--mute);margin:0}
pre.code{background:#0f172a;color:#e2e8f0;border-radius:14px;padding:1.2rem;overflow-x:auto;font:.9rem Consolas,monospace;box-shadow:0 20px 50px #17203330}
footer{text-align:center;color:var(--mute);padding:3rem 1rem;border-top:1px solid var(--border);font-size:.9rem;background:var(--surface)}
.reveal{opacity:0;transform:translateY(24px);transition:.7s}.reveal.in{opacity:1;transform:none}
@media(max-width:700px){nav{display:none}header{padding:.6rem 1rem}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}


.logo{display:flex;align-items:center}.logo img{height:2rem;width:auto}.brand-divider{width:1px;height:1.5rem;margin:0 .75rem;background:var(--border)}.brand-product{font-size:.95rem;font-weight:600;color:var(--text)}.brand-preview{margin-left:.5rem;padding:.2rem .45rem;border:1px solid #0284c74d;border-radius:999px;color:var(--blue);font-size:.7rem;font-weight:700;line-height:1.2;white-space:nowrap}
.next-box{text-align:center;padding:2.5rem 1.5rem;border:1px solid var(--border);border-radius:16px;background:var(--surface)}.next-box p{max-width:640px;margin:.5rem auto 1.5rem;color:var(--mute)}
@media(max-width:700px){.brand-product{display:none}}

header{min-height:4.5rem}.logo img{height:auto;width:7rem}.brand-product{font-size:1rem;font-weight:700}.brand-preview{border-color:color-mix(in srgb,#00757d 30%,#dbe1e8);color:#00757d;border-width:1.5px;padding:.25rem .6rem;font-size:.75rem}

.flow{display:flex;align-items:stretch;justify-content:center;gap:1rem;flex-wrap:wrap}
.flow-step{flex:1 1 240px;max-width:320px;padding:1.5rem;background:var(--surface);border:1px solid var(--border);border-radius:16px;text-align:left}
.flow-step .n{display:inline-flex;width:2rem;height:2rem;align-items:center;justify-content:center;border-radius:50%;background:var(--teal);color:#fff;font-weight:700}
.flow-step h3{margin:.6rem 0 .3rem}.flow-step p{margin:0;color:var(--mute);font-size:.95rem}
.flow-arrow{align-self:center;font-size:1.8rem;color:var(--mute)}
.videos{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:1.5rem}
.videos figure{margin:0}.videos video{width:100%;border-radius:14px;border:1px solid var(--border);background:#0f172a;box-shadow:0 12px 30px #0f172a22}
.videos figcaption{color:var(--mute);font-size:.9rem;margin-top:.6rem;text-align:center}
/* clean single-accent theme */
:root{--blue:#00757d;--violet:#00757d;--orange:#00757d;--green:#00757d;--teal:#00757d}
a{color:#00757d}
*{box-shadow:none!important;text-shadow:none!important}
.btn{background:#00757d;color:#fff!important}.btn:hover{transform:none;background:#005f66}
.btn.ghost{background:var(--surface);color:var(--text)!important}.btn.ghost:hover{background:#eef2f5}
.card:hover{transform:none;border-color:#00757d}.card::before{display:none}
.card .ic{filter:grayscale(1);opacity:.75}
.grad{color:inherit}
.step,.step:nth-child(n){border-color:#00757d}.step::before{color:#00757d}
.tag,.tag.man{color:var(--mute);background:#f5f7fa;border-color:var(--border)}
.term .bar i,.term .bar i:nth-child(n){background:#475569}
.term,pre.code,.videos video{background:#0f172a}
.brand-preview{color:#00757d}