/* =========================================
   Reset & Variables
   ========================================= */
:root{
  /* Color Palette (black-gold, dark UI) */
  --color-bg-0:#090909;
  --color-bg-1:#111111;
  --color-bg-2:#1a160f;
  --color-text:#f5f0df;
  --color-text-dim:#ccb98a;
  --color-line:#6f5620;
  --color-accent:#f0c86a;
  --color-accent-2:#d9a640;
  --color-accent-3:#9a6f1f;

  /* Spacing Scale (mobile-first) */
  --space-0:0px;
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:14px;
  --space-5:16px;
  --space-6:20px;
  --space-7:24px;
  --space-8:28px;

  /* Radius */
  --radius-6:6px;
  --radius-8:8px;
  --radius-10:10px;
  --radius-12:12px;
  --radius-14:14px;

  /* Shadows */
  --shadow-1:0 4px 10px rgba(0,0,0,.28);
  --shadow-2:0 6px 16px rgba(0,0,0,.35);
  --shadow-in-1:0 4px 10px rgba(0,0,0,.28) inset;

  /* Layout */
  --container-max:1100px;
  --container-padding:10px;

  /* Breakpoints */
  --bp-medium:1025px; /* align with source project's behavior */
}

/* Minimal Reset */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
img{max-width:100%;height:auto;display:block}
a{text-decoration:none;color:inherit}
button{font:inherit}


/* =========================================
   Typography
   ========================================= */
html{font-size:16px}
body{
  background:var(--color-bg-0);
  color:var(--color-text);
  font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,sans-serif;
  line-height:1.6;
}
h1,h2,h3,h4,h5,h6{
  margin:0 0 var(--space-3);
  color:var(--color-text);
  font-weight:800;
  line-height:1.25;
}
p{margin:0 0 var(--space-4); color:var(--color-text-dim)}
.uppercase{text-transform:uppercase}
.small-text-center{text-align:center}
.text-center{text-align:center}


/* =========================================
   Layout / Container
   ========================================= */
.container{
  max-width:clamp(320px,96vw,var(--container-max));
  margin:0 auto;
  padding:0 var(--container-padding);
}
.flex-row{display:flex;flex-wrap:wrap;align-items:center}
.flex-col{display:flex;flex-direction:column}
.flex-left{justify-content:flex-start;align-items:flex-start}
.flex-center{justify-content:center;align-items:center}
.flex-right{justify-content:flex-end;align-items:flex-end}
.flex-grow{flex:1 1 auto}
.nav{list-style:none;margin:0;padding:0;display:flex;gap:var(--space-3)}
.nav-small{gap:var(--space-2)}

/* Container behavior on desktop */
@media (min-width: 1025px){
  .container{padding-left:12px;padding-right:12px}
}

/* Nav & list reset refinements */
.nav{align-items:center}
.nav > li{margin:0;padding:0}
.nav a{display:inline-flex;align-items:center;line-height:1}
svg,.svg-icon{vertical-align:middle}
.icon-box{display:grid;place-items:center}


/* =========================================
   Header Base
   ========================================= */
.header{position:relative;z-index:1000;background:transparent}
.header-wrapper{position:relative}

/* Top Bar */
.header-top{
  background:linear-gradient(180deg, var(--color-bg-2) 0%, var(--color-bg-1) 100%);
  border-bottom:1px solid rgba(240,200,106,.24);
}
.header-top .nav{align-items:center}
.header-top .nav a{
  color:var(--color-text-dim);
  padding:var(--space-2) var(--space-3);
  line-height:1;
}
.header-top .nav a:hover{color:var(--color-text)}

/* Main Bar */
.header-main{
  background:var(--color-bg-1);
}
.header-main .header-inner{
  min-height:56px;
  column-gap:var(--space-3);
  row-gap:0;
}
#logo{min-width:120px}
#logo img{
  height:auto;
  max-height:42px;
  object-fit:contain;
}
.mobile-nav{gap:var(--space-2)}
.mobile-nav a{padding:var(--space-2) var(--space-3)}
.header-nav a, .mobile-nav a{
  padding:var(--space-2) var(--space-3);
  border-radius:var(--radius-8);
  color:var(--color-text);
}
.header-nav a:hover{
  background:rgba(39,30,16,.8);
  border:1px solid rgba(240,200,106,.35);
}
.top-divider.full-width{
  height:1px;background:rgba(240,200,106,.22);margin-top:var(--space-2);
}

/* Bottom / Wide Nav */
.header-bottom{
  background:var(--color-bg-1);
  border-top:1px solid rgba(240,200,106,.22);
}
.header-bottom .nav{align-items:center}
.header-bottom .nav a{
  color:var(--color-text);
  padding:var(--space-2) var(--space-3);
  line-height:1;
}
.header-bg-container.fill{position:absolute;inset:0;pointer-events:none}

.site-header{
  position: sticky;
  top: 0;
  z-index: 10020;
  background: linear-gradient(180deg, var(--color-bg-2) 0%, var(--color-bg-1) 100%);
  border-bottom: 1px solid rgba(240,200,106,.26);
}
.site-header__inner{
  min-height: 64px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-3);
}
.site-header__menu-toggle{
  width: 38px;
  height: 38px;
  border-radius: var(--radius-8);
  border: 1px solid rgba(240,200,106,.38);
  background: rgba(39,30,16,.82);
  color: var(--color-text);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: start;
}
.site-header__logo{
  display: inline-flex;
  justify-content: center;
  align-items: center;
  justify-self: center;
}
.site-header__logo img{
  height: clamp(30px, 5vw, 36px);
  width: auto;
  object-fit: contain;
}
.site-header__login{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-8);
  border: 1px solid rgba(240,200,106,.42);
  background: linear-gradient(180deg, var(--color-accent-2), var(--color-accent-3));
  color: #1b1408;
  font-weight: 700;
  font-size: .9rem;
  line-height: 1;
  white-space: nowrap;
  justify-self: end;
}
.site-header__login:hover{
  background: linear-gradient(180deg, #efc974, #b58227);
}

#header-partial-mount > .site-header{
  display: block !important;
}
#header-partial-mount > .header,
#header-partial-mount .header-top,
#header-partial-mount .header-main,
#header-partial-mount .header-bottom{
  display: none !important;
}

.mobile-menu-overlay{
  position: fixed;
  inset: 0;
  z-index: 10100;
  background: rgba(7, 6, 4, .78);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .2s ease, visibility .2s ease;
}
.mobile-menu-panel{
  position: absolute;
  top: 0;
  right: 0;
  width: min(82vw, 340px);
  height: 100%;
  background: linear-gradient(180deg, var(--color-bg-2) 0%, var(--color-bg-1) 100%);
  border-left: 1px solid rgba(240,200,106,.35);
  box-shadow: -8px 0 24px rgba(0,0,0,.45);
  transform: translateX(100%);
  transition: transform .24s ease;
  padding: var(--space-6) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.mobile-menu-close{
  align-self: flex-end;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-8);
  border: 1px solid rgba(240,200,106,.35);
  background: rgba(39,30,16,.82);
  color: var(--color-text);
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
}
.mobile-menu-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.mobile-menu-list a{
  display: flex;
  align-items: center;
  min-height: 42px;
  border-radius: var(--radius-8);
  border: 1px solid rgba(240,200,106,.26);
  background: rgba(31,24,13,.72);
  color: var(--color-text);
  padding: 0 var(--space-3);
}
.mobile-menu-list a:hover{
  border-color: rgba(240,200,106,.45);
  background: rgba(44,34,20,.86);
}
.mobile-menu-overlay.is-open{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.mobile-menu-overlay.is-open .mobile-menu-panel{
  transform: translateX(0);
}
body.mobile-menu-open{
  overflow: hidden;
}

.site-footer{
  margin-top: var(--space-7);
  margin-bottom: var(--space-6);
}
body.has-bottom-bar .site-footer{
  margin-bottom: calc(var(--space-6) + clamp(64px,13vw,78px) + 10px);
}
.site-footer__inner{
  border: 1px solid rgba(240,200,106,.3);
  border-radius: var(--radius-12);
  background: linear-gradient(180deg, rgba(30,24,14,.78), rgba(17,17,17,.96));
  box-shadow: var(--shadow-1);
  padding: var(--space-5);
}
.site-footer__grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
.site-footer__col{
  min-width: 0;
}
.site-footer__title{
  margin: 0 0 var(--space-2);
  color: var(--color-text);
  font-size: 1rem;
  line-height: 1.35;
}
.site-footer__text{
  margin: 0;
  color: var(--color-text-dim);
  line-height: 1.72;
  font-size: .92rem;
}
.site-footer__list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
  color: var(--color-text-dim);
  line-height: 1.7;
  font-size: .92rem;
}
.site-footer__bottom{
  margin-top: var(--space-5);
  padding-top: var(--space-3);
  border-top: 1px solid rgba(240,200,106,.24);
  color: var(--color-text-dim);
  font-size: .85rem;
  line-height: 1.6;
}


/* =========================================
   Bottom Bar Base
   ========================================= */
.ppss-bar5, .ppss-bar5 *{box-sizing:border-box}
.ppss-bar5{
  position:fixed;left:0;right:0;bottom:0;z-index:10050;
  height:clamp(64px, 13vw, 78px);
  pointer-events:none;
  font:700 12px/1 'Poppins',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}
.ppss-bar5::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, var(--color-bg-2) 0%, var(--color-bg-1) 65%, #17120b 100%);
  opacity:.95;border-top-left-radius:16px;border-top-right-radius:16px;
}
.ppss-bar5__row{
  position:absolute;left:0;right:0;bottom:0;z-index:1;
  max-width:clamp(320px,96vw,var(--container-max));
  margin:0 auto;height:100%;
  display:grid;grid-template-columns:repeat(5, 1fr);
  align-items:center;justify-items:center;
  padding:0 clamp(8px,2.8vw,18px) clamp(8px,2.6vw,12px);
  pointer-events:auto;color:var(--color-text);
}
.ppss-item{
  text-decoration:none;color:var(--color-text);
  display:flex;flex-direction:column;align-items:center;gap:clamp(4px,1.6vw,8px);
  min-width:0;width:100%;
}
.ppss-ico{
  width:clamp(24px,5vw,32px);height:clamp(24px,5vw,32px);
  border-radius:10px;background:rgba(34,26,14,.82);
  border:1px solid rgba(240,200,106,.35);
  display:grid;place-items:center;
  box-shadow:var(--shadow-in-1);
}
.ppss-ico svg{width:clamp(12px,2.6vw,18px);height:clamp(12px,2.6vw,18px);fill:#f2d28a}
@supports(padding:max(0px)){
  .ppss-bar5__row{padding-bottom:max(clamp(8px,2.2vw,12px), env(safe-area-inset-bottom))}
}
/* Reserve page space to avoid overlap (opt-in) */
body.has-bottom-bar{padding-bottom:calc(clamp(64px,13vw,78px) + 6px)}
/* Hide on desktop by default */
@media (min-width: 1025px){
  .ppss-bar5{display:none !important}
  body.has-bottom-bar{padding-bottom:0}
}
/* Safe-area aware page padding when bottom bar exists */
@supports(padding:max(0px)){
  body.has-bottom-bar{padding-bottom:max(calc(clamp(64px,13vw,78px) + 6px), env(safe-area-inset-bottom))}
}


/* =========================================
   Buttons
   ========================================= */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:var(--space-2);
  padding:var(--space-3) var(--space-5);
  border-radius:var(--radius-10);
  border:1px solid rgba(240,200,106,.45);
  background:linear-gradient(180deg, var(--color-accent-2), var(--color-accent-3));
  color:#1d1508;cursor:pointer;transition:all .2s ease;
  box-shadow:var(--shadow-1);
}
.btn:hover{
  background:linear-gradient(180deg, #f0cb78, #b9862d);
  transform:translateY(-1px);
}
.btn:active{transform:translateY(0)}
.btn-secondary{
  background:transparent;color:var(--color-text);
  border:1px solid var(--color-line);
}
.btn-secondary:hover{
  background:rgba(41,31,17,.65);
}
.btn-ghost{
  background:transparent;border:1px dashed rgba(240,200,106,.35);color:var(--color-text-dim);
}
.btn-ghost:hover{color:var(--color-text)}
.btn-sm{padding:var(--space-2) var(--space-3);border-radius:var(--radius-8)}
.btn-lg{padding:var(--space-5) var(--space-7);border-radius:var(--radius-12)}


/* =========================================
   Cards
   ========================================= */
.card{
  background:var(--color-bg-1);
  border:1px solid var(--color-line);
  border-radius:var(--radius-12);
  box-shadow:var(--shadow-2);
  padding:var(--space-5);
  color:var(--color-text);
}
.card:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(0,0,0,.45);
  transition:transform .2s ease, box-shadow .2s ease;
}
.card-title{font-weight:800;margin:0 0 var(--space-3)}
.card-body{color:var(--color-text-dim)}


/* =========================================
   Radius / Borders / Shadows
   ========================================= */
.radius-6{border-radius:var(--radius-6)}
.radius-8{border-radius:var(--radius-8)}
.radius-10{border-radius:var(--radius-10)}
.radius-12{border-radius:var(--radius-12)}
.radius-14{border-radius:var(--radius-14)}

.border{border:1px solid var(--color-line)}
.border-0{border:0}
.border-light{border:1px solid rgba(240,200,106,.22)}
.border-strong{border:1px solid rgba(240,200,106,.6)}

.shadow-1{box-shadow:var(--shadow-1)}
.shadow-2{box-shadow:var(--shadow-2)}
.shadow-in-1{box-shadow:var(--shadow-in-1)}
.bg-0{background:var(--color-bg-0)}
.bg-1{background:var(--color-bg-1)}
.bg-2{background:var(--color-bg-2)}
.text-dim{color:var(--color-text-dim)}
.text-primary{color:var(--color-accent)}


/* =========================================
   Spacing Utilities
   ========================================= */
.m-0{margin:0}
.mt-0{margin-top:0}.mr-0{margin-right:0}.mb-0{margin-bottom:0}.ml-0{margin-left:0}
.m-1{margin:var(--space-1)}.mt-1{margin-top:var(--space-1)}.mr-1{margin-right:var(--space-1)}.mb-1{margin-bottom:var(--space-1)}.ml-1{margin-left:var(--space-1)}
.m-2{margin:var(--space-2)}.mt-2{margin-top:var(--space-2)}.mr-2{margin-right:var(--space-2)}.mb-2{margin-bottom:var(--space-2)}.ml-2{margin-left:var(--space-2)}
.m-3{margin:var(--space-3)}.mt-3{margin-top:var(--space-3)}.mr-3{margin-right:var(--space-3)}.mb-3{margin-bottom:var(--space-3)}.ml-3{margin-left:var(--space-3)}
.m-4{margin:var(--space-4)}.mt-4{margin-top:var(--space-4)}.mr-4{margin-right:var(--space-4)}.mb-4{margin-bottom:var(--space-4)}.ml-4{margin-left:var(--space-4)}
.m-5{margin:var(--space-5)}.mt-5{margin-top:var(--space-5)}.mr-5{margin-right:var(--space-5)}.mb-5{margin-bottom:var(--space-5)}.ml-5{margin-left:var(--space-5)}
.m-6{margin:var(--space-6)}.mt-6{margin-top:var(--space-6)}.mr-6{margin-right:var(--space-6)}.mb-6{margin-bottom:var(--space-6)}.ml-6{margin-left:var(--space-6)}
.m-7{margin:var(--space-7)}.mt-7{margin-top:var(--space-7)}.mr-7{margin-right:var(--space-7)}.mb-7{margin-bottom:var(--space-7)}.ml-7{margin-left:var(--space-7)}
.m-8{margin:var(--space-8)}.mt-8{margin-top:var(--space-8)}.mr-8{margin-right:var(--space-8)}.mb-8{margin-bottom:var(--space-8)}.ml-8{margin-left:var(--space-8)}

.p-0{padding:0}
.pt-0{padding-top:0}.pr-0{padding-right:0}.pb-0{padding-bottom:0}.pl-0{padding-left:0}
.p-1{padding:var(--space-1)}.pt-1{padding-top:var(--space-1)}.pr-1{padding-right:var(--space-1)}.pb-1{padding-bottom:var(--space-1)}.pl-1{padding-left:var(--space-1)}
.p-2{padding:var(--space-2)}.pt-2{padding-top:var(--space-2)}.pr-2{padding-right:var(--space-2)}.pb-2{padding-bottom:var(--space-2)}.pl-2{padding-left:var(--space-2)}
.p-3{padding:var(--space-3)}.pt-3{padding-top:var(--space-3)}.pr-3{padding-right:var(--space-3)}.pb-3{padding-bottom:var(--space-3)}.pl-3{padding-left:var(--space-3)}
.p-4{padding:var(--space-4)}.pt-4{padding-top:var(--space-4)}.pr-4{padding-right:var(--space-4)}.pb-4{padding-bottom:var(--space-4)}.pl-4{padding-left:var(--space-4)}
.p-5{padding:var(--space-5)}.pt-5{padding-top:var(--space-5)}.pr-5{padding-right:var(--space-5)}.pb-5{padding-bottom:var(--space-5)}.pl-5{padding-left:var(--space-5)}
.p-6{padding:var(--space-6)}.pt-6{padding-top:var(--space-6)}.pr-6{padding-right:var(--space-6)}.pb-6{padding-bottom:var(--space-6)}.pl-6{padding-left:var(--space-6)}
.p-7{padding:var(--space-7)}.pt-7{padding-top:var(--space-7)}.pr-7{padding-right:var(--space-7)}.pb-7{padding-bottom:var(--space-7)}.pl-7{padding-left:var(--space-7)}
.p-8{padding:var(--space-8)}.pt-8{padding-top:var(--space-8)}.pr-8{padding-right:var(--space-8)}.pb-8{padding-bottom:var(--space-8)}.pl-8{padding-left:var(--space-8)}


/* =========================================
   Responsive Utilities
   ========================================= */
/* Mobile-first: show-for-medium is hidden by default, visible under medium breakpoint */
.show-for-medium{display:none !important}
.hide-for-medium{display:flex !important}
@media (max-width: 1024px){
  .show-for-medium{display:flex !important}
  .hide-for-medium{display:none !important}
}
@media (min-width: 1025px){
  .site-header__inner{
    min-height: 66px;
  }
  .site-footer__grid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-6);
  }
  body.has-bottom-bar .site-footer{
    margin-bottom: var(--space-6);
  }
}