/* ============================================
   Authority Landing Page — Custom Styles
   ============================================ */

/* === Base === */
body {
   font-family: 'Bricolage Grotesque', sans-serif;
   background-color: #020617 !important;
   /* Slate 950 */
   color: #f8fafc !important;
   /* Slate 50 */
   overflow-x: hidden;
}

html,
body {
   overflow-x: hidden;
   max-width: 100vw;
}

* {
   box-sizing: border-box;
}

/* === Animations === */
@keyframes fadeInUp {
   from {
      opacity: 0;
      transform: translateY(30px);
   }

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

@keyframes pulseSlow {

   0%,
   100% {
      opacity: 1;
   }

   50% {
      opacity: .6;
   }
}

@keyframes shimmer {
   0% {
      background-position: -200% center;
   }

   100% {
      background-position: 200% center;
   }
}

@keyframes float {

   0%,
   100% {
      transform: translateY(0);
   }

   50% {
      transform: translateY(-12px);
   }
}

.animate-fade-in-up {
   animation: fadeInUp .8s ease forwards;
}

.animate-float {
   animation: float 5s ease-in-out infinite;
}

/* === Gradients === */
.gradient-primary {
   background: linear-gradient(135deg, #f97316 0%, #ea580c 50%, #c2410c 100%);
}

.gradient-text {
   background: linear-gradient(135deg, #fb923c 0%, #f97316 50%, #fcd34d 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
}

.gradient-gold {
   background: linear-gradient(135deg, #fcd34d 0%, #fb923c 100%);
}

/* === Glass & Cards === */
.glass-card {
   background: rgba(15, 23, 42, 0.6);
   /* Slate 900 with opacity */
   backdrop-filter: blur(12px);
   border: 1px solid rgba(51, 65, 85, 0.5);
   /* Slate 700 */
   box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
}

.glass-nav {
   background: rgba(2, 6, 23, 0.85);
   /* Slate 950 */
   backdrop-filter: blur(16px);
   border-bottom: 1px solid rgba(30, 41, 59, 0.8);
   /* Slate 800 */
   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
}

.feature-card {
   background: #0f172a;
   /* Slate 900 */
   border: 1px solid rgba(30, 41, 59, 0.8);
   /* Slate 800 */
   transition: all .35s ease;
   box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3);
}

.feature-card:hover {
   border-color: rgba(249, 115, 22, .35);
   transform: translateY(-4px);
   box-shadow: 0 20px 60px -20px rgba(249, 115, 22, .15);
}

.pain-card {
   background: rgba(69, 10, 10, 0.3);
   /* Red 950/900 mix */
   border: 1px solid rgba(127, 29, 29, 0.4);
   /* Red 900 */
}

.solution-card {
   background: rgba(67, 20, 7, 0.3);
   /* Blue 950/900 mix */
   border: 1px solid rgba(124, 45, 18, 0.4);
   /* Blue 900 */
   transition: all .3s ease;
}

.solution-card:hover {
   border-color: rgba(249, 115, 22, .4);
   transform: translateY(-3px);
   box-shadow: 0 10px 30px -10px rgba(249, 115, 22, 0.1);
}

.testimonial-card {
   background: #0f172a;
   /* Slate 900 */
   border: 1px solid rgba(30, 41, 59, 0.8);
   /* Slate 800 */
   box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
}

/* === CTA Button === */
.cta-btn {
   background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
   box-shadow: 0 4px 30px rgba(249, 115, 22, .3);
   transition: all .3s ease;
}

.cta-btn:hover {
   box-shadow: 0 6px 40px rgba(249, 115, 22, .5);
   transform: translateY(-2px);
}

.cta-btn-outline {
   border: 2px solid rgba(249, 115, 22, .5);
   color: #fb923c;
   transition: all .3s ease;
}

.cta-btn-outline:hover {
   background: rgba(249, 115, 22, .15);
   border-color: #fb923c;
}

/* === Badge === */
.badge-glow {
   background: rgba(249, 115, 22, 0.15);
   border: 1px solid rgba(249, 115, 22, 0.3);
}

/* === Hero Glow === */
.hero-glow {
   background: radial-gradient(ellipse 80% 50% at 50% -10%, rgba(249, 115, 22, .15), transparent);
}

/* === Noise Texture === */
.noise-bg {
   background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
   opacity: 0.07;
   mix-blend-mode: overlay;
   pointer-events: none;
}

/* === Comparison === */
.compare-bad {
   background: linear-gradient(180deg, rgba(15, 23, 42, 0.9) 0%, rgba(69, 10, 10, 0.4) 100%);
   border-right: 1px solid rgba(255, 255, 255, 0.05);
}

@media (max-width: 768px) {
   .compare-bad {
      border-right: none;
      border-bottom: 1px solid rgba(255, 255, 255, 0.05);
   }
}

.compare-good {
   background: linear-gradient(180deg, rgba(6, 78, 59, 0.6) 0%, rgba(2, 44, 34, 0.9) 100%);
}

.compare-step {
   display: flex;
   align-items: center;
   gap: 16px;
   padding: 16px 0;
   border-bottom: 1px solid rgba(255, 255, 255, 0.06);
   transition: transform 0.2s ease;
}

.compare-step:hover {
   transform: translateX(4px);
}

.compare-step:last-child {
   border-bottom: none;
}

.compare-num {
   flex-shrink: 0;
   width: 36px;
   height: 36px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-weight: 800;
   font-size: 14px;
   font-family: 'Inter', sans-serif;
}

/* === Showcase Slider === */
.showcase-viewport {
   touch-action: pan-y;
}

.showcase-track {
   align-items: stretch;
   padding: 8px 0 16px;
}

.showcase-slide {
   transition: transform .45s ease, opacity .45s ease, filter .45s ease, box-shadow .45s ease;
   transform: scale(.88);
   opacity: .5;
   filter: saturate(.8);
}

.showcase-slide.is-neighbor {
   transform: scale(.95);
   opacity: .8;
   filter: saturate(.95);
}

.showcase-slide.is-active-center {
   transform: scale(1.1);
   opacity: 1;
   filter: none;
   z-index: 2;
   box-shadow: 0 24px 60px -28px rgba(249, 115, 22, 0.45);
}

@media (max-width: 1023px) {

   .showcase-slide,
   .showcase-slide.is-neighbor,
   .showcase-slide.is-active-center {
      transform: scale(1);
      opacity: 1;
      filter: none;
   }
}

.showcase-dot {
   width: 10px;
   height: 10px;
   border-radius: 9999px;
   border: 1px solid rgba(148, 163, 184, 0.55);
   background: rgba(30, 41, 59, 0.9);
   transition: all .25s ease;
}

.showcase-dot.active {
   width: 24px;
   border-color: rgba(251, 146, 60, 0.9);
   background: linear-gradient(135deg, #fb923c 0%, #f97316 100%);
}

#showcasePrev:disabled,
#showcaseNext:disabled {
   opacity: .35;
   cursor: not-allowed;
}

/* === Modal === */
.modal-overlay {
   background: rgba(0, 0, 0, .7);
   backdrop-filter: blur(8px);
}

.modal-box {
   background: #0f172a;
   border: 1px solid rgba(30, 41, 59, 1);
   border-radius: 20px;
   box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
}

.form-input {
   background: #1e293b;
   border: 1px solid #334155;
   color: #f8fafc;
   border-radius: 10px;
   padding: 12px 16px;
   width: 100%;
   font-size: 15px;
   transition: border-color .2s;
   outline: none;
}

.form-input:focus {
   border-color: rgba(249, 115, 22, .6);
   background: #0f172a;
}

.form-input::placeholder {
   color: #64748b;
}

.form-label {
   display: block;
   font-size: 13px;
   font-weight: 600;
   color: #94a3b8;
   margin-bottom: 6px;
}

/* === FAQ Accordion === */
.faq-item {
   background: #0f172a;
   border: 1px solid #1e293b;
   border-radius: 16px;
   overflow: hidden;
   transition: border-color .3s;
   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
}

.faq-item:hover,
.faq-item.active {
   border-color: rgba(249, 115, 22, .4);
}

.faq-question {
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 18px 22px;
   -webkit-user-select: none;
   user-select: none;
}

.faq-question:hover {
   background-color: #1e293b;
}

.faq-answer {
   max-height: 0;
   overflow: hidden;
   transition: max-height .4s ease;
   padding: 0 22px;
}

.faq-answer-inner {
   padding-bottom: 18px;
}

.faq-icon {
   flex-shrink: 0;
   width: 30px;
   height: 30px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 18px;
   font-weight: 300;
   background: rgba(249, 115, 22, .15);
   color: #fb923c;
   transition: all .3s;
}

/* === AI Expert Accordion === */
.ai-expert-card {
   transition: all .3s ease;
}

.ai-expert-card.active {
   border-color: rgba(249, 115, 22, .4) !important;
}

.expert-answer {
   max-height: 0;
   overflow: hidden;
   transition: max-height .4s ease;
}

.expert-icon {
   transition: all .3s ease;
}

/* === Section divider glow === */
.section-glow-top {
   position: absolute;
   top: 0;
   left: 50%;
   transform: translateX(-50%);
   width: 600px;
   height: 300px;
   background: radial-gradient(ellipse, rgba(249, 115, 22, .15), transparent 70%);
   pointer-events: none;
}

/* === Mobile Responsive === */
@media (max-width: 640px) {
   .hero-title {
      font-size: 2.5rem !important;
      line-height: 1.1 !important;
   }

   .modal-box {
      width: 95% !important;
      max-height: 90vh;
      overflow-y: auto;
   }

   h2 {
      font-size: 2rem !important;
      line-height: 1.2 !important;
   }

   .container {
      padding-left: 1rem !important;
      padding-right: 1rem !important;
   }
}