#page-pin{background:linear-gradient(135deg,#ffd1dc,#ffe7ef);}
#page-pin .card{width:340px;padding:35px;background:rgba(255,255,255,.25);backdrop-filter:blur(18px);border-radius:30px;text-align:center;box-shadow:0 15px 40px rgba(0,0,0,.15);}
#page-pin h2{margin-bottom:25px;color:#ff2d75;}
#page-pin .dots{display:flex;justify-content:center;gap:15px;margin-bottom:35px;}
#page-pin .dot{width:16px;height:16px;border-radius:50%;border:2px solid #ff4d88;transition:.3s;}
#page-pin .dot.fill{background:#ff4d88;}
#page-pin .keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;}
#page-pin button{height:70px;border:none;border-radius:50%;font-size:24px;background:white;box-shadow:0 5px 15px rgba(0,0,0,.1);cursor:pointer;transition:.2s;}
#page-pin button:active{transform:scale(.9);}
#page-pin .shake{animation:shake-pin .4s;}
@keyframes shake-pin{0%,100%{transform:translateX(0);}20%{transform:translateX(-8px);}40%{transform:translateX(8px);}60%{transform:translateX(-8px);}80%{transform:translateX(8px);}}
#page-pin .dot{transition:.25s, transform .3s;}
#page-pin .dot.correct{background:#2ecc71;border-color:#2ecc71;transform:scale(1.3);}
#page-pin .unlock-flash{animation:unlock-flash .6s ease;}
@keyframes unlock-flash{0%{box-shadow:0 15px 40px rgba(0,0,0,.15);}50%{box-shadow:0 0 60px 10px rgba(46,204,113,.6);}100%{box-shadow:0 15px 40px rgba(0,0,0,.15);}}
#page-pin button:active{transform:scale(.88);}
#page-pin .pin-hint{margin-top:22px;font-size:13px;color:#a04d6e;font-style:italic;}
#page-pin .pin-hint.hidden{display:none;}

/* Premium responsive */
*{box-sizing:border-box}img,video{max-width:100%;height:auto}body{overflow-x:hidden}
.container{width:min(92%,1100px);margin:auto}
h1{font-size:clamp(2rem,5vw,4rem)}h2{font-size:clamp(1.5rem,4vw,3rem)}p{font-size:clamp(1rem,2vw,1.1rem)}
button,.btn{min-height:48px;padding:.8rem 1.4rem;border-radius:14px}
@media(max-width:768px){section{padding:60px 16px}}