*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,Segoe UI,Arial,sans-serif;background:#f6f7f9;color:#17202a}.site-header{height:72px;background:#111827;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 max(24px,calc((100% - 1180px)/2));position:sticky;top:0;z-index:20}.brand{display:flex;gap:11px;align-items:center}.brand-mark{width:40px;height:40px;border-radius:10px;background:#ff7a00;display:grid;place-items:center;font-weight:800}.brand-name{font-weight:800}.brand-sub{font-size:11px;color:#cbd5e1;margin-top:2px}.site-header nav{display:flex;gap:24px}.site-header nav a{color:#e5e7eb;text-decoration:none;font-size:14px}.hero{max-width:900px;margin:0 auto;text-align:center;padding:72px 20px 48px}.hero-badge{display:inline-block;background:#fff1e6;color:#d65d00;border:1px solid #ffd3b0;padding:7px 13px;border-radius:999px;font-size:13px;font-weight:700}.hero h1{font-size:clamp(36px,6vw,62px);line-height:1.02;margin:20px 0 16px;letter-spacing:-2px}.hero p{font-size:18px;line-height:1.6;color:#5b6470;max-width:700px;margin:0 auto 26px}.primary-btn,.generate-btn{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:10px;background:#ff7900;color:white;padding:12px 18px;font-weight:800;text-decoration:none;cursor:pointer}.primary-btn:hover,.generate-btn:hover{background:#e86d00}.tool-card{max-width:980px;margin:0 auto 70px;background:white;border:1px solid #e4e7eb;border-radius:18px;padding:30px;box-shadow:0 12px 40px rgba(17,24,39,.07)}.step{display:flex;gap:14px;align-items:flex-start;margin-bottom:20px}.step>span{width:32px;height:32px;border-radius:50%;background:#ff7900;color:#fff;display:grid;place-items:center;font-weight:800;flex:0 0 auto}.step h2{font-size:19px;margin:2px 0 4px}.step p{margin:0;color:#6b7280;font-size:14px}.upload-box{min-height:190px;border:2px dashed #cfd5dc;border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;background:#fafbfc;transition:.2s}.upload-box:hover,.upload-box.drag{border-color:#ff7900;background:#fff8f1}.upload-box input{display:none}.upload-icon{font-size:42px;margin-bottom:8px}.upload-box strong{font-size:17px}.upload-box span{font-size:13px;color:#727b87;margin-top:5px}.video-info{margin-top:14px;padding:13px 15px;background:#f8fafc;border-radius:10px;display:flex;justify-content:space-between;align-items:center}.video-info strong,.video-info span{display:block}.video-info span{font-size:12px;color:#6b7280;margin-top:3px}.small-btn{border:1px solid #d5dae0;background:white;border-radius:8px;padding:8px 11px;cursor:pointer}.controls{margin-top:28px}.control-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin:22px 0}.control-grid label{font-size:13px;font-weight:700;color:#39424e}.control-grid select,.control-grid input{display:block;width:100%;margin-top:7px;height:42px;border:1px solid #d7dce2;border-radius:8px;padding:0 11px;background:white;font-size:14px}.control-grid input{padding:0}.control-grid label:last-child{position:relative}.control-grid label:last-child span{position:absolute;right:10px;top:30px;font-size:12px;color:#6b7280}.output-size{padding:11px 14px;background:#f7f7f8;border-radius:8px;color:#626b76;font-size:13px;margin-bottom:14px}.generate-btn{width:100%;height:48px;font-size:15px}.generate-btn:disabled{background:#c7ccd2;cursor:not-allowed}.progress-area{margin-top:22px}.progress-top{display:flex;justify-content:space-between;font-size:13px;margin-bottom:7px}.progress-track{height:10px;background:#e9edf1;border-radius:20px;overflow:hidden}.progress-track div{height:100%;width:0;background:#ff7900;transition:width .15s}.results{margin-top:32px;border-top:1px solid #e7e9ec;padding-top:26px}.results-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}.results-head h2{margin:0;font-size:21px}.results-head p{margin:4px 0 0;color:#6b7280;font-size:13px}.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.shot{border:1px solid #e1e5e9;border-radius:10px;overflow:hidden;background:#fff}.shot img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}.shot-footer{padding:8px 10px;display:flex;justify-content:space-between;align-items:center;font-size:12px}.shot-footer button{border:1px solid #d6dbe1;background:white;border-radius:6px;padding:5px 8px;cursor:pointer}.info-section,.privacy-section{max-width:980px;margin:0 auto 70px;padding:0 20px}.info-section h2,.privacy-section h2{font-size:28px}.info-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.info-grid article{background:#fff;border:1px solid #e4e7eb;border-radius:12px;padding:20px}.info-grid b{color:#ff7900}.info-grid h3{margin:10px 0 6px}.info-grid p,.privacy-section p{color:#66717d;line-height:1.6;font-size:14px}.privacy-section{background:#fff;border:1px solid #e4e7eb;border-radius:12px;padding:24px}.privacy-section h2{margin-top:0}footer{border-top:1px solid #e1e5e9;padding:25px max(20px,calc((100% - 980px)/2));display:flex;justify-content:space-between;color:#727b87;font-size:12px}.hidden{display:none!important}.hidden-video,#canvas,#bgCanvas{display:none}@media(max-width:760px){.site-header{height:auto;min-height:66px;padding:12px 16px}.site-header nav{display:none}.hero{padding:48px 18px 32px}.hero h1{letter-spacing:-1px}.tool-card{margin:0 12px 50px;padding:18px}.control-grid,.info-grid{grid-template-columns:1fr}.gallery{grid-template-columns:repeat(2,1fr)}.results-head{gap:12px;align-items:flex-start;flex-direction:column}.results-head .primary-btn{width:100%}footer{padding:20px 16px;gap:10px;flex-direction:column}}

.seo-section{max-width:980px;margin:0 auto 70px;padding:28px 20px;background:#fff;border:1px solid #e4e7eb;border-radius:12px}
.seo-section h2{font-size:28px;margin:0 0 10px}
.seo-section>p{color:#66717d;line-height:1.7;font-size:14px;max-width:850px}
.seo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:22px}
.seo-grid div{border:1px solid #e7eaee;border-radius:10px;padding:17px}
.seo-grid h3{font-size:16px;margin:0 0 7px}
.seo-grid p{color:#66717d;line-height:1.6;font-size:13px;margin:0}
footer a{color:#66717d;text-decoration:none}
footer a:hover{text-decoration:underline}
@media(max-width:760px){.seo-grid{grid-template-columns:1fr}}

.seo-grid.two-col{grid-template-columns:repeat(2,1fr)}
@media(max-width:760px){.seo-grid.two-col{grid-template-columns:1fr}}