*{margin:0;padding:0;box-sizing:border-box}
:root{--ink:#2b2b2b;--dark:#2f2f33;--teal:#2ec4b6;--bg:#f4f5f7}
html{scroll-behavior:smooth}
body{font-family:'Poppins',Arial,sans-serif;background:var(--bg);color:var(--ink);line-height:1.6}
a{color:inherit}
.container{max-width:1100px;margin:0 auto;padding:0 24px}
header.site{background:var(--dark);color:#fff;position:sticky;top:0;z-index:50}
header.site .container{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{font-size:20px;font-weight:700;letter-spacing:2px;text-decoration:none}
.logo span{color:var(--teal)}
nav a{text-decoration:none;margin-left:22px;font-size:14px;opacity:.85}
nav a:hover{opacity:1}
nav a.btn{opacity:1;margin-left:26px}
.btn{display:inline-block;background:var(--teal);color:#fff;border:none;padding:12px 26px;border-radius:30px;font-size:15px;font-weight:600;cursor:pointer;font-family:inherit;text-decoration:none}
.btn:hover{filter:brightness(.93)}
.btn.dark{background:var(--dark)}
.btn.ghost{background:transparent;color:var(--dark);border:2px solid var(--dark)}
.btn.big{padding:16px 36px;font-size:17px}
.btn:disabled{opacity:.45;cursor:not-allowed}
section{padding:80px 0}
.center{text-align:center}
h2.title{font-size:34px;margin-bottom:10px;line-height:1.2}
p.sub{color:#666;max-width:620px;margin:0 auto 40px}
.hero{background:linear-gradient(135deg,#2f2f33 0%,#3c3c42 100%);color:#fff;padding:70px 0 80px;overflow:hidden}
.hero .container{display:flex;align-items:center;gap:50px}
.hero .txt{flex:1}
.hero h1{font-size:46px;line-height:1.15;margin-bottom:18px}
.hero h1 span{color:var(--teal)}
.hero p{font-size:18px;opacity:.85;margin-bottom:30px;max-width:520px}
.hero .note{font-size:13px;opacity:.7;margin-top:14px}
.hero .art{flex:0 0 auto;transform:rotate(4deg)}
.steps3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.card{background:#fff;border-radius:14px;padding:30px;box-shadow:0 4px 14px rgba(0,0,0,.06)}
.card .num{width:44px;height:44px;border-radius:50%;background:#e6f8f6;color:#1a8a80;font-weight:700;display:flex;align-items:center;justify-content:center;font-size:18px;margin-bottom:14px}
.card h3{margin-bottom:6px;font-size:18px}
.card p{color:#666;font-size:14px}
.examples{display:flex;gap:30px;justify-content:center;flex-wrap:wrap}
.examples figure{text-align:center}
.examples figcaption{margin-top:12px;font-size:14px;color:#666}
.feat{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.feat .ic{font-size:28px;margin-bottom:8px}
.price{max-width:420px;margin:0 auto;text-align:center;border:2px solid var(--teal)}
.price .amt{font-size:52px;font-weight:700;color:var(--dark)}
.price ul{list-style:none;text-align:left;margin:20px 0 26px}
.price li{padding:6px 0;border-bottom:1px solid #eee;font-size:14px}
.price li:before{content:'✓ ';color:var(--teal);font-weight:700}
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.stars{color:#f5b301;letter-spacing:2px}
.about{display:flex;gap:40px;align-items:center}
.about .txt{flex:1}
.about p{color:#555;margin-bottom:14px}
.faq{max-width:760px;margin:0 auto}
.faq details{background:#fff;border-radius:10px;padding:18px 22px;margin-bottom:12px;box-shadow:0 2px 8px rgba(0,0,0,.04)}
.faq summary{font-weight:600;cursor:pointer}
.faq details p{margin-top:10px;color:#555;font-size:14px}
.cta{background:var(--dark);color:#fff;text-align:center}
.cta p{opacity:.8;margin-bottom:26px}
footer.site{background:#232326;color:#aaa;padding:40px 0;font-size:14px}
footer.site .container{display:flex;justify-content:space-between;flex-wrap:wrap;gap:20px}
footer.site a{margin-right:18px;text-decoration:none}
footer.site a:hover{color:#fff}
.legal{max-width:760px;margin:0 auto;background:#fff;padding:40px;border-radius:14px}
.legal h1{margin-bottom:6px}
.legal h2{font-size:18px;margin:24px 0 6px}
.legal p,.legal li{color:#555;font-size:14px;margin-bottom:8px}
.legal ul{padding-left:20px}

/* ---------- builder ---------- */
.builder{max-width:860px;margin:30px auto 80px;padding:0 20px}
.prog{display:flex;gap:6px;margin-bottom:8px}
.prog i{flex:1;height:6px;border-radius:3px;background:#dcdfe3}
.prog i.done{background:var(--teal)}
.proglbl{font-size:13px;color:#888;margin-bottom:18px}
.step{display:none;background:#fff;border-radius:14px;padding:34px;box-shadow:0 4px 14px rgba(0,0,0,.06)}
.step.on{display:block}
.step h2{font-size:24px;margin-bottom:4px}
.step .lead{color:#777;margin-bottom:22px;font-size:14px}
.q{margin-bottom:26px}
.q > b{display:block;margin-bottom:10px}
.opts{display:flex;gap:12px;flex-wrap:wrap}
.opts button{flex:1;min-width:160px;background:#fff;border:2px solid #e2e5e8;border-radius:12px;padding:16px;font-family:inherit;font-size:14px;cursor:pointer;text-align:left}
.opts button span{display:block;font-size:12px;color:#888;margin-top:2px}
.opts button.on{border-color:var(--teal);background:#effbfa}
.row{display:flex;gap:14px;flex-wrap:wrap}
.row>div{flex:1;min-width:200px}
label{display:block;font-size:13px;font-weight:600;margin:12px 0 4px}
input,textarea{width:100%;padding:11px 12px;border:1px solid #d9dce0;border-radius:8px;font-family:inherit;font-size:14px}
input:focus,textarea:focus{outline:none;border-color:var(--teal)}
textarea{min-height:100px;resize:vertical}
.hint{font-size:12px;color:#888;margin-top:4px}
.tip{background:#effbfa;border-left:4px solid var(--teal);padding:12px 16px;border-radius:6px;font-size:13px;color:#2b5f5a;margin-bottom:18px}
.rep{position:relative;border:1px solid #e6e8eb;border-radius:12px;padding:6px 18px 18px;margin-bottom:14px;background:#fafbfc}
.rep .rm{position:absolute;top:10px;right:12px;background:none;border:none;font-size:20px;color:#999;cursor:pointer}
.add{background:none;border:2px dashed #cfd3d8;color:#555;border-radius:10px;padding:12px;width:100%;font-family:inherit;font-size:14px;cursor:pointer}
.add:hover{border-color:var(--teal);color:var(--teal)}
.nav{display:flex;justify-content:space-between;margin-top:20px}
.err{color:#c0392b;font-size:13px;margin-top:10px;min-height:18px}
.swatches{display:flex;gap:12px;margin-bottom:24px;flex-wrap:wrap}
.swatches button{width:44px;height:44px;border-radius:50%;cursor:pointer;border:3px solid #fff;box-shadow:0 0 0 2px #ddd}
.swatches button.on{box-shadow:0 0 0 3px var(--dark)}
.designs{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.pick{cursor:pointer;text-align:center;border-radius:12px;padding:10px;border:3px solid transparent}
.pick.on{border-color:var(--teal);background:#effbfa}
.pick p{margin-top:8px;font-weight:600;font-size:14px}
.final{display:flex;gap:30px;align-items:flex-start;flex-wrap:wrap;justify-content:center}
.paybox{flex:1;min-width:260px}
.paybox .amt{font-size:40px;font-weight:700}
.or{display:flex;align-items:center;gap:10px;color:#999;font-size:13px;margin:22px 0 10px}
.or:before,.or:after{content:'';flex:1;height:1px;background:#e2e5e8}
.codeRow{display:flex;gap:8px}
.codeRow input{text-transform:uppercase}
.ok{color:#1a8a80}
#printArea{position:fixed;left:-10000px;top:0}

/* ---------- mini CV previews ---------- */
.mini{--s:.4;width:calc(210mm*var(--s));height:calc(297mm*var(--s));overflow:hidden;position:relative;border-radius:6px;box-shadow:0 10px 30px rgba(0,0,0,.18);background:#fff}
.mini>.cv{position:absolute;top:0;left:0;transform:scale(var(--s));transform-origin:top left}
.blur .sec,.blur .sb,.blur .crow{filter:blur(4px)}
.wm{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
.wm span{white-space:nowrap;transform:rotate(-32deg);font-size:22px;font-weight:700;color:rgba(0,0,0,.18);letter-spacing:4px;background:rgba(255,255,255,.6);padding:4px 16px;border-radius:6px}

/* ---------- CV designs ---------- */
.cv{--f:1;--g:1;--a:#2ec4b6;--d:#2f2f33;width:210mm;min-height:297mm;background:#fff;color:#2b2b2b;font-family:'Poppins',Arial,sans-serif;text-align:left;line-height:1.6;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.cv h4{font-size:calc(14px*var(--f));letter-spacing:2px;font-weight:600}
.cv p,.cv li{font-size:calc(12px*var(--f));line-height:1.65}
.cv ul{padding-left:16px}
.cv li::marker{color:var(--a)}
.cv .first{font-size:34px;font-weight:300;letter-spacing:1px;line-height:1}
.cv .last{font-size:40px;font-weight:700;letter-spacing:1px;line-height:1.15}
.cv .jt{color:var(--a);font-weight:600;margin-top:8px;font-size:14px;letter-spacing:1.5px}
.cv .sec{margin-top:calc(28px*var(--g))}
.cv .sec h4{margin-bottom:10px;position:relative}
.cv .job{margin-bottom:calc(14px*var(--g))}
.cv .job small{font-size:calc(11px*var(--f));color:#666}
.cv .job b{display:block;font-size:calc(14px*var(--f))}
.cv .job p{color:#444}
.cv .subj{font-size:calc(11px*var(--f));color:#666}
.cv .refs{display:flex;gap:24px;flex-wrap:wrap}
.cv .refs div{font-size:calc(12px*var(--f));min-width:150px}
.cv .refs b{display:block;font-size:calc(13px*var(--f))}
.cv .mono{width:120px;height:120px;border-radius:50%;border:3px solid var(--a);display:flex;align-items:center;justify-content:center;font-size:40px;font-weight:600;letter-spacing:2px;flex:0 0 auto}
.cv .photo{display:block;object-fit:cover;flex:0 0 auto}
.cv .sb h4{margin:calc(24px*var(--g)) 0 10px;padding-bottom:8px;border-bottom:2px solid var(--a)}
.cv-side,.cv-banner .body{display:flex}
.cv-side .side{width:36%;background:var(--d);color:#fff;padding:calc(40px*var(--g)) 26px 40px;border-top:10px solid var(--a)}
.cv-side .side .mono{margin:0 auto 10px;color:#fff}
.cv-side .side .photo{width:100%;aspect-ratio:3/3.6;border-radius:0 0 50% 50% / 0 0 14% 14%;margin-bottom:10px}
.cv-side .main{width:64%;padding:calc(50px*var(--g)) 36px 40px}
.cv-side .main .sec,.cv-banner .main .sec{padding-left:24px;border-left:1.5px solid #bbb}
.cv-side .main .sec h4:before,.cv-banner .main .sec h4:before{content:'';position:absolute;left:-31px;top:3px;width:12px;height:12px;background:var(--a);transform:rotate(45deg)}
.cv-side .main p,.cv-side .main li{color:#444}
.cv-banner{display:flex;flex-direction:column}
.cv-banner .top{background:var(--d);color:#fff;padding:calc(40px*var(--g)) 44px;display:flex;align-items:center;gap:30px;border-bottom:8px solid var(--a)}
.cv-banner .top .photo{width:130px;height:130px;border-radius:50%;border:4px solid var(--a)}
.cv-banner .top .mono{color:#fff;width:110px;height:110px;font-size:36px}
.cv-banner .body{flex:1}
.cv-banner .side2{width:34%;background:#f1f3f4;padding:10px 26px 40px}
.cv-banner .side2 h4{color:var(--d)}
.cv-banner .main{width:66%;padding:10px 36px 40px}
.cv-min .one{padding:calc(50px*var(--g)) 56px 40px}
.cv-min .mhead{display:flex;align-items:center;gap:26px;padding-bottom:calc(20px*var(--g));border-bottom:3px solid var(--a)}
.cv-min .mhead .photo{width:110px;height:110px;border-radius:50%}
.cv-min .mhead .mono{width:100px;height:100px;font-size:34px;color:var(--d)}
.cv-min .first,.cv-min .last{color:var(--d)}
.cv-min .crow{font-size:calc(12px*var(--f));color:#555;margin-top:10px}
.cv-min .sec h4{color:var(--d);display:flex;align-items:center;gap:12px}
.cv-min .sec h4:after{content:'';flex:1;height:1px;background:#ddd}
.cv-min .grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 40px}
.cv-min .chips{display:flex;flex-wrap:wrap;gap:6px}
.cv-min .chips span{font-size:calc(11px*var(--f));background:#f1f3f4;border-left:3px solid var(--a);padding:4px 10px;border-radius:4px}

@media (max-width:820px){
  nav a:not(.btn){display:none}
  .hero .container,.about{flex-direction:column}
  .hero h1{font-size:34px}
  .steps3,.feat,.reviews{grid-template-columns:1fr}
  .step{padding:22px}
  .final .mini{--s:.42 !important}
  .designs .mini{--s:.28 !important}
}
@media print{
  @page{size:A4;margin:0}
  html,body{margin:0;background:#fff}
  body>*{display:none !important}
  body>#printArea{display:block !important;position:static}
}