/* ==========================================================================
   OpenSummit.AI — Brand Decorative Elements (10X IMPACT)
   Signature: Red (#ff3b3b) → Cyan (#00e5cc) gradient DNA
   These are STRUCTURAL PILLARS of the page — bold, visible, impactful.
   ========================================================================== */

/* ── Concentric Arc Rings — BOLD & VISIBLE ─────────────────────────── */
.brand-arcs {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  width: 700px;
  height: 700px;
}
.brand-arcs::before,
.brand-arcs::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  border: 3px solid transparent;
}
.brand-arcs::before {
  width: 500px; height: 500px;
  top: 0; right: 0;
  border-color: rgba(255, 59, 59, 0.5);
  box-shadow: 
    0 0 0 60px transparent,
    0 0 0 63px rgba(255, 80, 80, 0.35),
    0 0 0 140px transparent,
    0 0 0 143px rgba(200, 60, 60, 0.25),
    0 0 0 230px transparent,
    0 0 0 233px rgba(0, 200, 180, 0.2),
    0 0 0 330px transparent,
    0 0 0 333px rgba(0, 229, 204, 0.15);
}
.brand-arcs::after {
  width: 350px; height: 350px;
  top: 75px; right: 75px;
  border-color: rgba(255, 59, 59, 0.35);
  box-shadow:
    0 0 0 50px transparent,
    0 0 0 53px rgba(180, 50, 50, 0.25),
    0 0 0 120px transparent,
    0 0 0 123px rgba(0, 229, 204, 0.18);
}

/* ── Geometric L-Shapes — VISIBLE STRUCTURAL ───────────────────────── */
.brand-L {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  width: 400px;
  height: 400px;
}
.brand-L::before {
  content: '';
  position: absolute;
  width: 280px; height: 340px;
  top: 0; left: 60px;
  background: rgba(26, 31, 42, 0.8);
  border: 2px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
}
.brand-L::after {
  content: '';
  position: absolute;
  width: 340px; height: 280px;
  bottom: 0; left: 0;
  background: rgba(22, 27, 40, 0.8);
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
}

/* ── Vertical Gradient Bars — BOLD STRUCTURAL PILLARS ──────────────── */
.brand-bars {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  display: flex;
  gap: 10px;
  height: 500px;
  opacity: 1;
}
.brand-bars::before,
.brand-bars::after {
  content: '';
  width: 10px;
  height: 100%;
  border-radius: 8px;
  background: linear-gradient(180deg, #ff3b3b, #00e5cc);
  opacity: 0.9;
}
.brand-bars::after {
  opacity: 0.7;
  height: 85%;
}
.brand-bars span {
  display: block;
  width: 10px;
  height: 100%;
  border-radius: 8px;
  background: linear-gradient(180deg, #ff3b3b, #00e5cc);
  opacity: 0.8;
}
/* Extra bars via child elements */
.brand-bars--5 { gap: 8px; }
.brand-bars--7 { gap: 6px; }
.brand-bars--tall { height: 600px; }

/* ── Gradient Donut Rings — BIG & CLEAR ────────────────────────────── */
.brand-donut {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, #ff3b3b, #cc3030, #00e5cc, #ff3b3b);
  -webkit-mask: radial-gradient(circle, transparent 74px, black 78px);
  mask: radial-gradient(circle, transparent 74px, black 78px);
  opacity: 0.6;
  animation: brand-donut-spin 30s linear infinite;
}
.brand-donut--lg {
  width: 300px;
  height: 300px;
  -webkit-mask: radial-gradient(circle, transparent 110px, black 114px);
  mask: radial-gradient(circle, transparent 110px, black 114px);
  opacity: 0.5;
}
.brand-donut--sm {
  width: 120px;
  height: 120px;
  -webkit-mask: radial-gradient(circle, transparent 42px, black 46px);
  mask: radial-gradient(circle, transparent 42px, black 46px);
  opacity: 0.6;
}

@keyframes brand-donut-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ── Halftone Dot Pattern — VISIBLE TEXTURE ────────────────────────── */
.brand-halftone {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  background-image: radial-gradient(circle, rgba(0, 229, 204, 0.25) 1.5px, transparent 1.5px);
  background-size: 10px 10px;
  opacity: 0.5;
}
.brand-halftone--red {
  background-image: radial-gradient(circle, rgba(255, 59, 59, 0.2) 1.5px, transparent 1.5px);
}
.brand-halftone--fade {
  -webkit-mask: radial-gradient(ellipse 60% 60% at 50% 50%, black, transparent);
  mask: radial-gradient(ellipse 60% 60% at 50% 50%, black, transparent);
}

/* ── Gradient Orbs — HUGE & ATMOSPHERIC ────────────────────────────── */
.brand-orb {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 65%, #00e5cc, #ff3b3b);
  filter: blur(0px);
  opacity: 0.7;
}
.brand-orb--blur {
  filter: blur(80px);
  opacity: 0.2;
  animation: brand-orb-pulse 8s ease-in-out infinite;
}
.brand-orb--sm {
  width: 150px; height: 150px;
}
.brand-orb--md {
  width: 300px; height: 300px;
}
.brand-orb--lg {
  width: 600px; height: 600px;
}
.brand-orb--xl {
  width: 800px; height: 800px;
}

@keyframes brand-orb-pulse {
  0%, 100% { opacity: 0.18; transform: scale(1); }
  50% { opacity: 0.25; transform: scale(1.05); }
}

/* ── Gradient Border Utilities ─────────────────────────────────────── */
.brand-border-gradient {
  position: relative;
}
.brand-border-gradient::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: linear-gradient(180deg, #ff3b3b, #00e5cc);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.brand-border-gradient:hover::before {
  opacity: 0.7;
}

/* ── Section-Specific Decorations — ALL 10X ────────────────────────── */

/* Hero section — massive concentric arcs top-right */
.hero-brand-arcs {
  position: absolute;
  top: -100px;
  right: -150px;
  width: 800px;
  height: 800px;
  pointer-events: none;
  z-index: 0;
  opacity: 0.7;
  animation: brand-arcs-rotate 60s linear infinite;
}

@keyframes brand-arcs-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Hero section — gradient orb behind content */
.hero-brand-orb {
  position: absolute;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%);
  width: 800px;
  height: 800px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 60%, rgba(0, 229, 204, 0.12), rgba(255, 59, 59, 0.08));
  filter: blur(100px);
  pointer-events: none;
  z-index: 0;
  animation: brand-orb-pulse 8s ease-in-out infinite;
}

/* Pricing section decoration */
.pricing-brand-bars {
  position: absolute;
  top: 40px;
  right: 30px;
  height: 500px;
  opacity: 0.8;
}
.pricing-brand-L {
  position: absolute;
  bottom: -60px;
  left: -80px;
  opacity: 0.3;
}

/* Gallery section — concentric rings */
.gallery-brand-rings {
  position: absolute;
  bottom: -120px;
  left: -100px;
  opacity: 0.5;
}

/* FAQ section — geometric shapes */
.faq-brand-donut {
  position: absolute;
  top: 20px;
  right: -40px;
  opacity: 0.5;
}

/* FinalCTA — gradient orbs + arc rings */
.final-brand-orb {
  position: absolute;
  bottom: -150px;
  left: -150px;
  width: 700px;
  height: 700px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 65%, rgba(0, 229, 204, 0.2), rgba(255, 59, 59, 0.12));
  filter: blur(100px);
  pointer-events: none;
  z-index: 0;
  animation: brand-orb-pulse 8s ease-in-out infinite;
}
.final-brand-arcs {
  position: absolute;
  top: -80px;
  right: -100px;
  opacity: 0.6;
}

/* Footer — gradient divider line (brand DNA) */
.footer-brand-bar {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 600px;
  height: 2px;
  background: linear-gradient(90deg, transparent 5%, #ff3b3b 25%, #00e5cc 75%, transparent 95%);
  pointer-events: none;
  opacity: 0.6;
}

/* ── Gradient Text Utility ─────────────────────────────────────────── */
.brand-gradient-text {
  background: linear-gradient(135deg, #ff3b3b, #00e5cc);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ── Animated Gradient Glow ────────────────────────────────────────── */
@keyframes brand-gradient-shift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.brand-glow-animate {
  background-size: 200% 200%;
  animation: brand-gradient-shift 6s ease-in-out infinite;
}

/* ── Section Transition Dividers — gradient fades, not hard borders ── */
.section + .section::before,
.section + section::before,
section + .section::before,
section + section::before {
  content: '';
  display: block;
  height: 2px;
  background: linear-gradient(90deg, transparent 5%, #ff3b3b 25%, #00e5cc 75%, transparent 95%);
  opacity: 0.25;
}

/* ── Newsletter input gradient focus ring ──────────────────────────── */
.newsletter-input-wrap {
  position: relative;
  flex: 1 1 260px;
  min-width: 0;
}
.newsletter-input-wrap::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 10px;
  background: linear-gradient(135deg, #ff3b3b, #00e5cc);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 0;
}
.newsletter-input-wrap:focus-within::before {
  opacity: 0.8;
}
.newsletter-input-wrap input {
  position: relative;
  z-index: 1;
  width: 100%;
}

/* ── Subscribe Button Gradient Glow ────────────────────────────────── */
.btn--subscribe {
  position: relative;
  overflow: visible;
}
.btn--subscribe::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  background: linear-gradient(135deg, #ff3b3b, #00e5cc);
  opacity: 0;
  filter: blur(12px);
  transition: opacity 0.3s ease;
  z-index: -1;
}
.btn--subscribe:hover::after {
  opacity: 0.5;
}

/* ── Mobile Responsive — HIDE heavy decorations, keep subtle glow only ─ */
@media (max-width: 768px) {
  /* Hide ALL heavy decorative elements on mobile */
  .brand-arcs,
  .hero-brand-arcs,
  .brand-L,
  .brand-bars,
  .brand-donut,
  .brand-donut--lg,
  .brand-donut--sm,
  .brand-halftone,
  .brand-geo-l,
  .pricing-brand-bars,
  .pricing-brand-L,
  .gallery-brand-rings,
  .final-brand-arcs,
  .faq-brand-donut,
  .brand-bars--5,
  .brand-bars--7,
  .brand-bars--tall {
    display: none !important;
  }

  /* Reduce orbs to subtle background glow only */
  .brand-orb,
  .brand-orb--blur,
  .brand-orb--sm,
  .brand-orb--md,
  .brand-orb--lg,
  .brand-orb--xl,
  .hero-brand-orb,
  .final-brand-orb {
    width: 200px !important;
    height: 200px !important;
    opacity: 0.08 !important;
  }

  /* Section transition dividers — keep but thinner */
  .brand-section-divider {
    height: 1px !important;
  }

  /* Footer brand bar — keep subtle */
  .footer-brand-bar {
    max-width: 200px;
    opacity: 0.3;
  }
}

/* ===== NUCLEAR MOBILE FIX ===== */
@media (max-width: 768px) {
  /* Hide ALL absolutely positioned decorative SVGs and divs inside sections */
  .hero > svg[aria-hidden],
  .hero > div[aria-hidden],
  section > svg[aria-hidden],
  section > div[aria-hidden="true"],
  .section > svg[aria-hidden],
  .section > div[aria-hidden="true"] {
    display: none !important;
  }
  
  /* Kill all brand decoration classes */
  [class*="brand-arcs"],
  [class*="brand-bars"],
  [class*="brand-donut"],
  [class*="brand-geo"],
  [class*="brand-halftone"],
  [class*="brand-orb"] {
    display: none !important;
  }
  
  /* Kill pseudo-element decorations entirely on mobile */
  .speakers::before,
  .hero::after,
  .section::before,
  .section::after,
  section + section::before,
  section + .section::before,
  .section + section::before,
  .section + .section::before {
    display: none !important;
    content: none !important;
    height: 0 !important;
    width: 0 !important;
  }
  
  /* Footer cleanup */
  .footer > svg,
  .footer > div[aria-hidden] {
    display: none !important;
  }
}