@import "https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap";:root{--bg-color:#ece5d3;--text-primary:#101820;--text-secondary:#9b876a;--font-heading:"Playfair Display", serif;--font-body:"Montserrat", sans-serif}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-color);color:var(--text-primary);font-family:var(--font-body);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}.app-container{flex-direction:column;justify-content:flex-start;align-items:center;min-height:100vh;padding:5rem 1rem 14rem;display:flex;position:relative}.content-wrapper{z-index:10;flex-direction:column;align-items:center;width:100%;max-width:600px;animation:1.5s ease-out fadeIn;display:flex;position:relative}.logo{filter:invert()brightness(.1)sepia()hue-rotate(180deg)saturate(2);width:50px;height:auto;margin-bottom:2.5rem}h1.main-title{font-family:var(--font-heading);text-align:center;letter-spacing:5px;text-transform:uppercase;color:var(--text-primary);margin-bottom:2rem;font-size:clamp(3.5rem,12vw,6rem);font-weight:500;line-height:1.1}.class-of{font-family:var(--font-body);letter-spacing:.4em;text-transform:uppercase;color:var(--text-primary);align-items:center;gap:1.5rem;margin-bottom:1rem;font-size:.9rem;display:flex}.class-of:before,.class-of:after{content:"";background-color:var(--text-secondary);width:60px;height:1px}.year{font-family:var(--font-heading);color:var(--text-secondary);letter-spacing:.15em;margin-bottom:1.5rem;font-size:clamp(4rem,12vw,5.5rem);line-height:1}.star-divider{align-items:center;gap:1.5rem;width:100%;max-width:300px;margin-bottom:2.5rem;display:flex}.star-divider:before,.star-divider:after{content:"";background-color:var(--text-primary);opacity:.3;flex-grow:1;height:1px}.diamond{background-color:var(--text-primary);width:8px;height:8px;transform:rotate(45deg)}h2.subtitle{font-family:var(--font-body);letter-spacing:.4em;text-align:center;text-transform:uppercase;color:var(--text-primary);margin-bottom:4rem;font-size:clamp(1rem,4vw,1.2rem);font-weight:500}.form-container{flex-direction:column;gap:2.5rem;width:100%;max-width:380px;display:flex}.input-group{flex-direction:column;display:flex;position:relative}.input-group input{color:var(--text-primary);font-family:var(--font-body);letter-spacing:.05em;background:0 0;border:none;border-bottom:1px solid #10182033;outline:none;padding:.5rem 0;font-size:1rem;transition:border-color .3s}.input-group input:focus{border-bottom-color:var(--text-secondary)}.input-group input::placeholder{color:#10182066;letter-spacing:.15em;text-transform:uppercase;font-size:.8rem}.error-text{color:#d9534f;margin-top:.5rem;font-size:.75rem;position:absolute;bottom:-1.5rem}.submit-btn{color:var(--text-primary);border:1px solid var(--text-secondary);font-family:var(--font-body);text-transform:uppercase;letter-spacing:.2em;cursor:pointer;background-color:#0000;justify-content:center;align-items:center;min-width:200px;min-height:56px;margin-top:1.5rem;padding:1rem 2rem;transition:all .3s;display:flex;position:relative;overflow:hidden}.submit-btn:before{content:"";background:linear-gradient(90deg,#0000,#9b876a33,#0000);width:100%;height:100%;transition:all .5s;position:absolute;top:0;left:-100%}.submit-btn:hover:before{left:100%}.submit-btn:hover{background-color:#9b876a0d;box-shadow:0 0 15px #9b876a1a}.submit-btn:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}.success-message{text-align:center;flex-direction:column;align-items:center;gap:1rem;padding:3rem 0;animation:1s ease-out fadeIn;display:flex}.success-message svg{color:var(--text-secondary);width:48px;height:48px;margin-bottom:1rem}.success-message h3{font-family:var(--font-heading);color:var(--text-primary);letter-spacing:.1em;text-transform:uppercase;font-size:2.5rem}.success-message p{font-family:var(--font-body);color:#10182099;letter-spacing:.05em;line-height:1.6}@keyframes fadeIn{0%{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}@media (width<=480px){.app-container{padding:3rem 1rem 8rem}h1.main-title{margin-bottom:1.5rem}.year{margin-bottom:1rem}.star-divider{margin-bottom:2rem}h2.subtitle{margin-bottom:3rem}.form-container{gap:2rem}.success-message h3{font-size:2rem}}.animate-spin{animation:1s linear infinite spin}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}
