:root{
  --bg0:#071316;
  --bg1:#0b1f24;
  --glass: rgba(10, 18, 20, 0.58);
  --glass-2: rgba(10, 18, 20, 0.70);
  --gold1:#f6d48a;
  --gold2:#c9922e;
  --gold3:#7b5514;
  --line: rgba(214, 170, 76, 0.28);
  --text: rgba(245, 245, 245, 0.92);
  --muted: rgba(245, 245, 245, 0.70);
}

html{scroll-behavior:smooth;}
body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: radial-gradient(1200px 600px at 30% -10%, rgba(27, 90, 96, .55), transparent 60%),
              linear-gradient(180deg, var(--bg0), var(--bg1));
  color: var(--text);
}

h1,h2,h3,.display-font{font-family:"Playfair Display", Georgia, "Times New Roman", serif;}

.gold-gradient{
  background: linear-gradient(90deg, var(--gold1), var(--gold2), var(--gold1));
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
}

.section-pad{padding: 4.25rem 0;}
@media (max-width: 767.98px){
  .section-pad{padding: 3.25rem 0;}
}

.hero{
  position: relative;
  height: clamp(640px, 85vh, 900px);
  overflow: hidden;
  background: #000;
}
@media (max-width: 767.98px){
  .hero{height: clamp(560px, 85vh, 820px);}
}

.hero picture,
.hero img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}
.hero img{
  object-fit: cover;
  object-position: center;
  display:block;
}

/* Optional subtle top/bottom vignette to help nav readability (doesn't fight the poster) */
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.08) 30%, rgba(0,0,0,.08) 70%, rgba(0,0,0,.55));
  pointer-events:none;
}

.nav-overlay{
  position:absolute;
  top:0; left:0; right:0;
  z-index: 10;
  padding: .65rem 0;
  background: linear-gradient(180deg, rgba(5,10,12,.72), rgba(5,10,12,0));
  backdrop-filter: blur(6px);
}

.navbar .nav-link{
  color: rgba(245,245,245,.85);
  font-weight: 500;
}
.navbar .nav-link:hover, .navbar .nav-link:focus{
  color: rgba(245,245,245,1);
}

.btn-gold{
  --bs-btn-color: #2a1a00;
  --bs-btn-bg: transparent;
  --bs-btn-border-color: rgba(214,170,76,.55);
  --bs-btn-hover-border-color: rgba(246,212,138,.9);
  --bs-btn-active-border-color: rgba(246,212,138,1);
  border-width: 1px;
  background-image: linear-gradient(180deg, rgba(246,212,138,.95), rgba(201,146,46,.95));
  box-shadow: 0 10px 24px rgba(0,0,0,.35), 0 0 18px rgba(214,170,76,.22);
}
.btn-gold:hover{
  filter: brightness(1.05);
  box-shadow: 0 12px 28px rgba(0,0,0,.38), 0 0 22px rgba(214,170,76,.30);
}

.btn-glass{
  --bs-btn-color: rgba(245,245,245,.92);
  --bs-btn-bg: rgba(10,18,20,.55);
  --bs-btn-border-color: rgba(214,170,76,.25);
  --bs-btn-hover-bg: rgba(10,18,20,.68);
  --bs-btn-hover-border-color: rgba(214,170,76,.40);
  --bs-btn-active-bg: rgba(10,18,20,.75);
  border-width: 1px;
  backdrop-filter: blur(10px);
}

.glass{
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
  backdrop-filter: blur(10px);
}

.glass.card{
  overflow:hidden;
}

.kicker{
  letter-spacing: .22em;
  text-transform: uppercase;
  font-size: .80rem;
  color: rgba(246,212,138,.85);
}

.hr-accent{
  height: 1px;
  border: 0;
  background: linear-gradient(90deg, transparent, rgba(214,170,76,.65), transparent);
  margin: 1.5rem 0;
}

.dev-badge{
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 9;
  font-size: 12px;
  padding: .35rem .55rem;
  border-radius: 999px;
  background: rgba(10,18,20,.72);
  border: 1px solid rgba(214,170,76,.35);
  color: rgba(245,245,245,.92);
  backdrop-filter: blur(8px);
}

footer{
  border-top: 1px solid rgba(214,170,76,.18);
  background: rgba(3,8,10,.55);
}