:root{
  --brand:#ff6f3c;
  --brand-dark:#e65a2d;
  --overlay: rgba(10,10,10,0.45);
  --max-width:1100px;
}

*{box-sizing:border-box}
body,html{height:100%}
body{font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; margin:0}

.hero{
  min-height:100vh;
  background-image: url('/assets/images/hero.jpg');
  background-size:cover;
  background-position:center center;
  position:relative;
}

.hero .overlay{
  position:absolute; inset:0; background:rgba(10,10,10,0.65);
}

.container{position:relative; z-index:2; max-width:var(--max-width)}
.card{backdrop-filter: blur(6px)}
.logo{
  max-width:200px;
  height:auto;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,0.3));
  animation: fadeInDown 0.8s ease-out;
}

@keyframes fadeInDown{
  from{
    opacity:0;
    transform:translateY(-20px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

.btn-primary{background:linear-gradient(180deg,var(--brand),var(--brand-dark)); border:0}
.btn-primary:hover{filter:brightness(0.98)}

#form-msg{margin-top:.5rem}

.social-links{
  display:flex;
  gap:1rem;
  justify-content:center;
  padding-top:1rem;
  border-top:1px solid rgba(255,255,255,0.2);
}
.social-links a{
  font-size:2rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:2.5rem;
  height:2.5rem;
  border-radius:50%;
  background:rgba(255,255,255,0.1);
  transition: transform 0.3s, background 0.3s;
  text-decoration:none;
  color:white;
}
.social-links a i{
  color:inherit;
  font-size:inherit;
}
.social-links a:hover{
  transform: scale(1.15);
  background:rgba(255,255,255,0.25);
}

@media (max-width:576px){
  .display-5{font-size:1.75rem}
  .card{padding:1rem}
  .logo{max-width:140px}
  .lead{font-size:0.95rem}
  .social-links{gap:0.8rem}
  .social-links a{width:2.2rem; height:2.2rem; font-size:1.8rem}
}

/* Accessibility focus styles */
:focus{outline:3px solid rgba(255,111,60,0.25); outline-offset:2px}