:root{--c:#2563EB;--ink:#0B1F4B;--tx:#243049;--mu:#64708B;--bg:#F4F7FD;--bd:#E1E8F5;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
*{box-sizing:border-box}html{scroll-padding-top:76px;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--tx);font:16px/1.65 "Segoe UI",Inter,system-ui,-apple-system,Roboto,sans-serif}
a{color:inherit;text-decoration:none}.w{max-width:1200px;margin:auto;padding:0 20px}h1,h2,h3{color:var(--ink);line-height:1.2}
.hd{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;background:#fff;border-bottom:1px solid var(--bd)}
.hb{display:flex;align-items:center;gap:6px;height:66px}
.lg{display:flex;align-items:center;gap:9px;font-weight:900;font-size:1.45rem;color:var(--ink);margin-right:auto;letter-spacing:-.5px}.lg b{background:linear-gradient(90deg,#2563EB,#0EA5E9);-webkit-background-clip:text;background-clip:text;color:transparent}
.hd nav{display:flex;gap:2px;align-items:center}.hd nav a{padding:8px 11px;border-radius:9px;font-size:.92rem;font-weight:600;color:#4b4f72}.hd nav a:hover{background:var(--bg);color:var(--c)}.hd nav a.sg{border:1px solid var(--bd);margin-left:8px}
@media(max-width:900px){.hd nav a.h{display:none}}
.bt{display:inline-block;background:var(--c);color:#fff;border:0;border-radius:12px;padding:11px 22px;font:700 1rem inherit;font-family:inherit;cursor:pointer;transition:.15s;box-shadow:0 6px 16px -6px var(--c)}.bt:hover{filter:brightness(1.1);transform:translateY(-1px)}.bt.big{padding:18px 44px;font-size:1.25rem;border-radius:14px}.bt.gh{background:#fff;color:var(--ink);border:1px solid var(--bd);box-shadow:none}.bt.full{width:100%;margin-top:16px}.bt:disabled{opacity:.6;cursor:wait}
.hero{background:radial-gradient(600px 280px at 88% 0,rgba(249,115,22,.45),transparent),radial-gradient(500px 300px at 8% 100%,rgba(56,189,248,.35),transparent),linear-gradient(135deg,#0B1F4B,#1E3A8A 55%,#2563EB);color:#fff;text-align:center;padding:68px 0 110px}
.hero h1{color:#fff;font-size:clamp(2rem,5.5vw,3.6rem);margin:0 0 14px;letter-spacing:-1.5px}.hero p{max-width:640px;margin:auto;color:#CFE0FF;font-size:1.15rem}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}@media(max-width:1000px){.grid{grid-template-columns:repeat(3,1fr)}}@media(max-width:720px){.grid{grid-template-columns:repeat(2,1fr);gap:12px}}@media(max-width:430px){.grid{grid-template-columns:1fr}}
.pull{margin-top:-62px;position:relative}
.t{background:#fff;border:1px solid var(--bd);border-radius:20px;padding:22px 20px;position:relative;overflow:hidden;display:block;transition:.2s;box-shadow:0 10px 30px -18px rgba(30,27,75,.35)}.t::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:var(--c)}.t:hover{transform:translateY(-5px);box-shadow:0 18px 36px -16px var(--c)}
.ic{width:54px;height:54px;border-radius:15px;background:var(--c);display:grid;place-items:center;box-shadow:0 8px 18px -8px var(--c)}.ic svg{width:28px;height:28px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.ic.big{width:72px;height:72px;margin:0 auto 14px;border-radius:20px}.ic.big svg{width:38px;height:38px}
.t h3{margin:14px 0 4px;font-size:1.1rem}.t p{margin:0;color:var(--mu);font-size:.9rem;line-height:1.5}
.sec{padding:54px 0 6px}.sec h2{font-size:1.8rem;margin:0 0 20px;text-align:center}
.feat{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}@media(max-width:800px){.feat{grid-template-columns:repeat(2,1fr)}}.feat div{background:#fff;border:1px solid var(--bd);border-radius:16px;padding:20px;text-align:center}.feat b{font-size:2rem;display:block}.feat span{color:var(--mu);font-size:.9rem}
.tp{background:linear-gradient(#fff,color-mix(in srgb,var(--c) 13%,#fff));text-align:center;padding:30px 0 40px;border-bottom:1px solid var(--bd)}.tp h1{font-size:clamp(1.9rem,5vw,3rem);margin:0 0 8px;letter-spacing:-1px}.lead{color:var(--mu);max-width:640px;margin:0 auto 26px;font-size:1.1rem}
.bc{text-align:left;font-size:.85rem;color:var(--mu);margin-bottom:12px}.bc a:hover{color:var(--c)}
.app{max-width:860px;margin:auto}
.drop{background:#fff;border:3px dashed var(--c);border-radius:22px;padding:52px 20px;cursor:pointer;transition:.2s}.drop:hover,.drop.on{background:color-mix(in srgb,var(--c) 7%,#fff);transform:scale(1.01)}.drop p{margin:12px 0 0;color:var(--mu)}
#work,#result{background:#fff;border:1px solid var(--bd);border-radius:22px;padding:22px;text-align:left;box-shadow:0 14px 34px -20px rgba(30,27,75,.4)}#result{text-align:center}
.list{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-bottom:14px}
.fc{background:var(--bg);border:1px solid var(--bd);border-radius:14px;padding:10px;text-align:center;position:relative}.fc .th{height:130px;display:grid;place-items:center;background:#fff;border-radius:8px;overflow:hidden;margin-bottom:6px}.fc img{max-width:100%;max-height:130px}.fc b{display:block;font-size:.8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fc small{color:var(--mu);font-size:.75rem}
.fa{display:flex;gap:4px;justify-content:center;margin-top:6px}.fa button{background:#fff;border:1px solid var(--bd);border-radius:7px;cursor:pointer;padding:2px 9px}.fa button:hover{border-color:var(--c);color:var(--c)}
.opts{margin-top:18px;border-top:1px solid var(--bd);padding-top:6px}label{display:block;font-size:.82rem;font-weight:700;color:var(--mu);margin:12px 0 4px}
input,select{width:100%;padding:11px 12px;border:1px solid var(--bd);border-radius:10px;font:inherit;background:#fff;color:var(--tx)}input:focus,select:focus{outline:0;border-color:var(--c);box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 22%,transparent)}input[type=checkbox]{width:auto}input[type=color]{padding:2px;height:44px}input[type=range]{padding:0;accent-color:var(--c)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}.ck{display:flex;gap:8px;align-items:center}.hint{color:var(--mu);font-size:.85rem}
.msg{margin:14px 0 0;font-weight:600}.msg.err{color:#DC2626}.priv{color:var(--mu);font-size:.88rem;margin-top:18px}
.rprev{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px;margin:14px 0}.rprev img{width:100%;border-radius:8px;border:1px solid var(--bd)}#result h2{margin:0 0 4px}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}@media(max-width:760px){.steps{grid-template-columns:1fr}}.steps div{background:#fff;border:1px solid var(--bd);border-radius:16px;padding:22px}.steps i{font-style:normal;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--c);color:#fff;font-weight:800;margin-bottom:8px}.steps h3{margin:0 0 4px}.steps p{margin:0;color:var(--mu)}
.txt{max-width:860px;margin:auto;color:#4b4f72}.txt h2{text-align:left}
details{background:#fff;border:1px solid var(--bd);border-radius:12px;padding:14px 18px;margin:0 auto 10px;max-width:860px}summary{cursor:pointer;font-weight:700;color:var(--ink)}details p{margin:8px 0 0;color:var(--mu)}
.ft{background:var(--ink);color:#9FB0D3;margin-top:60px;padding:34px 0;text-align:center;font-size:.9rem}.ft a{color:#fff;margin:0 8px;display:inline-block}.ft a:hover{color:#FDBA74}
[hidden]{display:none!important}
.hero{position:relative;overflow:hidden}.hero .w{position:relative;z-index:1}
.hero::before,.hero::after{content:"";position:absolute;width:130px;height:165px;border-radius:14px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.2);box-shadow:inset 0 0 0 10px rgba(255,255,255,.04)}
.hero::before{left:7%;top:56px;transform:rotate(-12deg)}.hero::after{right:8%;bottom:70px;transform:rotate(11deg)}@media(max-width:900px){.hero::before,.hero::after{display:none}}
.hs{max-width:580px;margin:26px auto 0}.hs input{border:0;border-radius:99px;padding:16px 24px;font-size:1.05rem;box-shadow:0 14px 34px -12px rgba(0,0,0,.5)}
.t::after{content:"→";position:absolute;right:20px;bottom:16px;color:var(--c);font-weight:800;opacity:0;transition:.2s}.t:hover::after{opacity:1;right:14px}
.pop{position:absolute;right:14px;top:16px;background:#FFF1E6;color:#C2410C;font-size:.7rem;font-weight:800;padding:3px 10px;border-radius:99px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);background:#fff;border:1px solid var(--bd);border-radius:18px;margin-top:26px;text-align:center;overflow:hidden}.stats div{padding:20px 8px;border-right:1px solid var(--bd)}.stats div:last-child{border:0}.stats b{display:block;font-size:1.7rem;color:var(--ink);line-height:1.2}.stats span{color:var(--mu);font-size:.85rem}
@media(max-width:700px){.stats{grid-template-columns:repeat(2,1fr)}.stats div:nth-child(2){border-right:0}.stats div:nth-child(-n+2){border-bottom:1px solid var(--bd)}}
.tp{background:linear-gradient(#fff,color-mix(in srgb,var(--c) 11%,#fff))}.hd{box-shadow:0 2px 14px -8px rgba(11,31,75,.35)}