/*
 Theme Name:   Arcade Orchestra
 Theme URI:    https://arcadeorchestra.com
 Description:  Custom child theme for Arcade Orchestra — The Ultimate 80s Experience.
 Author:       Dino Marino Design
 Author URI:   https://dinomarinodesign.com
 Template:     hello-elementor
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 Text Domain:  arcade-orchestra
*/

/* ==========================================================================
   DESIGN SYSTEM — CSS Custom Properties
   ========================================================================== */

:root {
  --ao-cyan: #00E5FF;
  --ao-mag: #FF2060;
  --ao-yel: #FFE600;
  --ao-dark: #080810;
  --ao-mid: #0C0C1A;
  --ao-card: #111120;
  --ao-muted: rgba(255,255,255,0.45);
  --ao-grid: rgba(0,229,255,0.05);
}

/* ==========================================================================
   GLOBAL RESETS & BASE
   ========================================================================== */

body,
.flavor,
#suspended_starter_starter_flavor_flavor {
  background-color: var(--ao-dark) !important;
  color: #fff;
  font-family: 'Barlow', sans-serif;
  font-weight: 300;
}

/* Scanline overlay — CRT retro effect */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(0,0,0,0.05) 3px,
    rgba(0,0,0,0.05) 4px
  );
  pointer-events: none;
  z-index: 9999;
}

/* ==========================================================================
   TYPOGRAPHY
   ========================================================================== */

.ao-bebas {
  font-family: 'Bebas Neue', sans-serif !important;
}

.ao-barlow-cond {
  font-family: 'Barlow Condensed', sans-serif !important;
}

.ao-barlow {
  font-family: 'Barlow', sans-serif !important;
}

/* ==========================================================================
   GRID BACKGROUND UTILITY
   ========================================================================== */

.ao-grid-bg {
  position: relative;
}

.ao-grid-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--ao-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--ao-grid) 1px, transparent 1px);
  background-size: 60px 60px;
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}

/* ==========================================================================
   SECTION TAGS / EYEBROW TEXT
   ========================================================================== */

.ao-sec-tag {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 12px;
}

.ao-sec-tag::before {
  content: '';
  width: 28px;
  height: 1px;
  display: inline-block;
}

.ao-sec-tag--mag {
  color: var(--ao-mag);
}
.ao-sec-tag--mag::before {
  background: var(--ao-mag);
}

.ao-sec-tag--cyan {
  color: var(--ao-cyan);
}
.ao-sec-tag--cyan::before {
  background: var(--ao-cyan);
}

.ao-sec-tag--yel {
  color: var(--ao-yel);
}
.ao-sec-tag--yel::before {
  background: var(--ao-yel);
}

/* ==========================================================================
   SECTION HEADLINES
   ========================================================================== */

.ao-sec-hl {
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: 76px !important;
  line-height: 0.9 !important;
  letter-spacing: 0.02em;
  color: #fff;
}

/* ==========================================================================
   BUTTONS — Angled / Clip-Path
   ========================================================================== */

.ao-btn-pri,
.elementor-widget-button .ao-btn-pri {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: #000 !important;
  background: var(--ao-cyan) !important;
  padding: 16px 44px !important;
  clip-path: polygon(12px 0%, 100% 0%, calc(100% - 12px) 100%, 0% 100%) !important;
  border: none !important;
  border-radius: 0 !important;
  display: inline-block;
  transition: filter 0.3s ease;
}
.ao-btn-pri:hover {
  filter: brightness(1.15);
}

.ao-btn-yel,
.elementor-widget-button .ao-btn-yel {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: #000 !important;
  background: var(--ao-yel) !important;
  padding: 17px 48px !important;
  clip-path: polygon(12px 0%, 100% 0%, calc(100% - 12px) 100%, 0% 100%) !important;
  border: none !important;
  border-radius: 0 !important;
  display: inline-block;
  transition: filter 0.3s ease;
}
.ao-btn-yel:hover {
  filter: brightness(1.15);
}

.ao-btn-ghost {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.6) !important;
  background: transparent !important;
  border: none !important;
  display: inline-flex !important;
  align-items: center;
  gap: 12px;
}

/* Play ring for ghost button */
.ao-play-ring {
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ao-play-ring::after {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 7px 0 7px 12px;
  border-color: transparent transparent transparent var(--ao-mag);
  margin-left: 3px;
}

/* ==========================================================================
   HERO SECTION
   ========================================================================== */

.ao-hero {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
}

.ao-hero .elementor-container {
  min-height: 100vh;
  align-items: center;
}

/* Hero background glows */
.ao-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #060610 0%, #0a0618 40%, #120820 100%);
  z-index: 0;
}

.ao-hero-glow-mag {
  position: absolute;
  width: 700px;
  height: 700px;
  right: 100px;
  top: 50%;
  transform: translateY(-50%);
  background: radial-gradient(circle, rgba(255,32,96,0.18) 0%, transparent 65%);
  pointer-events: none;
  z-index: 1;
}

.ao-hero-glow-cyan {
  position: absolute;
  width: 500px;
  height: 500px;
  left: -100px;
  bottom: -100px;
  background: radial-gradient(circle, rgba(0,229,255,0.1) 0%, transparent 65%);
  pointer-events: none;
  z-index: 1;
}

/* Hero grid lines */
.ao-hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--ao-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--ao-grid) 1px, transparent 1px);
  background-size: 70px 70px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 100%);
  pointer-events: none;
  z-index: 1;
}

/* Hero eyebrow */
.ao-eyebrow {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--ao-cyan);
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 30px;
}

.ao-eyebrow::before {
  content: '';
  width: 36px;
  height: 1px;
  background: var(--ao-cyan);
}

/* Hero title — legacy single-element (kept for backwards compat) */
.ao-hero-title {
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: 138px !important;
  line-height: 0.87 !important;
  color: #fff;
}

.ao-hero-title .ao-outline {
  -webkit-text-stroke: 1.5px var(--ao-mag);
  color: transparent;
  display: block;
}

.ao-hero-title .ao-yel {
  color: var(--ao-yel);
  display: block;
}

/* Hero title — Elementor multi-heading approach
   -----------------------------------------------
   Wrap 4 Heading widgets in a container with class: ao-hero-title-wrap
   Give each heading one of these classes:
     Line 1 (ICONIC)  → ao-line-solid
     Line 2 (HITS.)   → ao-line-outline
     Line 3 (EPIC)    → ao-line-solid
     Line 4 (STAGE.)  → ao-line-yellow
   ----------------------------------------------- */

.ao-hero-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 34px;
}

/* Kill all default spacing Elementor adds between heading widgets */
.ao-hero-title-wrap .elementor-widget {
  margin-bottom: 0 !important;
}

.ao-hero-title-wrap .elementor-widget-heading .elementor-heading-title {
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: 138px !important;
  line-height: 0.87 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Solid white lines (ICONIC, EPIC) */
.ao-line-solid .elementor-heading-title {
  color: #FFFFFF !important;
}

/* Magenta outline / transparent fill (HITS.) */
.ao-line-outline .elementor-heading-title {
  color: transparent !important;
  -webkit-text-stroke: 2px var(--ao-mag);
  text-stroke: 2px var(--ao-mag);
  paint-order: stroke fill;
}

/* Yellow solid (STAGE.) */
.ao-line-yellow .elementor-heading-title {
  color: var(--ao-yel) !important;
}

/* Hero subtitle */
.ao-hero-sub {
  font-size: 17px;
  line-height: 1.8;
  color: var(--ao-muted);
  max-width: 460px;
}

/* Scroll hint */
.ao-scroll-hint {
  position: absolute;
  bottom: 36px;
  left: 80px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.2);
  z-index: 10;
}

.ao-scroll-hint::before {
  content: '';
  width: 40px;
  height: 1px;
  background: rgba(255,255,255,0.15);
}

/* ==========================================================================
   STATS BAR
   ========================================================================== */

.ao-stats-bar,
.ao-stats-bar > .elementor-container {
  background: var(--ao-card) !important;
}

.ao-stats-bar {
  border-top: 1px solid rgba(0,229,255,0.08) !important;
  border-bottom: 1px solid rgba(0,229,255,0.08) !important;
}

.ao-stat {
  text-align: center;
  padding: 36px 0;
  border-right: 1px solid rgba(255,255,255,0.05);
}

.ao-stat:last-child {
  border-right: none;
}

.ao-stat-num {
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: 54px !important;
  color: var(--ao-cyan) !important;
  line-height: 1 !important;
  margin-bottom: 6px;
  letter-spacing: 0.04em;
}

.ao-stat-label {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.28) !important;
}

/* ==========================================================================
   ABOUT / EXPERIENCE SECTION
   ========================================================================== */

.ao-about {
  padding: 140px 0 !important;
  position: relative;
  overflow: hidden;
}

.ao-body-text {
  font-size: 16px;
  line-height: 1.85;
  color: var(--ao-muted);
}

/* Tags row */
.ao-tags-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 36px;
}

.ao-tag {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 7px 16px;
  border: 1px solid;
  display: inline-block;
}

.ao-tag--cyan {
  border-color: var(--ao-cyan);
  color: var(--ao-cyan);
}

.ao-tag--mag {
  border-color: var(--ao-mag);
  color: var(--ao-mag);
}

.ao-tag--yel {
  border-color: var(--ao-yel);
  color: var(--ao-yel);
}

/* Experience cards */
.ao-exp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
}

.ao-exp-card {
  background: var(--ao-card);
  padding: 38px 34px;
  position: relative;
  overflow: hidden;
  border-top: 2px solid;
}

.ao-exp-card--cyan  { border-top-color: var(--ao-cyan); }
.ao-exp-card--mag   { border-top-color: var(--ao-mag); }
.ao-exp-card--yel   { border-top-color: var(--ao-yel); }
.ao-exp-card--white { border-top-color: rgba(255,255,255,0.15); }

.ao-exp-bg {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 80px;
  color: rgba(255,255,255,0.15) !important;
  position: absolute;
  top: 0;
  right: 16px;
  line-height: 1;
}

.ao-exp-icon {
  font-size: 26px;
  margin-bottom: 18px;
  display: block;
}

.ao-exp-title {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 19px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 10px;
}

.ao-exp-desc {
  font-size: 14px;
  font-weight: 700 !important;
  line-height: 1.7;
  color: rgba(255,255,255, 1.0) !important;
}

/* ==========================================================================
   TESTIMONIALS
   ========================================================================== */

.ao-testi {
  background: var(--ao-mid) !important;
  padding: 110px 0 !important;
  border-top: 1px solid rgba(255,255,255,0.04);
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

.ao-testi-card {
  background: var(--ao-card);
  padding: 40px 36px;
  border: 1px solid rgba(255,255,255,0.04);
  position: relative;
}

.ao-testi-card .ao-tq {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 100px;
  color: rgba(0,229,255,0.07);
  position: absolute;
  top: -8px;
  left: 24px;
  line-height: 1;
  pointer-events: none;
}

.ao-testi-text {
  font-size: 16px;
  line-height: 1.78;
  color: rgba(255,255,255,0.72);
  margin-bottom: 30px;
  position: relative;
  z-index: 1;
}

.ao-testi-author {
  display: flex;
  align-items: center;
  gap: 14px;
}

.ao-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #000;
  flex-shrink: 0;
}

.ao-avatar--cyan { background: linear-gradient(135deg, var(--ao-cyan), #0080ff); }
.ao-avatar--mag  { background: linear-gradient(135deg, var(--ao-mag), #ff8060); }
.ao-avatar--yel  { background: linear-gradient(135deg, var(--ao-yel), #ff8c00); }

.ao-tname {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  display: block;
}

.ao-thandle {
  font-size: 12px;
  color: rgba(255,255,255,0.3);
}

.ao-stars {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 56px;
  color: var(--ao-yel);
  line-height: 1;
  letter-spacing: 0.06em;
}

.ao-stars-sub {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.25);
  margin-top: 6px;
}

/* ==========================================================================
   MEDIA / PODCAST SECTION
   ========================================================================== */

.ao-media {
  padding: 130px 0 !important;
}

/* Episode list */
.ao-ep {
  background: var(--ao-card);
  padding: 26px 30px;
  display: flex;
  align-items: center;
  gap: 22px;
  border-left: 2px solid;
  margin-bottom: 2px;
}

.ao-ep--cyan { border-left-color: var(--ao-cyan); }
.ao-ep--mag  { border-left-color: var(--ao-mag); }
.ao-ep--yel  { border-left-color: var(--ao-yel); }

.ao-ep-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 40px;
  color: rgba(0,229,255,0.2);
  line-height: 1;
  min-width: 50px;
}

.ao-ep-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 6px;
  line-height: 1.3;
}

.ao-ep-meta {
  font-size: 12px;
  color: rgba(255,255,255,0.3);
  display: flex;
  align-items: center;
  gap: 8px;
}

.ao-ep-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ao-mag);
  display: inline-block;
}

.ao-ep-play {
  margin-left: auto;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
}

.ao-ep-play::after {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 0 5px 9px;
  border-color: transparent transparent transparent rgba(255,255,255,0.5);
  margin-left: 2px;
}

/* Video placeholder */
.ao-video-wrap {
  aspect-ratio: 16/9;
  background: var(--ao-card);
  border: 1px solid rgba(255,255,255,0.05);
  position: relative;
  overflow: hidden;
}

.ao-video-inner {
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, #0d0a22 0%, #1c0a2a 50%, #0d1020 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 14px;
  position: relative;
}

.ao-video-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 70% at 50% 60%, rgba(255,32,96,0.15) 0%, transparent 65%);
}

.ao-play-circle {
  width: 68px;
  height: 68px;
  border: 1.5px solid rgba(255,255,255,0.25);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
  cursor: pointer;
}

.ao-play-circle::after {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 11px 0 11px 19px;
  border-color: transparent transparent transparent #fff;
  margin-left: 5px;
}

/* ==========================================================================
   CTA / CROWDFUNDING BAND
   ========================================================================== */

.ao-cta {
  margin: 0 80px 80px !important;
  background: var(--ao-card) !important;
  border: 1px solid rgba(0,229,255,0.12) !important;
  padding: 90px 100px !important;
  position: relative;
  overflow: hidden;
}

/* Gradient top border */
.ao-cta::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--ao-cyan), var(--ao-mag), var(--ao-yel));
  z-index: 2;
}

/* Background watermark text */
.ao-cta-bg-word {
  position: absolute;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 280px;
  color: rgba(255,255,255,0.018);
  right: -30px;
  bottom: -70px;
  line-height: 1;
  letter-spacing: -0.02em;
  pointer-events: none;
}

/* Progress bar */
.ao-prog-row {
  display: flex;
  justify-content: space-between;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  margin-bottom: 12px;
}

.ao-prog-track {
  height: 3px;
  background: rgba(255,255,255,0.07);
  position: relative;
  margin-bottom: 36px;
}

.ao-prog-fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 68%;
  height: 100%;
  background: linear-gradient(90deg, var(--ao-cyan), var(--ao-mag));
}

/* Meta stats */
.ao-meta-row {
  display: flex;
  gap: 48px;
}

.ao-meta-num {
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: 44px !important;
  line-height: 1 !important;
  margin-bottom: 4px;
}

.ao-meta-lbl {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.28);
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

.ao-footer {
  background: #000 !important;
  border-top: 1px solid rgba(255,255,255,0.04) !important;
  padding: 64px 80px 0 !important;
}

.ao-foot-logo {
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: 28px !important;
  letter-spacing: 0.12em;
  display: block;
  margin-bottom: 16px;
  color: #fff;
}

.ao-foot-tag {
  font-size: 14px;
  line-height: 1.75;
  color: rgba(255,255,255,0.5) !important;
  max-width: 260px;
  margin-bottom: 26px;
}

.ao-social-row {
  display: flex;
  gap: 10px;
}

.ao-soc-btn {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255,255,255,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px;
  font-weight: 700;
  color: rgba(255,255,255,0.35);
  text-decoration: none;
}

.ao-foot-col-title {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.8) !important;
  margin-bottom: 22px;
}

.ao-footer a,
.ao-footer .elementor-icon-list-text {
  font-size: 14px;
  color: rgba(255,255,255,0.44) !important;
  text-decoration: none;
}

.ao-footer a:hover {
  color: var(--ao-cyan) !important;
}

.ao-foot-bottom {
  border-top: 1px solid rgba(255,255,255,0.04);
  padding: 22px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ao-foot-copy {
  font-size: 12px;
  color: rgba(255,255,255,0.5) !important;
  letter-spacing: 0.06em;
}

.ao-foot-badge {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(0,229,255,0.5);
}

/* ==========================================================================
   GRADIENT TOP BORDER — Signature Line
   ========================================================================== */

/* Apply to ANY section/container: add CSS class "ao-gradient-border"
   Or use the global rule below to apply to ALL sections automatically */

/* Option A: Opt-in — add class "ao-gradient-border" to specific sections */
.ao-gradient-border {
  position: relative;
}

.ao-gradient-border::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--ao-cyan), var(--ao-mag), var(--ao-yel));
  z-index: 10;
  pointer-events: none;
}

/* Option B: Global — uncomment below to auto-apply to EVERY section/container */
/*
.elementor-section,
.e-con {
  position: relative;
}

.elementor-section::before,
.e-con::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--ao-cyan), var(--ao-mag), var(--ao-yel));
  z-index: 10;
  pointer-events: none;
}
*/

/* Thicker variant — add "ao-gradient-border--thick" alongside the base class */
.ao-gradient-border--thick::before {
  height: 3px;
}

/* Bottom variant — add "ao-gradient-border--bottom" */
.ao-gradient-border--bottom::before {
  top: auto;
  bottom: 0;
}

/* ==========================================================================
   NEON GLOW EFFECTS
   ========================================================================== */

.ao-glow-cyan {
  text-shadow: 0 0 20px rgba(0,229,255,0.3), 0 0 40px rgba(0,229,255,0.1);
}

.ao-glow-mag {
  text-shadow: 0 0 20px rgba(255,32,96,0.3), 0 0 40px rgba(255,32,96,0.1);
}

.ao-glow-yel {
  text-shadow: 0 0 20px rgba(255,230,0,0.3), 0 0 40px rgba(255,230,0,0.1);
}

.ao-box-glow-cyan {
  box-shadow: 0 0 30px rgba(0,229,255,0.15), 0 0 60px rgba(0,229,255,0.05);
}

/* ==========================================================================
   ELEMENTOR OVERRIDES
   ========================================================================== */

/* Remove default Elementor section padding where needed */
.elementor-section.ao-no-pad > .elementor-container {
  padding: 0;
}

/* Full-width inner sections */
.ao-full-width > .elementor-container {
  max-width: 100% !important;
}

/* Override Elementor default link colors inside AO sections */
.ao-footer .elementor-widget-icon-list .elementor-icon-list-item a {
  color: rgba(255,255,255,0.44) !important;
}

/* Override heading widget colors */
.elementor-widget-heading .ao-cyan-text {
  color: var(--ao-cyan) !important;
}

.elementor-widget-heading .ao-mag-text {
  color: var(--ao-mag) !important;
}

.elementor-widget-heading .ao-yel-text {
  color: var(--ao-yel) !important;
}

/* ==========================================================================
   RESPONSIVE (Tablet & Mobile)
   ========================================================================== */

@media (max-width: 1024px) {
  .ao-hero-title,
  .ao-hero-title-wrap .elementor-widget-heading .elementor-heading-title {
    font-size: 90px !important;
  }

  .ao-sec-hl {
    font-size: 56px !important;
  }

  .ao-cta {
    margin: 0 40px 40px !important;
    padding: 60px 50px !important;
  }

  .ao-meta-row {
    gap: 24px;
  }
}

@media (max-width: 767px) {
  .ao-hero-title,
  .ao-hero-title-wrap .elementor-widget-heading .elementor-heading-title {
    font-size: 64px !important;
  }

  .ao-sec-hl {
    font-size: 44px !important;
  }

  .ao-stat-num {
    font-size: 36px !important;
  }

  .ao-exp-grid {
    grid-template-columns: 1fr;
  }

  .ao-cta {
    margin: 0 20px 20px !important;
    padding: 40px 30px !important;
  }

  .ao-meta-row {
    flex-wrap: wrap;
    gap: 20px;
  }

  .ao-footer {
    padding: 40px 30px 0 !important;
  }
}