/* ===== sotibber.uz — Landing page (Dark / Violet AI-SaaS) ===== */

html { scroll-behavior: smooth; }
body {
  -webkit-font-smoothing: antialiased;
  background-color: #07060d;
  color: #e6e3f0;
  overflow-x: hidden;
}

/* Display font for headings */
.font-display { font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif; }

/* ---------- Page-wide ambient background ---------- */
.page-bg {
  position: relative;
  background:
    radial-gradient(900px 520px at 50% -8%, rgba(124, 58, 237, 0.28), transparent 60%),
    radial-gradient(700px 500px at 8% 12%, rgba(88, 28, 235, 0.18), transparent 55%),
    radial-gradient(700px 500px at 92% 20%, rgba(139, 92, 246, 0.16), transparent 55%),
    #07060d;
}
/* Faint dotted grid overlay */
.grid-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 75%);
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 75%);
  pointer-events: none;
}

/* Localized glow blob helper */
.glow {
  position: absolute;
  border-radius: 9999px;
  filter: blur(90px);
  opacity: 0.6;
  pointer-events: none;
  z-index: 0;
}

/* ---------- Glass surfaces ---------- */
.glass {
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.glass-hover { transition: transform .35s cubic-bezier(.16,1,.3,1), border-color .35s ease, box-shadow .35s ease; }
.glass-hover:hover {
  transform: translateY(-4px);
  border-color: rgba(139,92,246,0.45);
  box-shadow: 0 24px 60px -24px rgba(124,58,237,0.55);
}

/* Gradient hairline on top of feature cards */
.card-sheen { position: relative; overflow: hidden; }
.card-sheen::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(600px 200px at 50% -40%, rgba(139,92,246,0.25), transparent 70%);
  pointer-events: none;
}

/* Gradient text */
.text-grad {
  background: linear-gradient(180deg, #ffffff 0%, #b7a9ff 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.text-grad-violet {
  background: linear-gradient(90deg, #a78bfa, #7c3aed 60%, #6366f1);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Primary gradient button */
.btn-grad {
  background: linear-gradient(135deg, #7c3aed, #6d28d9 55%, #4f46e5);
  box-shadow: 0 12px 34px -10px rgba(124,58,237,0.75), inset 0 1px 0 rgba(255,255,255,0.22);
}
.btn-grad:hover { box-shadow: 0 16px 44px -8px rgba(124,58,237,0.9), inset 0 1px 0 rgba(255,255,255,0.3); }

/* Pill badge */
.badge-pill {
  border: 1px solid rgba(139,92,246,0.35);
  background: linear-gradient(180deg, rgba(124,58,237,0.22), rgba(124,58,237,0.08));
}

/* ---------- Dashboard mockup chart ---------- */
.mock-line { stroke-dasharray: 900; stroke-dashoffset: 900; animation: draw 2.4s ease forwards .3s; }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* ---------- Animations ---------- */
@keyframes floaty { 0%,100% { transform: translateY(0);} 50% { transform: translateY(-14px);} }
@keyframes fadeUp { 0% { opacity:0; transform: translateY(18px);} 100% { opacity:1; transform: translateY(0);} }
@keyframes pulseDot { 0%,100% { opacity:1;} 50% { opacity:.35;} }
.animate-floaty { animation: floaty 6s ease-in-out infinite; }
.animate-fadeUp { animation: fadeUp .6s ease-out both; }

/* ---------- FAQ accordion ---------- */
.faq-answer { max-height: 0; overflow: hidden; transition: max-height .35s ease, opacity .35s ease; opacity: 0; }
.faq-item.open .faq-answer { opacity: 1; }
.faq-item.open .faq-chevron { transform: rotate(180deg); }

/* ---------- Modal ---------- */
#roleModal.hidden-modal { opacity: 0; pointer-events: none; }
#roleModal.hidden-modal .modal-card { transform: translateY(20px) scale(0.97); }
.modal-card { transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
#roleModal { transition: opacity 0.25s ease; }

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: translateY(0); }

/* Marquee-ish logo row fade */
.logo-mark { opacity: .55; transition: opacity .3s ease; }
.logo-mark:hover { opacity: 1; }