:root{
  --bg:#0b0f14;
  --text:#e6edf3;
  --muted:#7d8a96;
  --accent:#7dd3fc;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}

body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

canvas{
  position:fixed;
  inset:0;
  z-index:0;
}

.card{
  position:relative;
  z-index:1;
  text-align:center;
  padding:48px 40px;

  /* Blanc adouci pour réduire le contraste */
  background:linear-gradient(145deg,#666666,#aaaaaa);
  border-radius:24px;
  width:min(90%,420px);
  opacity:0.8;

  /* Ombre plus diffuse et premium */
  box-shadow:
    0 30px 80px rgba(0,0,0,0.45),
    0 2px 0 rgba(255,255,255,0.4) inset;
}

.card img{
  max-width:180px;
  height:auto;
  display:block;
  margin:0 auto 20px auto;
}

h1{font-size:28px;font-weight:600;letter-spacing:.5px;margin-bottom:10px}

p{color:#fff;font-size:15px;margin-bottom:26px;text-shadow:0 1px 3px rgba(0,0,0,0.4)}

.mail-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:48px;
  height:48px;
  border-radius:50%;
  background:rgba(255,255,255,0.15);
  border:1px solid rgba(255,255,255,0.3);
  transition:all .25s ease;
  text-decoration:none;
}

.mail-btn svg{
  width:24px;
  height:24px;
  fill:#fff;
  transition:fill .25s ease;
}

.mail-btn:hover{
  background:rgba(125,211,252,0.25);
  border-color:var(--accent);
  transform:scale(1.1);
}

.mail-btn:hover svg{
  fill:var(--accent);
}

footer{
  position:fixed;
  bottom:16px;
  font-size:12px;
  color:var(--muted);
  opacity:.6;
  z-index:1;
}