:root{
  --max-width:1100px;
  --content-width:900px;
  --card-bg: rgba(255,255,255,0.92);
  --accent: #1a1a1a;
}
@font-face{
  font-family: 'Fedra Sans';
  /* Use the Fedra files present in interim-site/fonts/ */
  src: url('fonts/FedraSansStd-Book.woff') format('woff'),
       url('../fonts/FedraSansStd-Book.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: 'Fedra Sans';
  src: url('fonts/FedraSansStd-Bold.woff') format('woff'),
       url('../fonts/FedraSansStd-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family: 'Fedra Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;color:var(--accent)}
body{
  background-image: url("images/background.webp");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  height: 100vh;
  display:flex;
  align-items:center;
  justify-content:center;
}
.overlay{
  position:fixed;inset:0;background:rgba(0,0,0,0.45);z-index:0;
}
.copyright{position:fixed;bottom:8px;right:12px;font-size:10px;color:rgba(255,255,255,0.4);z-index:2;text-align:right;max-width:300px}
.copyright a{color:rgba(255,255,255,0.4);text-decoration:none}
.container{position:relative;z-index:1;max-width:var(--max-width);width:92%;margin:auto;padding:48px 0;display:flex;flex-direction:column;align-items:center}
.logo{max-width:300px;height:auto;margin-bottom:120px}
.title{font-size:64px;line-height:1;margin:12px 0 36px;color:#fff;text-align:center;font-weight:700;letter-spacing:1px}
.subtitle{font-size:18px;line-height:1;margin:0 0 36px;color:#fff;text-align:center;font-weight:400;letter-spacing:0.03em; font-variant: all-small-caps;}
.notice{background:rgba(255,255,255,0.9);padding:18px 22px;border-radius:4px;max-width:var(--content-width);margin-bottom:28px;color:#111;text-align:left}
.notice h3{margin:0 0 8px;font-size:20px}
.notice p{margin:0;font-size:15px;line-height:1.45}
.cards{display:flex;gap:28px;width:100%;justify-content:center;max-width:var(--content-width);flex-wrap:wrap}
.card{background:#003F77;padding:22px;border-radius:4px;box-shadow:0 6px 18px rgba(0,0,0,0.25);flex:1 1 320px;min-width:220px;color:#fff}
.card h2{margin:0 0 8px;font-size:18px;color:#fff}
.card p{margin:8px 0;color:#fff;font-size:15px}
.card a{color:#cfe6ff;text-decoration:none}
.card p > a{display:inline-block;margin:12px 0;padding:10px 18px;background:transparent;border:2px solid #cfe6ff;border-radius:20px;font-size:14px;font-weight:700;color:#cfe6ff;text-decoration:none;transition:all 0.3s ease}

@media (max-width:800px){
  .title{font-size:40px}
  .cards{flex-direction:column;align-items:stretch;gap:16px}
  .card{flex:none;width:100%;min-width:0}
  .notice{padding:14px}
}

@media (max-width:480px){
  html,body{hyphens:auto}
  .card,
  .notice{hyphens:auto}
}