:root{
  --black:#000000;
  --gold:#DAA520;
  --rust:#8B4513;
  --grey:#c0c0c0;
  --white:#f5f5f5;

  --bg: #070707;
  --panel: rgba(245,245,245,.06);
  --panel2: rgba(245,245,245,.10);
  --stroke: rgba(245,245,245,.14);
  --shadow: 0 16px 45px rgba(0,0,0,.55);
  --max: 1100px;

  --font-display: "Oswald", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background: /*radial-gradient(1200px 600px at 70% -10%, rgba(218,165,32,.20), transparent 60%),*/
              /*radial-gradient(1000px 500px at 10% 10%, rgba(139,69,19,.22), transparent 60%),*/
              linear-gradient(180deg, #050505, #0b0b0b 40%, #050505);
  color: var(--white);
  font-family: var(--font-body);
  line-height:1.5;
}

/* Subtle grit */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.22;
  background-image:
    url("assets/images/texture_flag.png"),
    repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, rgba(0,0,0,0) 1px 3px);
  background-size: cover, auto;
  background-blend-mode: overlay;
  filter: contrast(1.05) saturate(.9) grayscale(.35);
  z-index:-1;
}

a{color:inherit}
img{max-width:100%;height:auto;display:block}
code{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace}

.container{width: min(var(--max), calc(100% - 2rem)); margin-inline:auto;}

.skip-link{
  position:absolute;
  left:-999px; top:0;
  background: var(--gold);
  color: #111;
  padding:.6rem .8rem;
  border-radius:.5rem;
  z-index:999;
}
.skip-link:focus{left:1rem; top:1rem}

/* Header */
.site-header{
  position:sticky;
  top:0;
  z-index:100;
  backdrop-filter: blur(10px);
  background: linear-gradient(180deg, rgba(0,0,0,.85), rgba(0,0,0,.50));
  border-bottom:1px solid rgba(245,245,245,.10);
}
.header-inner{
  display:flex;
  align-items:center;
  gap:1rem;
  padding:.8rem 0;
}
.brand{display:flex; align-items:baseline; gap:.8rem; min-width: 260px;}
.brand-mark{display:flex; gap:.5rem; align-items:center; text-decoration:none}
.mark-fist{
  display:grid; place-items:center;
  width:38px;height:38px;
  /*border-radius: 10px;*/

  background: linear-gradient(135deg, rgba(218,165,32,.35), rgba(139,69,19,.25));
  /*border:1px solid rgba(218,165,32,.35);*/S
  box-shadow: 0 10px 25px rgba(0,0,0,.55);
}
.mark-text{
  font-family: var(--font-display);
  letter-spacing:.06em;
  font-size:1rem;
  font-weight:700;
}
.brand-tagline{
  font-family: var(--font-display);
  letter-spacing:.10em;
  font-size:.75rem;
  opacity:.9;
  color: rgba(245,245,245,.9);
  display:none;
}
@media (min-width: 860px){
  .brand-tagline{display:block}
}

.nav-toggle{
  margin-left:auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  background: transparent;
  border: 1px solid rgba(245,245,245,.18);
  color: var(--white);
  border-radius:.75rem;
  padding:.55rem .7rem;
  cursor:pointer;
}
@media (min-width: 860px){
  .nav-toggle{display:none}
}

.nav{
  display:none;
  flex-wrap:wrap;
  align-items:center;
  gap:.6rem;
  margin-left:auto;
}
.nav.is-open{display:flex}
@media (min-width: 860px){
  .nav{display:flex}
}
.nav-link{
  text-decoration:none;
  font-weight:600;
  opacity:.92;
  padding:.35rem .5rem;
  border-radius:.2rem;
  border-bottom: 1px solid transparent;
}
.nav-link:hover{border-color: rgba(218,165,32,.35); background: rgba(218,165,32,.08)}
.nav-link.is-active{border-color: rgba(245, 245, 245, 0.746); background: rgba(245,245,245,.06)}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.6rem;
  text-decoration:none;
  font-weight:700;
  letter-spacing:.03em;
  padding:.5rem .5rem;
  border-radius: .95rem;
  border: 1px solid rgba(245,245,245,.16);
  background: rgba(245,245,245,.06);
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
  cursor:pointer;
}
.btn:focus-visible{outline: 3px solid rgba(218,165,32,.55); outline-offset:2px}
.btn-small{padding:.4rem .6rem; border-radius:.8rem; font-size:.95rem}
.btn-gold{
  background: linear-gradient(135deg, rgba(218,165,32,.98), rgba(139,69,19,.72));
  border-color: rgba(218,165,32,.55);
  color:#111;
}
.btn-ghost{
  background: rgba(0,0,0,.35);
  border-color: rgba(245,245,245,.18);
}
.btn-ghost:hover{background: rgba(245,245,245,.06)}
.btn-row{display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1rem}

/* Hero */
.hero{
  padding: 2.2rem 0 1.4rem;
}
.hero-grid{
  display:grid;
  gap:1.25rem;
}
@media(min-width: 980px){
  .hero-grid{grid-template-columns: 1.1fr .9fr; align-items:stretch}
}
.hero-card{
  position:relative;
  border-radius: 1.3rem;
  overflow:hidden;
  border: 1px solid rgba(245,245,245,.12);
  background: linear-gradient(180deg, rgba(245,245,245,.08), rgba(245,245,245,.03));
  box-shadow: var(--shadow);
}
.hero-media{
  position:absolute;
  inset:0;
  background-image: url("assets/images/hero_collage.png");
  background-size: cover;
  background-position: center;
  filter: saturate(.95) contrast(1.05);
}
.hero-media::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(90deg, rgba(0,0,0,.88) 0%, rgba(0,0,0,.55) 55%, rgba(0,0,0,.35) 100%),
              radial-gradient(900px 320px at 25% 25%, rgba(218,165,32,.25), transparent 60%);
}
.hero-content{
  position:relative;
  padding: 2rem 1.4rem;
}
@media(min-width: 720px){
  .hero-content{padding: 2.4rem 2.2rem}
}
.kicker{
  display:inline-flex;
  gap:.5rem;
  align-items:center;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-size:.8rem;
  color: rgba(245,245,245,.88);
}
.kicker .dot{
  width:10px;height:10px;border-radius:99px;
  background: var(--gold);
  box-shadow: 0 0 0 4px rgba(218,165,32,.16);
}
.hero h1{
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing:.02em;
  line-height:.95;
  margin: .9rem 0 .7rem;
  font-size: clamp(2.3rem, 5vw, 4rem);
  text-transform:uppercase;
}
.hero h1 .gold{color: var(--gold)}
.hero p{
  margin:0;
  font-size: 1.05rem;
  max-width: 52ch;
  color: rgba(245,245,245,.90);
}
.badges{
  display:flex; flex-wrap:wrap; gap:.55rem;
  margin-top: 1.1rem;
}
.badge{
  border: 1px solid rgba(245,245,245,.18);
  background: rgba(0,0,0,.35);
  border-radius: 999px;
  padding: .35rem .7rem;
  font-weight: 650;
  font-size: .92rem;
}
.badge strong{color: var(--gold)}
.hero-right{
  display:grid;
  gap:1rem;
}
.panel{
  border-radius: 1.3rem;
  border: 1px solid rgba(245,245,245,.12);
  background: linear-gradient(180deg, rgba(245,245,245,.08), rgba(245,245,245,.03));
  box-shadow: var(--shadow);
  overflow:hidden;
}
.panel-pad{padding: 1.2rem 1.2rem}
.panel-title{
  font-family: var(--font-display);
  letter-spacing:.12em;
  text-transform:uppercase;
  font-weight:800;
  font-size: 1rem;
  color: rgba(245,245,245,.95);
}
.muted{color: rgba(245,245,245,.72)}
.small{font-size:.92rem}
hr.sep{
  border:0;
  border-top:1px solid rgba(245,245,245,.12);
  margin: 1rem 0;
}

/* Featured media */
.featured{
  position:relative;
  border-radius: 1.1rem;
  overflow:hidden;
  border: 1px solid rgba(245,245,245,.12);
  background: #070707;
}
.featured img{width:100%; aspect-ratio: 16 / 7; object-fit: cover; filter: saturate(.95) contrast(1.05)}
.featured .overlay{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  background: radial-gradient(600px 220px at 50% 60%, rgba(0,0,0,.25), rgba(0,0,0,.75));
}
.play{
  padding: .8rem 1.15rem;
  border-radius: .95rem;
  border: 1px solid rgba(245,245,245,.22);
  background: rgba(0,0,0,.55);
  font-weight: 850;
  letter-spacing:.12em;
  text-transform:uppercase;
}

/* Section headings */
.section{
  padding: 1.7rem 0;
}
.section-head{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:1rem;
  margin-bottom: 1rem;
}
.h2{
  font-family: var(--font-display);
  text-transform:uppercase;
  letter-spacing:.14em;
  font-weight:900;
  font-size: 1.1rem;
  margin:0;
}
.rule{
  height:1px; flex:1;
  background: linear-gradient(90deg, rgba(218,165,32,.7), rgba(245,245,245,.12));
  opacity:.75;
}

/* Cards */
.grid3{
  display:grid;
  gap:1rem;
}
.grid4{
  display:grid;
  gap:1rem;
}
@media(min-width: 900px){
  .grid3{grid-template-columns: repeat(3, 1fr)}
  .grid4{grid-template-columns: repeat(2, 1fr)}
}
.card{
  position:relative;
  border-radius: 1.2rem;
  padding: 1.1rem 1.1rem;
  border: 1px solid rgba(245,245,245,.12);
  background: linear-gradient(180deg, rgba(245,245,245,.07), rgba(245,245,245,.03));
  box-shadow: var(--shadow);
  overflow:hidden;
  height: 100%;
}
.card::after{
  content:"";
  position:absolute; inset:-30% -30% auto -30%;
  height: 140px;
  background: radial-gradient(300px 140px at 30% 50%, rgba(218,165,32,.28), transparent 60%),
              radial-gradient(220px 120px at 70% 50%, rgba(139,69,19,.26), transparent 60%);
  opacity:.9;
}
.card > *{position:relative}
.card .icon{
  width:44px;height:44px;border-radius:14px;
  display:grid;place-items:center;
  background: rgba(218,165,32,.15);
  border:1px solid rgba(218,165,32,.35);
  font-size: 1.3rem;
}
.card h3{
  font-family: var(--font-display);
  text-transform:uppercase;
  letter-spacing:.08em;
  margin:.8rem 0 .35rem;
}
.card p{margin:.2rem 0 .7rem; color: rgba(245,245,245,.82)}
.card a{font-weight:800; color: var(--gold); text-decoration:none}
.card a:hover{text-decoration:underline}

/* Chips row */
.chips{display:flex; flex-wrap:wrap; gap:.6rem}
.chip{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.65rem .85rem;
  border-radius: .95rem;
  border:1px solid rgba(245,245,245,.14);
  background: rgba(0,0,0,.35);
  cursor:pointer;
  font-weight:750;
}
.chip:hover{border-color: rgba(218,165,32,.4)}
.chip .tag{color: var(--gold); font-weight:900}

/* Dashboard */
.dashboard{
  display:grid;
  gap: 1rem;
}
@media(min-width: 980px){
  .dashboard{grid-template-columns: 1fr .9fr; align-items:start}
}
.metric-row{display:grid; gap:.8rem}
@media(min-width: 520px){
  .metric-row{grid-template-columns: repeat(3, 1fr)}
}
.metric{
  border-radius: 1.1rem;
  padding: .9rem .9rem;
  border: 1px solid rgba(245,245,245,.12);
  background: rgba(245,245,245,.05);
}
.metric .n{
  font-family: var(--font-display);
  font-size: 1.6rem;
  letter-spacing:.06em;
  font-weight: 900;
  color: var(--gold);
}
.metric .label{opacity:.8; font-weight:700; text-transform:uppercase; letter-spacing:.08em; font-size:.78rem}
.canvas-wrap{
  border-radius: 1.2rem;
  border: 1px solid rgba(245,245,245,.12);
  background: rgba(0,0,0,.35);
  padding: .9rem .9rem;
}
canvas{width:100%; height:280px; display:block}

/* Tables */
.table{
  width:100%;
  border-collapse: collapse;
  overflow:hidden;
  border-radius: 1rem;
  border:1px solid rgba(245,245,245,.12);
}
.table td {font-size:.80rem;}
.table th,.table td{
  padding: .75rem .75rem;
  border-bottom: 1px solid rgba(245,245,245,.10);
  text-align:left;
  vertical-align:top;
}
.table th{
  font-family: var(--font-display);
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:.85rem;
  background: rgba(218,165,32,.10);
}
.table tr:hover td{background: rgba(245,245,245,.04)}
.pill{
  display:inline-block;
  padding:.25rem .55rem;
  border-radius:999px;
  border:1px solid rgba(245,245,245,.16);
  background: rgba(0,0,0,.35);
  font-weight:800;
  font-size:.85rem;
}
.pill.gold{border-color: rgba(218,165,32,.45); color: var(--gold)}

/* Forms */
.field{display:grid; gap:.35rem; margin-top:.9rem}
label{font-weight:400}
input, textarea, select{
  /*width:100%;*/
  padding:.75rem .8rem;
  border-radius: .9rem;
  border: 1px solid rgba(245,245,245,.16);
  background: rgba(0,0,0,.35);
  color: var(--white);
}
input:focus, textarea:focus, select:focus{outline: 3px solid rgba(218,165,32,.35); outline-offset:2px}
textarea{min-height:120px}

/* Footer */
.site-footer{
  margin-top: 2rem;
  padding: 2rem 0 1.3rem;
  border-top:1px solid rgba(245,245,245,.12);
  background: rgba(0,0,0,.55);
}
.footer-grid{
  display:grid;
  gap:1.2rem;
}
@media(min-width: 880px){
  .footer-grid{grid-template-columns: 1.3fr 1fr 1fr}
}
.footer-brand{
  font-family: var(--font-display);
  letter-spacing:.08em;
  text-transform:uppercase;
  font-weight:900;
}
.footer-links{display:grid; gap:.4rem}
.footer-links a{text-decoration:none; opacity:.85}
.footer-links a:hover{opacity:1; text-decoration:underline}
.footer-bottom{
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
  align-items:center;
  justify-content:space-between;
  margin-top:1.2rem;
}
.social{display:flex; gap:.6rem}
.social a{
  width:34px; height:34px;
  border-radius: 10px;
  display:grid; place-items:center;
  border:1px solid rgba(245,245,245,.16);
  background: rgba(245,245,245,.06);
  text-decoration:none;
}

/* Modal */
.modal{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  padding: 1.2rem;
  z-index: 300;
}
.modal.is-open{display:flex}
.modal-backdrop{position:absolute; inset:0; background: rgba(0,0,0,.75)}
.modal-card{
  position:relative;
  width: min(980px, 100%);
  border-radius: 1.2rem;
  border: 1px solid rgba(245,245,245,.14);
  background: #090909;
  box-shadow: var(--shadow);
  overflow:hidden;
}
.modal-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem;
  padding: .9rem 1rem;
  border-bottom:1px solid rgba(245,245,245,.12);
  background: linear-gradient(90deg, rgba(218,165,32,.10), rgba(0,0,0,.0));
}
.modal-title{
  font-family: var(--font-display);
  text-transform:uppercase;
  letter-spacing:.10em;
  font-weight:900;
}
.icon-btn{
  background: transparent;
  color: var(--white);
  border: 1px solid rgba(245,245,245,.18);
  border-radius:.8rem;
  padding:.45rem .6rem;
  cursor:pointer;
}
.modal-body{padding: 1rem}
.ratio-16x9{position:relative; width:100%; padding-top:56.25%}
.ratio-16x9 iframe{position:absolute; inset:0; width:100%; height:100%; border:0}

/* Toast */
.toast{
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 18px;
  background: rgba(0,0,0,.82);
  border: 1px solid rgba(245,245,245,.16);
  padding: .7rem .9rem;
  border-radius: 1rem;
  box-shadow: var(--shadow);
  max-width: min(720px, calc(100% - 2rem));
  display:none;
  z-index: 400;
}
.toast.is-show{display:block}

/* Utilities */
.sr-only{
  position:absolute; width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0
}