:root{--bg:#f3f8ff;--ink:#14213d;--mut:#5a6b86;--card:#fff;--line:#dbe6f6;--acc:#2563eb;--acc2:#ec4899;--g1:#2563eb;--g2:#7c3aed;--g3:#ec4899;--err:#c81e4b}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);font:17px/1.65 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:radial-gradient(900px 420px at 8% -5%,#dbeafe 0,transparent 60%),radial-gradient(800px 420px at 100% 10%,#fce7f3 0,transparent 60%),radial-gradient(700px 400px at 50% 100%,#e0f7ef 0,transparent 60%),var(--bg);background-attachment:fixed}
a{color:var(--acc)}.wrap{max-width:960px;margin:0 auto;padding:0 20px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.top{background:rgba(255,255,255,.88);backdrop-filter:blur(10px);border-bottom:3px solid transparent;border-image:linear-gradient(90deg,var(--g1),var(--g2),var(--g3)) 1;position:sticky;top:0;z-index:5}
.bar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding-top:11px;padding-bottom:11px}
.logo{display:flex;align-items:center;gap:9px;font-weight:900;font-size:22px;color:var(--ink);text-decoration:none}
.logo svg{background:linear-gradient(135deg,var(--g1),var(--g3));color:#fff;border-radius:11px;padding:7px;width:36px;height:36px}.logo b{background:linear-gradient(90deg,var(--g1),var(--g3));-webkit-background-clip:text;background-clip:text;color:transparent}
.top nav{display:flex;gap:6px;flex-wrap:wrap;font-size:15px;font-weight:700}
.top nav a{color:var(--ink);text-decoration:none;padding:6px 14px;border-radius:99px}
.top nav a:hover{background:#e8f0ff}.top nav a[aria-current]{background:linear-gradient(90deg,var(--g1),var(--g2));color:#fff}
.crumb{font-size:14px;color:var(--mut);padding:16px 0 0}.crumb a{color:var(--mut)}
.hero{margin:22px 0 8px;padding:44px 22px 34px;text-align:center;color:#fff;border-radius:28px;position:relative;overflow:hidden;background:linear-gradient(135deg,var(--g1),var(--g2) 55%,var(--g3));box-shadow:0 18px 50px rgba(124,58,237,.30)}
.hero::before,.hero::after{content:"";position:absolute;border-radius:50%;background:rgba(255,255,255,.14);pointer-events:none}
.hero::before{width:300px;height:300px;right:-80px;top:-110px}.hero::after{width:200px;height:200px;left:-60px;bottom:-90px}
.hero>*{position:relative}
.p-tiktok{--g1:#00b4d8;--g2:#7c3aed;--g3:#fe2c55;--acc:#e11d48}
.p-facebook{--g1:#1877f2;--g2:#4f46e5;--g3:#06b6d4;--acc:#1d4ed8}
.p-youtube{--g1:#e11d48;--g2:#f97316;--g3:#f59e0b;--acc:#dc2626}
h1{font-size:clamp(28px,5.5vw,46px);line-height:1.1;margin:0 0 12px;letter-spacing:-1px}
.hero h1{text-shadow:0 2px 14px rgba(0,0,0,.18)}
h2{font-size:26px;letter-spacing:-.5px;margin:0 0 14px}h3{margin:0 0 6px;font-size:18px}
.sub{max-width:62ch;margin:0 auto 24px;opacity:.95}.prose .sub{color:var(--mut)}
.box{display:flex;gap:8px;background:#fff;border-radius:18px;padding:8px;box-shadow:0 10px 30px rgba(0,0,0,.20);max-width:760px;margin:0 auto}
.box input{flex:1;min-width:0;border:0;background:transparent;color:#14213d;font:inherit;padding:13px 14px;outline:0}
button{font:inherit;cursor:pointer;border:0;border-radius:12px;padding:12px 22px;font-weight:800}
.go{background:linear-gradient(90deg,#ff7a18,#ff3d8b);color:#fff;box-shadow:0 6px 16px rgba(255,61,139,.35)}.go:hover{filter:brightness(1.07)}.go:disabled{opacity:.6;cursor:wait}
.ghost{background:#eef3ff;color:#2563eb}
:focus-visible{outline:3px solid #fde047;outline-offset:2px}
#msg{margin:12px auto 0;max-width:760px}#msg:not(:empty){background:#fff;color:var(--err);border-radius:12px;padding:9px 14px;font-size:15px;font-weight:600}
#result{margin:16px auto 0;max-width:760px;background:#fff;color:var(--ink);border-radius:18px;padding:16px;text-align:left;gap:16px}
#result:not([hidden]){display:flex}
#result img{width:120px;height:160px;object-fit:cover;border-radius:12px;background:var(--line)}
#result h2{font-size:17px;margin:0 0 4px;word-break:break-word}#result p{margin:0 0 12px;color:var(--mut);font-size:14px}
.dl{display:inline-block;text-decoration:none;padding:11px 20px;border-radius:12px;font-weight:800;margin:0 8px 8px 0;background:linear-gradient(90deg,#16a34a,#06b6d4);color:#fff}
.dl.alt{background:linear-gradient(90deg,#f59e0b,#ef4444)}
section{padding:24px 0}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.card{background:var(--card);border:1px solid var(--line);border-top:5px solid var(--g2);border-radius:16px;padding:18px;display:block;color:inherit;text-decoration:none;box-shadow:0 6px 18px rgba(37,99,235,.07)}
.card:nth-child(3n+1){border-top-color:#2563eb}.card:nth-child(3n+2){border-top-color:#ec4899}.card:nth-child(3n){border-top-color:#10b981}
.c-tiktok{border-top-color:#fe2c55!important}.c-facebook{border-top-color:#1877f2!important}.c-youtube{border-top-color:#ff0033!important}
.card p{margin:0;color:var(--mut);font-size:15px}a.card:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(37,99,235,.16)}a.card{transition:transform .15s,box-shadow .15s}
.steps{list-style:none;padding:0;margin:0;display:grid;gap:12px;counter-reset:s}
.steps li{counter-increment:s;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:15px 16px 15px 62px;position:relative}
.steps li::before{content:counter(s);position:absolute;left:16px;top:13px;width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--g1),var(--g3));color:#fff;font-weight:900;display:grid;place-items:center}
details{background:var(--card);border:1px solid var(--line);border-left:5px solid var(--g2);border-radius:14px;padding:12px 16px;margin:0 0 10px}
summary{cursor:pointer;font-weight:800}details p{margin:8px 0 0;color:var(--mut)}
.chips{display:flex;gap:10px;flex-wrap:wrap}.chip{border:1px solid var(--line);background:#fff;padding:8px 15px;border-radius:99px;text-decoration:none;font-weight:700;font-size:15px}.chip:hover{background:#eef3ff}
.prose{padding-top:26px;padding-bottom:30px}.prose h2{margin-top:26px}.prose h1{color:var(--ink)}
.article{max-width:760px}.lead{font-size:19px;color:var(--mut)}.article li{margin:6px 0}
.cta{background:linear-gradient(135deg,#eff6ff,#fdf2f8);border:1px solid var(--line);border-radius:16px;padding:16px;margin:18px 0}
footer{border-top:1px solid var(--line);margin-top:30px;padding:26px 0 44px;color:var(--mut);font-size:14px;background:rgba(255,255,255,.7)}
footer nav{display:flex;flex-wrap:wrap;gap:8px 18px;margin-bottom:12px}footer a{color:var(--mut);font-weight:600}
@media(max-width:560px){.box{flex-direction:column}.hero{padding:34px 14px 26px;border-radius:22px}#result:not([hidden]){flex-direction:column;align-items:center;text-align:center}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}a.card{transition:none}}