/* Custom styles for Gooslee Bot landing */
:root {
  --brand:#6c63ff;
  --brand-2:#9c8cff;
  --glass:rgba(255,255,255,0.66);
  --shadow:0 10px 30px -10px rgba(108,99,255,.25),0 4px 8px -4px rgba(0,0,0,.12);
  --radius:18px;
}
body.gradient-bg {
  background: radial-gradient(1200px 600px at 80% -10%, #cde3ff 0%, transparent 60%),
              radial-gradient(800px 400px at -10% 10%, #e3d8ff 0%, transparent 55%),
              linear-gradient(135deg, #f7f9ff 0%, #f6f4ff 100%);
  -webkit-font-smoothing: antialiased;
}
.brand { color: var(--brand); }
.btn-brand { background: linear-gradient(135deg,var(--brand),var(--brand-2)); color:#fff; border:none; box-shadow:0 4px 14px rgba(108,99,255,.4); }
.btn-brand:hover { filter:brightness(.95); color:#fff; }
.btn-brand:active { transform:translateY(1px); }

.glass { background:var(--glass); backdrop-filter: blur(8px); border:1px solid rgba(108,99,255,.18); border-radius:var(--radius); box-shadow: var(--shadow); }
.feature-card { transition: transform .4s ease, box-shadow .4s ease; }
.feature-card:hover { transform: translateY(-4px); box-shadow:0 14px 36px -12px rgba(108,99,255,.35),0 6px 12px -4px rgba(0,0,0,.15); }
.section-title { font-weight:700; letter-spacing:.2px; }
.text-brand { color: var(--brand) !important; }

/* Chat Illustration */
.illustration { border-radius: var(--radius); min-height: 468px; display:flex; align-items:center; justify-content:center; }
.chat-mockup { font-size:.9rem; max-width:260px; }
.bubble { background:#fff; border-radius:14px; padding:.5rem .75rem; margin-bottom:.4rem; box-shadow:0 2px 4px rgba(0,0,0,.06); position:relative; }
.bubble.me { background:linear-gradient(135deg,var(--brand),var(--brand-2)); color:#fff; margin-left:auto; }
.bubble.sys { background:#eef1ff; color:#333; font-size:.8rem; }
.provider-chip { font-size:.65rem; letter-spacing:.5px; text-transform:uppercase; background:#fff; padding:.35rem .55rem; border-radius:999px; border:1px solid rgba(108,99,255,.35); font-weight:600; }
.provider-line .integration-item { background:#fff; padding:.55rem 1rem; border-radius:999px; font-size:.8rem; box-shadow:0 4px 10px -4px rgba(108,99,255,.3); display:flex; align-items:center; gap:.4rem; }
.provider-line .integration-item i { color: var(--brand); }

/* Stepper */
.stepper .step { position:relative; border-radius:var(--radius); transition:background .4s ease, border .4s ease, transform .5s cubic-bezier(.16,.8,.24,1), box-shadow .5s ease; }
.stepper .step-index { width:32px; height:32px; border-radius:50%; background:linear-gradient(135deg,var(--brand),var(--brand-2)); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:600; box-shadow:0 4px 12px -4px rgba(108,99,255,.4); flex-shrink:0; }
.stepper .step:hover { background:rgba(255,255,255,.8); }
.stepper .step-title { font-size:.8rem; font-weight:600; text-transform:uppercase; letter-spacing:.5px; color:var(--brand); opacity:.85; }

/* Active step styling */
.stepper .step.step-active { background:rgba(255,255,255,.92); box-shadow:0 0 0 1px rgba(108,99,255,.35), 0 0 0 4px rgba(108,99,255,.15), 0 14px 46px -10px rgba(108,99,255,.5), 0 6px 14px -6px rgba(0,0,0,.18); transform:translateY(-6px) scale(1.035); }
.stepper .step.step-active .step-index { animation:pulseRing 2.4s ease-in-out infinite; }

@keyframes pulseRing { 0% { box-shadow:0 0 0 0 rgba(108,99,255,.55),0 4px 12px -4px rgba(108,99,255,.4);} 70% { box-shadow:0 0 0 14px rgba(108,99,255,0),0 4px 16px -4px rgba(108,99,255,.55);} 100% { box-shadow:0 0 0 0 rgba(108,99,255,0),0 4px 12px -4px rgba(108,99,255,.4);} }

/* Security list */
.security-list li { display:flex; align-items:center; gap:.6rem; padding:.4rem 0; font-size:.95rem; }

/* Animations */
@media (prefers-reduced-motion: no-preference) {
  .fade-in { opacity:0; animation:fadeUp .9s ease .1s forwards; }
  .fade-in-delay { opacity:0; animation:fadeUp 1s ease .25s forwards; }
  @keyframes fadeUp { from { opacity:0; transform:translateY(24px) scale(.98);} to { opacity:1; transform:translateY(0) scale(1);} }
}

/* Global animations for WebApp ringing overlay */
@keyframes blink { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } }
@keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.08); } 100% { transform: scale(1); } }

/* Telegram Button */
.btn-telegram { background-color: #0088cc!important; color: #fff; border: none; box-shadow: 0 4px 14px rgba(0,136,204,.4); }
.btn-telegram:hover { filter: brightness(.95); color: #fff; }
.btn-telegram:active { transform: translateY(1px); }

/* Language Switcher */
.lang-switch .btn.active { background:var(--brand); color:#fff; border-color:var(--brand); }
.lang-switch .btn { font-weight:600; }

/* Navbar tweaks */
#mainNav .nav-link { font-weight:500; }
#mainNav .nav-link:hover { color: var(--brand); }

/* Utilities */
.tracking { letter-spacing:1.5px; }
.hero-section { position:relative; }
.hero-section:before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 70% 20%,rgba(108,99,255,.18),transparent 60%); pointer-events:none; border-radius:inherit; }

footer a { text-decoration:none; }
footer a:hover { text-decoration:underline; }

main.main-window-container {
    height: 100vh;
}



/* Responsive adjustments */
@media (max-width: 767.98px) {
    .display-5 {
        font-size: 2.15rem;
    }

    .illustration {
        min-height: 260px;
    }

    .chat-mockup {
        max-width: 100%;
    }
}


@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.08); 
        opacity: .85;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes blink {
    0%,
    100% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }
}