@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700;800;900&family=Roboto:wght@400;500;700&display=swap');

:root{
  --orange:#f28c28;
  --orange2:#df7618;
  --dark:#101820;
  --dark2:#1b252e;
  --white:#fff;
  --bg:#f4f4f2;
  --line:#e1e2df;
  --text:#1b2025;
  --muted:#66727b;
  --green:#27774a;
  --amber:#a66a00;
  --red:#9f3e31;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:"Roboto",Arial,sans-serif}
body{min-height:100vh}
a{text-decoration:none;color:inherit}
header{background:var(--dark);color:white;border-bottom:6px solid var(--orange)}
.head{max-width:980px;margin:auto;padding:17px 20px;display:flex;align-items:center;gap:18px;min-height:105px}
.pioc-logo{
  width:190px;height:72px;flex:0 0 190px;
  background:url("https://www.pioc.info/wp-content/uploads/2025/10/textlogowhite-300x128.png") center/contain no-repeat;
  text-indent:-9999px;overflow:hidden
}
.brand{border-left:1px solid rgba(255,255,255,.22);padding-left:18px;min-width:0}
.brand strong{display:block;font-family:"Montserrat";font-size:20px;font-weight:800}
.brand span{display:block;font-size:12px;color:#d8dde1;margin-top:4px}
.proto{margin-left:auto;background:var(--orange);color:var(--dark);font:900 10px "Montserrat";letter-spacing:.08em;padding:8px 10px;border-radius:4px}
.langbar{background:#fff;border-bottom:1px solid var(--line)}
.langinner{max-width:980px;margin:auto;padding:9px 20px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.langlabel{font:800 11px "Montserrat";color:#6a7278;margin-right:2px;text-transform:uppercase;letter-spacing:.08em}
.lang{font:700 12px "Montserrat";padding:7px 9px;border-radius:4px;border:1px solid var(--line);background:#fafafa}
.lang.active{background:var(--dark);color:#fff;border-color:var(--dark)}
.lang.future{color:#92999f}
main{max-width:980px;margin:auto;padding:30px 18px 48px}
.note{background:#fff;border:1px solid var(--line);border-left:5px solid var(--orange);border-radius:8px;padding:12px 15px;margin-bottom:17px;color:var(--muted);font-size:13px;line-height:1.5}
.card{background:white;border-radius:18px;box-shadow:0 16px 44px rgba(16,24,32,.1);overflow:hidden}
.progress{height:7px;background:linear-gradient(90deg,var(--orange) var(--pct,10%),#e9e9e5 var(--pct,10%))}
.inner{padding:40px 42px 44px}
.eyebrow{font:900 11px "Montserrat";letter-spacing:.12em;text-transform:uppercase;color:var(--orange2);margin-bottom:11px}
h1,h2,h3{font-family:"Montserrat";color:var(--dark);margin:0 0 14px;line-height:1.06;letter-spacing:-.03em}
h1{font-size:clamp(40px,7vw,64px);font-weight:900}
h2{font-size:clamp(29px,5vw,42px);font-weight:800}
h3{font-size:24px;font-weight:800}
.lead{max-width:730px;font-size:18px;line-height:1.58;color:#4f5962;margin:0 0 24px}
.small{font-size:13px;line-height:1.55;color:var(--muted)}
.options{display:grid;gap:11px;margin-top:22px}
.option{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:62px;padding:16px 18px;border:1px solid var(--line);border-left:5px solid transparent;border-radius:8px;background:#fff;font:700 16px "Montserrat";transition:.15s}
.option:hover{border-left-color:var(--orange);background:#fffaf5;transform:translateX(2px)}
.arrow{font-size:23px;color:var(--orange2)}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:25px}
.btn{display:inline-flex;justify-content:center;align-items:center;min-height:50px;padding:14px 20px;border-radius:5px;font:800 14px "Montserrat"}
.primary{background:var(--orange);color:var(--dark)}
.secondary{background:var(--dark);color:#fff}
.light{background:#fff;border:1px solid var(--line);color:var(--dark)}
.back{display:inline-block;margin-bottom:19px;color:var(--muted);font:800 12px "Montserrat"}
.callout{padding:16px 17px;border:1px solid #dfe3e5;border-left:5px solid #9ca7ae;border-radius:8px;background:#f5f6f6;line-height:1.55;margin:19px 0}
.callout.ok{background:#eef8f2;border-color:#c7e3d1;border-left-color:var(--green)}
.callout.warn{background:#fff8e9;border-color:#efdaa0;border-left-color:#d29b21}
.callout.important{background:#fff3e9;border-color:#f0c79e;border-left-color:var(--orange)}
.checks{display:grid;gap:8px;margin:18px 0}
.check{background:#f7f7f5;border-radius:6px;padding:11px 13px;font-size:14px}
.check b{color:var(--green);margin-right:7px}
.pathgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:22px}
.path{border:1px solid var(--line);border-radius:9px;padding:20px;background:#fff}
.path h3{font-size:20px}
.path p{font-size:14px;line-height:1.55;color:#59636b}
.numbered{counter-reset:step;list-style:none;padding:0;margin:20px 0;display:grid;gap:11px}
.numbered li{counter-increment:step;position:relative;padding:13px 14px 13px 52px;background:#f7f7f5;border-radius:7px;line-height:1.5}
.numbered li:before{content:counter(step);position:absolute;left:14px;top:11px;width:27px;height:27px;border-radius:50%;background:var(--orange);display:grid;place-items:center;font:900 13px "Montserrat";color:var(--dark)}
.translate{width:100%;border-collapse:collapse;margin:18px 0;font-size:14px}
.translate td{border-bottom:1px solid var(--line);padding:10px 8px;vertical-align:top}
.translate td:first-child{font-weight:700;color:#34404a;width:46%}
.deadline{display:inline-block;background:var(--dark);color:#fff;padding:9px 12px;border-radius:4px;font:800 13px "Montserrat";margin:5px 0}
.source{margin-top:28px;padding-top:17px;border-top:1px solid var(--line);font-size:12px;line-height:1.65;color:var(--muted)}
.source a{color:#2b5e7e;text-decoration:underline}
form label{display:block;margin:15px 0 6px;font:800 12px "Montserrat"}
input,textarea{width:100%;font:inherit;padding:13px 14px;border:1px solid #d5d9dc;border-radius:5px;background:#fff}
textarea{min-height:130px;resize:vertical}
footer{max-width:980px;margin:auto;padding:0 20px 30px;color:#747d84;font-size:11px;line-height:1.55}
@media(max-width:720px){
  .head{min-height:88px;padding:12px 14px}.pioc-logo{width:138px;height:58px;flex-basis:138px}
  .brand{padding-left:12px}.brand strong{font-size:15px}.brand span,.proto{display:none}
  .langinner{padding:8px 10px;gap:6px}.lang{font-size:10px;padding:6px 7px}
  main{padding:14px 9px 32px}.inner{padding:28px 19px 32px}.lead{font-size:16px}
  .pathgrid{grid-template-columns:1fr}
}
@media(max-width:430px){.brand{display:none}.pioc-logo{width:170px;height:62px;flex-basis:170px}}