:root{--blue:#0b4ea2;--green:#17823b;--light:#f2fbf5;--orange:#f59e0b;--text:#102030;--border:#d8eadf}
*{box-sizing:border-box}body{margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--text);background:linear-gradient(180deg,#e9f7ff,#f8fff9)}
.app{max-width:1080px;margin:auto;padding:18px}.hero{display:grid;grid-template-columns:1fr 2fr;gap:16px}.box{background:white;border:1px solid var(--border);border-radius:22px;padding:22px;box-shadow:0 10px 30px rgba(0,0,0,.07)}
.logo{font-size:54px;font-weight:900;color:var(--green);letter-spacing:-2px}.logo span{color:var(--blue)}h1{font-size:38px;color:var(--blue);margin:0 0 10px}.steps{display:flex;gap:10px;flex-wrap:wrap}.steps span{background:var(--light);border:1px solid var(--border);border-radius:99px;padding:10px 14px;font-weight:700}
.tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:16px}.tab{border:0;border-radius:14px;padding:14px;font-weight:800;background:#e8f4ee;color:var(--green);font-size:16px}.tab.active{background:var(--green);color:white}.form{display:none;gap:13px}.form.active{display:grid}
label{display:grid;gap:6px;font-weight:700}input,select{width:100%;padding:15px;border:1px solid #cddbd2;border-radius:14px;font-size:16px;background:white}.check{display:flex;gap:10px}.check input{width:auto}
button,.btn{border:0;border-radius:16px;padding:15px 18px;font-size:17px;font-weight:900;cursor:pointer;text-decoration:none;text-align:center}.primary{background:var(--green);color:white}.secondary{background:#eef3f7;color:var(--blue)}
.hidden{display:none}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.card{color:var(--text);background:#fff;border:1px solid var(--border);border-radius:18px;padding:22px;font-weight:900;text-align:center;text-decoration:none}
.video iframe{width:100%;aspect-ratio:16/9;border:0;border-radius:16px}.question,.task{background:white;border:1px solid var(--border);border-radius:20px;padding:18px;margin:12px 0;box-shadow:0 8px 24px rgba(0,0,0,.06)}.option{display:block;margin:9px 0;padding:13px;border:1px solid #d8e2dc;border-radius:12px;background:#fbfffc}.success{background:#e9fff1;border-color:#8bd6a3}.error{background:#fff1f1;border-color:#e7a0a0}
@media(max-width:760px){.app{padding:12px}.hero{grid-template-columns:1fr}.logo{font-size:46px}h1{font-size:30px}.cards{grid-template-columns:1fr}}