.admin-btn{
  margin-left:1rem;
  background:#111;
  border:1px solid rgba(255,0,0,0.4);
}

.admin-btn:hover{
  background:var(--red);
}



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

:root {
    --red: #E8231A;
    --red-dark: #B01810;
    --gold: #D4A017;
    --black: #080808;
    --dark: #111;
    --dark2: #181818;
    --dark3: #1f1f1f;
    --gray: #777;
    --light: #eee;
    --white: #fff;
    --fd: 'Bebas Neue',sans-serif;
    --fh: 'Oswald',sans-serif;
    --fb: 'Barlow',sans-serif;
}

html {
    scroll-behavior: smooth
}

::-webkit-scrollbar {
    width: 3px
}

::-webkit-scrollbar-thumb {
    background: var(--red)
}

body {
    background: var(--black);
    color: var(--light);
    font-family: var(--fb);
    overflow-x: hidden
}
.menu-toggle{
    display:none;
    background:none;
    border:1px solid var(--red);
    color:white;
    font-size:1.5rem;
    padding:0.4rem 0.8rem;
}

@media(max-width:768px){

    .nav-links{
        position:absolute;
        top:100%;
        left:0;
        width:100%;
        background:#080808;
        flex-direction:column;
        align-items:center;
        gap:1.5rem;
        padding:2rem 0;
        border-top:1px solid rgba(232,35,26,0.25);

        display:none;
    }

    .nav-links.show{
        display:flex;
    }

    .menu-toggle{
        display:block;
    }

    .btn-nav{
        display:none;
    }
}
/*for the newsletter popup*/
.success-popup{

  position:fixed;

  inset:0;

  background:
  rgba(0,0,0,0.7);

  display:none;

  justify-content:center;

  align-items:center;

  z-index:9999;
}

.popup-box{

  width:min(90%,420px);

  background:#111;

  border:1px solid
  rgba(255,0,0,0.25);

  padding:3rem 2rem;

  text-align:center;

  position:relative;

  box-shadow:
  0 0 40px
  rgba(255,0,0,0.2);
}

.popup-box h3{

  font-family:var(--fd);

  font-size:2rem;

  color:white;

  margin-bottom:1rem;
}

.popup-box p{

  color:#ccc;

  line-height:1.8;
}

.popup-close{

  position:absolute;

  top:12px;

  right:14px;

  background:none;

  border:none;

  color:white;

  font-size:1.6rem;

  cursor:pointer;
}

@keyframes popupShow{
    from{
        opacity:0;
        transform:translateY(20px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }
}

/*Front page logo fix*/
.hero-logo-wrap{
    width:160px;
    height:160px;

    margin:0 auto 1rem;

    position:relative;

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

.hero-logo-img{
    width:100%;
    height:100%;

    object-fit:contain;

    display:block;
}
/*for mobile*/

.menu-toggle{
    display:none;
    background:none;
    border:1px solid var(--red);
    color:white;
    font-size:1.5rem;
    padding:0.4rem 0.8rem;
}

@media(max-width:768px){

    .nav-links{
        position:absolute;
        top:100%;
        left:0;
        width:100%;
        background:#080808;
        flex-direction:column;
        align-items:center;
        gap:1.5rem;
        padding:2rem 0;
        border-top:1px solid rgba(232,35,26,0.25);

        display:none;
    }

    .nav-links.show{
        display:flex;
    }

    .menu-toggle{
        display:block;
    }

    .btn-nav{
        display:none;
    }
}

/*NEWSLETTER*/
.newsletter-note{
  margin-top:1rem;
  font-size:0.75rem;
  color:rgb(255, 255, 255);
  max-width:520px;
  margin-left:auto;
  margin-right:auto;
  line-height:1.6;
}

/* NAV */
nav {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 2rem;
    background: rgba(8,8,8,0.85);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(232,35,26,0.12);
    transition: padding 0.3s;
}

    nav.slim {
        padding: 0.7rem 2rem
    }

.nav-logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none
}

.nav-logo-img {
    width: 38px;
    height: 38px;
    object-fit: cover;
    /* crop just the small flame icon from 111.png top-right area */
}

.logo-wrap {
    width: 38px;
    height: 38px;
    overflow: hidden;
    border-radius: 4px;
    flex-shrink: 0;
}

.logo-src {
    width: 200%;
    height: auto;
    object-fit: cover;
    transform: translate(-50%, 0%);
    /* shows top-right flame icon from 111.png */
}

.logo-text-wrap {
    line-height: 1
}

.logo-name {
    font-family: var(--fh);
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.08em;
    color: var(--white)
}

    .logo-name span {
        color: var(--red)
    }

.logo-tag {
    font-size: 0.5rem;
    letter-spacing: 0.3em;
    color: var(--gray);
    text-transform: uppercase
}

.nav-links {
    display: flex;
    gap: 2rem;
    list-style: none
}

    .nav-links a {
        font-family: var(--fh);
        font-size: 0.72rem;
        letter-spacing: 0.14em;
        color: var(--gray);
        text-transform: uppercase;
        text-decoration: none;
        transition: color 0.2s;
    }

        .nav-links a:hover, .nav-links a.active {
            color: var(--white)
        }

.btn-nav {
    font-family: var(--fh);
    font-weight: 600;
    font-size: 0.72rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    padding: 0.45rem 1.1rem;
    border: 1.5px solid var(--red);
    color: var(--red);
    background: transparent;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s,color 0.2s;
}

    .btn-nav:hover {
        background: var(--red);
        color: var(--white)
    }
    .nav-buttons{
    display:flex;
    align-items:center;
    gap:1rem;
}

/* HERO */
#home {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 7rem 1.5rem 4rem;
    overflow: hidden;
}

.hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0
}

.hero-bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top left;
    opacity: 0.08;
    filter: grayscale(30%);
}

.hero-bg-grad {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 65% 55% at 50% 45%, rgba(232,35,26,0.14) 0%, transparent 70%), linear-gradient(to bottom, rgba(8,8,8,0.3) 0%, rgba(8,8,8,0.85) 100%);
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 700px;
    margin: 0 auto
}

/* Big logo in hero */
.hero-logo-wrap {
  width: 340px;
  height: 340px;
  margin: 0 auto 1rem;
  overflow: visible;
  position: relative;
}

.hero-logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.hero-logo-wrap {
  transform: translateY(30px);
}



.flame-anim {
    animation: flicker 2.8s ease-in-out infinite alternate
}

@keyframes flicker {
    0% {
        filter: drop-shadow(0 0 20px rgba(232,35,26,0.8)) drop-shadow(0 0 40px rgba(232,35,26,0.3));
        transform: scaleY(1)
    }

    50% {
        filter: drop-shadow(0 0 32px rgba(255,100,20,1)) drop-shadow(0 0 70px rgba(232,35,26,0.5));
        transform: scaleY(1.03)
    }

    100% {
        filter: drop-shadow(0 0 16px rgba(232,35,26,0.6));
        transform: scaleY(0.98)
    }
}

.hero-pretag {
    font-family: var(--fh);
    font-size: 1.25rem;
    letter-spacing: 0.45em;
    color: var(--red);
    text-transform: uppercase;
    margin-bottom: 0.5rem
}

.hero-title {
    font-family: var(--fd);
    font-size: clamp(5rem, 11vw, 9rem);
    line-height: 0.88;
    color: var(--white);
    letter-spacing: 0.02em;
    margin-bottom: 0.5rem;

    text-shadow:
    0 0 10px rgba(255,0,0,0.18),
    0 0 30px rgba(255,0,0,0.08);
}

.hero-sub {
    font-size: 0.9rem;
    font-weight: 300;
    color: var(--gray);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 2.5rem
}

.btn-primary {
    display: inline-block;
    background: var(--red);
    color: var(--white);
    font-family: var(--fh);
    font-weight: 600;
    font-size: 0.78rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    padding: 0.85rem 2.2rem;
    text-decoration: none;
    transition: background 0.2s,transform 0.15s;
}

    .btn-primary:hover {
        background: var(--red-dark);
        transform: translateY(-2px)
    }

.btn-outline {
    display: inline-block;
    background: transparent;
    color: var(--white);
    font-family: var(--fh);
    font-weight: 600;
    font-size: 0.78rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    padding: 0.85rem 2.2rem;
    border: 1.5px solid rgba(255,255,255,0.25);
    text-decoration: none;
    transition: border-color 0.2s,color 0.2s;
}

    .btn-outline:hover {
        border-color: var(--red);
        color: var(--red)
    }

.hero-btns {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap
}

/* ember particles */
.ember {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--red);
    animation: ember 3s ease-in infinite;
    pointer-events: none
}

@keyframes ember {
    0%,100% {
        opacity: 0;
        transform: translateY(0) scale(1)
    }

    40% {
        opacity: 1
    }

    100% {
        opacity: 0;
        transform: translateY(-100px) scale(0.2)
    }
}

/* PILLARS */
.pillars {
    display: flex;
    background: var(--dark2);
    border-top: 1px solid rgba(232,35,26,0.2);
    border-bottom: 1px solid rgba(232,35,26,0.2)
}

.pillar {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: 1.6rem 1rem;
    border-right: 1px solid rgba(255,255,255,0.05);
    text-align: center;
    transition: background 0.2s
}

    .pillar:last-child {
        border-right: none
    }

    .pillar:hover {
        background: rgba(232,35,26,0.06)
    }

.pillar-icon {
    font-size: 1.3rem
}

.pillar-name {
    font-family: var(--fh);
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    color: var(--white);
    text-transform: uppercase
}

.pillar-desc {
    font-size: 0.7rem;
    color: var(--gray)
}

/* SECTIONS */
section {
    padding: 5.5rem 1.5rem
}

.container {
    max-width: 1080px;
    margin: 0 auto
}

.sec-label {
    font-family: var(--fh);
    font-size: 0.68rem;
    letter-spacing: 0.45em;
    color: var(--red);
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

.sec-title {
    font-family: var(--fd);
    font-size: clamp(2.4rem,5vw,4rem);
    color: var(--white);
    line-height: 0.95;
    margin-bottom: 1rem;
    color:white;
}

.red-bar {
    width: 36px;
    height: 3px;
    background: var(--red);
    margin: 0.8rem 0 1.8rem
}

.sec-sub {
    font-size: 0.95rem;
    color: var(--gray);
    font-weight: 300;
    line-height: 1.7;
    max-width: 480px
}

/* ABOUT */
#about{
    position:relative;
    overflow:hidden;
    background:
      radial-gradient(ellipse at top, rgba(255,0,0,0.08), transparent 50%),
      #050505;
}

#about::after{
    content:'';
    position:absolute;
    inset:0;
    background-image:radial-gradient(red 1px, transparent 1px);
    background-size:120px 120px;
    opacity:0.04;
    animation:floatParticles 20s linear infinite;
    pointer-events:none;
}

.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
    align-items: center
}

.about-img-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;

    position: relative;
}

.about-img-box {
    display: flex;
    justify-content: center;
    align-items: center;

    width: 100%;
    max-width: 420px;

    padding: 20px;
    overflow: hidden;
    position: relative;
    background: transparent;
    z-index: 2;
}

.about-img-wrap::before{
    content:'';
    position:absolute;
    width:500px;
    height:500px;
    background:radial-gradient(circle, rgba(255,0,0,0.18), transparent 70%);
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    filter:blur(60px);
    z-index:0;
}
@keyframes floatParticles{
    from{ transform:translateY(0); }
    to{ transform:translateY(-120px); }
}

.about-image img {
    width: 100%;
    max-width: 360px;
    filter: drop-shadow(0 0 25px rgba(250, 74, 64, 0.25)); /* subtle glow effect */
    background: linear-gradient(to top,rgba(8,8,8,0.7) 0%,transparent 60%); /*useless*/

    height: auto;
    object-fit: contain;

    display: block;
    margin: 0 auto;
}



.about-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,rgba(8,8,8,0.7) 0%,transparent 60%)
}

.about-badge{
    position:absolute;

    right:40px;
    bottom:1px;

    z-index:10;

    background:var(--red);
    color:white;

    padding:1rem 1.2rem;
    text-align:center;
}

.badge-num {
    font-family: var(--fd);
    font-size: 2.2rem;
    color: var(--white);
    line-height: 1
}

.badge-txt {
    font-family: var(--fh);
    font-size: 0.6rem;
    letter-spacing: 0.15em;
    color: rgba(255,255,255,0.8);
    text-transform: uppercase
}

.m-cards {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0.8rem;
    margin-top: 2rem
}

.m-card {
    background: var(--dark3);
    padding: 1rem;
    border-left: 2px solid var(--red)
}

.m-card-icon {
    font-size: 1.2rem;
    margin-bottom: 0.4rem
}

.m-card-title {
    font-family: var(--fh);
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    color: var(--white);
    text-transform: uppercase;
    margin-bottom: 0.3rem
}

.m-card-text {
    font-size: 0.72rem;
    color: var(--gray);
    line-height: 1.5
}

.vals {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 1.4rem
}

.val {
    border: 1px solid rgba(232,35,26,0.45);
    color: var(--red);
    font-family: var(--fh);
    font-size: 0.68rem;
    letter-spacing: 0.15em;
    padding: 0.35rem 0.85rem;
    text-transform: uppercase
}

blockquote.scr {
    border-left: 3px solid var(--red);
    padding: 1rem 1.3rem;
    margin-top: 1.8rem;
    background: var(--dark3);
    font-style: italic;
    font-size: 0.9rem;
    color: var(--light);
    line-height: 1.7
}

    blockquote.scr cite {
        display: block;
        margin-top: 0.5rem;
        font-style: normal;
        font-family: var(--fh);
        font-size: 0.65rem;
        letter-spacing: 0.15em;
        color: var(--red);
        text-transform: uppercase
    }

/* COLLECTION / PRODUCTS */
#collection {
    background: var(--black)
}

.col-header {
    text-align: center;
    margin-bottom: 2.5rem
}

.filter-tabs {
    display: flex;
    gap: 0.4rem;
    justify-content: center;
    margin-bottom: 2.2rem
}

.ftab {
    font-family: var(--fh);
    font-size: 0.68rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    padding: 0.38rem 1rem;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.1);
    color: var(--gray);
    cursor: pointer;
    transition: all 0.2s
}

    .ftab.active, .ftab:hover {
        background: var(--red);
        border-color: var(--red);
        color: var(--white)
    }

.prod-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 1px;
    background: rgba(255,255,255,0.04)
}

.prod-card {
    position:relative;
    overflow:hidden;
    cursor:pointer;

    border:1px solid rgba(255,0,0,0.12);

    background:
      radial-gradient(circle at top, 
      rgba(255,0,0,0.16), 
      transparent 55%),
      #141414;

    transition:.35s ease;
}

    .prod-card:hover {
        transform: translateY(-3px);
        z-index: 2;
        position: relative
    }

.prod-img-wrap{
    width:100%;
    height:360px;
    overflow:hidden;
    background:transparent;
    transition:0.4s ease;

    display:flex;
    justify-content:center;
    align-items:center;
}
.prod-card.featured{
    position:relative;
}

.prod-card.featured::before{
    content:'';
    position:absolute;

    width:260px;
    height:260px;

    background:
    radial-gradient(circle,
    rgba(255,0,0,0.12),
    transparent 70%);

    top:35%;
    left:50%;

    transform:translate(-50%,-50%);

    filter:blur(50px);

    z-index:0;
}

.prod-img-wrap img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    display:block;
}



.prod-badge {
    position: absolute;
    top: 0;
    left: 0;
    background: var(--red);
    font-family: var(--fh);
    font-size: 0.6rem;
    letter-spacing: 0.1em;
    padding: 0.22rem 0.6rem;
    text-transform: uppercase;
    color: var(--white)
}

.prod-info {
    padding: 0.9rem 1rem 1.1rem
}

.prod-name {
    font-family: var(--fh);
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    color: var(--white);
    text-transform: uppercase;
    margin-bottom: 0.3rem
}

.prod-cta {
    font-family: var(--fh);
    font-size: 0.65rem;
    letter-spacing: 0.15em;
    color: var(--red);
    text-transform: uppercase
}

/*CLOTHING */
.hoodie-img{
    width: 1%;
    height:auto;
    object-fit:contain;
}


/* STARTER PACK */
#starter {
    position:relative;
    overflow:hidden;

    background:
    radial-gradient(circle at 25% 45%, rgba(255,0,0,0.12), transparent 35%),
    var(--dark);
}

.starter-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:4rem;
    align-items:center;
}

.starter-img-wrap {
    width:100%;
    aspect-ratio:4/3;
    overflow:visible;
    position:relative;

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

.starter-img-wrap::before{
    content:"";
    position:absolute;
    width:360px;
    height:360px;

    background:radial-gradient(circle, rgba(255,0,0,0.22), transparent 70%);
    filter:blur(45px);
    z-index:0;
}

.starter-img {
    width:85%;
    height:auto;
    object-fit:contain;
    position:relative;
    z-index:2;

    filter:
    drop-shadow(0 0 25px rgba(255,0,0,0.25))
    drop-shadow(0 0 70px rgba(255,0,0,0.12));

    transition:.4s ease;
}

.starter-img:hover{
    transform:scale(1.04);

    filter:
    drop-shadow(0 0 35px rgba(255,0,0,0.38))
    drop-shadow(0 0 90px rgba(255,0,0,0.18));
}

.starter-overlay {
    display:none;
}

.starter-cta-box {
    background:
    radial-gradient(circle at top left, rgba(255,0,0,0.08), transparent 60%),
    var(--dark3);

    border:1px solid rgba(232,35,26,0.28);
    padding:2rem;
    margin-top:2rem;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1.5rem;

    box-shadow:0 0 35px rgba(255,0,0,0.06);
}

.cta-ttl {
    font-family:var(--fd);
    font-size:1.6rem;
    color:var(--white);
    line-height:1;
}

.cta-desc {
    font-size:0.8rem;
    color:var(--gray);
    margin-top:0.2rem;
}

@media(max-width:768px){
    .starter-grid{
        grid-template-columns:1fr;
        text-align:center;
    }

    .starter-img{
        width:95%;
    }

    .starter-img-wrap::before{
        width:280px;
        height:280px;
    }

    .starter-cta-box{
        flex-direction:column;
        text-align:center;
    }
}

/* COMMUNITY */
#community {
    background: var(--dark2)
}

.comm-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: start
}

.plat-list {
    display: flex;
    flex-direction: column;
    gap: 0.9rem
}

.plat-card {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    background: var(--dark3);
    padding: 1.1rem 1.4rem;
    border-left: 3px solid transparent;
    transition: border-color 0.2s,transform 0.2s;
    cursor: pointer;
    text-decoration: none;
}

    .plat-card:hover {
        border-color: var(--red);
        transform: translateX(4px)
    }

.plat-logo {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0
}

.plat-info {
    flex: 1
}

.plat-name {
    font-family: var(--fh);
    font-size: 0.85rem;
    letter-spacing: 0.1em;
    color: var(--white);
    text-transform: uppercase
}

.plat-desc {
    font-size: 0.75rem;
    color: var(--gray);
    margin-top: 0.1rem
}

.plat-link {
    font-family: var(--fh);
    font-size: 0.62rem;
    letter-spacing: 0.15em;
    color: var(--red);
    text-transform: uppercase
}

.comm-visual {
    position: relative;
    aspect-ratio: 3/4;
    overflow: hidden;
    background: var(--dark3);
}

.comm-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left top;
    opacity: 0.7
}

.comm-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,rgba(8,8,8,0.9) 0%,transparent 50%)
}

.comm-stamp {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
}

.comm-stamp-word {
    font-family: var(--fd);
    font-size: 3.5rem;
    color: white;
    opacity: 0.15;
    letter-spacing: 0.1em
}

.comm-stamp-sub {
    font-family: var(--fh);
    font-size: 0.6rem;
    letter-spacing: 0.4em;
    color: var(--red);
    text-transform: uppercase;
    opacity: 0.8
}

/* JOIN */
#join {
    background: var(--black);
    position: relative;
    overflow: hidden;
    text-align: center
}

    #join::before {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(ellipse 80% 60% at 50% 50%,rgba(232,35,26,0.07) 0%,transparent 70%)
    }

.join-inner {
    position: relative;
    z-index: 1
}

.join-steps {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 1.2rem;
    margin: 3rem 0
}

.j-step {
    text-align: center;
    padding: 1.8rem 1.2rem;
    background: var(--dark2);
    border: 1px solid rgba(255,255,255,0.04);
    transition: border-color 0.2s,transform 0.2s
}

    .j-step:hover {
        border-color: rgba(232,35,26,0.3);
        transform: translateY(-3px)
    }

.j-icon {
    font-size: 1.8rem;
    margin-bottom: 0.8rem
}

.j-title {
    font-family: var(--fh);
    font-size: 0.9rem;
    letter-spacing: 0.12em;
    color: var(--white);
    text-transform: uppercase;
    margin-bottom: 0.4rem;
    color:rgb(255, 255, 255);
}

.j-desc {
    font-size: 0.8rem;
    color: var(--gray);
    line-height: 1.6;
    color:rgb(255, 255, 255);
}

.newsletter {
    max-width: 440px;
    margin: 2.5rem auto 0;
    display: flex
}

    .newsletter input {
        flex: 1;
        background: var(--dark2);
        border: 1px solid rgba(255,255,255,0.1);
        border-right: none;
        padding: 0.8rem 1rem;
        color: var(--white);
        font-family: var(--fb);
        font-size: 0.88rem;
        outline: none
    }

        .newsletter input::placeholder {
            color: var(--gray)
        }

        .newsletter input:focus {
            border-color: var(--red)
        }

    .newsletter button {
        background: var(--red);
        border: none;
        color: var(--white);
        font-family: var(--fh);
        font-weight: 600;
        font-size: 0.72rem;
        letter-spacing: 0.15em;
        padding: 0.8rem 1.4rem;
        text-transform: uppercase;
        cursor: pointer;
        transition: background 0.2s
    }

        .newsletter button:hover {
            background: var(--red-dark)
        }

.socials-row {
    display: flex;
    justify-content: center;
    gap: 0.9rem;
    margin-top: 2rem
}

.soc {
    width: 36px;
    height: 36px;
    border: 1px solid rgba(255,255,255,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    color: var(--gray);
    text-decoration: none;
    transition: border-color 0.2s,color 0.2s,background 0.2s
}

    .soc:hover {
        border-color: var(--red);
        color: var(--red);
        background: rgba(232,35,26,0.08)
    }

/* BORN BANNER */
.born {
    background: var(--dark2);
    padding: 4rem 2rem;
    text-align: center;
    border-top: 1px solid rgba(232,35,26,0.2);
    border-bottom: 1px solid rgba(232,35,26,0.2)
}

.born-text {
    font-family: var(--fd);
    font-size: clamp(2.5rem,7vw,6rem);
    color: var(--white);
    letter-spacing: 0.04em
}

    .born-text em {
        font-style: italic;
        color: var(--red);
        font-family: var(--fb);
        font-weight: 700
    }

/* FOOTER */
.footer-copy{
  font-size:.72rem;
  color:#666;
  line-height:1.7;
  max-width:500px;
  text-align:right;
}

footer {
    background: var(--dark);
    padding: 4rem 2rem 2rem;
    border-top: 1px solid rgba(255,255,255,0.04)
}

.foot-grid {
    max-width: 1080px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
    gap: 3rem;
    margin-bottom: 2.5rem
}

.foot-brand p {
    font-size: 0.82rem;
    color: var(--gray);
    margin-top: 0.7rem;
    line-height: 1.6;
    max-width: 210px
}

.foot-col-title {
    font-family: var(--fh);
    font-size: 0.68rem;
    letter-spacing: 0.25em;
    color: var(--white);
    text-transform: uppercase;
    margin-bottom: 0.9rem
}

.foot-links {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.45rem
}

    .foot-links a {
        text-decoration: none;
        font-size: 0.82rem;
        color: var(--gray);
        transition: color 0.2s
    }

        .foot-links a:hover {
            color: var(--red)
        }

.scr-box {
    font-style: italic;
    font-size: 0.8rem;
    color: var(--gray);
    line-height: 1.6;
    border-left: 2px solid var(--red);
    padding-left: 0.8rem
}

.scr-ref {
    font-style: normal;
    font-family: var(--fh);
    font-size: 0.62rem;
    letter-spacing: 0.1em;
    color: var(--red);
    text-transform: uppercase;
    margin-top: 0.4rem
}

.footer-bottom{
    border-top:1px solid rgba(255,255,255,0.08);

    margin-top:3rem;
    padding-top:2rem;

    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:2rem;

    flex-wrap:wrap;
    
}

    .foot-bottom p {
        font-size: 0.72rem;
        color: rgba(255,255,255,0.18)
    }

.foot-socials {
    display: flex;
    gap: 0.8rem
}

.foot-soc {
    width: 30px;
    height: 30px;
    border: 1px solid rgba(255,255,255,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    color: var(--gray);
    text-decoration: none;
    transition: border-color 0.2s,color 0.2s
}

    .foot-soc:hover {
        border-color: var(--red);
        color: var(--red)
    }

/* ANIMATIONS */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(24px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.fu {
    opacity: 0;
    animation: fadeUp 0.7s ease both
}

.d1 {
    animation-delay: 0.1s
}

.d2 {
    animation-delay: 0.22s
}

.d3 {
    animation-delay: 0.36s
}

.d4 {
    animation-delay: 0.5s
}

/* RESPONSIVE MOBILE */
@media(max-width:768px) {
    nav {
        padding: 0.8rem 1rem
    }

    .nav-links {
        display: none
    }

    .about-grid, .starter-grid, .comm-grid, .foot-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem
    }

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

    .join-steps {
        grid-template-columns: 1fr
    }

    .foot-grid {
        grid-template-columns: 1fr 1fr
    }

    .pillars {
        flex-wrap: wrap
    }

    .pillar {
        min-width: 50%
    }

    .about-badge {
        right: 0;
        bottom: -1rem
    }
}

/* FOOTER */
.footer{
  background:#070707;
  border-top:1px solid rgba(232,35,26,0.25);
  padding:4rem 8% 2rem;
}

.footer-inner{
  max-width:1100px;
  margin:0 auto;
  display:flex;
  justify-content:space-between;
  gap:4rem;
}

.footer-brand{
  max-width:420px;
}

.footer-brand h3{
  font-family:var(--fh);
  color:white;
  letter-spacing:.08em;
  margin-bottom:1rem;
}

.footer-brand span{
  color:var(--red);
}

.footer-brand p{
  color:#ffffff;
  line-height:1.7;
}

.footer-links{
  display:flex;
  gap:4rem;
}

.footer-links h4{
  color:white;
  margin-bottom:1rem;
}

.footer-links a{
  display:block;
  color:#777;
  text-decoration:none;
  margin-bottom:.5rem;
}

.footer-links a:hover{
  color:var(--red);
}

.footer-bottom{
  max-width:1100px;
  margin:3rem auto 0;
  padding-top:2rem;
  border-top:1px solid rgba(255,255,255,0.08);

  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:2rem;
  flex-wrap:wrap;

  color:#ffffff;
  font-size:.8rem;
}


/* WALLPAPERS */

.wallpapers-hero{
    padding:10rem 2rem 5rem;
    text-align:center;
    background:
    radial-gradient(circle at center,
    rgba(232,35,26,0.18),
    transparent 60%);
}

.wallpapers-section{
    padding:4rem 2rem 6rem;
}

.wallpaper-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
    gap:40px;
}

.wallpaper-card{
    background:#111;
    border:1px solid rgba(232,35,26,0.25);
    overflow:hidden;
    display:flex;
    flex-direction:column;
    height:auto;
}

.wallpaper-card:hover{
    transform:translateY(-6px);
    border-color:rgba(232,35,26,0.4);
    box-shadow:0 0 30px rgba(232,35,26,0.15);
}

.wallpaper-card img{
    width:100%;
    height:500px;

    object-fit:contain;
    object-position:center;

    background:#050505;
    padding:20px;
}

.wallpaper-info{
    padding:30px;
    margin-top:auto;
}

.wallpaper-info h3{
    font-family:var(--fh);
    letter-spacing:0.08em;
    margin-bottom:0.5rem;
}

.wallpaper-info p{
    color:var(--gray);
    font-size:0.9rem;
    margin-bottom:1rem;
}

.download-btn{
    display:inline-block;
    padding:0.7rem 1.2rem;
    border:1px solid var(--red);
    color:var(--white);
    text-decoration:none;
    text-transform:uppercase;
    letter-spacing:0.12em;
    font-size:0.75rem;
    transition:0.3s;
}

.download-btn:hover{
    background:var(--red);
}

/*for apparels*/
.products-section{
    position:relative;
    overflow:hidden;
}

.products-section::before{
    content:'';
    position:absolute;
    inset:0;

    background:
    radial-gradient(circle at center,
    rgba(255,0,0,0.12) 0%,
    transparent 60%);

    pointer-events:none;
}
.products-section::after{
    content:'';
    position:absolute;
    inset:0;

    background-image:
    radial-gradient(red 1px, transparent 1px);

    background-size:120px 120px;
    opacity:0.08;

    animation:floatBg 18s linear infinite;
}

@keyframes floatBg{
    from{
        transform:translateY(0);
    }

    to{
        transform:translateY(-120px);
    }
}
.prod-card{
    transition:0.35s ease;
}

.prod-card:hover{
    transform:translateY(-6px);

    border-color:rgba(255,0,0,0.35);

    background:
      radial-gradient(circle at top,
      rgba(255,0,0,0.22),
      transparent 60%),
      #181818;

    box-shadow:
      0 10px 40px rgba(255,0,0,0.15);
}

.products-section{
    background:
    linear-gradient(to bottom,
    rgba(255,0,0,0.08),
    transparent 20%),

    #070707;
}
.products-section{
    background-image:
    url('images/noise.png');
}
#products{
    position:relative;
    overflow:hidden;

    background:
    radial-gradient(
        ellipse at top,
        rgba(255,0,0,0.14) 0%,
        transparent 55%
    ),

    #050505;
}
#products::after{
    content:'';
    position:absolute;
    inset:0;

    background-image:
    radial-gradient(red 1px, transparent 1px);

    background-size:120px 120px;

    opacity:0.04;

    animation:floatEmbers 20s linear infinite;

    pointer-events:none;
}

@keyframes floatEmbers{
    from{
        transform:translateY(0);
    }

    to{
        transform:translateY(-120px);
    }
}
.hero-title{
    text-shadow:
    0 0 10px rgba(255,0,0,0.18),
    0 0 30px rgba(255,0,0,0.08);
}

@media(max-width:768px){

  .prod-img-wrap{
    height:220px !important;
    overflow:hidden !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
  }

  .prod-img-wrap img{
    width:80% !important;
    height:80% !important;
    max-width:80% !important;
    max-height:80% !important;
    object-fit:contain !important;
    transform:none !important;
  }

  .prod-card .hoodie-img{
    width:65% !important;
    height:65% !important;
    max-width:65% !important;
    max-height:65% !important;
    object-fit:contain !important;
  }
}
.prod-card .hoodie-img{
    max-width:80% !important;
    max-height:95% !important;
    object-fit:contain !important;
}


/*IGNITE PLAY*/
body{
    background:#050505;
    color:white;
    overflow-x:hidden;
}

/* HERO */

.play-hero{
    padding:10rem 5% 5rem;
    text-align:center;

    background:
    radial-gradient(circle at top,
    rgba(255,0,0,0.14),
    transparent 60%);
}

.play-title{
    font-size:clamp(3rem,8vw,7rem);
    font-family:'Bebas Neue',sans-serif;
    letter-spacing:.08em;

    text-shadow:
    0 0 20px rgba(255,0,0,0.3);
}

.play-sub{
    color:#888;
    margin-top:1rem;
    letter-spacing:.15em;
    text-transform:uppercase;
}

/* FILTERS */

.play-tabs{
    display:flex;
    justify-content:center;
    gap:1rem;
    flex-wrap:wrap;

    margin-top:3rem;
}

.play-tabs button{
    background:#111;
    border:1px solid rgba(255,0,0,0.2);

    color:white;

    padding:.9rem 1.4rem;

    cursor:pointer;

    transition:.3s;
}

.play-tabs button:hover,
.play-tabs button.active{
    background:red;
}

/* GRID */

.play-grid{
    width:min(1200px,90%);
    margin:4rem auto;

    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
    gap:2rem;
}
.play-grid::before{
    content:'';

    position:absolute;
    inset:0;

    background:
    radial-gradient(circle at center,
    rgba(255,0,0,0.08),
    transparent 60%);

    pointer-events:none;
}

.play-grid::after{
    content:'';

    position:absolute;
    inset:0;

    background-image:
    radial-gradient(red 1px, transparent 1px);

    background-size:120px 120px;

    opacity:0.04;

    animation:floatParticles 20s linear infinite;

    pointer-events:none;
}

@keyframes floatParticles{

    from{
        transform:translateY(0);
    }

    to{
        transform:translateY(-120px);
    }

}

/* CARD */

.play-card{
    background:#0c0c0c;

    border:1px solid rgba(255,255,255,0.05);

    padding:2rem;

    position:relative;
    overflow:hidden;

    transition:.35s;


    opacity:0;
    transform:translateY(40px);

    animation:fadeUp .8s forwards;
}

.play-card:hover{
    transform:translateY(-8px);

    border-color:rgba(255,0,0,0.3);

    box-shadow:
    0 0 30px rgba(255,0,0,0.12);
}

.play-card::before{
    content:'';

    position:absolute;

    width:250px;
    height:250px;

    background:
    radial-gradient(circle,
    rgba(255,0,0,0.12),
    transparent 70%);

    top:-80px;
    right:-80px;

    filter:blur(50px);
}
.play-card:nth-child(2){
    animation-delay:.15s;
}

.play-card:nth-child(3){
    animation-delay:.3s;
}
@keyframes fadeUp{
    to{
        opacity:1;
        transform:translateY(0);
    }
}

/* TITLES */

.play-card h3{
    font-family:'Bebas Neue',sans-serif;
    font-size:2rem;
    letter-spacing:.08em;

    margin-bottom:1rem;
}

/* THIS OR THAT */

.choice-wrap{
    display:flex;
    flex-direction:column;
    gap:1rem;
}

.choice-btn{
    background:#151515;
    border:1px solid rgba(255,255,255,0.08);

    color:white;

    padding:1rem;

    cursor:pointer;

    transition:.3s;
}

.choice-btn:hover{
    background:red;
}

/* GENERATOR */

.generator-box{
    background:#111;

    padding:1.5rem;

    min-height:120px;

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

    text-align:center;

    margin-bottom:1rem;

    color:#ccc;
}

.generate-btn{
    width:100%;

    padding:1rem;

    background:red;

    border:none;

    color:white;

    cursor:pointer;
}

/* SPIN */

.spin-wheel{
    width:220px;
    height:220px;

    border-radius:50%;

    border:6px solid red;

    margin:1rem auto;

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

    font-size:3rem;

    background:#111;

    transition:transform 3s ease;

    box-shadow:
    0 0 25px rgba(255,0,0,0.25);
}

.spin-result{
    text-align:center;

    margin-bottom:1rem;

    color:#aaa;

    min-height:50px;
}

.spin-btn{
    width:100%;
    padding:1rem;

    background:red;
    border:none;

    color:white;
    cursor:pointer;
}

/* MOBILE */

@media(max-width:768px){

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

    .play-title{
        font-size:4rem;
    }

    .play-card{
        padding:1.5rem;
    }

}


.choice-result{
    margin-top:1rem;

    text-align:center;

    color:#ffffff;

    font-size:.9rem;
}
.fullscreen-btn{
    margin-top:2rem;

    background:red;
    border:none;

    color:white;

    padding:1rem 1.5rem;

    cursor:pointer;

    letter-spacing:.1em;
}

.choice-btn:disabled{
    opacity:0.6;
    cursor:not-allowed;
}


/* SCRAMBLE */

.scramble-word{

    font-size:2.5rem;
    font-family:'Bebas Neue',sans-serif;

    letter-spacing:.2em;

    text-align:center;

    margin:1rem 0 2rem;

    color:white;

    text-shadow:
    0 0 15px rgba(255,0,0,0.3);
}

.scramble-input{

    width:100%;

    padding:1rem;

    background:#111;

    border:1px solid rgba(255,255,255,0.08);

    color:white;

    margin-bottom:1rem;

    outline:none;
}

.scramble-input:focus{

    border-color:red;

    box-shadow:
    0 0 12px rgba(255,0,0,0.2);
}

.scramble-result{

    margin-top:1rem;

    text-align:center;

    color:#aaa;

    min-height:40px;
}
.scramble-timer{

    width:70px;
    height:70px;

    border-radius:50%;

    border:3px solid red;

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

    margin:0 auto 1.5rem;

    font-size:1.5rem;
    font-weight:bold;

    color:white;

    box-shadow:
    0 0 20px rgba(255,0,0,0.25);

    background:#111;
}
.scramble-score{
  display:flex;
  justify-content:center;
  gap:1.5rem;
  margin:1rem 0;
  color:#aaa;
  font-family:var(--fh);
  letter-spacing:.08em;
  text-transform:uppercase;
}

.scramble-score b{
  color:var(--red);
}


/* MOBILE HERO FIX */
@media (max-width:768px){

  .hero-content{

    width:90%;
    margin:auto;

    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;

  }

  .hero-title{

    font-size:4.2rem;
    line-height:.9;

  }

  .hero-sub{

    font-size:.9rem;

    line-height:1.8;

    width:95%;

  }

  .hero-pretag{

    font-size:.7rem;
    letter-spacing:.35em;

  }

  .hero-btns{

    flex-direction:column;
    gap:1rem;

    width:100%;

    align-items:center;

  }

  .hero-btns a{

    width:85%;
    text-align:center;

  }

  .hero-logo-wrap{

    width:120px !important;
    height:120px !important;

  }

}


/* Music.html */
/* MUSIC PAGE */

.music-hero{
  min-height:65vh;
  display:flex;
  align-items:center;
  text-align:center;
  padding:9rem 2rem 5rem;
  background:
    radial-gradient(circle at center, rgba(255,0,0,0.16), transparent 55%),
    linear-gradient(to bottom, #050505, #0b0b0b);
}

.music-title{
  font-family:var(--fd);
  font-size:clamp(4rem,9vw,8rem);
  color:white;
  letter-spacing:.04em;
  line-height:.9;
  text-shadow:0 0 30px rgba(255,0,0,0.25);
}

.music-sub{
  max-width:650px;
  margin:1.5rem auto 0;
  color:var(--gray);
  line-height:1.8;
  font-size:1rem;
}

.music-section{
  padding:6rem 2rem;
  background:#080808;
  position:relative;
  overflow:hidden;
}

.music-section::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:radial-gradient(red 1px, transparent 1px);
  background-size:120px 120px;
  opacity:.035;
  pointer-events:none;
}

.music-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:1.5rem;
  position:relative;
  z-index:2;
}

.music-card{
  background:#141414;
  border:1px solid rgba(255,255,255,0.06);
  padding:2rem;
  min-height:280px;
  transition:.35s ease;
}

.music-card:hover{
  transform:translateY(-8px);
  border-color:rgba(255,0,0,0.35);
  box-shadow:0 0 35px rgba(255,0,0,0.13);
}

.music-icon{
  font-size:2rem;
  margin-bottom:1.2rem;
}

.music-card h3{
  font-family:var(--fh);
  letter-spacing:.12em;
  text-transform:uppercase;
  color:white;
  margin-bottom:1rem;
}

.music-card p{
  color:var(--gray);
  line-height:1.7;
  margin-bottom:1.5rem;
}

.featured-music{
  border-color:rgba(255,0,0,0.35);
  background:
    radial-gradient(circle at top, rgba(255,0,0,0.16), transparent 55%),
    #141414;
}

.music-quote{
  padding:5rem 2rem;
  text-align:center;
  background:#111;
  border-top:1px solid rgba(255,0,0,0.18);
  border-bottom:1px solid rgba(255,0,0,0.18);
}

.music-quote h2{
  font-family:var(--fd);
  font-size:clamp(2.5rem,6vw,5rem);
  color:white;
}

.music-quote p{
  margin-top:1rem;
  color:var(--red);
  letter-spacing:.35em;
  font-family:var(--fh);
  font-size:.8rem;
}

@media(max-width:768px){
  .music-hero{
    min-height:55vh;
    padding-top:8rem;
  }

  .music-card{
    min-height:auto;
  }
}


/* Apparel mobile some small */
.accessory-img{
    width:85% !important;
    max-width:260px;
    object-fit:contain;
}

/* MOBILE */
@media(max-width:768px){

  .prod-card .prod-img-wrap img.accessory-img{
    width:140% !important;
    height:auto !important;
    max-width:170% !important;
    max-height:none !important;
    object-fit:contain !important;
    transform:scale(1.2) !important;
  }

}
@media(max-width:768px){

  .footer{
    padding:3rem 6% 2rem;
  }

  .footer-inner{
    flex-direction:column;
    gap:2rem;
  }

  .footer-links{
    flex-direction:row;
    gap:3rem;
  }

  .footer-bottom{
    flex-direction:column;
    align-items:flex-start;
    gap:.8rem;
    padding-top:1.5rem;
  }

  .footer-brand p{
    max-width:100%;
  }

  .footer-copy{
    text-align:left;
    max-width:100%;
    font-size:.68rem;
    line-height:1.6;
  }

}


/* COMMUNITY PAGE UPGRADE */

#community{
  position:relative;
  overflow:hidden;

  background:
    radial-gradient(circle at top right, rgba(255,0,0,0.08), transparent 35%),
    radial-gradient(circle at bottom left, rgba(255,0,0,0.06), transparent 40%),
    #0a0a0a;
}

.comm-visual{
  position:relative;
  overflow:visible;
}

.comm-visual::before{
  content:"";
  position:absolute;
  inset:8%;

  background:
    radial-gradient(circle, rgba(255,0,0,0.25), transparent 70%);

  filter:blur(55px);
  z-index:0;
}

.comm-img{
  position:relative;
  z-index:1;

  box-shadow:
    0 0 40px rgba(255,0,0,0.15);
}

.plat-card{
  transition:.35s ease;
}

.plat-card:hover{
  transform:translateX(8px);

  border-left-color:var(--red);

  background:
    radial-gradient(circle at left, rgba(255,0,0,0.12), transparent 70%),
    #171717;

  box-shadow:
    0 0 25px rgba(255,0,0,0.08);
}


.play-desc{
    max-width:700px;
    margin:1.5rem auto 0;

    color:#888;

    line-height:1.8;

    font-size:1rem;
}

/* FIXING DARK WORDS */

.play-card p,
.play-card span,
.play-card div,
.play-card label{
    color:#f2f2f2;
}

/* Question boxes */
.generator-box{
    color:#ffffff;

    text-shadow:
    0 0 10px rgba(255,255,255,0.06);
}

/* Result texts */
.choice-result,
.scramble-result,
.spin-result{
    color:#ffffff;

    margin-top:1.3rem;

    text-align:center;

    line-height:1.7;

    text-shadow:
    0 0 12px rgba(255,255,255,0.05);
}

/* Trivia + Verse spacing */
#triviaResult,
#verseResult{
    margin-top:1.5rem;
    margin-bottom:1rem;

    color:#ffffff;
}

/* Scramble helper text */
.scramble-result{
    color:#ffffff;
}

/* Spin helper text */
.spin-result{
    color:#ffffff;
}

/* Category */
.scramble-category{
    color:#d8d8d8;
}

/* Buttons */
.choice-btn{
    color:#ffffff;

    font-weight:600;
}

/* Add spacing under answer buttons */
.choice-wrap{
    margin-bottom:1.5rem;
}

/* Make cards glow slightly more */
.play-card{
    box-shadow:
    0 0 30px rgba(255,0,0,0.05);
}

/* Play page subtitles */
.play-desc,
.play-sub{
    color:#f0f0f0 !important;
}


/* PRAYER PAGE */

#prayer-box{
  padding:8rem 2rem 4rem;
  background:
    radial-gradient(circle at top right, rgba(255,0,0,0.12), transparent 40%),
    radial-gradient(circle at bottom left, rgba(255,0,0,0.08), transparent 45%),
    #070707;
}

.prayer-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4rem;
  align-items:center;
}

.prayer-form{
  background:
    radial-gradient(circle at top, rgba(255,0,0,0.12), transparent 55%),
    #141414;
  border:1px solid rgba(255,0,0,0.25);
  padding:2rem;
  box-shadow:0 0 40px rgba(255,0,0,0.10);
}

.prayer-form input,
.prayer-form textarea{
  width:100%;
  background:#0d0d0d;
  border:1px solid rgba(255,255,255,0.15);
  color:white;
  padding:1rem;
  margin-bottom:1rem;
  font-family:var(--fb);
  outline:none;
}

.prayer-form textarea{
  min-height:180px;
  resize:vertical;
}

.prayer-form button{
  width:100%;
  background:var(--red);
  color:white;
  border:none;
  padding:1rem;
  font-family:var(--fh);
  letter-spacing:.15em;
  text-transform:uppercase;
  cursor:pointer;
}

.prayer-note{
  margin-top:1rem;
  color:#aaa;
  font-size:.85rem;
  text-align:center;
}

@media(max-width:768px){
  .prayer-grid{
    grid-template-columns:1fr;
  }
}
/*PRAYER WALL*/
.public-prayer-wall{
  padding:5rem 2rem 6rem;
  background:
    radial-gradient(circle at top left, rgba(255,0,0,0.08), transparent 40%),
    #070707;
}

.public-prayer-wall .section-head{
  max-width:1080px;
  margin:0 auto 2rem;
}

.public-prayer-wall .section-head h2{
  font-family:var(--fd);
  font-size:clamp(2.8rem,5vw,4.5rem);
  color:#fff;
  letter-spacing:.04em;
}

.public-prayer-wall .section-head p{
  color:#cfcfcf;
  margin-top:.5rem;
}

.approved-prayer-grid{
  max-width:1080px;
  margin:2rem auto 0;
}

.loading-text{
  color:#fff;
}

/*for prayer pags box*/
.approved-prayer-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:1.5rem;
  max-width:1080px;
  margin:2rem auto 0;
}

.approved-prayer-card{
  background:
    radial-gradient(circle at top left, rgba(255,0,0,0.12), transparent 60%),
    #141414;

  border:1px solid rgba(255,0,0,0.22);
  padding:1.8rem;
  box-shadow:0 0 30px rgba(255,0,0,0.08);
}

.approved-prayer-card h3{
  font-family:var(--fh);
  color:white;
  letter-spacing:.08em;
  margin-bottom:1rem;

  position:relative;
  display:inline-block;
}

.approved-prayer-card h3::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-6px;

  width:105px;
  height:2px;

  background:var(--red);
}

.approved-prayer-card p{
  color:#f1f1f1;
  line-height:1.8;
}