/*
Theme Name: AI Landing
Theme URI: https://ecomfixr.com/
Author: eComFixR
Description: wordpress landing page theme
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: fixr-minimal
Tags: minimal, blank, starter
*/

/* Theme stylesheet - keep it empty or add your base styles here */


body {
    font-family: 'Inter', sans-serif;
    background-color: #0a091a; /* Fallback background */
    overflow-x: hidden;
}
article {
    color: #e3e3e3;
}
h1 { font-size: 2.5rem !important; margin: 16px 0 !important; }  /* 40px */
h2 { font-size: 2rem !important; margin: 16px 0 !important; }    /* 32px */
h3 { font-size: 1.75rem !important; margin: 16px 0 !important; } /* 28px */
h4 { font-size: 1.5rem !important; margin: 16px 0 !important; }  /* 24px */
h5 { font-size: 1.25rem !important; margin: 16px 0 !important; } /* 20px */
h6 { font-size: 1rem !important; margin: 16px 0 !important; }    /* 16px */

/* Animated Gradient Background */
.animated-gradient {
    background: linear-gradient(-45deg, #0a091a, #1a0b3a, #0c2b4d, #0a091a);
    background-size: 400% 400%;
    animation: gradient-flow 25s ease infinite;
    position: relative;

}

@keyframes gradient-flow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Floating Orbs Animation */
.orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.5;
    animation: float 20s infinite ease-in-out;
}
.orb-1 {
    width: 400px; height: 400px; background-color: rgba(67, 56, 202, 0.4); top: -100px; left: -150px; animation-duration: 22s;
}
.orb-2 {
    width: 350px; height: 350px; background-color: rgba(219, 39, 119, 0.3); bottom: -150px; right: -100px; animation-duration: 18s; animation-delay: 3s;
}
.orb-3 {
    width: 300px; height: 300px; background-color: rgba(20, 184, 166, 0.3); top: 50%; left: 40%; animation-duration: 25s; animation-delay: 1s;
}

@keyframes float {
    0% { transform: translateY(0px) translateX(0px) scale(1); }
    50% { transform: translateY(-40px) translateX(30px) scale(1.1); }
    100% { transform: translateY(0px) translateX(0px) scale(1); }
}

/* Buy Now Button Style */
.btn-buy {
    transition: all 0.3s ease;
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.4);
}
.btn-buy:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 0 35px rgba(59, 130, 246, 0.7);
}

/* Scroll-triggered Animations */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Glassmorphism Effect for Cards */
.glass-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}
.glass-card:hover {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transform: translateY(-5px);
}

/* Animated Chat Demo */
.chat-mockup {
    border: 1px solid rgba(255,255,255,0.2);
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}
.chat-bubble { animation: bubble-in 0.5s ease forwards; opacity: 0; transform: scale(0.8); }
@keyframes bubble-in {
    to { opacity: 1; transform: scale(1); }
}
.chat-bubble.user { animation-delay: 1s; }
.chat-bubble.ai { animation-delay: 2s; }
.chat-bubble.ai-2 { animation-delay: 3.5s; }
.chat-bubble.admin-takeover { animation-delay: 5s; }
.chat-bubble.admin-reply { animation-delay: 6s; }

/* AI Core Animation */
.ai-core {
    position: relative;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(59,130,246,0.8) 0%, rgba(10,9,26,0) 70%);
    display: flex;
    align-items: center;
    justify-content: center;
}
.ai-core::before, .ai-core::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid rgba(59, 130, 246, 0.5);
    transform: translate(-50%, -50%);
    animation: pulse 4s infinite ease-out;
}
.ai-core::after {
    animation-delay: 2s;
}
@keyframes pulse {
    0% { transform: translate(-50%, -50%) scale(1); opacity: 0.8; }
    100% { transform: translate(-50%, -50%) scale(2.5); opacity: 0; }
}
@media(max-width:769px){
    .orb{
        display:none;
    }
}


.chat-mockup {
    width:420px;
    background:rgba(31,41,55,0.6);
    border-radius:18px;
    padding:16px;
    box-shadow:0 10px 30px rgba(2,6,23,0.6);
    border:1px solid rgba(255,255,255,0.05);
    display:flex; flex-direction:column;
        height: 400px;
        margin-left: auto;
  }
  .header { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
  .avatar { width:44px; height:44px; border-radius:50%; background:#2563eb; color:#fff; font-weight:700; display:flex; align-items:center; justify-content:center; }
  .name { font-weight:700; color:#fff; }
  .status { font-size:12px; color:#7ee787; display:flex; align-items:center; gap:6px; }
  .dot-status { width:10px; height:10px; border-radius:50%; background:#34d399; animation:pulse 1.8s infinite; }
  @keyframes pulse {
    0% { box-shadow:0 0 0 0 rgba(52,211,153,0.3); }
    70% { box-shadow:0 0 0 8px rgba(52,211,153,0); }
    100% { box-shadow:0 0 0 0 rgba(52,211,153,0); }
  }
  .chat-area { flex:1; display:flex; flex-direction:column; overflow:hidden; }
  .messages { flex:1; display:flex; flex-direction:column; gap:10px; overflow-y:auto; scroll-behavior:smooth; }
  .message { display:flex; flex-direction:column; }
  .bubble {
    max-width:74%; padding:10px 12px; border-radius:12px;
    line-height:1.25; font-size:14px;
    opacity:0;display: none; transform:translateY(10px) scale(.98);
    transition:opacity .3s ease, transform .3s ease;
    will-change:opacity,transform;
  }
  .bubble.show { opacity:1;display: block; transform:translateY(0) scale(1); }
  .user .bubble { background:#374151; color:#fff; border-radius:12px 12px 12px 4px; align-self:flex-start; }
  .ai .bubble { background:#2563eb; color:#fff; border-radius:12px 12px 4px 12px; align-self:flex-start; }
  .admin .bubble { background:#db2777; color:#fff; border-radius:12px 12px 4px 12px; align-self:flex-start; }
  .admin-strip { text-align:center; font-size:12px; color:#f472b6; opacity:0; transform:scale(.98); transition:all .3s ease; }
  .admin-strip.show { opacity:1;display: block; transform:scale(1); }
  .typing { display:inline-flex; background:rgba(255,255,255,0.06); padding:8px 10px; border-radius:10px; }
  
 .blog-title{
    text-align: center;
    border-bottom: 1px solid;
    margin-bottom: 20px !important;
 }