*{box-sizing:border-box}body{margin:0;font-family:Arial,Helvetica,sans-serif;background:#f5f7fb;color:#172033}a{color:inherit;text-decoration:none}header{height:70px;background:#fff;border-bottom:1px solid #e1e5ec;display:flex;align-items:center;padding:0 6%;gap:35px}.logo{font-size:23px;font-weight:800;color:#172033}.logo span{color:#356df3}nav{display:flex;gap:22px;font-size:14px;color:#647087}nav a:hover,nav .active{color:#356df3}.hero{max-width:1100px;margin:70px auto 50px;display:grid;grid-template-columns:1.2fr .8fr;gap:60px;align-items:center;padding:0 25px}.badge{display:inline-block;font-size:11px;font-weight:bold;letter-spacing:2px;color:#356df3;background:#e9efff;padding:8px 12px;border-radius:20px}.hero h1{font-size:54px;line-height:1.05;margin:18px 0}.hero p{font-size:18px;line-height:1.6;color:#68758a;max-width:600px}.actions{display:flex;gap:12px;margin-top:28px}.button{display:inline-block;border:1px solid #d5dbe5;background:#fff;padding:11px 17px;border-radius:8px;cursor:pointer;font-size:14px;color:#253047}.button.primary{background:#356df3;border-color:#356df3;color:#fff}.button.small{padding:8px 12px;font-size:13px}.preview-card{background:#fff;border:1px solid #e1e5ec;border-radius:15px;padding:18px;box-shadow:0 15px 40px #18243a12}.preview-top{font-size:12px;color:#8a95a8;border-bottom:1px solid #eee;padding-bottom:12px}.phone{margin:20px auto 5px;width:220px;min-height:290px;border:7px solid #202938;border-radius:25px;padding:25px 15px;text-align:center}.phone-title{font-weight:bold;margin-bottom:35px}.phone-box{background:#eef2f8;padding:35px 10px;border-radius:8px;margin-bottom:18px}.phone button{background:#356df3;color:#fff;border:0;padding:9px 20px;border-radius:6px}.section{max-width:1100px;margin:auto;padding:30px 25px 70px}.section h2{font-size:28px}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.card,.template,.form-card,.settings-card,.faq details{background:#fff;border:1px solid #e1e5ec;border-radius:12px;padding:22px}.card p,.template p,.muted{color:#738096;line-height:1.5}footer{text-align:center;border-top:1px solid #e1e5ec;background:#fff;padding:25px;color:#8a95a8;font-size:13px}.page{max-width:1000px;margin:55px auto;padding:0 25px;min-height:65vh}.narrow{max-width:650px;text-align:center}.title-row{display:flex;justify-content:space-between;align-items:center}.form-card,.settings-card{max-width:650px;margin-top:30px}.form-card label,.settings-card label{display:block;font-weight:bold;font-size:14px;margin-bottom:18px}.form-card input,.form-card textarea,.form-card select,.settings-card select,.properties input{display:block;width:100%;padding:11px;margin-top:7px;border:1px solid #d7dde7;border-radius:7px;font:inherit}.form-card textarea{height:100px;resize:vertical}.form-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:25px}.project-list{margin-top:25px}.empty{text-align:center;background:#fff;border:1px dashed #ccd4e0;border-radius:12px;padding:55px;color:#7b8799}.empty a{color:#356df3}.template-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:30px}.template-icon{font-size:35px}.template h3{margin-bottom:5px}.info{display:grid;grid-template-columns:1fr 1fr;text-align:left;background:#fff;border:1px solid #e1e5ec;border-radius:12px;padding:20px;margin-top:30px;gap:15px}.about-logo{width:75px;height:75px;border-radius:18px;background:#356df3;color:#fff;display:grid;place-items:center;font-size:25px;font-weight:bold;margin:20px auto}.faq{margin-top:25px}.faq details{margin-bottom:12px}.faq summary{font-weight:bold;cursor:pointer}.faq p{color:#68758a;line-height:1.5}.editor-page{background:#edf0f5}.editor{display:grid;grid-template-columns:220px 1fr 250px;height:calc(100vh - 70px)}.panel{background:#fff;border-right:1px solid #dce1e8;padding:18px}.properties{border-left:1px solid #dce1e8;border-right:0}.panel button{display:block;width:100%;margin:8px 0;padding:11px;border:1px solid #dce1e8;background:#f8f9fb;border-radius:7px;text-align:left;cursor:pointer}.canvas-area{display:grid;place-items:center;overflow:auto}.canvas{width:390px;min-height:600px;background:#fff;border:1px solid #cfd6e0;box-shadow:0 8px 30px #0001;padding:25px;border-radius:15px;text-align:center}.canvas-title{font-size:20px;font-weight:bold;margin-bottom:20px}.component{border:1px dashed #356df3;padding:12px;margin:10px 0;cursor:pointer}.editor-name{font-weight:bold;margin-right:auto}.properties label{display:block;font-size:13px;margin-bottom:15px}.settings-card{display:grid;gap:12px}.project-item{background:#fff;border:1px solid #e1e5ec;padding:18px;border-radius:10px;margin-bottom:12px;display:flex;justify-content:space-between;align-items:center}.project-item p{margin:4px 0;color:#7a8597;font-size:13px}@media(max-width:800px){.hero{grid-template-columns:1fr}.cards,.template-grid{grid-template-columns:1fr}.editor{grid-template-columns:150px 1fr}.properties{display:none}}