:root{
  --black:#000000;
  --black-soft:#050505;
  --void:#0a0003;

  --blood-red:#5c000b;
  --blood-red-dark:#2b0005;
  --crimson:#8a0f1a;

  --deep-purple:#17001f;
  --royal-purple:#2b0a3d;
  --purple-mist:#4a235f;

  --gold:#b08a2e;
  --gold-light:#d8b85a;
  --white:#ffffff;

  --text-main:#e6d7c3;
  --text-soft:#c9b79f;

  --radius:18px;
  --container-width:1100px;
  --transition:0.3s ease;

  --header-height:75px;
  --footer-height:78px;
}

/* ==========================
   RESET
   ========================== */
*,
*::before,
*::after{
  box-sizing:border-box;
}

html,
body{
  height:100%;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  font-family:Georgia, "Times New Roman", serif;
  background:
    radial-gradient(circle at top, rgba(92,0,11,0.30), transparent 35%),
    radial-gradient(circle at bottom, rgba(43,10,61,0.35), transparent 55%),
    linear-gradient(180deg, var(--void) 0%, var(--black-soft) 45%, var(--black) 100%);
  color:var(--text-main);
  min-height:100vh;
  line-height:1.6;
  overflow:hidden;
  position:relative;
}

/* ATMOSPHERIC OVERLAYS */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 18% 25%, rgba(138,15,26,0.10), transparent 30%),
    radial-gradient(circle at 82% 18%, rgba(74,35,95,0.12), transparent 34%),
    radial-gradient(circle at 50% 80%, rgba(92,0,11,0.08), transparent 42%);
  animation:candleFlicker 7s infinite ease-in-out;
  z-index:0;
}

body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(rgba(255,255,255,0.02), rgba(255,255,255,0.02)),
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,0.012) 0px,
      rgba(255,255,255,0.012) 1px,
      transparent 1px,
      transparent 3px
    );
  opacity:0.18;
  z-index:0;
}

img{
  max-width:100%;
  height:auto;
  display:block;
}

iframe{
  max-width:100%;
}

a{
  color:var(--gold-light);
  text-decoration:none;
  transition:var(--transition);
}

a:hover{
  color:var(--white);
  text-shadow:0 0 10px rgba(176,138,46,0.55);
}

button,
input,
textarea,
select{
  font:inherit;
}

/* ==========================
   GLOBAL TEXT STYLING
   ========================== */
h1,
h2,
h3,
h4,
h5,
h6{
  margin-top:0;
  line-height:1.2;
  font-family:"Cinzel", Georgia, serif;
  color:var(--gold-light);
  letter-spacing:0.03em;
  text-shadow:
    0 0 8px rgba(176,138,46,0.22),
    0 0 18px rgba(92,0,11,0.35);
}

p,
.brand div,
.footer,
.video-date,
label,
li,
span{
  text-shadow:0 0 5px rgba(92,0,11,0.18);
}

p{
  margin-top:0;
  color:var(--text-soft);
}

ul,
ol{
  padding-left:1.2rem;
}

/* ==========================
   ANIMATIONS
   ========================== */
@keyframes shimmer{
  0%{ left:-150%; }
  100%{ left:150%; }
}

@keyframes candleFlicker{
  0%{ opacity:0.82; }
  50%{ opacity:1; }
  100%{ opacity:0.84; }
}

/* ==========================
   MAIN LAYOUT
   ========================== */
.topbar,
.page-content,
.footer{
  position:relative;
  z-index:2;
}

.page-content{
  position:fixed;
  top:var(--header-height);
  left:0;
  right:0;
  bottom:var(--footer-height);
  overflow-y:auto;
  overflow-x:hidden;
  z-index:2;
}

.wrap{
  padding:24px 20px 30px;
  display:flex;
  justify-content:center;
  min-height:100%;
}

.container{
  width:100%;
  max-width:var(--container-width);
}

.section{
  margin-bottom:25px;
}

.text-center{
  text-align:center;
}

/* ==========================
   TOP BAR / HEADER
   ========================== */
.topbar{
  position:fixed;
  top:0;
  left:0;
  right:0;
  height:var(--header-height);
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    linear-gradient(90deg, var(--blood-red-dark), var(--deep-purple) 55%, var(--black));
  border-bottom:1px solid var(--gold);
  box-shadow:
    0 0 20px rgba(92,0,11,0.45),
    0 8px 25px rgba(0,0,0,0.65),
    inset 0 -1px 0 rgba(216,184,90,0.20);
  z-index:1000;
}

.topbar-inner{
  width:min(var(--container-width), calc(100% - 32px));
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  font-weight:700;
  font-size:18px;
  text-decoration:none;
  color:var(--gold-light);
  letter-spacing:0.04em;
}

.badge{
  width:36px;
  height:36px;
  border-radius:50%;
  background:
    radial-gradient(circle at 35% 35%, #b81b2e, var(--blood-red) 55%, var(--black) 100%);
  border:1px solid rgba(216,184,90,0.45);
  box-shadow:
    0 0 15px rgba(138,15,26,0.75),
    0 0 30px rgba(74,35,95,0.25);
  flex-shrink:0;
}

nav{
  display:flex;
  gap:14px;
}

.navlink{
  text-decoration:none;
  color:var(--gold-light);
  font-size:15px;
  padding:8px 12px;
  border-radius:10px;
  border:1px solid transparent;
  transition:var(--transition);
}

.navlink:hover,
.navlink.active{
  background:linear-gradient(180deg, rgba(92,0,11,0.88), rgba(43,10,61,0.88));
  color:var(--white);
  border-color:rgba(216,184,90,0.40);
  box-shadow:
    0 0 12px rgba(138,15,26,0.45),
    inset 0 0 12px rgba(255,255,255,0.03);
}

/* ==========================
   PANELS / CARDS
   ========================== */
.hero,
.card,
.panel,
.video-item,
.blog-item,
.post-item,
.contact-box,
.form-box{
  background:
    linear-gradient(160deg, rgba(20,0,10,0.96), rgba(23,0,31,0.95) 50%, rgba(43,10,61,0.92) 100%);
  border:1px solid rgba(176,138,46,0.40);
  border-radius:var(--radius);
  padding:30px;
  margin-bottom:25px;
  position:relative;
  overflow:hidden;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.02) inset,
    0 14px 35px rgba(0,0,0,0.55),
    0 0 24px rgba(92,0,11,0.18);
}

.hero::before,
.card::before,
.panel::before,
.video-item::before,
.blog-item::before,
.post-item::before,
.contact-box::before,
.form-box::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:200%;
  height:2px;
  background:linear-gradient(90deg, transparent, rgba(216,184,90,0.85), transparent);
  animation:shimmer 5s linear infinite;
}

.hero::after,
.card::after,
.panel::after,
.video-item::after,
.blog-item::after,
.post-item::after,
.contact-box::after,
.form-box::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at top right, rgba(138,15,26,0.08), transparent 30%),
    radial-gradient(circle at bottom left, rgba(74,35,95,0.08), transparent 35%);
}

.hero h1{
  margin:0 0 10px;
  font-size:32px;
}

.hero p{
  margin:0;
  color:var(--text-main);
}

.card h2,
.card h3,
.panel h2,
.panel h3,
.video-item h3,
.blog-item h3,
.post-item h3,
.contact-box h3,
.form-box h3{
  margin:0 0 12px;
  font-size:24px;
}

.card p,
.panel p,
.video-item p,
.blog-item p,
.post-item p,
.contact-box p,
.form-box p{
  margin:0;
  line-height:1.6;
  color:var(--text-soft);
}

.empty-state{
  text-align:center;
  color:var(--text-soft);
}

/* ==========================
   BUTTONS
   ========================== */
.btn,
button,
input[type="submit"],
input[type="button"]{
  display:inline-block;
  background:linear-gradient(135deg, var(--blood-red), var(--royal-purple));
  color:var(--text-main);
  border:1px solid rgba(216,184,90,0.42);
  border-radius:12px;
  padding:12px 18px;
  font-weight:700;
  text-decoration:none;
  cursor:pointer;
  transition:var(--transition);
  box-shadow:
    0 0 12px rgba(92,0,11,0.30),
    inset 0 0 10px rgba(255,255,255,0.03);
}

.btn:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover{
  transform:translateY(-2px);
  color:var(--white);
  box-shadow:
    0 0 18px rgba(138,15,26,0.55),
    0 8px 18px rgba(0,0,0,0.35);
}

.btn-outline{
  display:inline-block;
  background:rgba(0,0,0,0.30);
  color:var(--gold-light);
  border:1px solid rgba(216,184,90,0.48);
  border-radius:12px;
  padding:10px 16px;
  font-weight:700;
  text-decoration:none;
  transition:var(--transition);
}

.btn-outline:hover{
  background:linear-gradient(135deg, rgba(92,0,11,0.90), rgba(43,10,61,0.90));
  color:var(--white);
  box-shadow:0 0 12px rgba(138,15,26,0.45);
}

/* ==========================
   FORMS
   ========================== */
form{
  width:100%;
}

label{
  display:block;
  margin-bottom:8px;
  font-weight:600;
  color:var(--gold-light);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="url"],
input[type="search"],
input[type="date"],
textarea,
select{
  width:100%;
  background:rgba(0,0,0,0.42);
  border:1px solid rgba(176,138,46,0.28);
  color:var(--text-main);
  padding:14px 16px;
  border-radius:12px;
  margin-bottom:18px;
  outline:none;
  transition:var(--transition);
  box-shadow:inset 0 0 10px rgba(255,255,255,0.02);
}

input::placeholder,
textarea::placeholder{
  color:rgba(201,183,159,0.70);
}

input:focus,
textarea:focus,
select:focus{
  border-color:rgba(216,184,90,0.55);
  box-shadow:
    0 0 12px rgba(138,15,26,0.22),
    0 0 0 2px rgba(74,35,95,0.18);
}

textarea{
  min-height:140px;
  resize:vertical;
}

/* ==========================
   TABLES
   ========================== */
.table-wrap{
  overflow-x:auto;
}

table{
  width:100%;
  border-collapse:collapse;
  background:linear-gradient(160deg, rgba(14,0,8,0.96), rgba(23,0,31,0.95), rgba(43,10,61,0.88));
  border:1px solid rgba(176,138,46,0.38);
  border-radius:var(--radius);
  overflow:hidden;
}

th,
td{
  padding:14px 16px;
  text-align:left;
  border-bottom:1px solid rgba(176,138,46,0.15);
}

th{
  color:var(--gold-light);
  background:rgba(92,0,11,0.22);
}

td{
  color:var(--text-soft);
}

tr:hover td{
  background:rgba(138,15,26,0.08);
}

/* ==========================
   VIDEO / MEDIA
   ========================== */
.video-embed,
.media-frame{
  margin:18px 0 18px;
  border-radius:14px;
  overflow:hidden;
  border:1px solid rgba(176,138,46,0.28);
  background:#000;
  box-shadow:
    0 0 18px rgba(92,0,11,0.16),
    0 0 0 1px rgba(255,255,255,0.02) inset;
}

.video-embed iframe,
.media-frame iframe,
.media-frame video{
  display:block;
  width:100%;
  aspect-ratio:16 / 9;
  border:0;
}

.video-date,
.meta{
  margin-top:16px;
  font-size:14px;
  color:var(--gold-light);
  opacity:0.92;
}

/* ==========================
   VIDEO GRID
   ========================== */
.video-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:25px;
}

.video-pane{
  min-height:220px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}

.video-pane-number{
  font-size:3rem;
  font-weight:700;
  color:var(--gold-light);
  text-shadow:
    0 0 8px rgba(176,138,46,0.35),
    0 0 16px rgba(138,15,26,0.40);
  line-height:1;
}

.video-pane-inner{
  width:100%;
}

.video-title{
  margin:0 0 12px;
  font-size:18px;
  font-weight:700;
  color:var(--gold-light);
}

.video-description{
  margin-top:12px;
  color:var(--text-soft);
}

/* ==========================
   BLOG / POSTS
   ========================== */
.post-meta,
.blog-meta{
  margin:12px 0 0;
  font-size:14px;
  color:var(--gold-light);
  opacity:0.9;
}

.read-more{
  display:inline-block;
  margin-top:18px;
  text-decoration:none;
  font-weight:700;
  color:var(--gold-light);
}

.read-more:hover{
  color:var(--white);
}

/* ==========================
   GRID HELPERS
   ========================== */
.grid{
  display:grid;
  gap:25px;
}

.grid-2{
  grid-template-columns:repeat(2, minmax(0, 1fr));
}

.grid-3{
  grid-template-columns:repeat(3, minmax(0, 1fr));
}

/* ==========================
   ALERTS / MESSAGES
   ========================== */
.alert{
  padding:16px 18px;
  border-radius:12px;
  margin-bottom:20px;
  border:1px solid rgba(176,138,46,0.35);
  background:linear-gradient(135deg, rgba(43,0,5,0.72), rgba(43,10,61,0.50));
  color:var(--text-main);
  box-shadow:0 0 14px rgba(0,0,0,0.25);
}

.alert-success{
  border-color:#6d8b3d;
}

.alert-error{
  border-color:#a31526;
}

.alert-warning{
  border-color:#b08a2e;
}

/* ==========================
   FOOTER
   ========================== */
.footer{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  height:var(--footer-height);
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    linear-gradient(90deg, var(--black), var(--deep-purple) 50%, var(--blood-red-dark));
  border-top:1px solid var(--gold);
  box-shadow:
    0 -8px 25px rgba(0,0,0,0.65),
    0 0 18px rgba(92,0,11,0.30),
    inset 0 1px 0 rgba(216,184,90,0.15);
  color:var(--gold-light);
  z-index:1000;
}

.footer .container{
  width:min(var(--container-width), calc(100% - 32px));
  max-width:var(--container-width);
}

.footer-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  width:100%;
}

.footer-brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-family:"Cinzel", Georgia, serif;
  font-weight:700;
  color:var(--gold-light);
  letter-spacing:0.04em;
  text-shadow:
    0 0 8px rgba(176,138,46,0.22),
    0 0 16px rgba(92,0,11,0.28);
}

.footer-badge{
  width:16px;
  height:16px;
  border-radius:50%;
  display:inline-block;
  background:
    radial-gradient(circle at 35% 35%, #b81b2e, var(--blood-red) 55%, var(--black) 100%);
  border:1px solid rgba(216,184,90,0.45);
  box-shadow:
    0 0 10px rgba(138,15,26,0.7),
    0 0 18px rgba(74,35,95,0.25);
}

.footer-copy{
  font-size:13px;
  color:var(--text-soft);
  text-align:right;
}

/* ==========================
   SCROLLBARS
   ========================== */
.page-content::-webkit-scrollbar,
::-webkit-scrollbar{
  width:12px;
}

.page-content::-webkit-scrollbar-track,
::-webkit-scrollbar-track{
  background:#090909;
}

.page-content::-webkit-scrollbar-thumb,
::-webkit-scrollbar-thumb{
  background:linear-gradient(var(--blood-red), var(--royal-purple));
  border-radius:10px;
}

/* ==========================
   MOBILE
   ========================== */
@media(max-width:900px){
  .grid-3{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .video-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

@media(max-width:768px){
  :root{
    --header-height:110px;
    --footer-height:88px;
  }

  nav{
    flex-wrap:wrap;
    gap:8px;
    justify-content:center;
  }

  .topbar{
    height:auto;
    min-height:var(--header-height);
    padding:12px 0;
  }

  .topbar-inner{
    flex-direction:column;
    gap:10px;
  }

  .page-content{
    top:var(--header-height);
    bottom:var(--footer-height);
  }

  .wrap{
    padding:20px 16px 24px;
  }

  .hero,
  .card,
  .panel,
  .video-item,
  .blog-item,
  .post-item,
  .contact-box,
  .form-box{
    padding:22px;
  }

  .hero h1{
    font-size:28px;
  }

  .video-item h3,
  .card h3,
  .panel h3{
    font-size:20px;
  }

  .grid-2,
  .grid-3,
  .video-grid{
    grid-template-columns:1fr;
  }

  .footer{
    height:auto;
    min-height:var(--footer-height);
    padding:12px 0;
  }

  .footer-inner{
    flex-direction:column;
    text-align:center;
    justify-content:center;
  }

  .footer-copy{
    text-align:center;
  }
}

@media(max-width:480px){
  .brand{
    font-size:16px;
  }

  .navlink{
    font-size:14px;
    padding:7px 10px;
  }

  .hero h1{
    font-size:24px;
  }

  .video-pane-number{
    font-size:2.4rem;
  }

  .footer-brand{
    font-size:14px;
  }

  .footer-copy{
    font-size:12px;
  }
}