:root {
   --gold: #c9a84c;
   --gold-light: #e8c96d;
   --gold-dim: #7a5e28;
   --dark: #0a0a0f;
   --dark-card: #13131e;
   --border: #2a2535;
   --text: #d4cbb8;
   --text-dim: #7a7265;
   --red: #8b2020;
   --red-light: #c0392b;
 }

html {
  font-size: 20px;
}

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
 }

 body {
   background: var(--dark);
   color: var(--text);
   font-family: "EB Garamond", serif;
  font-size: 22px;
   line-height: 1.7;
   min-height: 100vh;
   overflow-x: hidden;
 }

 body::before {
   content: "";
   position: fixed;
   inset: 0;
   background:
     radial-gradient(
       ellipse 60% 40% at 20% 10%,
       rgba(201, 168, 76, 0.04) 0%,
       transparent 70%
     ),
     radial-gradient(
       ellipse 50% 60% at 80% 80%,
       rgba(139, 32, 32, 0.05) 0%,
       transparent 70%
     ),
     repeating-linear-gradient(
       0deg,
       transparent,
       transparent 80px,
       rgba(255, 255, 255, 0.008) 80px,
       rgba(255, 255, 255, 0.008) 81px
     );
   pointer-events: none;
   z-index: 0;
 }

 .container {
   max-width: 860px;
   margin: 0 auto;
   padding: 60px 44px 80px;
   position: relative;
   z-index: 1;
 }

 .banner {
   text-align: center;
   margin-bottom: 56px;
 }

 .banner-ornament {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 16px;
   margin-bottom: 24px;
   opacity: 0;
   animation: fadeIn 1.2s ease 0.3s both;
 }

 .ornament-line {
   flex: 1;
   height: 1px;
   background: linear-gradient(
     to right,
     transparent,
     var(--gold-dim),
     var(--gold),
     var(--gold-dim),
     transparent
   );
   max-width: 140px;
 }

 .ornament-diamond {
   width: 10px;
   height: 10px;
   background: var(--gold);
   transform: rotate(45deg);
   box-shadow: 0 0 12px rgba(201, 168, 76, 0.6);
 }

 .guild-name {
   font-family: "Cinzel Decorative", serif;
  font-size: clamp(2.34rem, 8vw, 3.96rem);
   font-weight: 900;
   color: var(--gold);
   letter-spacing: 0.05em;
   text-shadow:
     0 0 8px  rgba(201, 168, 76, 0.25),
    0 0 20px rgba(201, 168, 76, 0.15),
     0 0 50px rgba(201, 168, 76, 0.07),
     2px 2px 0 rgba(0, 0, 0, 0.8);
   line-height: 1.1;
   opacity: 0;
   animation: fadeIn 1s ease 0.2s both;
 }

 .guild-subtitle {
   font-family: "Cinzel", serif;
   font-size: 0.85rem;
   letter-spacing: 0.4em;
   color: var(--text-dim);
   text-transform: uppercase;
   margin-top: 10px;
   opacity: 0;
   animation: fadeIn 1s ease 0.5s both;
 }

 .recruit-badge {
   display: inline-block;
   margin-top: 22px;
   padding: 7px 28px;
   border: 1px solid var(--gold-dim);
   background: rgba(201, 168, 76, 0.06);
   font-family: "Cinzel", serif;
   font-size: 0.75rem;
   letter-spacing: 0.35em;
   color: var(--gold);
   text-transform: uppercase;
   opacity: 0;
   animation: fadeIn 1s ease 0.7s both;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
 }

.recruit-badge:hover {
  background: rgba(201, 168, 76, 0.14);
  border-color: var(--gold);
  color: var(--gold-light);
}

 .card {
   background: var(--dark-card);
   border: 1px solid var(--border);
   padding: 36px 40px;
   margin-bottom: 28px;
   position: relative;
   opacity: 0;
   animation: fadeUp 0.8s ease both;
 }

 .card::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 2px;
   background: linear-gradient(to right, transparent, var(--gold), transparent);
   opacity: 0.6;
 }

 .card:nth-child(1) {
   animation-delay: 0.8s;
 }
 .card:nth-child(2) {
   animation-delay: 1s;
 }
 .card:nth-child(3) {
   animation-delay: 1.2s;
 }
 .card:nth-child(4) {
   animation-delay: 1.4s;
 }
 .card:nth-child(5) {
   animation-delay: 1.5s;
 }
 .card:nth-child(6) {
   animation-delay: 1.6s;
 }

 .card-corner {
   position: absolute;
   width: 12px;
   height: 12px;
   border-color: var(--gold-dim);
   border-style: solid;
   opacity: 0.5;
 }
 .card-corner.tl {
   top: -1px;
   left: -1px;
   border-width: 2px 0 0 2px;
 }
 .card-corner.tr {
   top: -1px;
   right: -1px;
   border-width: 2px 2px 0 0;
 }
 .card-corner.bl {
   bottom: -1px;
   left: -1px;
   border-width: 0 0 2px 2px;
 }
 .card-corner.br {
   bottom: -1px;
   right: -1px;
   border-width: 0 2px 2px 0;
 }

 .card-title {
   font-family: "Cinzel", serif;
   font-size: 1rem;
   font-weight: 600;
   color: var(--gold-light);
   text-transform: uppercase;
   letter-spacing: 0.2em;
   margin-bottom: 16px;
   display: flex;
   align-items: center;
   gap: 12px;
 }

 .card-title::after {
   content: "";
   flex: 1;
   height: 1px;
   background: linear-gradient(to right, var(--gold-dim), transparent);
 }

 .card p {
   font-size: 1rem;
   line-height: 1.8;
   color: var(--text);
 }

 .highlight {
   color: var(--gold-light);
   /* font-style: italic; */
 }

 .schedule-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 14px;
   margin-top: 16px;
 }

 .schedule-day {
   display: flex;
   flex-direction: column;
   align-items: center;
   padding: 18px 20px;
   background: rgba(201, 168, 76, 0.05);
   border: 1px solid rgba(201, 168, 76, 0.15);
   border-top: 2px solid var(--gold-dim);
   gap: 6px;
   transition:
     background 0.2s,
     border-color 0.2s;
 }

 .schedule-day:hover {
   background: rgba(201, 168, 76, 0.09);
   border-color: rgba(201, 168, 76, 0.3);
 }

 .schedule-day .day-name {
   font-family: "Cinzel", serif;
   font-size: 0.85rem;
   letter-spacing: 0.25em;
   text-transform: uppercase;
   color: var(--gold);
 }

 .schedule-day .day-time {
   font-size: 1.35rem;
   font-weight: 500;
   color: var(--text);
   letter-spacing: 0.05em;
 }

 .schedule-day .day-duration {
   font-size: 0.8rem;
   color: var(--text-dim);
   font-style: italic;
 }

 .progress-list {
   list-style: none;
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 10px 24px;
   margin-top: 4px;
 }

 .progress-list li {
   display: flex;
   align-items: center;
   gap: 10px;
   font-size: 0.95rem;
   color: var(--text);
 }

 .progress-list li::before {
   content: "✦";
   color: var(--gold);
   font-size: 0.65rem;
   flex-shrink: 0;
 }

 .perks-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 14px;
   margin-top: 4px;
 }

 .perk-item {
   display: flex;
   align-items: flex-start;
   gap: 12px;
   padding: 14px 16px;
   background: rgba(201, 168, 76, 0.04);
   border: 1px solid rgba(201, 168, 76, 0.12);
   font-size: 0.95rem;
 }

 .perk-icon {
   font-size: 1.1rem;
   line-height: 1.4;
   flex-shrink: 0;
 }

 .cta-card {
   text-align: center;
   background: linear-gradient(
     135deg,
     rgba(139, 32, 32, 0.12),
     rgba(201, 168, 76, 0.06)
   );
   border: 1px solid rgba(201, 168, 76, 0.25);
   border-top: 2px solid var(--gold);
   padding: 44px 40px;
   opacity: 0;
   animation: fadeUp 0.8s ease 1.8s both;
 }

 .cta-card .card-corner {
   opacity: 0.8;
 }

 .cta-title {
   font-family: "Cinzel Decorative", serif;
   font-size: 1.4rem;
   color: var(--gold);
   margin-bottom: 14px;
   text-shadow: 0 0 20px rgba(201, 168, 76, 0.3);
 }

 .cta-text {
   font-size: 1rem;
   color: var(--text-dim);
   max-width: 480px;
   margin: 0 auto 26px;
   font-style: italic;
 }

 .btn-group {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 16px;
   flex-wrap: wrap;
 }

 .cta-contact {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 13px 36px;
   background: linear-gradient(135deg, var(--red) 0%, #6b1515 100%);
   border: 1px solid var(--red-light);
   color: #f0d8d8;
   font-family: "Cinzel", serif;
   font-size: 0.8rem;
   letter-spacing: 0.2em;
   text-transform: uppercase;
   cursor: pointer;
   transition: all 0.3s ease;
   text-decoration: none;
   box-shadow: 0 4px 20px rgba(139, 32, 32, 0.3);
 }

 .cta-contact:hover {
   background: linear-gradient(135deg, var(--red-light) 0%, var(--red) 100%);
   box-shadow: 0 6px 30px rgba(139, 32, 32, 0.5);
   transform: translateY(-2px);
   color: #fff;
 }

 .cta-discord-btn {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   padding: 13px 36px;
   background: rgba(88, 101, 242, 0.12);
   border: 1px solid rgba(88, 101, 242, 0.4);
   color: #a5aaff;
   font-family: "Cinzel", serif;
   font-size: 0.8rem;
   letter-spacing: 0.2em;
   text-transform: uppercase;
   cursor: pointer;
   transition: all 0.3s ease;
   text-decoration: none;
 }

 .cta-discord-btn:hover {
   background: rgba(88, 101, 242, 0.25);
   border-color: rgba(88, 101, 242, 0.7);
   box-shadow: 0 6px 24px rgba(88, 101, 242, 0.25);
   transform: translateY(-2px);
   color: #fff;
 }

 .discord-icon {
   width: 18px;
   height: 18px;
   fill: currentColor;
 }

 .tools-card {
   background: var(--dark-card);
   border: 1px solid var(--border);
   padding: 36px 40px;
   margin-bottom: 28px;
   position: relative;
   opacity: 0;
   animation: fadeUp 0.8s ease 1.65s both;
 }

 .tools-card::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 2px;
   background: linear-gradient(to right, transparent, var(--gold), transparent);
   opacity: 0.6;
 }

.tools-tabs {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  margin-bottom: 18px;
  flex-wrap: wrap;
  justify-content: center;
}

.tools-tab {
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(201, 168, 76, 0.25);
  background: rgba(201, 168, 76, 0.04);
  color: var(--text-dim);
  font-family: "Cinzel", serif;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    background 0.2s,
    border-color 0.2s,
    color 0.2s,
    transform 0.15s;
}

.tools-tab.is-active {
  background: rgba(201, 168, 76, 0.16);
  border-color: var(--gold);
  color: var(--gold-light);
  transform: translateY(-1px);
}

.tools-tab:hover {
  border-color: var(--gold-light);
  color: var(--gold-light);
}

.tools-preview {
  margin-top: 4px;
}

.tools-preview-inner {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(201, 168, 76, 0.18);
  background: radial-gradient(circle at 10% 0%, rgba(201, 168, 76, 0.06), transparent 60%),
    radial-gradient(circle at 90% 100%, rgba(139, 32, 32, 0.16), transparent 55%),
    #050509;
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.image-lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.86);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  z-index: 120;
}

.image-lightbox-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.lightbox-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(201, 168, 76, 0.4);
  background: rgba(201, 168, 76, 0.08);
  color: var(--gold-light);
  font-size: 1.4rem;
  font-family: sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
  z-index: 10;
  flex-shrink: 0;
}

.lightbox-arrow:hover {
  background: rgba(201, 168, 76, 0.2);
  border-color: var(--gold);
  color: var(--gold);
}

.lightbox-arrow-prev {
  left: 50%;
  margin-left: -614px;
}

.lightbox-arrow-next {
  left: 50%;
  margin-left: 566px;
  right: auto;
}

@media (max-width: 1300px) {
  .lightbox-arrow-prev {
    left: 16px;
    margin-left: 0;
  }
  .lightbox-arrow-next {
    left: auto;
    right: 16px;
    margin-left: 0;
    padding-left: 2px;
  }
}

.image-lightbox-inner {
  max-width: 1100px;
  width: 100%;
  max-height: 90vh;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(201, 168, 76, 0.35);
  box-shadow:
    0 18px 60px rgba(0, 0, 0, 0.9),
    0 0 40px rgba(201, 168, 76, 0.16);
  background: radial-gradient(circle at 0 0, rgba(201, 168, 76, 0.16), transparent 55%),
    radial-gradient(circle at 100% 100%, rgba(139, 32, 32, 0.25), transparent 55%),
    #050509;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
}

.image-lightbox-img {
  width: 100%;
  height: 100%;
  max-height: 90vh;
  object-fit: contain;
}

.tools-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.02);
  pointer-events: none;
  transition:
    opacity 0.25s ease,
    transform 0.35s ease;
}

.tools-image.is-active {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

.tools-preview-hint {
  margin-top: 10px;
  font-size: 0.82rem;
  color: var(--text-dim);
  font-style: italic;
}

 .footer-ornament {
   text-align: center;
   margin-top: 44px;
   opacity: 0;
   animation: fadeIn 1s ease 2.2s both;
 }

 .footer-ornament .footer-banner-ornament {
   opacity: 1;
   margin-bottom: 12px;
   animation: none;
 }

 .footer-ornament span {
   font-family: "Cinzel", serif;
   font-size: 0.7rem;
   letter-spacing: 0.4em;
   color: var(--text-dim);
   text-transform: uppercase;
 }

 .modal-overlay {
   position: fixed;
   inset: 0;
   background: rgba(0, 0, 0, 0.82);
   backdrop-filter: blur(6px);
   z-index: 100;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 24px;
   opacity: 0;
   pointer-events: none;
   transition: opacity 0.3s ease;
 }

 .modal-overlay.open {
   opacity: 1;
   pointer-events: all;
 }

 .modal {
   background: #0e0e17;
   border: 1px solid var(--gold-dim);
   max-width: 460px;
   width: 100%;
   position: relative;
   transform: translateY(20px) scale(0.97);
   transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
   overflow: hidden;
 }

 .modal-overlay.open .modal {
   transform: translateY(0) scale(1);
 }

 .modal::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 2px;
   background: linear-gradient(to right, transparent, var(--gold), transparent);
 }

 .modal-corner {
   position: absolute;
   width: 14px;
   height: 14px;
   border-color: var(--gold);
   border-style: solid;
   opacity: 0.7;
 }

 .modal-corner.tl {
   top: -1px;
   left: -1px;
   border-width: 2px 0 0 2px;
 }

 .modal-corner.tr {
   top: -1px;
   right: -1px;
   border-width: 2px 2px 0 0;
 }

 .modal-corner.bl {
   bottom: -1px;
   left: -1px;
   border-width: 0 0 2px 2px;
 }

 .modal-corner.br {
   bottom: -1px;
   right: -1px;
   border-width: 0 2px 2px 0;
 }

 .modal-header {
   padding: 28px 32px 20px;
   border-bottom: 1px solid var(--border);
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
   gap: 12px;
 }

 .modal-icon {
   font-size: 1.3rem;
   margin-bottom: 4px;
   display: block;
 }

 .modal-title {
   font-family: "Cinzel", serif;
   font-size: 1rem;
   color: var(--gold-light);
   letter-spacing: 0.15em;
   text-transform: uppercase;
 }

 .modal-subtitle {
   font-size: 0.88rem;
   color: var(--text-dim);
   margin-top: 4px;
   font-style: italic;
 }

 .modal-close {
   background: none;
   border: 1px solid var(--border);
   color: var(--text-dim);
   width: 32px;
   height: 32px;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   font-size: 1rem;
   transition: all 0.2s;
   flex-shrink: 0;
   font-family: "Cinzel", serif;
 }

 .modal-close:hover {
   border-color: var(--gold-dim);
   color: var(--gold);
   background: rgba(201, 168, 76, 0.06);
 }

 .modal-body {
   padding: 24px 32px 32px;
 }

 .modal-instruction {
   font-size: 0.9rem;
   color: var(--text-dim);
   margin-bottom: 20px;
   font-style: italic;
   text-align: center;
 }

 .officer-list {
   display: flex;
   flex-direction: column;
   gap: 10px;
 }

 .officer-item {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 14px 18px;
   background: rgba(201, 168, 76, 0.04);
   border: 1px solid rgba(201, 168, 76, 0.1);
   gap: 16px;
   transition:
     background 0.2s,
     border-color 0.2s;
 }

 .officer-item:hover {
   background: rgba(201, 168, 76, 0.08);
   border-color: rgba(201, 168, 76, 0.25);
 }

 .officer-left {
   display: flex;
   align-items: center;
   gap: 14px;
 }

 .officer-avatar {
   width: 36px;
   height: 36px;
   background: linear-gradient(135deg, var(--red) 0%, #3a0a0a 100%);
   border: 1px solid var(--gold-dim);
   display: flex;
   align-items: center;
   justify-content: center;
   font-family: "Cinzel", serif;
   font-size: 0.85rem;
   color: var(--gold-light);
   flex-shrink: 0;
 }

 .officer-name {
   font-family: "Cinzel", serif;
   font-size: 0.95rem;
   color: var(--text);
   letter-spacing: 0.08em;
 }

 .officer-command {
   font-size: 0.82rem;
   color: #7ecb8f;
   font-family: "Courier New", monospace;
   background: rgba(0, 0, 0, 0.3);
   padding: 3px 8px;
   border: 1px solid var(--border);
   letter-spacing: 0.05em;
   transition: all 0.2s;
   cursor: pointer;
   user-select: all;
 }

 .officer-command:hover {
   background: rgba(126, 203, 143, 0.08);
   border-color: #7ecb8f;
   color: #a8e6b8;
 }

 .officer-command.copied {
   background: rgba(126, 203, 143, 0.15);
   border-color: #7ecb8f;
   color: #a8e6b8;
 }

 .modal-note {
   margin-top: 20px;
   padding: 12px 16px;
   background: rgba(201, 168, 76, 0.04);
   border-left: 2px solid var(--gold-dim);
   font-size: 0.85rem;
   color: var(--text-dim);
   font-style: italic;
 }

 @keyframes fadeUp {
   from {
     opacity: 0;
     transform: translateY(24px);
   }
   to {
     opacity: 1;
     transform: translateY(0);
   }
 }

 @keyframes fadeIn {
   from {
     opacity: 0;
   }
   to {
     opacity: 1;
   }
 }

 @media (max-width: 580px) {
   .container {
     padding-left: 24px;
     padding-right: 24px;
   }

   .card,
   .tools-card {
     padding: 26px 22px;
   }

   .schedule-grid,
   .progress-list,
   .perks-grid {
     grid-template-columns: 1fr;
   }

   .cta-card {
     padding: 32px 22px;
   }

   .btn-group {
     flex-direction: column;
   }

   .modal-header,
   .modal-body {
     padding-left: 22px;
     padding-right: 22px;
   }
 }