/* ============================================================
   PEPTILUX ULTRA MODERN LAYER
   Aggressive modernization for all sections
   ============================================================ */

/* ── Ultra Modern Product Cards ── */
.product-card {
  border-radius: 20px !important;
  background: linear-gradient(135deg, rgba(22,22,22,1) 0%, rgba(28,28,28,1) 100%) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
}

.product-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 20px;
  padding: 1px;
  background: linear-gradient(135deg, rgba(201,151,58,.3) 0%, transparent 50%, rgba(201,151,58,.1) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
}

.product-card:hover::before {
  opacity: 1;
}

.product-card:hover {
  transform: translateY(-12px) !important;
  box-shadow: 0 30px 80px rgba(0,0,0,0.7), 0 0 60px rgba(201,151,58,0.15) !important;
}

/* ── Ultra Modern Navbar ── */
.navbar {
  background: linear-gradient(180deg, rgba(10,10,10,.95) 0%, rgba(16,16,16,.92) 100%) !important;
  border-bottom: 1px solid rgba(201,151,58,.12) !important;
  box-shadow: 0 8px 40px rgba(0,0,0,0.5), 0 1px 0 rgba(201,151,58,.08) inset !important;
}

.nav-links a {
  font-weight: 500;
  letter-spacing: 0.08em;
}

/* ── Ultra Modern Blog Section ── */
.blog-section {
  background: linear-gradient(180deg, var(--black) 0%, var(--dark) 100%);
  position: relative;
}

.blog-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 300px;
  background: radial-gradient(ellipse 60% 40% at 50% 0%, rgba(201,151,58,.08) 0%, transparent 70%);
  pointer-events: none;
}

.blog-card {
  background: linear-gradient(135deg, rgba(22,22,22,1) 0%, rgba(28,28,28,1) 100%) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 20px !important;
}

.blog-card:hover {
  transform: translateY(-10px) scale(1.02) !important;
  box-shadow: 0 25px 70px rgba(0,0,0,0.6), 0 0 40px rgba(201,151,58,0.12) !important;
}

.blog-view-all {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  padding: 14px 32px !important;
  background: var(--grad-gold) !important;
  color: var(--black) !important;
  font-weight: 600 !important;
  border-radius: 10px !important;
  border: none !important;
  box-shadow: 0 8px 24px rgba(201,151,58,.25);
  transition: all 0.3s var(--ease) !important;
  text-decoration: none !important;
  margin-top: 40px;
}

.blog-view-all:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 32px rgba(201,151,58,0.4) !important;
}

/* ── Ultra Modern Newsletter ── */
.newsletter-section {
  background: linear-gradient(135deg, rgba(16,16,16,1) 0%, rgba(10,10,10,1) 100%);
  position: relative;
  overflow: hidden;
}

.newsletter-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(circle at 20% 50%, rgba(201,151,58,.06) 0%, transparent 50%),
    radial-gradient(circle at 80% 50%, rgba(139,105,20,.04) 0%, transparent 50%);
  pointer-events: none;
}

.newsletter-form {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.newsletter-form input,
.newsletter-form button {
  border: none;
  background: transparent;
}

#newsletterEmail {
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 10px !important;
  padding: 16px 20px !important;
  transition: all 0.3s !important;
}

#newsletterEmail:focus {
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(201,151,58,.5) !important;
  box-shadow: 0 0 0 4px rgba(201,151,58,.08), 0 8px 24px rgba(201,151,58,.12) !important;
  outline: none !important;
}

.btn-newsletter {
  background: var(--grad-gold) !important;
  border-radius: 10px !important;
  padding: 16px 32px !important;
  border: none !important;
}

.btn-newsletter:hover {
  transform: translateY(-3px) !important;
}

/* ── Ultra Modern Telegram Section ── */
.telegram-section {
  background: linear-gradient(135deg, rgba(16,16,16,1) 0%, rgba(22,22,22,1) 100%);
  position: relative;
}

.telegram-section::before {
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(201,151,58,.12) 0%, transparent 70%),
    radial-gradient(ellipse 40% 40% at 85% 85%, rgba(201,151,58,.08) 0%, transparent 60%) !important;
}

/* Restored to outline-by-default (transparent, gold border/text, fills gold only on
   hover) -- the solid-filled !important version above made every .btn-telegram instance
   (View all posts, Join Telegram) a permanent gold pill, which is what made gold buttons
   feel repetitive sitewide. Base outline style lives in styles.css / styles-modern.css. */
.btn-telegram {
  text-decoration: none !important;
}

/* ── Ultra Modern Science Section ── */
.science-section {
  background: linear-gradient(180deg, var(--dark) 0%, var(--black) 100%) !important;
  position: relative;
  padding: 80px 0 !important;
}

.science-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 70%;
  height: 400px;
  background: radial-gradient(ellipse 50% 30% at 50% 0%, rgba(201,151,58,.08) 0%, transparent 70%);
  pointer-events: none;
}

.science-card {
  background: linear-gradient(135deg, rgba(22,22,22,1) 0%, rgba(28,28,28,1) 100%) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 20px !important;
  padding: 48px 40px !important;
  position: relative;
  overflow: hidden;
}

.science-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 0%, rgba(201,151,58,.1) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.4s;
}

.science-card:hover {
  transform: translateY(-10px) !important;
  box-shadow: 0 25px 70px rgba(0,0,0,0.6), 0 0 40px rgba(201,151,58,0.12) !important;
  border-color: rgba(201,151,58,.25) !important;
}

.science-card:hover::before {
  opacity: 1;
}

.research-note {
  background: rgba(201,151,58,.04) !important;
  border: 1px solid rgba(201,151,58,.2) !important;
  border-radius: 12px !important;
}

/* ── Ultra Modern GENIQ Plan Section ── */
.plan-section {
  background: linear-gradient(135deg, rgba(10,10,10,1) 0%, rgba(16,16,16,1) 100%);
}

.plan-section::before {
  background: none;
}

.plan-eyebrow {
  margin-bottom: 20px !important;
}

@media (max-width: 768px) {
  .plan-eyebrow {
    margin-bottom: 24px !important;
  }
}

.plan-perks .perk {
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.05);
  border-radius: 12px;
  padding: 20px;
  transition: all 0.3s var(--ease);
}

.plan-perks .perk:hover {
  background: rgba(255,255,255,.04);
  border-color: rgba(201,151,58,.2);
  transform: translateX(8px);
}

/* ── Ultra Modern Trust Bar ── */
.trust-bar {
  background: var(--dark-card);
  border-top: 1px solid rgba(201,151,58,.12);
  border-bottom: 1px solid rgba(201,151,58,.12);
}

.trust-item {
  transition: all 0.3s;
  position: relative;
}

.trust-item:hover {
  transform: translateY(-4px);
}

/* ── Ultra Modern Footer ── */
footer {
  background: linear-gradient(180deg, var(--dark) 0%, var(--black) 100%);
  border-top: 1px solid rgba(201,151,58,.1);
  position: relative;
}

footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(201,151,58,.3) 50%, transparent 100%);
}

.footer-links a {
  transition: all 0.3s;
  padding: 4px 0;
  display: inline-block;
}

.footer-links a:hover {
  color: var(--gold-light) !important;
  transform: translateX(4px);
}

/* ── Animated Gradient Backgrounds ── */
@keyframes gradientShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.section-header h2 {
  background: linear-gradient(90deg, #fff 30%, #f5d078 50%, #fff 70%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientShift 8s ease infinite;
  will-change: background-position;
}

/* The gold word inside a heading (e.g. "Power") has its own background, so it doesn't
   inherit the shimmer above -- background isn't an inherited property, each element with
   its own background paints independently. Give it the same moving gradient so the whole
   phrase shimmers as one continuous effect, consistently on every viewport. */
.section-header h2 .gold-gradient {
  background: linear-gradient(90deg, #fff 30%, #f5d078 50%, #fff 70%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientShift 8s ease infinite;
  will-change: background-position;
}

/* ── Enhanced Cert Strip ── */
.cert-strip {
  background: rgba(201,151,58,.03);
  padding: 12px 0;
  border-radius: 50px;
  margin-bottom: 32px;
}

.cert-chip {
  background: rgba(201,151,58,.08) !important;
  border: 1px solid rgba(201,151,58,.3) !important;
  padding: 6px 16px !important;
  backdrop-filter: blur(10px);
}

/* ── Enhanced Modal ── */
.modal-box {
  background: linear-gradient(135deg, rgba(22,22,22,1) 0%, rgba(28,28,28,1) 100%);
  border: 1px solid rgba(201,151,58,.15);
  border-radius: 24px;
  box-shadow: 0 40px 100px rgba(0,0,0,0.8), 0 0 60px rgba(201,151,58,0.1);
}

/* ── Glowing Elements ── */
@keyframes glow {
  0%, 100% { box-shadow: 0 0 20px rgba(201,151,58,0.2); }
  50% { box-shadow: 0 0 40px rgba(201,151,58,0.4); }
}

.btn-add-cart:hover {
  animation: glow 2s ease-in-out infinite;
}