:root { --purple: #4e54c8; --purple-dark: #3a40b0; --navy: #1a2a6c; --text: #555; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { overflow-x: hidden; color: #fff; background: var(--purple); font-family: Arial, "Noto Sans", sans-serif; letter-spacing: 0; }
a { color: inherit; }
.area { position: fixed; z-index: -1; inset: 0; overflow: hidden; background: var(--purple); }
.circles { position: absolute; inset: 0; margin: 0; padding: 0; overflow: hidden; }
.circles li { position: absolute; display: block; bottom: -150px; width: 20px; height: 20px; list-style: none; background: rgba(255,255,255,.2); animation: animate 25s linear infinite; }
.circles li:nth-child(1){left:25%;width:80px;height:80px;animation-delay:0s}.circles li:nth-child(2){left:10%;animation-delay:2s;animation-duration:12s}.circles li:nth-child(3){left:70%;animation-delay:4s}.circles li:nth-child(4){left:40%;width:60px;height:60px;animation-duration:18s}.circles li:nth-child(5){left:65%}.circles li:nth-child(6){left:75%;width:110px;height:110px;animation-delay:3s}.circles li:nth-child(7){left:35%;width:150px;height:150px;animation-delay:7s}.circles li:nth-child(8){left:50%;width:25px;height:25px;animation-delay:15s;animation-duration:45s}.circles li:nth-child(9){left:20%;width:15px;height:15px;animation-delay:2s;animation-duration:35s}.circles li:nth-child(10){left:85%;width:150px;height:150px;animation-duration:11s}
@keyframes animate { 0% { transform: translateY(0) rotate(0); opacity: 1; border-radius: 0; } 100% { transform: translateY(-1000px) rotate(720deg); opacity: 0; border-radius: 50%; } }
.sticky-header { position: sticky; top: 0; z-index: 1000; width: 100%; background: rgba(255,255,255,.96); box-shadow: 0 2px 10px rgba(0,0,0,.1); backdrop-filter: blur(10px); }
.header-container { max-width: 1200px; margin: 0 auto; padding: 15px 20px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.logo-container img { display: block; height: 60px; width: auto; }
.website-link, .ziska-link { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 700; }
.website-link { padding: 14px 24px; color: #fff; background: #012581; border: 1px solid rgba(78,84,200,.2); border-radius: 50px; white-space: nowrap; }
.website-link:hover, .ziska-link:hover { color: #fff; background: var(--purple-dark); }
.external-icon { display: block; flex: 0 0 24px; width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.75; stroke-linecap: round; stroke-linejoin: round; }
.hero-section { padding: 80px 20px 0; text-align: center; text-shadow: 0 2px 4px rgba(0,0,0,.3); }
.hero-section h1 { margin: 0 0 20px; font-size: 2.5rem; line-height: 1.2; font-weight: 700; }
.hero-section p { max-width: 700px; margin: 0 auto; font-size: 1.2rem; }
.main-content { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 80px; padding: 80px 0; }
.form-container { width: 90%; max-width: 1120px; overflow: hidden; margin: 0 auto; color: #17213a; background: rgba(255,255,255,.95); border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,.1); }
.form-flex-wrapper { display: flex; min-height: 400px; }
.form-logo-section { flex: 1; display: flex; align-items: center; justify-content: center; padding: 30px; border-right: 1px solid #2a35903d; }
.form-logo-section img { max-width: 100%; max-height: 200px; height: auto; }
.form-content-section { flex: 1.5; display: flex; }
.form-content { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 30px; }
.validate-form { display: flex; flex-wrap: wrap; align-items: center; }
.wrap-input100 { width: 70%; }
.input100 { width: 100%; padding: 18px 20px; border: 1px solid #e3e8ee; border-radius: 8px; color: #17213a; background: #fff; font-size: 18px; outline: none; }
.input100:focus { border-color: var(--purple); box-shadow: 0 0 0 3px rgba(78,84,200,.1); }
.button-container { width: 30%; max-width: 170px; padding-left: 14px; }
.login100-form-btn { width: 100%; height: 63px; padding: 0 20px; border: 0; border-radius: 8px; color: #fff; background: var(--purple); font-size: 16px; font-weight: 700; cursor: pointer; }
.login100-form-btn:hover { background: var(--purple-dark); }
.login100-form-btn:disabled { opacity: .7; cursor: wait; }
.note-text { display: flex; align-items: flex-start; gap: 7px; margin: 20px 0 0; color: #666; font-size: 14px; line-height: 1.6; }
.info-icon { display: inline-flex; flex: 0 0 17px; align-items: center; justify-content: center; width: 17px; height: 17px; margin-top: 2px; border-radius: 50%; color: #fff; background: #666; font-size: 12px; font-weight: 700; }
.result-message { margin: 0 0 20px; padding: 16px 18px; border-left: 4px solid #f0a000; color: #533a08; background: #fff5d9; }
.result-message.success { border-color: #16794b; color: #105b39; background: #eaf7f0; }.result-message.repeat{border-color:#b82b37;color:#245c37;background:#e5f5e8}.result-message h2{margin:0 0 8px;font-size:19px}.result-message p{margin:6px 0;font-size:14px;line-height:1.55}.result-message strong{display:block;margin:9px 0;font-size:14px}.result-message:not(.success) h2,.result-message:not(.success) strong{color:#d40000}.result-message[hidden],.product-details[hidden],[hidden]{display:none!important}
.product-details { margin-top: 28px; border-top: 1px solid #dce3ec; }.details-heading { margin: 0; padding: 14px 0; border-bottom: 1px solid #dce3ec; color: #18202b; font-size: 19px; }.product-details dl{margin:0;padding:8px 0}.product-details dl>div{display:grid;grid-template-columns:minmax(128px,42%) minmax(0,1fr);gap:14px;padding:10px 0;border-bottom:1px solid #e7ebf0}.product-details dt{color:#737b83;font-size:15px}.product-details dd{margin:0;color:#18202b;font-size:15px;font-weight:700;overflow-wrap:anywhere}.product-image-body{padding:22px 0 8px;text-align:center}.product-image-body img{display:block;width:100%;max-height:420px;object-fit:contain;margin:0 auto;border-radius:6px}.product-image-body p{color:#637083}
.instructions-container { display: flex; flex-wrap: wrap; justify-content: center; max-width: 1200px; padding: 0 20px; }
.instructions-container > h2 { width: 100%; margin: 0 0 30px; text-align: center; font-size: 2rem; text-shadow: 0 2px 4px rgba(0,0,0,.3); }
.instruction-card { position: relative; flex: 1 1 300px; max-width: 350px; min-width: 300px; height: 400px; margin: 20px; border: 1px solid rgba(255,255,255,.1); border-radius: 15px; background: #3a40b0; box-shadow: inset 5px 5px 5px rgba(0,0,0,.2),inset -5px -5px 15px rgba(255,255,255,.1),5px 5px 15px rgba(0,0,0,.3); }
.instruction-card .box { position: absolute; inset: 20px; display: flex; align-items: flex-start; overflow: hidden; border-radius: 15px; }.instruction-card .box:before{position:absolute;inset:0 auto 0 0;width:50%;content:"";background:rgba(255,255,255,.03)}.instruction-card .content{position:relative;width:100%;margin-top:75px;padding:20px;text-align:left}.instruction-card h3{margin:0 0 15px;color:#fff;font-size:1.5rem}.instruction-card h4{position:absolute;top:-35px;right:10px;margin:0;color:rgba(255,255,255,.1);font-size:6rem;line-height:1;font-weight:700}.instruction-card .des{color:rgba(255,255,255,.9);font-size:1rem;line-height:1.6;font-weight:300}.instruction-card .des span{font-weight:700}.instruction-card a{text-decoration:none}
.verify-section { width: 100%; padding: 0 20px; }.container { width: 100%; max-width: 1200px; margin: 0 auto; }.section-title { margin: 0 0 40px; color:#fff; text-align:center;font-size:2.2rem }.verify-block { width: 1150px; max-width: 100%; margin: 0 auto 30px; padding: 30px; color:#555; background:#fff; border-radius:10px; box-shadow:0 5px 15px rgba(0,0,0,.05)}.verify-question{display:flex;align-items:center;margin:0 0 20px;color:var(--purple);font-size:1.5rem}.verify-question:before{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;margin-right:15px;border-radius:50%;content:'?';color:#fff;background:var(--purple);font-size:1.2rem;font-weight:700}.verify-answer{padding-left:45px}.verify-answer p{margin:0 0 15px;font-size:1.1rem;line-height:1.6}.verify-answer ul{margin:20px 0;padding-left:20px}.verify-answer li{margin-bottom:10px}.full-width-img{display:block;width:100%;height:auto;margin:20px 0;border-radius:8px;box-shadow:0 5px 15px rgba(0,0,0,.1)}.ziska-link{margin-top:15px;padding:12px 25px;color:#fff;background:var(--purple);border-radius:50px}.verification-warning{width:100%;max-width:1160px;padding:0 20px}.warning-container{position:relative;overflow:hidden;padding:25px;color:#fff;background:#3a40b0;border-left:5px solid #fff;border-radius:8px;box-shadow:0 10px 30px rgba(78,78,78,.2)}.warning-title{margin:0 0 15px;font-size:1.5rem}.warning-text{font-size:1.05rem;line-height:1.6;margin:0 0 15px}.official-link{display:inline-block;margin:10px 0;padding:10px 20px;color:#333;background:#fff;border-radius:50px;font-weight:700;text-decoration:none}.warning-tip{margin:20px 0;padding:15px;border-left:3px solid #fff;border-radius:0 5px 5px 0;background:rgba(0,0,0,.2);line-height:1.5}.warning-tip p{margin:0}.warning-url{color:#fff;font-weight:700}.safety-message{margin:20px 0 0;padding-top:15px;border-top:1px dashed rgba(255,255,255,.3);text-align:center;font-style:italic}
.footer{position:relative;z-index:1;padding:30px 0;color:#fff;background:linear-gradient(135deg,#1a2a6c,#093c94)}.footer .container{max-width:1200px;padding:0 15px}.copyright{width:100%;margin:0;padding-top:0;color:rgba(255,255,255,.7);text-align:center;font-size:14px}.go-to-top{position:fixed;right:30px;bottom:30px;z-index:999;display:flex;align-items:center;justify-content:center;width:50px;height:50px;border:0;border-radius:50%;color:#fff;background:var(--purple);font-size:28px;cursor:pointer;opacity:0;visibility:hidden;transform:translateY(20px);transition:.3s}.go-to-top.active{opacity:1;visibility:visible;transform:translateY(0)}
@media (max-width: 992px) {.form-flex-wrapper{flex-direction:column}.form-logo-section{border-right:0;border-bottom:1px solid #2a35903d}.wrap-input100,.button-container{width:100%;max-width:none;padding-left:0}.button-container{margin-top:20px}.instruction-card{max-width:calc(50% - 40px)}}
@media (max-width: 576px) {.header-container{padding:10px 15px}.logo-container img{height:50px}.website-link{padding:10px 14px;font-size:14px}.hero-section{padding:30px 20px 0}.hero-section h1{font-size:2rem}.hero-section p{font-size:1rem}.main-content{gap:40px;padding:40px 0}.form-container{width:90%}.form-content{padding:20px 15px}.instructions-container{width:100%;padding:0}.instructions-container>h2{font-size:1.8rem}.instruction-card{width:90%;max-width:90%;min-width:0;height:220px;margin:0 auto 20px}.instruction-card .box{inset:10px;align-items:center;border-radius:10px}.instruction-card .content{margin-top:0;padding:15px}.instruction-card h4{top:-20px;right:5px;font-size:3.5rem}.instruction-card h3{font-size:1.3rem}.instruction-card .des{font-size:.9rem}.verify-section{padding:0}.section-title{font-size:1.8rem;margin-bottom:25px}.verify-block{width:90%;padding:20px;border-radius:8px}.verify-question{font-size:1.3rem}.verify-answer{padding-left:0}.verification-warning{padding:0}.warning-container{width:90%;margin:0 auto;padding:20px}.warning-title{font-size:1.3rem}.warning-text{font-size:1rem}.footer{padding:20px 0}.footer .container{width:90%;padding:0;margin:auto}.copyright{font-size:13px}.go-to-top{right:10px;bottom:20px;width:45px;height:45px;font-size:24px}}