body {
  background-color: #000;
  color: #fff;
  font-family: 'Poppins', sans-serif;
  margin: 0;
  overflow-x: hidden;
}

/* style.css — Bello Shit (Dark premium) */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;500;700;800&display=swap');
:root{
  --bg:#0b0b0d; --panel:#0f0f12; --muted:#bfc0c8;
  --violet:#5b2dbf; --gold:#f5c542; --glass:rgba(255,255,255,0.03);
  --maxw:1200px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,Arial;
  background:linear-gradient(180deg,#060608,#0b0b0d);
  color:var(--muted); -webkit-font-smoothing:antialiased;
}

/* layout helper */
.container{max-width:var(--maxw);margin:0 auto;padding:0 20px}

/* header */
.site-header{display:flex;align-items:center;justify-content:space-between;padding:14px 0;position:sticky;top:0;z-index:120;background:linear-gradient(90deg,rgba(11,8,16,0.6),rgba(11,8,16,0.4));backdrop-filter:blur(6px);border-bottom:1px solid rgba(255,255,255,0.02)}
.brand{display:flex;align-items:center;gap:12px}
.brand img.logo{height:46px}
.brand-title h1{margin:0;color:#fff;font-size:18px}
.brand-title small{display:block;color:var(--muted);font-size:12px}

/* header controls */
.header-controls{display:flex;gap:12px;align-items:center}
.hamburger{background:transparent;border:0;color:var(--muted);font-size:20px;cursor:pointer;padding:8px}
.cart{color:var(--muted);cursor:pointer;display:flex;gap:8px;align-items:center}
.cart-badge{background:var(--gold);color:#111;padding:2px 8px;border-radius:999px;font-weight:700;font-size:12px}

/* slide nav (left) */
.slide-nav{position:fixed;left:-100%;top:0;height:100vh;width:72%;max-width:420px;background:linear-gradient(180deg,#0b0610,#100814);transition:left .32s cubic-bezier(.2,.9,.3,1);z-index:220;padding:28px 20px;box-shadow:8px 0 40px rgba(0,0,0,0.6)}
.slide-nav.open{left:0}
.close-nav{background:none;border:0;color:var(--muted);font-size:20px;cursor:pointer;margin-bottom:18px}
.nav-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:22px;align-items:center;justify-content:center;height:70%}
.nav-list a{color:var(--muted);text-decoration:none;font-weight:700;font-size:1.1rem;padding:8px 22px;border-radius:8px;opacity:0;transform:translateX(-10px)}
.slide-nav.open .nav-list a{opacity:1;transform:none;transition:opacity .28s ease,transform .28s ease}

/* hero */
.hero {
  position: relative;
  min-height: 90vh;
  background: url('https://images.unsplash.com/photo-1544441893-675973e31985?auto=format&fit=crop&w=1200&q=80') center/cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-align: center;
}

.hero::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.55);
}

.hero-inner {
  position: relative;
  z-index: 2;
  max-width: 700px;
  padding: 0 20px;
}

.hero-text h2 {
  color: #d4af37;
  font-size: 16px;
  letter-spacing: 3px;
  margin-bottom: 10px;
}

.hero-text h3 {
  color: #fff;
  font-size: 2.8rem;
  margin-bottom: 20px;
}

.hero-text p {
  color: #ccc;
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 30px;
}

.hero-buttons {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

.btn.primary {
  background: #d4af37;
  color: #000;
  border: none;
  padding: 10px 28px;
  border-radius: 35px;
  text-decoration: none;
  font-weight: 600;
  transition: background 0.3s ease;
  
 
}


.btn.primary:hover {
  background: #fff;
}

.btn.ghost {
  background: transparent;
  border: 1px solid #d4af37;
  color: #d4af37;
  padding: 12px 28px;
  border-radius: 50px;
  text-decoration: none;
  font-weight: 600;
  transition: background 0.3s ease, color 0.3s ease;
}

.btn.ghost:hover {
  background: #d4af37;
  color: #000;
}

/* === REVISED ANIMATED LINE IMPLEMENTATION (5s Duration) === */

/* 1. Add position: relative to the container */
.card .meta {
    padding: 10px 10px 10px 15px;
    position: relative; /* CRITICAL for positioning the ::after element */
}

/* 2. Create and style the animated line using ::after */
.card .meta::after {
    content: ""; /* Required for pseudo-elements */
    position: absolute;
    top: 0;
    left: 0;
    width: 8px; /* Thick line */
    height: 100%; /* Spans the full height of the text area */
    background-color: var(--primary); /* Default/Initial color */
    opacity: 0; /* Hidden by default */
    transform: translateY(-100%) scaleY(0.1); /* Start position, off-screen */

    /* Animation properties - DURATION INCREASED TO 5s */
    animation: staggered-flash-border 5s ease-in-out forwards; 
    
    /* Staggering the animation delay for each card */
    animation-delay: calc(var(--animation-order) * 0.3s); 
}

/* 3. Define the animation movement and color change */
@keyframes staggered-flash-border {
    0% {
        transform: translateY(0) scaleY(1);
        opacity: 0.2;
        background-color: var(--primary); /* Gold/Yellow */
    }
    5% {
        opacity: 1; /* Appear quickly */
    }
    30% {
        background-color: #C5292A; /* Color 1: Urgent Red */
    }
    50% {
        transform: translateY(100%); /* Move to the bottom of the container */
        background-color: #008080; /* Color 2: Deep Teal */
    }
    70% {
        transform: translateY(0%); /* Move back to top */
        background-color: #FF69B4; /* Color 3: Hot Pink */
    }
    100% {
        transform: translateY(0) scaleY(1); /* End state: Stays at the top */
        opacity: 0.2;
        background-color: var(--primary); 
    }
}


/* --- CSS Staggering Trick (Needed for the delay to work) --- */
.grid .card:nth-child(1) .meta::after { --animation-order: 0; }
.grid .card:nth-child(2) .meta::after { --animation-order: 1; }
.grid .card:nth-child(3) .meta::after { --animation-order: 2; }
.grid .card:nth-child(4) .meta::after { --animation-order: 3; }
.grid .card:nth-child(5) .meta::after { --animation-order: 4; }
.grid .card:nth-child(6) .meta::after { --animation-order: 5; }
.grid .card:nth-child(7) .meta::after { --animation-order: 6; }
/* Add more `nth-child` rules if you have more cards */


/* === Button and Nav Styles (Placeholder/Basic Styles) === */

.btn.gold{
    background:linear-gradient(90deg,var(--gold),#e6b034);
    color:#111;
    /* Adjusted padding to match the height of .btn.ghost (which has 12px vertical padding) */
    padding: 12px 28px; /* Same vertical padding, slightly increased horizontal for balance */
    border-radius: 50px; /* Ensure border-radius is applied if not already */
    font-weight: 600; /* Ensure font-weight is applied if not already */
}

/* featured grid */
.featured{padding:48px 0}
.featured h2{color:var(--gold);margin-bottom:18px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.card{background:var(--panel);border-radius:12px;overflow:hidden;box-shadow:0 8px 28px rgba(0,0,0,0.6);transition:transform .18s ease,box-shadow .18s ease}
.card img{width:100%;height:350px;object-fit:cover}
.meta{padding:14px}
.meta h4{margin:0;color:#fff}
.meta p{margin:8px 0 0;color:var(--gold);font-weight:700}
.meta .actions{margin-top:12px;display:flex;gap:8px;align-items:center}
/* This new rule forces the buttons inside to share space equally */
.meta .actions > * {
    flex: 1 1 0%;
}



/* story */
/* ===========================
   Story / Mission Section
=========================== */
.story {
  background: #0b0b0b;
  color: #ccc;
  padding: 100px 20px;
  text-align: center;
  border-top: 1px solid #111;
}

.story h2 {
  font-size: 2rem;
  color: #d4af37;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 20px;
}

.story p {
  max-width: 800px;
  margin: 0 auto 40px;
  line-height: 1.8;
  font-size: 1.05rem;
  color: #bbb;
}

.founder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 25px;
}

.founder-photo {
  width: 150px;
  height: 150px;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid #d4af37;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.founder-info h3 {
  color: #fff;
  margin-bottom: 6px;
  font-size: 1.2rem;
}

.founder-info p {
  color: #ccc;
  font-size: 0.95rem;
  line-height: 1.6;
}

.founder-info a {
  color: #d4af37;
  text-decoration: none;
  transition: color 0.3s ease;
}

.founder-info a:hover {
  color: #fff;
}

/* ===========================
   Newsletter Section
=========================== */
.newsletter {
  background: #111;
  padding: 80px 20px;
  text-align: center;
  border-top: 1px solid #222;
}

.newsletter h3 {
  color: #d4af37;
  font-size: 1.6rem;
  margin-bottom: 25px;
  letter-spacing: 1px;
}

.newsletter form {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.newsletter input {
  padding: 12px 20px;
  border-radius: 50px;
  border: none;
  outline: none;
  width: 260px;
  font-size: 1rem;
}

.newsletter .btn.gold {
  background: #d4af37;
  color: #000;
  border: none;
  padding: 12px 30px;
  border-radius: 50px;
  font-weight: 600;
  transition: background 0.3s ease;
}

.newsletter .btn.gold:hover {
  background: #fff;
}

/* ===========================
   Footer
=========================== */
.site-footer {
  background: #000;
  color: #999;
  padding: 60px 20px 40px;
  text-align: center;
  border-top: 1px solid #111;
}

.site-footer .footer-top {
  margin-bottom: 15px;
  line-height: 1.7;
}

.site-footer a {
  color: #d4af37;
  text-decoration: none;
  transition: color 0.3s ease;
}

.site-footer a:hover {
  color: #fff;
}

.site-footer .credit {
  margin-top: 10px;
  color: #777;
  font-size: 0.9rem;
  letter-spacing: 0.5px;
}

.site-footer .credit a {
  color: #d4af37;
  font-weight: 600;
}

.site-footer .credit a:hover {
  color: #fff;
}




/* cart modal */
.cart-modal{position:fixed;right:20px;bottom:20px;background:var(--panel);border-radius:12px;padding:8px;width:360px;max-width:96%;box-shadow:0 26px 80px rgba(0,0,0,0.6);display:none;z-index:260}
.cart-modal.open{display:block}
.cart-content h3{margin:0 0 12px;color:white}
.cart-item{display:flex;gap:4px;align-items:center;padding:10px 0;border-top:1px solid rgba(255,255,255,0.02)}
.cart-item img{width:64px;height:64px;object-fit:cover;border-radius:8px}
.qty-controls{display:flex;gap:4px;align-items:center}

/* responsive */
@media(max-width:980px){.hero-inner{grid-template-columns:1fr 360px}.hero-image img{height:320px}}
@media(max-width:720px){
  .hero-inner{grid-template-columns:1fr;gap:18px;padding:12px}
  .hero-image img{height:260px}
  .slide-nav{width:82%}
  .nav-list{height:60%}
}
/* About Page Layout */
/* NAVBAR UNIVERSAL */
/* NAVBAR */
.navbar {
  position: fixed;
  top: 0;
  width: 100%;
  background: rgba(0,0,0,0.9);
  color: #fff;
  padding: 15px 5%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 100;
  backdrop-filter: blur(10px);
}

.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 1200px;
}

.logo-img {
  height: 40px;
}

.nav-links {
  display: flex;
  gap: 25px;
  align-items: center;
}

.nav-links a {
  color: #d4af37;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.3s;
}

.nav-links a:hover,
.nav-links .active {
  color: #fff;
}

.cart-icon a {
  color: #d4af37;
  font-size: 1.5rem;
  text-decoration: none;
  transition: transform 0.3s;
}

.cart-icon a:hover {
  transform: scale(1.1);
}

/* MENU TOGGLE (Mobile) */
.menu-toggle {
  display: none;
  background: none;
  border: none;
  color: #d4af37;
  font-size: 1.8rem;
}

/* Responsive Nav */
@media (max-width: 768px) {
  .menu-toggle {
    display: block;
  }

  .nav-links {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    height: 100vh;
    width: 70%;
    background: #000;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 30px;
    z-index: 200;
  }

  .nav-links.open {
    display: flex;
    animation: slideIn 0.4s ease forwards;
  }

  @keyframes slideIn {
    from { transform: translateX(-100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
  }
}

/* Keep your hero, featured, and footer CSS from last version below */



/* About Section */
.about-section {
  background: radial-gradient(circle at top, #0e0e0e, #000);
  color: #fff;
  padding: 120px 20px 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.about-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 50px;
  max-width: 1100px;
  width: 100%;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.about-image img {
  width: 280px;
  height: 280px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #d4af37;
  box-shadow: 0 0 25px rgba(212,175,55,0.3);
}

.about-content h1 {
  font-size: 2.5rem;
  margin-bottom: 10px;
  letter-spacing: 1px;
}

.about-content h2 {
  font-size: 1.2rem;
  margin-bottom: 20px;
  font-weight: 400;
}

.about-content p {
  color: #ccc;
  max-width: 600px;
  line-height: 1.7;
  margin: 0 auto 15px;
}

/* Footer */
.footer {
  text-align: center;
  padding: 30px 0;
  background: #000;
  color: #aaa;
  font-size: 0.9rem;
}

.footer a {
  color: #d4af37;
  text-decoration: none;
}

.footer a:hover {
  text-decoration: underline;
}

/* Mobile Fixes */
@media (max-width: 768px) {
  .about-wrapper {
    flex-direction: column;
  }
  .about-content h1 {
    font-size: 2rem;
  }
  .about-content h2 {
    font-size: 1rem;
  }
}
/* HERO SECTION */
.hero {
  background: url('https://images.unsplash.com/photo-1544441893-675973e31985?auto=format&fit=crop&w=1200&q=80') center/cover no-repeat;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  padding-top: 100px;
  position: relative;
}

.hero::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.55);
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 600px;
}

.hero-title {
  font-size: 3.5rem;
  font-weight: 700;
  color: #d4af37;
  letter-spacing: 2px;
}

.hero-subtitle {
  font-size: 1.1rem;
  color: #eee;
  margin: 20px 0 40px;
}

.btn-primary {
  background: #d4af37;
  color: #000;
  padding: 14px 34px;
  border-radius: 50px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.3s ease;
  display: inline-block;
  margin-top: 20px;
}

.btn-primary:hover {
  background: #fff;
}

/* FEATURED SECTION */
.featured {
  background: #0a0a0a;
  color: #fff;
  padding: 80px 20px;
  text-align: center;
}

.featured-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 25px;
  margin-top: 40px;
}

.featured-item img {
  width: 100%;
  height: 320px;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.1);
  transition: transform 0.3s ease;
}

.featured-item img:hover {
  transform: scale(1.05);
}

/* STATEMENT */
.statement {
  background: #111;
  padding: 70px 20px;
  text-align: center;
  color: #d4af37;
}

.statement p {
  color: #ccc;
  max-width: 600px;
  margin: 10px auto 0;
  font-size: 1rem;
}

/* FOOTER */
.footer {
  text-align: center;
  padding: 35px 0;
  background: #000;
  color: #aaa;
}

.footer a {
  color: #d4af37;
  text-decoration: none;
}

.footer a:hover {
  text-decoration: underline;
}

.thank-you {
  text-align: center;
  font-weight: 500;
  color: #e6b800;
  margin-top: 10px;
}

.thank-you {
  text-align: center;
  font-weight: 500;
  color: #e6b800;
  margin-top: 10px;
}

/* ===========================
    Contact Page Social Icons
=========================== */
.social-links-contact {
    /* Align the links in the center of the contact section */
    display: flex;
    gap: 25px; /* Spacing between icons */
    margin-top: 5px; /* Slight margin above the form */
    margin-bottom: 20px; /* Slight margin below the icons */
}

.social-links-contact a {
    color: var(--gold, #d4af37); /* Base color is your gold/violet */
    font-size: 2.2rem; /* A good size for visual impact */
    transition: color 0.3s ease, transform 0.2s ease;
    text-decoration: none;
}

.social-links-contact a:hover {
    color: #fff; /* White on hover for premium contrast */
    transform: translateY(-2px) scale(1.05); /* Subtle lift and enlargement on hover */
}

/* Optional: Specific hover colors for brand consistency */
.social-links-contact a:nth-child(1):hover { /* TikTok */
    color: #69C9D0;
}
.social-links-contact a:nth-child(2):hover { /* Facebook */
    color: #3b5998;
}
.social-links-contact a:nth-child(3):hover { /* Instagram */
    color: #E1306C;
}
.social-links-contact a:nth-child(4):hover { /* Twitter/X */
    color: #1DA1F2;
}

/* --- Trust Bar Styles: URGENCY (Replace existing .trust-bar) --- */
.trust-bar-urgent {
    /* Bold Red or Crimson for maximum urgency and contrast */
    background-color: #C5292A; 
    color: #FFFFFF; /* White text for readability */
    padding: 10px 20px;
    text-align: center;
    width: 100%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
    margin-top: 0; 
}

.trust-bar-urgent p {
    margin: 0;
    font-size: 16px;
    font-weight: 700; /* Bolder text */
}