*{box-sizing:border-box}body{margin:0;font:16px system-ui,sans-serif;background:#f1f5f9;color:#0f172a}
.top{display:flex;justify-content:space-between;align-items:center;padding:12px 20px;background:#fff;box-shadow:0 1px 4px #0001;position:relative}
.brand{font-weight:700;font-size:20px;color:#2563eb;text-decoration:none}nav a{margin-left:16px;text-decoration:none;color:#334155}
.burger{display:none;font-size:24px;background:none;border:0;min-height:44px;min-width:44px}
.hero{max-width:720px;margin:80px auto;text-align:center;padding:0 16px}.hero h1{font-size:2.2rem}
.btn,.btn2{display:inline-block;min-height:44px;padding:10px 20px;border-radius:10px;border:0;background:#2563eb;color:#fff;font-size:16px;cursor:pointer;text-decoration:none}
.btn2{background:#e2e8f0;color:#0f172a}.danger{color:#b91c1c}
.steps{display:flex;gap:6px;overflow-x:auto;padding:12px 16px}.steps button{border:0;border-radius:20px;padding:8px 14px;background:#fff;min-height:40px;white-space:nowrap}.steps .on{background:#2563eb;color:#fff}
.wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;padding:0 16px 24px;align-items:start}
.card{background:#fff;border-radius:14px;padding:20px;box-shadow:0 2px 10px #0001}
section{display:none}section.on{display:block}label{display:block;font-size:14px;margin:10px 0;color:#334155}
input,textarea{width:100%;padding:10px;border:1px solid #cbd5e1;border-radius:8px;font:inherit;margin-top:4px}
input.bad{border-color:#dc2626}.err{color:#dc2626;font-size:13px}.row{display:flex;gap:10px;flex-wrap:wrap}.row label{flex:1;min-width:130px}
.item{border:1px solid #e2e8f0;border-radius:10px;padding:10px;margin:10px 0}.nav{display:flex;justify-content:space-between;margin-top:16px}
#tpls button,#cols button{margin:4px;min-height:44px;border-radius:8px;border:2px solid #e2e8f0;background:#fff;padding:6px 12px}#tpls .on,#cols .on{border-color:#2563eb}
.pv{overflow:hidden;position:sticky;top:8px}.page{width:210mm;min-height:297mm;background:#fff;box-shadow:0 2px 12px #0003;padding:14mm;font-size:11pt;transform-origin:top left;color:#111}
.page h1{margin:0;font-size:24pt}.page h3{margin:14px 0 4px;font-size:11pt;text-transform:uppercase;border-bottom:1px solid var(--c);color:var(--c)}
.page p{margin:2px 0}.page img.ph{width:28mm;height:28mm;object-fit:cover;float:right;border-radius:50%}
.page .side{float:left;width:32%;background:var(--c);color:#fff;padding:8px;margin-right:4%}.page .side h3{color:#fff;border-color:#fff8}
.page.minimal{--c:#000!important}.page.creative h1{color:var(--c)}.page.professional h3{background:var(--c);color:#fff;padding:2px 6px;border:0}
@media(max-width:900px){.wrap{grid-template-columns:1fr}.pv{position:static}.burger{display:block}nav{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;flex-direction:column;padding:10px}nav.open{display:flex}nav a{margin:0;padding:12px}}
@media print{.top,.steps,.card{display:none}.wrap{display:block;padding:0}.pv{height:auto!important}.page{box-shadow:none;transform:none!important}}
.page{font-family:Arial,Helvetica,sans-serif;font-size:11pt;line-height:1.35;padding:12mm 14mm}
.page .rt{text-align:center;font-size:26pt;font-weight:700;margin-bottom:6mm}
.page .nm{font-size:17pt;font-weight:700;margin-bottom:2mm}
.page table{width:100%;border-collapse:collapse}.page td{vertical-align:top}
.page .pt{width:32mm;text-align:right}.page .pt img{width:30mm;height:40mm;object-fit:cover}
.page .ln{border-bottom:2px solid #333;margin:2mm 0 4mm}
.page .hb{font-weight:700;text-transform:uppercase;padding:2mm 3mm;margin:5mm 0 2mm}
.page.classic .hb{background:var(--bg);color:#000}
.page.underline .hb{border-bottom:2px solid var(--c);color:var(--c);padding-left:0}
.page .et th,.page .et td{border:1px solid #ddd;padding:2mm 3mm;text-align:left}
.page .pi td{padding:.6mm 2mm 0 2mm;width:auto}.page .pi td:nth-child(1){width:38mm}.page .pi td:nth-child(2){width:8mm}
.page .sg{margin-top:5mm}.page ul{margin:1mm 0 1mm 5mm;padding-left:4mm}.page p{margin:1mm 0}
.hero2{max-width:1100px;margin:0 auto;padding:56px 20px;display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.pill{display:inline-block;background:#dbeafe;color:#1e40af;padding:6px 14px;border-radius:20px;font-size:14px;font-weight:600}
.hero2 h1{font-size:2.8rem;line-height:1.15;margin:16px 0}.hero2 p{font-size:1.1rem;color:#475569;margin:0 0 24px}
.btn.big{padding:14px 28px;font-size:18px;box-shadow:0 6px 16px #2563eb55}.btn.light{background:#fff;color:#2563eb;box-shadow:none}
.ticks{list-style:none;padding:0;margin:20px 0 0;display:flex;gap:18px;flex-wrap:wrap;color:#334155}.ticks li:before{content:"✓ ";color:#16a34a;font-weight:700}
.mock{background:#fff;border-radius:12px;box-shadow:0 20px 50px #0002;padding:28px;transform:rotate(2deg);aspect-ratio:210/297;max-width:340px;margin:auto;width:100%}
.mock .mt{text-align:center;font-weight:700;font-size:20px;margin-bottom:12px}.mock i{display:block;height:8px;background:#e2e8f0;border-radius:4px;margin:8px 0}.mock i.s{width:60%}.mock .mb{height:18px;background:#e2e8f0;margin:14px 0 6px}
.blk{max-width:1000px;margin:0 auto;padding:48px 20px;text-align:center}.blk.alt{background:#fff;max-width:none}.blk.alt>*{max-width:1000px;margin-left:auto;margin-right:auto}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.fc{background:#fff;border:1px solid #e2e8f0;border-radius:14px;padding:24px;text-align:left;box-shadow:0 2px 8px #0000000d}.alt .fc{background:#f8fafc}
.fc span{display:inline-flex;width:36px;height:36px;border-radius:50%;background:#2563eb;color:#fff;align-items:center;justify-content:center;font-weight:700}.fc h3{margin:10px 0 6px}.fc p{margin:0;color:#475569}
details{background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;padding:14px 18px;margin:10px auto;text-align:left}summary{cursor:pointer;font-weight:600;min-height:24px}details p{color:#475569;margin:8px 0 0}
.cta{background:#2563eb;color:#fff;text-align:center;padding:56px 20px}.cta h2{margin:0 0 20px}.ft{text-align:center;padding:20px;color:#64748b}
@media(max-width:800px){.hero2{grid-template-columns:1fr;padding-top:32px}.hero2 h1{font-size:2rem}.grid3,.grid2{grid-template-columns:1fr}.mock{transform:none;max-width:260px}}