:root{
  --red:#e11d2d;
  --dark:#a31018;
  --white:#ffffff;
  --muted:#f7f7f7;
  --black: #000;

}
*{box-sizing:border-box}
html,body{height:100%}
body{
  font-family:'Raleway',Arial,sans-serif;
  background:
    linear-gradient(180deg,rgba(255, 255, 255, 0.384),rgba(255, 255, 255, 0.678)),
    url('../img/classroom.jpg') center/cover no-repeat;
  color:#222;
  margin:0;
}
.page{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px}
.brand-logo{max-width:120px;width:100%;margin-bottom:-10px;display:block}
.card{max-width:760px;width:100%;background:var(--white);border-radius:0px;text-align:center;box-shadow:0 10px 30px rgba(0,0,0,0.08);padding:48px;border:4px solid var(--red)}
.logo{font-family:'Ubuntu',Arial,sans-serif;font-weight:800;color:var(--black);font-size:4rem;letter-spacing:1px;}
.tag{font-family:'Ubuntu',Arial,sans-serif;margin:0;color:var(--dark);font-weight:600;text-align: center;margin-bottom:24px;}
.headline{font-family:'Ubuntu',Arial,sans-serif;font-size:32px;margin:18px 0 8px;color:#111}
.lead{margin:0 0 22px;color:#444;line-height:1.5}
.subscribe{display:flex;gap:12px}
.subscribe input[type="email"]{flex:1;padding:14px 16px;border-radius:10px;border:2px solid #eee;font-size:15px}
.btn{background:var(--red);color:var(--white);border:none;padding:12px 18px;border-radius:0px;font-weight:700;cursor:pointer}
.btn:active{transform:translateY(1px)}
.message{margin-top:14px;color:var(--dark);font-weight:600}
.foot{margin-top:20px;color:#777}
.foot a{color:var(--red);text-decoration:none}
@media (max-width:560px){
  .card{padding:28px}
  .headline{font-family:'Ubuntu',Arial,sans-serif;font-size:22px}
  .subscribe{flex-direction:column}
  .btn{width:100%}
}