/* ==========================================================================
   Vijay Punyamanthula — Author Website
   Dark luxury / adventure & mystery theme
   ========================================================================== */

/* ---------- Design tokens ---------- */
:root{
  --color-primary:   #0D1B2A;
  --color-secondary: #1B263B;
  --color-gold:      #D4AF37;
  --color-gold-light:#F1D98B;
  --color-white:     #F8F9FA;
  --color-bg:        #050608;
  --color-text-muted:#A9B4C0;
  --panel-line: rgba(201,162,39,0.22);

  --font-display: 'Cinzel', serif;
  --font-body: 'Jost', sans-serif;
  --font-accent: 'EB Garamond', serif;

  --radius-lg: 22px;
  --radius-md: 14px;
  --radius-sm: 8px;

  --shadow-gold: 0 8px 30px rgba(212,175,55,.18);
  --transition-base: .45s cubic-bezier(.22,1,.36,1);

  --nav-height: 84px;
}

*{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  *{ scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

html,body{ background:var(--color-bg); color:var(--color-white); }
body{
  font-family:var(--font-body);
  font-weight:300;
  line-height:1.7;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

::selection{ background:var(--color-gold); color:var(--color-bg); }

/* Skip link */
.skip-link{
  position:absolute; top:-60px; left:12px; z-index:2000;
  background:var(--color-gold); color:var(--color-bg);
  padding:.6rem 1rem; border-radius:var(--radius-sm); font-weight:600;
  transition:top .25s ease;
}
.skip-link:focus{ top:12px; color:var(--color-bg); }

/* Focus visibility (WCAG) */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:2px solid var(--color-gold);
  outline-offset:3px;
  border-radius:4px;
}

h1,h2,h3,h4{ font-family:var(--font-display); letter-spacing:.02em; color:var(--color-white); }

/* ---------- Loader ---------- */
#loader{
  position:fixed; inset:0; z-index:3000;
  background:radial-gradient(ellipse at center, var(--color-secondary), var(--color-bg));
  display:flex; align-items:center; justify-content:center;
  transition:opacity .6s ease, visibility .6s ease;
}
#loader.loaded{ opacity:0; visibility:hidden; }
.loader-inner{ text-align:center; }
.loader-compass{ animation:spin 2.2s linear infinite; filter:drop-shadow(0 0 14px rgba(212,175,55,.5)); }
.loader-text{ display:block; margin-top:1rem; font-family:var(--font-display); letter-spacing:.35em; color:var(--color-gold-light); font-size:.9rem; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ---------- Buttons ---------- */
.btn{
  font-family:var(--font-body); font-weight:500; letter-spacing:.03em;
  border-radius:50px; padding:.65rem 1.5rem;
  display:inline-flex; align-items:center; gap:.5rem;
  transition:var(--transition-base);
}
.btn-gold{
  background:var(--color-gold); border:1px solid var(--color-gold); color:var(--color-bg);
}
.btn-gold:hover, .btn-gold:focus{ background:var(--color-gold-light); border-color:var(--color-gold-light); color:var(--color-bg); transform:translateY(-2px); box-shadow:var(--shadow-gold); }
.btn-outline-gold{
  background:transparent; border:1px solid rgba(212,175,55,.6); color:var(--color-gold-light);
}
.btn-outline-gold:hover, .btn-outline-gold:focus{ background:rgba(212,175,55,.1); border-color:var(--color-gold); color:var(--color-gold-light); transform:translateY(-2px); }
.btn-gold-gradient{
  background:linear-gradient(135deg, #E8C766 0%, #D4AF37 45%, #9c7a1e 100%);
  color:var(--color-bg); border:none; font-weight:600;
  box-shadow:0 10px 26px rgba(212,175,55,.25);
}
.btn-gold-gradient:hover, .btn-gold-gradient:focus{ transform:translateY(-2px) scale(1.02); box-shadow:0 14px 34px rgba(212,175,55,.4); color:var(--color-bg); }

/* ---------- Eyebrow / section heading ---------- */
.eyebrow{
  font-family:var(--font-body); text-transform:uppercase; letter-spacing:.35em; font-size:.75rem;
  color:var(--color-gold); margin-bottom:.75rem; font-weight:500;
}
.eyebrow-light{ color:var(--color-gold-light); }
.section-heading{ max-width:720px; margin-left:auto; margin-right:auto; margin-bottom:3.5rem; }
.section-title{ font-size:clamp(1.9rem,4vw,2.75rem); margin-bottom:.75rem; }
.section-sub{ color:var(--color-text-muted); font-size:1.05rem; }
section{ padding:6.5rem 0; position:relative; }

/* section.section-about{ padding: 0rem;} */

/* ==========================================================================
   NAVBAR
   ========================================================================== */
.navbar-luxury{
  height:var(--nav-height);
  background:rgba(0,0,0,1);
    border-bottom:  1px solid rgba(212,175,55,.3);
  transition:background .4s ease, box-shadow .4s ease, height .3s ease;
  padding-top:.5rem; padding-bottom:.5rem;
}
.navbar-luxury.scrolled{
  background:rgba(5,6,8,.82);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:0 4px 30px rgba(0,0,0,.4);
  height:70px;
}
.navbar-brand{ display:flex; align-items:center; gap:.6rem; font-family:var(--font-display); font-size:1.35rem; letter-spacing:.08em; color:var(--color-white) !important; }
.brand-mark{ filter:drop-shadow(0 0 6px rgba(212,175,55,.5)); }
.navbar-nav .nav-link{
  color:var(--color-white); font-weight:400; letter-spacing:.04em; padding:.5rem 1rem !important;
  position:relative; opacity:.85;
}
.navbar-nav .nav-link::after{
  content:''; position:absolute; left:1rem; right:1rem; bottom:.15rem; height:1px;
  background:var(--color-gold); transform:scaleX(0); transform-origin:left; transition:transform .3s ease;
}
.navbar-nav .nav-link:hover, .navbar-nav .nav-link.active{ color:var(--color-gold-light); opacity:1; }
.navbar-nav .nav-link:hover::after, .navbar-nav .nav-link.active::after{ transform:scaleX(1); }

.navbar-toggler{ border:none; padding:.4rem; }
.navbar-toggler:focus{ box-shadow:none; }
.toggler-line{ display:block; width:24px; height:2px; background:var(--color-gold); margin:5px 0; transition:.3s; }

.offcanvas, .navbar-collapse.show, .navbar-collapse.collapsing{
  background:rgba(5,6,8,.97);
}
@media (max-width:991.98px){
  .navbar-collapse{ padding:1.5rem 0; }
  .navbar-nav{ text-align:center; }
  .navbar-nav .nav-link{ padding:.75rem 1rem !important; }
  .navbar-collapse .btn-gold{ margin:1rem auto 0; width:fit-content; }
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:center;
  overflow:hidden; isolation:isolate;
}
.hero-bg{
  position:absolute; inset:-6% -2%; background-size:cover; background-position:center;
  will-change:transform; z-index:-3; transform:scale(1.08);
}
.hero-gradient{
  position:absolute; inset:0; z-index:-2;
  background:
    linear-gradient(180deg, rgba(5,6,8,.35) 0%, rgba(5,6,8,.35) 45%, var(--color-bg) 100%),
    linear-gradient(90deg, rgba(5,6,8,.75) 0%, rgba(5,6,8,.15) 45%, rgba(5,6,8,.15) 60%, rgba(5,6,8,.75) 100%);
}
#particleCanvas{ position:absolute; inset:0; z-index:-1; pointer-events:none; }

.hero-content{ position:relative; z-index:2; padding-top:var(--nav-height); text-align: center;}
.hero-title{
  font-size:clamp(2.6rem,7vw,5.2rem); line-height:1.05; margin-bottom:1.25rem;
  color:var(--color-white); text-shadow:0 6px 40px rgba(0,0,0,.55);
}
.hero-title .cursor{ color:var(--color-gold); animation:blink 1s step-end infinite; }
@keyframes blink{ 50%{ opacity:0; } }
.hero-subtitle{
  font-family:var(--font-accent); font-style:italic; font-size:clamp(1.05rem,2vw,1.4rem);
  color:var(--color-text-muted); width:100%; margin-bottom:2.25rem; text-align: center;
}
.hero-actions{ /*display:flex;*/ flex-wrap:wrap; gap:1rem; margin-bottom:1.5rem; }
.hero-amazon{ display:inline-flex; }


.about-highlights {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
    }
@media (max-width: 767px) {
   .about-highlights {
        grid-template-columns: repeat(1, 1fr);
    }
}

    .highlight-card {
      background: linear-gradient(180deg, rgba(27,38,59,.55), rgba(13,27,42,.55));
      padding: 10px;
      border: 1px solid var(--color-gold);
      border-radius: 6px;
      text-align: center;
    }

    .highlight-card i {
      font-size: 2rem;
      color: var(--color-gold);
      margin-bottom: 10px;
    }
.highlight-card p{ margin-bottom: 0;}


.scroll-indicator{
  position:absolute; bottom:2.2rem; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.5rem; z-index:2;
  color:var(--color-gold-light); text-decoration:none; opacity:.85;
}
.scroll-mouse{ width:26px; height:42px; border:2px solid var(--color-gold); border-radius:14px; position:relative; }
.scroll-dot{ position:absolute; top:6px; left:50%; width:4px; height:8px; background:var(--color-gold); border-radius:2px; transform:translateX(-50%); animation:scrollDot 1.6s ease infinite; }
@keyframes scrollDot{ 0%{ opacity:1; top:6px;} 70%{opacity:0; top:22px;} 100%{opacity:0; top:6px;} }
.scroll-label{ font-size:.7rem; letter-spacing:.3em; text-transform:uppercase; }

/* ==========================================================================
   ABOUT
   ========================================================================== */
.section-about{ background:linear-gradient(180deg, var(--color-bg), var(--color-primary) 40%, var(--color-bg)); }
.portrait-frame{ position:relative; max-width:420px; margin:0 auto; }
.portrait-img{ border-radius:var(--radius-lg); position:relative; z-index:2; box-shadow:0 30px 60px rgba(0,0,0,.5); }
.portrait-ring{
  position:absolute; inset:-18px; border:1px solid rgba(212,175,55,.4); border-radius:calc(var(--radius-lg) + 18px);
  z-index:1; pointer-events:none;
}
.lead-text{ color:var(--color-text-muted); font-size:1.05rem; margin-bottom:1.25rem; }
.pull-quote{
  font-family:var(--font-accent); font-style:italic; font-size:1.5rem; color:var(--color-gold-light);
  border-left:2px solid var(--color-gold); padding-left:1.25rem; margin:2rem 0;
}
.pull-quote i{ color:var(--color-gold); margin-right:.4rem; }

.about-stats{ display:flex; gap:2.5rem; flex-wrap:wrap; margin-top:2rem; }
.stat-item{ text-align:left; }
.stat-number{ display:block; font-family:var(--font-display); font-size:2.2rem; color:var(--color-gold); }
.stat-label{ font-size:.8rem; color:var(--color-text-muted); text-transform:uppercase; letter-spacing:.12em; }

/* ==========================================================================
   BOOK CARDS
   ========================================================================== */
.section-books{ background:var(--color-bg); }
.book-card{
  background:linear-gradient(180deg, rgba(27,38,59,.55), rgba(13,27,42,.55));
  border:1px solid rgba(212,175,55,.15);
  border-radius:var(--radius-lg);
  overflow:hidden; height:100%;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  transition:transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
  transform-style:preserve-3d;
  will-change:transform;
}
.book-card:hover{
  border-color:rgba(212,175,55,.5);
  box-shadow:0 30px 60px rgba(0,0,0,.5), 0 0 40px rgba(212,175,55,.15);
}
.book-cover-wrap{ position:relative; overflow:hidden; }
.book-cover{ width:100%; display:block; aspect-ratio:2/0; object-fit:cover; transition:transform .6s ease; }
.book-card:hover .book-cover{ transform:scale(1.06); }
.genre-badge{
  position:absolute; top:1rem; left:1rem; background:rgba(5,6,8,.7); backdrop-filter:blur(6px);
  border:1px solid rgba(212,175,55,.4); color:var(--color-gold-light);
  font-size:.7rem; letter-spacing:.06em; padding:.35rem .75rem; border-radius:50px;
}
.book-body{ padding:1.5rem; }
.book-title{ font-size:1.25rem; margin-bottom:.6rem; }
.book-desc{ color:var(--color-text-muted); font-size:.92rem; margin-bottom:1.25rem; min-height:3.6em; }
.book-actions{ display:flex; gap:.6rem; flex-wrap:wrap; }

/* ==========================================================================
   PROMO BANNER
   ========================================================================== */
.promo-banner{
  padding:4.5rem 0;
  background:
    linear-gradient(120deg, rgba(212,175,55,.12), rgba(13,27,42,0) 60%),
    var(--color-secondary);
  border-top:1px solid rgba(212,175,55,.2);
  border-bottom:1px solid rgba(212,175,55,.2);
}
.promo-inner{ display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap; }
.promo-title{ font-size:clamp(1.5rem,3vw,2.1rem); margin-bottom:.5rem; }
.promo-sub{ color:var(--color-text-muted); margin-bottom:0; max-width:520px; }

/* ==========================================================================
   RUDRA SERIES TIMELINE
   ========================================================================== */
.section-series{ position:relative; overflow:hidden; }
.series-bg{
  position:absolute; inset:-10%; background-size:cover; background-position:center;
  z-index:0; will-change:transform; opacity:.9;
}
.section-series .container{ position:relative; z-index:1; }
.timeline{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:1.75rem; }
.timeline-item{
  background:rgba(27,38,59,.45); border:1px solid rgba(212,175,55,.18);
  border-radius:var(--radius-md); padding:2rem 1.5rem; text-align:center;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  transition:transform var(--transition-base), border-color var(--transition-base);
}
.timeline-item:hover{ transform:translateY(-8px); border-color:rgba(212,175,55,.5); }
.timeline-icon{
  width:56px; height:56px; border-radius:50%; margin:0 auto 1.1rem;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(212,175,55,.5); color:var(--color-gold); font-size:1.4rem;
}
.timeline-item h3{ font-size:1.05rem; margin-bottom:.5rem; }
.timeline-item p{ color:var(--color-text-muted); font-size:.9rem; margin-bottom:0; }

/* ==========================================================================
   FEATURE CARDS + COUNTERS
   ========================================================================== */
.section-why{ background:linear-gradient(180deg, var(--color-bg), var(--color-primary)); }
.feature-card{
  background:rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.06);
  border-radius:var(--radius-md); padding:2rem 1.25rem; text-align:center; height:100%;
  transition:transform var(--transition-base), border-color var(--transition-base), background var(--transition-base);
}
.feature-card:hover{ transform:translateY(-6px); border-color:rgba(212,175,55,.4); background:rgba(212,175,55,.05); }
.feature-icon{ font-size:2rem; color:var(--color-gold); margin-bottom:1rem; display:block; }
.feature-card h3{ font-size:1rem; margin-bottom:.5rem; }
.feature-card p{ color:var(--color-text-muted); font-size:.85rem; margin-bottom:0; }

.counters-row{ margin-top:4rem; text-align:center; }
.counter-item{ display:flex; flex-direction:column; }
.counter-number{ font-family:var(--font-display); font-size:clamp(2rem,4vw,3rem); color:var(--color-gold); }
.counter-label{ color:var(--color-text-muted); font-size:.8rem; text-transform:uppercase; letter-spacing:.12em; }

/* ==========================================================================
   REVIEWS
   ========================================================================== */
.section-reviews{ background:var(--color-bg); }
.review-glass{
  max-width:640px; text-align:center; padding:3rem 2rem;
  background:rgba(255,255,255,.04); border:1px solid rgba(212,175,55,.2);
  border-radius:var(--radius-lg); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
}
.review-stars{ color:var(--color-gold); font-size:1.1rem; margin-bottom:1.25rem; letter-spacing:.2em; }
.review-text{ font-family:var(--font-accent); font-style:italic; font-size:1.25rem; color:var(--color-white); margin-bottom:1.75rem; }
.review-author{ display:flex; align-items:center; justify-content:center; gap:.85rem; }
.review-author img{ border-radius:50%; border:1px solid rgba(212,175,55,.5); }
.review-author strong{ display:block; font-family:var(--font-body); font-weight:600; }
.review-author span{ color:var(--color-text-muted); font-size:.8rem; }

.carousel-control-prev, .carousel-control-next{ width:5%; opacity:1; }
.carousel-nav-icon{
  width:44px; height:44px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  background:rgba(212,175,55,.1); border:1px solid rgba(212,175,55,.4); color:var(--color-gold-light);
}
.review-indicators [data-bs-target]{
  background-color:var(--color-gold); opacity:.35; width:8px; height:8px; border-radius:50%;
}
.review-indicators .active{ opacity:1; }

/* ==========================================================================
   NEWS TIMELINE
   ========================================================================== */
.section-news{ background:linear-gradient(180deg, var(--color-primary), var(--color-bg)); }
.news-timeline{ position:relative; max-width:900px; margin:0 auto; }
.news-timeline::before{
  content:''; position:absolute; left:50%; top:0; bottom:0; width:1px;
  background:linear-gradient(180deg, transparent, rgba(212,175,55,.5), transparent);
  transform:translateX(-50%);
}
/*.news-item{ position:relative; width:calc(50% - 2.5rem); margin-bottom:2.5rem; }
.news-item:nth-child(odd){ margin-right:auto; text-align:right; }
.news-item:nth-child(even){ margin-left:auto; }
.news-date{ font-family:var(--font-display); color:var(--color-gold); font-size:.85rem; letter-spacing:.1em; margin-bottom:.5rem; }
.news-card{
  background:rgba(27,38,59,.5); border:1px solid rgba(212,175,55,.15); border-radius:var(--radius-md);
  padding:1.5rem; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  transition:transform var(--transition-base), border-color var(--transition-base);
}
.news-item:hover .news-card{ transform:translateY(-4px); border-color:rgba(212,175,55,.45); }
.news-tag{ display:inline-flex; align-items:center; gap:.4rem; color:var(--color-gold-light); font-size:.75rem; text-transform:uppercase; letter-spacing:.08em; margin-bottom:.6rem; }
.news-card h3{ font-size:1.05rem; margin-bottom:.5rem; }
.news-card p{ color:var(--color-text-muted); font-size:.9rem; margin-bottom:0; }

@media (max-width:767.98px){
  .news-timeline::before{ left:0; }
  .news-item, .news-item:nth-child(odd), .news-item:nth-child(even){ width:100%; margin-left:1.75rem; text-align:left; }
}
*/
/* ==========================================================================
   BLOG
   ========================================================================== */
.section-blog{ background:var(--color-bg); }
.blog-card{ border-radius:var(--radius-lg); overflow:hidden; background:rgba(27,38,59,.4); border:1px solid rgba(212,175,55,.12); height:100%; transition:transform var(--transition-base), border-color var(--transition-base); }
.blog-card:hover{ transform:translateY(-6px); border-color:rgba(212,175,55,.4); }
.blog-img-wrap{ overflow:hidden; }
.blog-img{ width:100%; aspect-ratio:16/11; object-fit:cover; transition:transform .6s ease; }
.blog-card:hover .blog-img{ transform:scale(1.08); }
.blog-body{ padding:1.5rem; }
.blog-date{ color:var(--color-gold); font-size:.75rem; text-transform:uppercase; letter-spacing:.1em; }
.blog-body h3{ font-size:1.1rem; margin:.5rem 0; }
.blog-body p{ color:var(--color-text-muted); font-size:.9rem; }
.blog-link{ color:var(--color-gold-light); text-decoration:none; font-size:.9rem; display:inline-flex; align-items:center; gap:.4rem; }
.blog-link:hover{ color:var(--color-gold); gap:.6rem; transition:gap .25s; }

/* ==========================================================================
   FAQ
   ========================================================================== */
.section-faq{ background:linear-gradient(180deg, var(--color-bg), var(--color-primary)); }
.accordion-luxury{ max-width:820px; margin:0 auto; }
.accordion-luxury .accordion-item{
  background:rgba(27,38,59,.4); border:1px solid rgba(212,175,55,.15); margin-bottom:1rem; border-radius:var(--radius-md) !important; overflow:hidden;
}
.accordion-luxury .accordion-button{
  background:transparent; color:var(--color-white); font-family:var(--font-body); font-weight:500;
  padding:1.25rem 1.5rem; box-shadow:none;
}
.accordion-luxury .accordion-button:not(.collapsed){ color:var(--color-gold-light); background:rgba(212,175,55,.06); }
.accordion-luxury .accordion-button::after{ filter:invert(72%) sepia(46%) saturate(500%) hue-rotate(2deg) brightness(97%); }
.accordion-luxury .accordion-body{ color:var(--color-text-muted); padding:0 1.5rem 1.5rem; }

/* ==========================================================================
   CONTACT
   ========================================================================== */
.section-contact{ background:var(--color-bg); }
.contact-form .form-label{ color:var(--color-text-muted); font-size:.85rem; letter-spacing:.05em; }
.contact-form .form-control{
  background:rgba(255,255,255,.03) !important; border:1px solid rgba(255,255,255,.2) !important; color:var(--color-white) !important;
  border-radius:var(--radius-sm); padding:.75rem 1rem; box-shadow:none !important; background-image:none !important;
}
.contact-form .form-control:focus{
  background:rgba(255,255,255,.05) !important; border-color:rgba(255,255,255,.4) !important; box-shadow:none !important; color:var(--color-white) !important; background-image:none !important;
}
.was-validated .contact-form .form-control:valid,
.contact-form .form-control.is-valid{
  border-color:rgba(255,255,255,.2) !important; background-image:none !important; box-shadow:none !important;
}
.was-validated .contact-form .form-control:invalid,
.contact-form .form-control.is-invalid{
  border-color:#dc3545 !important;
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5zM6 8.2a.6.6 0 1 0 0 1.2.6.6 0 0 0 0-1.2z'/%3e%3c/svg%3e") !important;
  background-repeat:no-repeat !important; background-position:right calc(0.375em + 0.1875rem) center !important; background-size:calc(0.75em + 0.375rem) calc(0.75em + 0.375rem) !important;
}
.invalid-feedback{ color:#dc3545 !important; }
.form-success{ color:var(--color-gold-light); font-size:.95rem; }

.glass-card{
  background:rgba(255,255,255,.04); border:1px solid rgba(212,175,55,.2); border-radius:var(--radius-lg);
  padding:2.25rem; backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); height:100%;
}
.contact-email{ color:var(--color-gold-light); text-decoration:none; display:inline-flex; align-items:center; gap:.5rem; max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;}
.contact-email:hover{ color:var(--color-gold); }
.social-icons{ display:flex; gap:.75rem; flex-wrap:wrap; margin-top:1rem;  max-width: 100%;}
.social-icons a{
  width:42px; height:42px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid rgba(212,175,55,.35); color:var(--color-gold-light); text-decoration:none; transition:var(--transition-base);
}
.social-icons a:hover{ background:var(--color-gold); color:var(--color-bg); transform:translateY(-3px); }
.contact-cta{ margin-top:2.25rem; padding-top:1.75rem; border-top:1px solid rgba(212,175,55,.2); }
.contact-cta p{ color:var(--color-text-muted); margin-bottom:.85rem; }

    .w100{max-width: 100%;height: auto;}
/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{ background:var(--color-primary); padding:1.5rem 0 1rem; border-top:1px solid rgba(212,175,55,.15); }
.footer-top{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1.5rem; }
.footer-brand{ display:flex; align-items:center; gap:.85rem; text-decoration:none; }
.footer-name{ display:block; font-family:var(--font-display); color:var(--color-white); letter-spacing:.04em; }
.footer-role{ display:block; color:var(--color-text-muted); font-size:.8rem; }
.site-footer hr{ border-color:rgba(212,175,55,.15); margin:2rem 0; }
.footer-bottom{  align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem; }
.footer-bottom p{ color:var(--color-text-muted); font-size:.85rem; margin:0; }

/* ==========================================================================
   BACK TO TOP
   ========================================================================== */
#backToTop{
  position:fixed; bottom:1.75rem; right:1.75rem; z-index:900;
  width:48px; height:48px; border-radius:50%; border:1px solid rgba(212,175,55,.5);
  background:rgba(5,6,8,.75); backdrop-filter:blur(8px); color:var(--color-gold-light);
  display:flex; align-items:center; justify-content:center; font-size:1.1rem;
  opacity:0; visibility:hidden; transform:translateY(12px);
  transition:opacity .3s ease, transform .3s ease, visibility .3s ease, background .3s ease;
}
#backToTop.show{ opacity:1; visibility:visible; transform:translateY(0); }
#backToTop:hover{ background:var(--color-gold); color:var(--color-bg); }

/* ==========================================================================
   AOS override durations for elegance
   ========================================================================== */
[data-aos]{ transition-timing-function:cubic-bezier(.22,1,.36,1) !important; }

/* ==========================================================================
   Responsive tweaks
   ========================================================================== */
@media (max-width:575.98px){
  section{ padding:4.5rem 0; }
  .promo-inner{ flex-direction:column; text-align:center; }
  .about-stats{ gap:1.5rem; }
}


/* Reviews */
    .reviews-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 30px;
    }

    .review-card {
      background: rgba(013,027,042,.4);
      border: 1px solid var(--color-gold);
      padding: 25px;
      border-radius: 8px;
       
      display: flex;
      flex-direction: column;
      justify-content: space-between;
        transition:transform var(--transition-base), border-color var(--transition-base), background var(--transition-base);
    }
.review-card:hover {transform:translateY(-6px);}

    .stars {
      color: var(--color-gold);
      margin-bottom: 15px;
    }

@media (max-width: 767px) {
   .review-card  {
 width: 90%;
    }
}
    .review-text {
      color: var(--text-muted);
      font-size: 0.95rem;
      font-style: italic;
      margin-bottom: 20px;
    }

    .reviewer {
      font-weight: 600;
      color: var(--text-light);
      font-size: 0.9rem;
      text-align: right;
    }

/* News & FAQ */
    .split-section {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 50px;
    }
@media (max-width: 767px) {
    .split-section {
        grid-template-columns: 1fr;
    }
}
    .news-list, .faq-list {
      list-style: none;
    }

    .news-item {
      padding: 12px 0;
      border-bottom: 1px solid rgba(255, 255, 255, 0.05);
      display: flex;
      align-items: center;
      gap: 15px;
    }

    .news-item i {
      color: var(--color-gold); 
    }
.news-item a{color: var(--color-white); text-decoration: none;}
.news-item a:hover{color: var(--color-gold); text-decoration: none;}
    .faq-item {
      margin-bottom: 20px;
      background: var(--bg-card);
      padding: 20px;
      border-radius: 6px;
    }

    .faq-item h4 {
      color: var(--accent-gold);
      margin-bottom: 8px;
    }

    .faq-item p {
      color: var(--text-muted);
      font-size: 0.95rem;
    }




/* ---- news cards (Bootstrap card override) ---- */
  .news-card{
    background:linear-gradient(180deg, rgba(27,38,59,.55), rgba(13,27,42,.55));
    border:1px solid var(--color-gold);
    border-radius:0;
    padding:36px 28px 32px;
    height:100%;
    transition:background .25s ease, transform .25s ease;
    position:relative;
  }
  .news-card:hover{ background:rgba(27,38,59,.45); transform:translateY(-2px); }
  .news-icon{ width:38px; height:38px; color:var(--gold); }
  .news-icon svg{ width:100%; height:100%; }
  .news-name{  font-size:19px; color:var(--color-gold); margin-top:16px; display:block; }
  .news-index{
    position:absolute; top:18px; right:22px;
    font-family:'Spectral SC', serif; font-size:11px; letter-spacing:.18em;
    color:var(--color-gold-dim); opacity:.55;
  }

  /* ---- blog feature card ---- */
  .blog-feature{
    background:var(--panel);
    border:1px solid var(--panel-line);
    border-radius:0;
    padding:40px;
  }
  .blog-seal{ width:150px; height:150px; }
  .blog-eyebrow{ font-family:'Spectral SC', serif; letter-spacing:.24em; text-transform:uppercase; font-size:11.5px; color:var(--color-gold); }
  .blog-title{ font-family:'Cinzel', serif; font-size:clamp(24px,3.4vw,32px); margin:14px 0 16px; line-height:1.25; }
  .blog-desc{ color:var(--color-gold-dim); font-size:16.5px; line-height:1.75; max-width:52ch; }
  .blog-link{
    display:inline-flex; align-items:center; gap:10px; margin-top:22px;
    font-family:'Spectral SC', serif; letter-spacing:.14em; text-transform:uppercase; font-size:12.5px;
    color:var(--color-gold); border-bottom:1px solid transparent; padding-bottom:3px;
    transition:border-color .2s ease, gap .2s ease;
  }
  .blog-link:hover{ border-color:var(--color-gold); gap:14px; color:var(--color-gold); }

  /* ---- FAQ (Bootstrap accordion override) ---- */
  .accordion-item{
    background:transparent;
    border:none;
    border-bottom:1px solid var(--panel-line);
  }
  .accordion-item:first-of-type{ border-top:1px solid var(--panel-line); }
  .accordion-button{
    background:transparent;
    color:var(--color-gold);
    
    font-size:18.5px;
    padding:26px 4px;
    box-shadow:none;
  }
  .accordion-button .num{
    font-family:'Spectral SC', serif; font-size:12px; letter-spacing:.1em; color:var(--color-gold); margin-right:16px;
  }
  .accordion-button:not(.collapsed){
    background:transparent;
    color:var(--color-gold);
    box-shadow:none;
  }
  .accordion-button::after{
    filter: invert(70%) sepia(70%) saturate(400%) hue-rotate(360deg) brightness(1.05);
  }
  .accordion-body{
    padding:0 4px 28px 42px;
    color:var(--color-gold-dim);
    font-size:16px; line-height:1.75;
    max-width:58ch;
  }
  .accordion-button:focus{ box-shadow:none; }
#blog{    background: linear-gradient(180deg, var(--color-bg), var(--color-primary) 40%, var(--color-bg));}
#faq{background: var(--color-primary);}

/*Blog*/
/* ---- article hero ---- */
  .post-hero{ padding:0 0 40px; }
  .badge-cat{
    font-family:'Spectral SC', serif;
    letter-spacing:.2em;
    text-transform:uppercase;
    font-size:11px;
    color:var(--ink);
    background:var(--color-gold);
    padding:7px 16px;
    border-radius:2px;
    display:inline-block;
  }
  .post-title{
    font-family:'Cinzel', serif;
    font-weight:700;
    line-height:1.15;
    margin:22px 0 20px;
  }
  .post-meta{
    display:flex; flex-wrap:wrap; gap:22px;
    font-family:'Spectral SC', serif;
    font-size:12px; letter-spacing:.08em; text-transform:uppercase;
    color:var(--color-gold-dim);
    border-top:1px solid var(--panel-line);
    border-bottom:1px solid var(--panel-line);
    padding:18px 0;
    margin-top:28px;
  }
  .post-meta .item{ display:flex; align-items:center; gap:8px; }
  .post-meta svg{ width:15px; height:15px; color:var(--color-gold); }

  .hero-banner{
    margin-top:0px;
    height:509px;
    border:1px solid var(--panel-line);
    position:relative;
    overflow:hidden;
    background:
      linear-gradient(180deg, rgba(11,21,36,0) 0%, rgba(11,21,36,0.9) 100%),
      linear-gradient(120deg, #122238 0%, #17324a 55%, #0F1D30 100%);
  }
@media (max-width: 767px) {
    .hero-banner{ height:190px;}
    
}
  .hero-banner svg{ position:absolute; inset:0; width:100%; height:100%; }

  /* ---- article body ---- */
  .post-body{ padding:0px 0 24px; }
  .post-body .lede{
    font-size:17.5px;
    line-height:1.8;
    color:var(--color-gold-dim);
  }
  .post-body p{
    font-size:17.5px;
    line-height:1.95;
    color:var(--color-gold-dim);
    margin-bottom:26px;
  }
  .post-body strong{ 
    /* color:var(--color-gold);  */
    font-weight:600; }

  blockquote.pull{
    border-left:3px solid var(--color-gold);
    margin:40px 0;
    padding:6px 0 6px 26px;
    
    font-size:22px;
    font-style:normal;
    line-height:1.6;
    color:var(--color-gold);
  }
  blockquote.pull cite{
    display:block;
    margin-top:10px;
    font-family:'Spectral SC', serif;
    font-size:12px;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--color-text-muted);
    font-style:normal;
  }

  .closing-line{
    
    font-size:20px;
    color:var(--color-gold);
    text-align:center;
    padding:36px 0 8px;
  }

  /* ---- author card ---- */
  .author-card{
    border-top:1px solid var(--panel-line);
    border-bottom:1px solid var(--panel-line);
    padding:32px 0;
    margin-top:48px;
    display:flex; align-items:center; gap:22px;
  }
  .author-avatar{
    width:64px; height:64px; border-radius:50%;
    background:var(--panel);
    border:1px solid var(--gold);
    display:flex; align-items:center; justify-content:center;
    font-family:'Cinzel', serif; font-size:22px; color:var(--color-gold);
    flex-shrink:0;
  }
  .author-name{  font-size:17px; color:var(--color-gold); }
  .author-role{ font-family:'Spectral SC', serif; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--color-gold); margin-top:4px;color: var(--color-text-muted);}

  /* ---- more-from-journal grid ---- */
  section.more{ padding:88px 0 0; border-top:1px solid var(--panel-line); }
  .section-label{
    font-family:'Spectral SC', serif; text-transform:uppercase; letter-spacing:.28em;
    font-size:12px; color:var(--color-gold); text-align:center; display:block;
  }
  .section-title{
    font-family:'Cinzel', serif; font-size:clamp(26px,3.6vw,36px);
    margin:12px 0 20px; text-align:center; color:var(--color-gold);
  }

  /* ---- image gallery ---- */
  .gallery-tile{
    position:relative;
    aspect-ratio:1 / .88;
    overflow:hidden;
    border:1px solid var(--panel-line);
    cursor:pointer;
    background:var(--panel);
  }
  .gallery-tile svg{
    width:100%; height:100%;
    display:block;
    transition:transform .5s ease;
  }
  .gallery-tile:hover svg{ transform:scale(1.08); }
  .gallery-tile::after{
    content:'';
    position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(11,21,36,0) 40%, rgba(11,21,36,0.85) 100%);
    opacity:0;
    transition:opacity .3s ease;
  }
  .gallery-tile:hover::after{ opacity:1; }
  .gallery-tile:hover{ border-color:var(--gold); }
  .gallery-caption{
    position:absolute; left:0; right:0; bottom:0;
    padding:16px 18px;
    font-family:'Spectral SC', serif;
    font-size:11px; letter-spacing:.12em; text-transform:uppercase;
    color:var(--color-gold);
    opacity:1; transform:translateY(8px);
    transition:opacity .3s ease, transform .3s ease;
  }
  .gallery-tile:hover .gallery-caption{ opacity:1; transform:translateY(0); }
  .gallery-zoom{
    position:absolute; top:14px; right:14px;
    width:30px; height:30px;
    border:1px solid var(--color-gold-dim);
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    opacity:0; transition:opacity .3s ease;
    background:rgba(11,21,36,0.5);
  }
  .gallery-zoom svg{ width:14px; height:14px; }
  .gallery-tile:hover .gallery-zoom{ opacity:1; }

  #galleryModal .modal-content{
    background:var(--panel);
    border:1px solid var(--panel-line);
    border-radius:0;
  }
  #galleryModal .modal-body{ padding:0; aspect-ratio:1/1; }
  #galleryModal .modal-body svg{ width:100%; height:100%; }
  #galleryModal .btn-close{ filter:invert(1); opacity:.8; }
  #galleryModal .modal-caption{
    font-family:'Spectral SC', serif; font-size:12px; letter-spacing:.14em; text-transform:uppercase;
    color:var(--color-gold); padding:16px 20px; border-top:1px solid var(--panel-line);
  }
/*Blog End*/


/* ==========================================================================
   MAKE A CONTRIBUTION
   ========================================================================== */

.make-contribution-section {
    position: relative;
    background:
        #000;

    overflow: hidden;
}


/* ==========================================================================
   HEADING
   ========================================================================== */

.contribution-heading {
    max-width: 760px;
    margin: 0 auto 3rem;
}

.contribution-heading h2 {
    margin-bottom: 1rem;
    color: var(--color-white);
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 3.2rem);
    font-weight: 400;
    line-height: 1.15;
}

.contribution-heading p {
    max-width: 680px;
    margin: 0 auto;
    color: var(--color-text-muted);
    font-family: var(--font-accent);
    font-size: 1.05rem;
    line-height: 1.8;
}

.contribution-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 1rem auto 1.5rem;
}

.contribution-divider i {
    display: block;
    width: 65px;
    height: 1px;
    background: var(--color-gold);
    opacity: .65;
}

.contribution-divider b {
    color: var(--color-gold);
    font-size: 9px;
}


/* ==========================================================================
   MAIN BOX
   ========================================================================== */

.contribution-box {
    display: grid;
    grid-template-columns: 34% 66%;

    border: 1px solid rgba(212, 175, 55, .22);
    border-radius: var(--radius-md);

    background:
        linear-gradient(
            120deg,
            rgba(27, 38, 59, .45),
            rgba(5, 6, 8, .55)
        );

    box-shadow:
        0 25px 60px rgba(0, 0, 0, .25);

    overflow: hidden;

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}


/* ==========================================================================
   QR SUPPORT
   ========================================================================== */

.qr-support {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    padding: 3rem 2.5rem;

    text-align: center;

    border-right: 1px solid rgba(212, 175, 55, .18);
}


.qr-icon {
    width: 52px;
    height: 52px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 1rem;

    border: 1px solid rgba(212, 175, 55, .45);
    border-radius: 50%;

    color: var(--color-gold);
}


.qr-icon i {
    font-size: 1.15rem;
}


.qr-support .eyebrow {
    margin-bottom: .5rem;
}


.qr-support h3 {
    margin-bottom: .75rem;

    color: var(--color-white);

    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 400;
}


.qr-support > p {
    max-width: 300px;

    margin: 0 auto 1.5rem;

    color: var(--color-text-muted);

    font-family: var(--font-accent);
    font-size: .9rem;
    line-height: 1.7;
}


/* ==========================================================================
   QR IMAGE
   ========================================================================== */

.qr-image {
    width: 220px;
    height: 220px;

    padding: 8px;

    background: #ffffff;

    border: 1px solid var(--color-gold);
    border-radius: 6px;

    box-shadow:
        0 0 25px rgba(212, 175, 55, .08);
}


.qr-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;
}


.qr-name {
    margin-top: 1rem;

    color: var(--color-white);

    font-family: var(--font-display);
    font-size: .75rem;
    letter-spacing: .1em;
}


.secure-text {
    margin-top: .7rem;

    color: var(--color-gold);

    font-size: .7rem;
    letter-spacing: .05em;
}


.secure-text i {
    margin-right: .3rem;
}


/* ==========================================================================
   FORM
   ========================================================================== */

.contribution-form {
    padding: 3rem;
}


.form-heading {
    margin-bottom: 2rem;
}


.form-heading > span {
    display: block;

    margin-bottom: .5rem;

    color: var(--color-gold);

    font-size: .65rem;
    font-weight: 600;

    letter-spacing: .16em;
}


.form-heading h3 {
    margin: 0;

    color: var(--color-white);

    font-family: var(--font-display);
    font-size: 1.65rem;
    font-weight: 400;
}


/* ==========================================================================
   FORM ROW
   ========================================================================== */

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;

    margin-bottom: .25rem;
}


.form-group {
    position: relative;
    margin-bottom: 1.25rem;
}


.form-group label {
    display: block;

    margin-bottom: .5rem;

    color: var(--color-gold);

    font-size: .68rem;
    font-weight: 600;

    letter-spacing: .1em;
}


.form-group label span {
    color: var(--color-text-muted);

    font-weight: 400;
}


.form-group input,
.form-group textarea {
    width: 100%;

    box-sizing: border-box;

    border: 1px solid rgba(212, 175, 55, .18);
    border-radius: var(--radius-sm);

    background: rgba(255, 255, 255, .025);

    color: var(--color-white);

    font-family: var(--font-body);
    font-size: .85rem;

    outline: none;

    transition:
        border-color .25s ease,
        background .25s ease,
        box-shadow .25s ease;
}


.form-group input {
    height: 48px;
    padding: 0 1rem;
}


.form-group textarea {
    min-height: 135px;

    padding: 1rem;

    resize: vertical;
}


.form-group input::placeholder,
.form-group textarea::placeholder {
    color: rgba(169, 180, 192, .5);
}


.form-group input:focus,
.form-group textarea:focus {
    border-color: var(--color-gold);

    background: rgba(255, 255, 255, .04);

    box-shadow:
        0 0 0 3px rgba(212, 175, 55, .06);
}


/* ==========================================================================
   MESSAGE COUNTER
   ========================================================================== */

.message-counter {
    position: absolute;

    right: 12px;
    bottom: 10px;

    color: var(--color-text-muted);

    font-size: .68rem;
}


/* ==========================================================================
   SUBMIT
   ========================================================================== */

.contribution-submit {
    display: flex;
    align-items: center;
    gap: 1.25rem;

    margin-top: .5rem;
}


.contribution-submit .btn {
    min-width: 185px;

    justify-content: center;

    border: none;
}


.contribution-submit .btn i {
    margin-right: .4rem;
}


.contribution-submit .btn span {
    margin-left: .3rem;

    transition: transform .25s ease;
}


.contribution-submit .btn:hover span {
    transform: translate(2px, -2px);
}


.contribution-submit p {
    margin: 0;

    color: var(--color-text-muted);

    font-size: .7rem;
}


.contribution-submit p i {
    margin-right: .35rem;

    color: var(--color-gold);
}


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 991.98px) {

    .contribution-box {
        grid-template-columns: 1fr;
    }

    .qr-support {
        padding: 2.5rem;

        border-right: none;
        border-bottom: 1px solid rgba(212, 175, 55, .18);
    }

    .contribution-form {
        padding: 2.5rem;
    }

}


@media (max-width: 767.98px) {

    .make-contribution-section {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }

    .contribution-heading {
        margin-bottom: 2rem;
    }

    .contribution-heading p {
        font-size: .95rem;
    }

    .qr-support {
        padding: 2rem 1.25rem;
    }

    .contribution-form {
        padding: 2rem 1.25rem;
    }

    .qr-image {
        width: 200px;
        height: 200px;
    }

    .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .contribution-submit {
        flex-direction: column;
        align-items: stretch;
        gap: .8rem;
    }

    .contribution-submit .btn {
        width: 100%;
    }

    .contribution-submit p {
        text-align: center;
    }

}


@media (max-width: 480px) {

    .qr-image {
        width: 185px;
        height: 185px;
    }

    .contribution-heading h2 {
        font-size: 2rem;
    }

    .contribution-divider i {
        width: 45px;
    }

}

/* ==========================================================================
   SUPPORT THE AUTHOR
   ========================================================================== */

.section-support-author {
    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(212, 175, 55, 0.06),
            transparent 42%
        ),
        linear-gradient(
            180deg,
            var(--color-bg) 0%,
            var(--color-primary) 55%,
            var(--color-bg) 100%
        );

    overflow: hidden;
}


/* ---------- Heading ---------- */

.section-support-author .section-heading {
    max-width: 780px;
    margin-bottom: 0rem;
}

/* .section-support-author .section-title {
    color: var(--color-white);
} */

.support-intro {
    max-width: 680px;
    margin: 1.5rem auto 0;
    color: var(--color-white);
    font-family: var(--font-accent);
    font-size: 1.1rem;
    font-style: italic;
}


/* ---------- Ways title ---------- */

.support-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-bottom: 2rem;
}

.support-title h3 {
    margin: 0;
    color: var(--color-gold);
    font-size: 1.25rem;
    font-weight: 400;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.support-line {
    width: 70px;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(212, 175, 55, .65)
    );
}

.support-line:last-child {
    background: linear-gradient(
        90deg,
        rgba(212, 175, 55, .65),
        transparent
    );
}


/* ==========================================================================
   SUPPORT CARDS
   ========================================================================== */

.support-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
}


.support-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;

    min-height: 350px;

    padding: 2rem 1.5rem 1.75rem;

    text-align: center;

    background:
        linear-gradient(
            180deg,
            rgba(27, 38, 59, .55),
            rgba(13, 27, 42, .55)
        );

    border: 1px solid rgba(212, 175, 55, .16);
    border-radius: var(--radius-md);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    transition:
        transform var(--transition-base),
        border-color var(--transition-base),
        box-shadow var(--transition-base),
        background var(--transition-base);

    overflow: hidden;
}


/* subtle gold line at top */

.support-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;

    width: 0;
    height: 1px;

    background: var(--color-gold);

    transform: translateX(-50%);
    transition: width .4s ease;
}


.support-card:hover {
    transform: translateY(-7px);

    border-color: rgba(212, 175, 55, .45);

    background:
        linear-gradient(
            180deg,
            rgba(27, 38, 59, .75),
            rgba(13, 27, 42, .75)
        );

    box-shadow:
        0 25px 50px rgba(0, 0, 0, .35),
        0 0 30px rgba(212, 175, 55, .07);
}


.support-card:hover::before {
    width: 70px;
}


/* Featured card */

.support-card.featured {
    border-color: rgba(212, 175, 55, .42);

    background:
        linear-gradient(
            180deg,
            rgba(212, 175, 55, .07),
            rgba(13, 27, 42, .65)
        );

    box-shadow:
        0 15px 40px rgba(0, 0, 0, .25);
}


/* ---------- Icon ---------- */

.support-card-icon {
    width: 62px;
    height: 62px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 1rem;

    border: 1px solid rgba(212, 175, 55, .4);
    border-radius: 50%;

    color: var(--color-gold);

    background: rgba(212, 175, 55, .04);

    transition:
        background .3s ease,
        transform .3s ease;
}


.support-card:hover .support-card-icon {
    background: rgba(212, 175, 55, .1);
    transform: scale(1.05);
}


.support-card-icon i {
    font-size: 1.25rem;
}


/* ---------- Number ---------- */

.support-number {
    position: absolute;

    top: 18px;
    right: 20px;

    font-family: var(--font-display);
    font-size: .65rem;
    letter-spacing: .15em;

    color: var(--color-gold);
    opacity: .55;
}


/* ---------- Card Content ---------- */

.support-card h3 {
    min-height: 52px;

    margin: .25rem 0 .75rem;

    color: var(--color-white);

    font-size: 1.15rem;
    line-height: 1.35;
}


.support-card p {
    min-height: 76px;

    margin: 0 0 1.5rem;

    color: var(--color-text-muted);

    font-size: .88rem;
    line-height: 1.7;
}


/* ---------- Card Button ---------- */

.support-card .btn {
    margin-top: auto;

    font-size: .78rem;
    padding: .55rem 1.2rem;
}

.support-card .btn span {
    transition: transform .25s ease;
}

.support-card .btn:hover span {
    transform: translate(2px, -2px);
}


/* ==========================================================================
   CONTRIBUTION BOX
   ========================================================================== */

.support-contribution {
    display: grid;
    grid-template-columns: 32% 68%;

    margin-top: 1.5rem;

    border: 1px solid rgba(212, 175, 55, .2);

    background:
        linear-gradient(
            120deg,
            rgba(212, 175, 55, .045),
            rgba(27, 38, 59, .42)
        );

    border-radius: var(--radius-md);

    overflow: hidden;

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}


/* ---------- Left ---------- */

.contribution-left {
    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 3rem;

    border-right: 1px solid rgba(212, 175, 55, .18);
}


.contribution-icon {
    width: 55px;
    height: 55px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 1.5rem;

    border: 1px solid rgba(212, 175, 55, .4);
    border-radius: 50%;

    color: var(--color-gold);
}


.contribution-icon i {
    font-size: 1.15rem;
}


.contribution-left .eyebrow {
    margin-bottom: .7rem;
}


.contribution-left h3 {
    margin-bottom: 1rem;

    font-size: clamp(1.5rem, 2.5vw, 2rem);
}


.contribution-left p {
    max-width: 360px;

    margin: 0;

    color: var(--color-text-muted);

    font-size: .92rem;
    line-height: 1.8;
}


/* ==========================================================================
   CONTRIBUTION RIGHT
   ========================================================================== */

.contribution-right {
    padding: 3rem;
}


.amount-heading {
    margin-bottom: .75rem;

    color: var(--color-text-muted);

    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .12em;
}


/* ---------- Amount Buttons ---------- */

.amount-options {
    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: .65rem;

    margin-bottom: 1.5rem;
}


.amount-btn {
    min-height: 45px;

    border: 1px solid rgba(212, 175, 55, .2);
    border-radius: var(--radius-sm);

    background: rgba(255, 255, 255, .02);

    color: var(--color-white);

    font-family: var(--font-body);
    font-size: .85rem;

    cursor: pointer;

    transition:
        background .25s ease,
        border-color .25s ease,
        color .25s ease;
}


.amount-btn:hover,
.amount-btn.active {
    background: rgba(212, 175, 55, .1);

    border-color: var(--color-gold);

    color: var(--color-gold-light);
}


.amount-btn:last-child {
    grid-column: span 1;
}


/* ==========================================================================
   FORM
   ========================================================================== */

.support-form-row {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 1rem;

    margin-bottom: 1rem;
}


.support-form-group {
    position: relative;

    margin-bottom: 1rem;
}


.support-form-group label {
    display: block;

    margin-bottom: .45rem;

    color: var(--color-text-muted);

    font-size: .75rem;

    letter-spacing: .06em;
}


.support-form-group label span {
    color: rgba(169, 180, 192, .6);
}


.support-form-group input,
.support-form-group textarea {
    width: 100%;

    box-sizing: border-box;

    border: 1px solid rgba(212, 175, 55, .18);
    border-radius: var(--radius-sm);

    background: rgba(255, 255, 255, .025);

    color: var(--color-white);

    font-family: var(--font-body);
    font-size: .85rem;

    outline: none;

    transition:
        border-color .25s ease,
        background .25s ease,
        box-shadow .25s ease;
}


.support-form-group input {
    height: 48px;

    padding: 0 1rem;
}


.support-form-group textarea {
    min-height: 105px;

    padding: .9rem 1rem;

    resize: vertical;
}


.support-form-group input::placeholder,
.support-form-group textarea::placeholder {
    color: rgba(169, 180, 192, .55);
}


.support-form-group input:focus,
.support-form-group textarea:focus {
    border-color: var(--color-gold);

    background: rgba(255, 255, 255, .04);

    box-shadow:
        0 0 0 .15rem rgba(212, 175, 55, .08);
}


.message-counter {
    position: absolute;

    right: 12px;
    bottom: 10px;

    color: var(--color-text-muted);

    font-size: .7rem;
}


/* ==========================================================================
   SUBMIT
   ========================================================================== */

.support-submit {
    display: flex;
    align-items: center;

    gap: 1rem;

    margin-top: .5rem;
}


.support-submit .btn {
    border: none;

    min-width: 185px;

    justify-content: center;
}


.secure-payment {
    color: var(--color-text-muted);

    font-size: .7rem;

    letter-spacing: .03em;
}


.secure-payment i {
    color: var(--color-gold);

    margin-right: .35rem;
}


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 991.98px) {

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

    .support-card {
        min-height: 330px;
    }

    .support-contribution {
        grid-template-columns: 1fr;
    }

    .contribution-left {
        border-right: none;
        border-bottom: 1px solid rgba(212, 175, 55, .18);

        padding: 2.5rem;
    }

    .contribution-right {
        padding: 2.5rem;
    }

}


@media (max-width: 767.98px) {

    .section-support-author {
        padding: 5rem 0;
    }

    .support-grid {
        grid-template-columns: 1fr;
    }

    .support-card {
        min-height: auto;
        padding: 2rem 1.5rem;
    }

    .support-card h3,
    .support-card p {
        min-height: auto;
    }

    .support-card p {
        max-width: 420px;
    }

    .support-title {
        gap: 10px;
    }

    .support-line {
        width: 35px;
    }

    .support-title h3 {
        font-size: 1rem;
        letter-spacing: .05em;
    }

    .support-form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

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

    .amount-btn:last-child {
        grid-column: span 2;
    }

    .support-submit {
        flex-direction: column;
        align-items: stretch;
    }

    .support-submit .btn {
        width: 100%;
    }

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

}


@media (max-width: 575.98px) {

    .support-intro {
        font-size: 1rem;
    }

    .contribution-left,
    .contribution-right {
        padding: 2rem 1.25rem;
    }

    .amount-options {
        gap: .5rem;
    }

    .amount-btn {
        min-height: 42px;
        font-size: .78rem;
    }

}

.support{
  padding: 50px 0px 0px;
}

section.section-support-author{
    padding: 6.5rem 0 3rem;
}

section#series{
      padding: 4.5rem 0;
}