@font-face {
  font-family: '403Esdonna-BoldSlant';
  src: url('assets/fonts/403Edsonna-BoldSlant.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root{
  --header-h:82px;
  --divider-h:2px;
  --footer-h:140px;
  --orange:#FF4D00;
  --dark:#2b2b2b;
}

*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{font-family:Segoe UI, Arial, sans-serif;overflow:auto;background:#000}

.site{min-height:100dvh;min-height:100svh;min-height:100vh;display:flex;flex-direction:column}

.site-header{height:var(--header-h);background:var(--dark);display:flex;align-items:center;padding:12px 25px}
.site-header .logo{height:40px}

.divider{height:var(--divider-h);background:var(--orange)}

.hero{flex:1 0 auto;background-image:url('assets/website_bg.png');background-size:cover;background-position:center;display:flex;align-items:center;justify-content:center;overflow:auto}

.hero-inner{max-width:980px;padding:40px;text-align:center;color:#fff;text-shadow:0 4px 18px rgba(0,0,0,0.6)}
.hero h1{font-family:'403Esdonna-BoldSlant', 'Segoe UI', sans-serif;color:var(--orange);font-size:4.5rem;margin:0 0 18px}
.hero .lead{font-size:1.35rem;line-height:1.6;margin:0 0 28px}

/* make inline links inside the hero/content use BayForged orange */
.hero-inner a, .hero-inner a:link, .hero-inner a:visited { color: var(--orange); text-decoration:underline }
.hero-inner a:hover, .hero-inner a:active { color: #ff6b33 }

/* Buttons should keep their own style (white, no underline) even inside .hero-inner */
.hero-inner a.btn, .btn:link, .btn:visited { color: #fff; text-decoration: none }
.btn:hover, .btn:active { color: #111; text-decoration: none }

.buttons{display:flex;gap:28px;justify-content:center;flex-wrap:wrap}
.btn{display:inline-block;padding:14px 36px;border-radius:12px;border:3px solid var(--orange);color:#fff;text-decoration:none;font-weight:700;background:transparent;transition:all .18s}
.btn:hover{background:var(--orange);color:#111;transform:translateY(-2px)}

.site-footer{height:var(--footer-h);background:linear-gradient(to top,#161616,#3a3a3a);color:#ddd;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16px 36px;text-align:center;border-top:2px solid #8b8b8b}
.footer-logo{height:44px;margin-bottom:10px;opacity:0.95}
.site-footer p{margin:0;font-size:0.9rem}

/* prefer flex to size the hero; adjust header/footer/padding for short viewports */
@media (max-height:700px){
  :root{ --header-h:68px; --footer-h:110px }
  .site-header{height:var(--header-h)}
  .site-footer{height:var(--footer-h)}
  .hero-inner{padding:24px}
}

@media (max-height:520px){
  :root{ --header-h:60px; --footer-h:90px }
  .site-header{height:var(--header-h)}
  .site-footer{height:var(--footer-h)}
  .hero-inner{padding:16px}
  .hero h1{font-size:2.6rem}
}

@media (orientation:landscape) and (max-height:420px){
  :root{ --header-h:56px; --footer-h:76px }
  .site-header{height:var(--header-h)}
  .site-footer{height:var(--footer-h)}
  .hero-inner{padding:12px}
  .hero h1{font-size:2.4rem}
}

@media(max-width:520px){
  .hero h1{font-size:3rem}
  .hero .lead{font-size:1rem}
  .btn{padding:12px 18px}
}