/* =========================================================
   ONLINE FORUM GALLERY
   HTML + CSS + JavaScript + jQuery + Bootstrap
   ========================================================= */

:root{
  --red:#ff1744;
  --red2:#ff4b5c;
  --blue:#1769ff;
  --blue2:#00b7ff;
  --green:#00d084;
  --green2:#38ef7d;
  --dark:#07101e;
  --dark2:#0d1728;
  --white:#f7fbff;
  --muted:#8ea0b8;
  --line:rgba(255,255,255,.10);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Montserrat',Arial,sans-serif;
  color:var(--white);
  background:
    radial-gradient(circle at 10% 20%,rgba(23,105,255,.10),transparent 30%),
    radial-gradient(circle at 90% 30%,rgba(0,208,132,.08),transparent 28%),
    #050b14;
  overflow-x:hidden;
}
a{text-decoration:none}

.top-strip{
  background:linear-gradient(90deg,var(--red),var(--blue),var(--green),var(--red));
  background-size:300% 100%;
  animation:rainbow 8s linear infinite;
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.12em;
  padding:8px 0;
}
@keyframes rainbow{0%{background-position:0%}100%{background-position:300%}}

.hero-header{
  min-height:734px;
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:stretch;
  background:
    linear-gradient(135deg,rgba(255,23,68,.88),rgba(7,16,30,.96) 42%,rgba(0,208,132,.38)),
    linear-gradient(180deg,#0a1830,#07101e);
}
.hero-header:before,.hero-header:after{
  content:"";
  position:absolute;
  border-radius:50%;
  filter:blur(1px);
  opacity:.45;
  animation:float 7s ease-in-out infinite;
}
.hero-header:before{
  width:320px;height:320px;right:-100px;top:80px;
  background:radial-gradient(circle,var(--green),transparent 65%);
}
.hero-header:after{
  width:400px;height:400px;left:-180px;bottom:-160px;
  background:radial-gradient(circle,var(--blue),transparent 65%);
  animation-delay:-3s;
}
.hero-grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:42px 42px;
  mask-image:linear-gradient(to bottom,black,transparent);
}
@keyframes float{50%{transform:translateY(-25px) translateX(15px)}}

.fw-black{font-weight:900}
.brand-mark{
  display:inline-grid;place-items:center;
  width:38px;height:38px;border-radius:10px;
  margin-right:8px;
  background:linear-gradient(135deg,var(--red),var(--blue));
  box-shadow:0 0 25px rgba(255,23,68,.45);
}
.brand-dot{color:var(--green)}
.navbar .nav-link{
  color:#fff;
  font-weight:700;
  text-transform:uppercase;
  font-size:.76rem;
  letter-spacing:.08em;
  position:relative;
}
.navbar .nav-link:after{
  content:"";position:absolute;left:10px;right:10px;bottom:0;
  height:2px;background:var(--green);
  transform:scaleX(0);transition:.3s;
}
.navbar .nav-link:hover:after,.navbar .nav-link.active:after{transform:scaleX(1)}

.hero-content{
  max-width:850px;
  margin:70px auto 0;
  padding:0 15px;
}
.pulse-label,.section-kicker{
  display:inline-block;
  color:var(--green2);
  font-weight:900;
  font-size:.73rem;
  letter-spacing:.18em;
}
.pulse-label span{
  display:inline-block;width:9px;height:9px;border-radius:50%;
  background:var(--green);margin-right:7px;
  box-shadow:0 0 0 0 rgba(0,208,132,.7);
  animation:pulse 1.6s infinite;
}
@keyframes pulse{70%{box-shadow:0 0 0 12px rgba(0,208,132,0)}100%{box-shadow:0 0 0 0 rgba(0,208,132,0)}}

.hero-title{
  margin:22px 0 12px;
  font-size:clamp(3.1rem,8vw,6.8rem);
  line-height:.9;
  font-weight:900;
  letter-spacing:-.06em;
  text-shadow:0 8px 35px rgba(0,0,0,.35);
}
.hero-title span{
  color:#fff;
  -webkit-text-stroke:1px rgba(255,255,255,.6);
}
.hero-title strong{
  background:linear-gradient(90deg,#fff,var(--green2),#fff);
  background-size:200%;
  -webkit-background-clip:text;
  color:transparent;
  animation:shine 3s linear infinite;
}
@keyframes shine{to{background-position:200%}}
.hero-text{max-width:650px;margin:0 auto 28px;color:#d8e2f0;font-size:1rem;line-height:1.8}

.btn{border-radius:12px;font-weight:800;letter-spacing:.04em}
.btn-neon{
  color:#061019;
  border:0;
  background:linear-gradient(100deg,var(--green2),#fff,var(--blue2));
  background-size:220%;
  animation:buttonGlow 3s ease-in-out infinite;
  box-shadow:0 10px 35px rgba(0,208,132,.22);
}
.btn-neon:hover{color:#061019;transform:translateY(-2px)}
@keyframes buttonGlow{50%{background-position:100%}}
.hero-buttons{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
.hero-stats{
  max-width:700px;
  margin:90px auto 0;
}
.stat{
  padding:16px 8px;
  border-top:1px solid rgba(255,255,255,.22);
}
.stat strong{display:block;font-size:1.8rem;font-weight:900}
.stat small{font-size:.62rem;color:#9fb1c9;letter-spacing:.12em}

.main-wrap{padding:65px 0 85px}
.section-heading{
  display:flex;justify-content:space-between;align-items:end;
  gap:20px;margin-bottom:30px;
}
.section-heading h2,.cta-section h2{
  font-size:clamp(2rem,4vw,3.5rem);
  font-weight:900;margin:6px 0 0;
}
.section-heading h2 span,.article-header h3 span,.cta-section h2 span{color:var(--green)}
.section-heading p{color:var(--muted);margin:0;font-size:.82rem}

.side-card,.article-card{
  border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(18,31,52,.96),rgba(7,15,27,.96));
  border-radius:18px;
  padding:18px;
  box-shadow:0 18px 50px rgba(0,0,0,.22);
  overflow:hidden;
}
.side-title{
  font-size:.72rem;font-weight:900;letter-spacing:.1em;
  padding-bottom:14px;margin-bottom:4px;
  border-bottom:1px solid var(--line);
}
.side-title i{color:var(--red);font-size:1rem;margin-right:7px}
.news-item{
  display:flex;gap:11px;padding:14px 4px;
  color:#dce7f6;border-bottom:1px solid var(--line);
  transition:.25s;
}
.news-item:hover{transform:translateX(5px);color:#fff}
.news-item>span{font-size:.72rem;color:var(--red);font-weight:900}
.news-item b{display:block;font-size:.75rem}
.news-item small{display:block;color:var(--muted);font-size:.61rem;margin-top:4px}
.btn-color{
  color:#fff;border:0;
  background:linear-gradient(100deg,var(--red),var(--blue),var(--green));
  background-size:220%;
  animation:rainbow 6s linear infinite;
}

.gallery-card{
  position:relative;
  height:215px;
  border-radius:17px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  background:#101a2b;
  cursor:pointer;
}
.gallery-card img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .6s cubic-bezier(.2,.8,.2,1),filter .6s;
  filter:saturate(.85);
}
.gallery-card:hover img{transform:scale(1.10);filter:saturate(1.35)}
.gallery-card:after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 35%,rgba(0,0,0,.86));
}
.gallery-info{
  position:absolute;left:16px;right:16px;bottom:14px;z-index:2;
}
.gallery-info small{color:var(--green2);font-weight:900;letter-spacing:.12em;font-size:.6rem}
.gallery-info h4{margin:4px 0 0;font-size:.95rem;font-weight:800}
.gallery-number{
  position:absolute;right:13px;top:12px;z-index:2;
  width:31px;height:31px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(5,11,20,.72);
  border:1px solid rgba(255,255,255,.25);
  font-size:.65rem;font-weight:900;
}
.gallery-card.flash{animation:flashCard .8s ease}
@keyframes flashCard{
  0%,100%{box-shadow:0 0 0 rgba(255,23,68,0)}
  50%{box-shadow:0 0 45px rgba(255,23,68,.9),0 0 90px rgba(23,105,255,.4)}
}

.article-header{padding-bottom:15px;border-bottom:1px solid var(--line)}
.article-header h3{font-size:1.55rem;font-weight:900;margin:6px 0 0}
.article-list a{
  display:grid;grid-template-columns:30px 1fr 18px;
  align-items:center;gap:7px;
  padding:15px 2px;
  border-bottom:1px solid var(--line);
  color:#dce7f6;
  font-size:.74rem;
  transition:.25s;
}
.article-list a:hover{color:#fff;transform:translateX(4px)}
.article-list b{color:var(--blue2);font-size:.7rem}
.article-list i{color:var(--green);font-size:.65rem}

.cta-section{
  padding:85px 20px;
  background:
    linear-gradient(90deg,rgba(255,23,68,.15),rgba(23,105,255,.12),rgba(0,208,132,.15));
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.cta-section p{color:var(--muted)}
.footer{
  padding:25px 0;
  color:#75869e;
  font-size:.65rem;
  letter-spacing:.03em;
}

.reveal{opacity:0;transform:translateY(25px);transition:opacity .7s,transform .7s}
.reveal.show{opacity:1;transform:none}

@media(max-width:991.98px){
  .hero-header{min-height:680px}
  .hero-content{margin-top:45px}
  .hero-stats{margin-top:65px}
  .sticky-lg-top{position:static!important}
}
@media(max-width:575.98px){
  .top-strip{font-size:.58rem}
  .hero-header{min-height:650px}
  .hero-content{margin-top:25px}
  .hero-title{font-size:3.25rem}
  .hero-text{font-size:.82rem}
  .hero-stats{margin-top:45px}
  .hero-buttons .btn{width:100%}
  .section-heading{display:block}
  .section-heading p{margin-top:10px}
  .gallery-card{height:230px}
  .main-wrap{padding-top:45px}
}