/* ================================================================
   visual-polish.css — Final visual polish layer
   Loaded last. All rules override previous layers.
   ================================================================ */

/* ── Body background — deeper, more dramatic ────────────────── */
body {
  background:
    radial-gradient(ellipse 115% 65% at -6% -12%, rgba(79,46,220,0.32), transparent),
    radial-gradient(ellipse 75% 55% at 110% 112%, rgba(22,193,255,0.18), transparent),
    #020817 !important;
}

/* ── Announce pill — animated gradient border ────────────────── */
.announce-pill {
  position: relative !important;
  border-color: transparent !important;
  background: rgba(3,7,18,0.92) !important;
}

.announce-pill::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 999px;
  padding: 1px;
  background: linear-gradient(90deg,
    rgba(99,102,241,0.75) 0%,
    rgba(34,211,238,0.55) 30%,
    rgba(167,139,250,0.75) 65%,
    rgba(99,102,241,0.75) 100%
  );
  background-size: 300% 100%;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  animation: pillShimmer 4s linear infinite;
  pointer-events: none;
}

@keyframes pillShimmer {
  from { background-position: 0% 50%; }
  to   { background-position: 300% 50%; }
}

/* ── Hero heading — fits viewport ───────────────────────────── */
.hero-h1 {
  font-size: clamp(2.2rem, 3.2vw, 3.2rem) !important;
  letter-spacing: -0.04em !important;
  line-height: 1.1 !important;
}

.hero-h1 .line:nth-child(1) span,
.hero-h1 .line:nth-child(3) span {
  color: rgba(241,245,249,0.72) !important;
  font-weight: 600 !important;
}

.hero-h1 .line:nth-child(2) span {
  font-weight: 800 !important;
  letter-spacing: -0.056em !important;
}

/* ── Gradient text — vivid electric spectrum ─────────────────── */
.grad,
.hero-h1 .grad,
.cta-inner h2 .grad {
  background: linear-gradient(
    135deg,
    #e0f2fe  0%,
    #bfdbfe 12%,
    #818cf8 38%,
    #c084fc 58%,
    #f472b6 82%,
    #fda4af 100%
  ) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  background-size: 300% 300% !important;
  animation: gradShift 9s ease infinite !important;
}

/* ── Hero sub-headline ───────────────────────────────────────── */
.hero-sub {
  color: rgba(226,234,248,0.68) !important;
  font-size: clamp(1.02rem, 1.35vw, 1.2rem) !important;
  line-height: 1.55 !important;
  font-weight: 380 !important;
}

/* ── Hero proof chips — subtle glow dot ─────────────────────── */
.hero-proof span::before {
  background: var(--cyan) !important;
  box-shadow: 0 0 14px rgba(34,211,238,0.8) !important;
}

/* ── Hero visual — purple/cyan glow backdrop ─────────────────── */
.hero-visual {
  background:
    radial-gradient(ellipse 78% 62% at 50% 50%, rgba(99,102,241,0.26), rgba(34,211,238,0.1) 46%, transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.005) 40%),
    rgba(4,7,20,0.18) !important;
  box-shadow: 0 36px 110px rgba(0,0,0,0.28) !important;
}

/* ── hv-card — deeper glass, cinematic glow ─────────────────── */
.hv-card {
  background:
    linear-gradient(162deg, rgba(255,255,255,0.11) 0%, rgba(255,255,255,0.025) 48%),
    rgba(4,8,22,0.9) !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
  border-radius: 24px !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.055),
    0 52px 130px rgba(0,0,0,0.76),
    0 0 120px rgba(99,102,241,0.26),
    inset 0 1px 0 rgba(255,255,255,0.18) !important;
}

.hvc-header {
  border-bottom-color: rgba(255,255,255,0.09) !important;
  position: relative;
}

/* Shimmer line at top of hv-card */
.hvc-header::after {
  content: '';
  position: absolute;
  top: -1.5rem;
  left: 5%;
  right: 5%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.45), rgba(167,139,250,0.55), rgba(34,211,238,0.35), transparent);
  pointer-events: none;
}

.hvc-logo-dot {
  box-shadow: 0 0 22px rgba(139,92,246,0.65) !important;
}

.hvc-bar {
  height: 5px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,0.05) !important;
}

/* ── Float badges — heavier glass ───────────────────────────── */
.float-badge {
  background: rgba(2,5,16,0.95) !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
  box-shadow:
    0 28px 80px rgba(0,0,0,0.65),
    0 0 0 1px rgba(255,255,255,0.045),
    inset 0 1px 0 rgba(255,255,255,0.14) !important;
  backdrop-filter: blur(32px) saturate(2) !important;
  -webkit-backdrop-filter: blur(32px) saturate(2) !important;
}

.fb-val {
  font-size: 1.08rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em !important;
}

.fb-lbl {
  font-size: 0.58rem !important;
  letter-spacing: 0.1em !important;
  opacity: 0.72;
}

/* ── Section titles — tighter, more impact ──────────────────── */
.section-title {
  font-size: clamp(2.5rem, 5.2vw, 4.2rem) !important;
  letter-spacing: -0.038em !important;
  line-height: 1.04 !important;
}

/* ── Section labels — subtle glow ───────────────────────────── */
.section-label {
  box-shadow: 0 0 24px rgba(139,92,246,0.14) !important;
}

/* ── Bento featured cell (bc-1) — cinematic depth ───────────── */
.bento-cell.bc-1 {
  background:
    radial-gradient(ellipse 68% 48% at 24% 8%, rgba(99,102,241,0.22), transparent 54%),
    radial-gradient(ellipse 52% 58% at 88% 92%, rgba(34,211,238,0.1), transparent 50%),
    linear-gradient(162deg, rgba(255,255,255,0.065) 0%, rgba(4,8,22,0.99) 64%) !important;
}

.bento-cell.bc-1::after {
  background: linear-gradient(90deg, transparent, rgba(139,92,246,0.8), rgba(34,211,238,0.5), transparent) !important;
  opacity: 1 !important;
}

/* Hover shimmer for all bento cells */
.bento-cell:hover::after {
  background: linear-gradient(90deg, transparent, rgba(139,92,246,0.65), rgba(34,211,238,0.4), transparent) !important;
  opacity: 1 !important;
}

/* ── Card hover — consistent purple glow lift ───────────────── */
.ow-card:hover,
.testi-card:hover,
.blog-card:hover {
  box-shadow:
    0 40px 90px rgba(0,0,0,0.58),
    0 0 60px rgba(99,102,241,0.16),
    0 0 0 1px rgba(139,92,246,0.22) !important;
}

/* ── Testimonial cards — better typography ───────────────────── */
.testi-quote {
  font-size: 0.91rem !important;
  line-height: 1.82 !important;
  color: rgba(226,234,248,0.88) !important;
}

.testi-stars {
  font-size: 1rem !important;
  letter-spacing: 0.04em !important;
}

/* ── AI section terminal — more premium ─────────────────────── */
.ai-terminal {
  background: rgba(1,4,13,0.97) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  box-shadow:
    0 52px 100px rgba(0,0,0,0.65),
    0 0 0 1px rgba(255,255,255,0.045),
    inset 0 1px 0 rgba(255,255,255,0.07) !important;
}

.ai-terminal::before {
  background: linear-gradient(90deg, transparent, rgba(99,102,241,0.6), rgba(34,211,238,0.4), transparent) !important;
}

/* ── AI float card ───────────────────────────────────────────── */
.ai-float-card {
  border: 1px solid rgba(52,211,153,0.22) !important;
  background: rgba(2,8,22,0.96) !important;
  box-shadow:
    0 24px 60px rgba(0,0,0,0.52),
    0 0 40px rgba(52,211,153,0.08),
    inset 0 1px 0 rgba(255,255,255,0.07) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
}

/* ── Tech grid — stronger gradient border ───────────────────── */
.tech-grid {
  background: linear-gradient(90deg,
    rgba(255,255,255,0.07),
    rgba(99,102,241,0.22),
    rgba(34,211,238,0.18),
    rgba(99,102,241,0.22),
    rgba(255,255,255,0.07)
  ) !important;
}

.tech-item {
  background:
    radial-gradient(circle at 50% 0%, rgba(99,102,241,0.07), transparent 52%),
    rgba(3,6,18,0.94) !important;
}

/* ── CTA section — dramatic spotlight ──────────────────────── */
.cta-section {
  background:
    radial-gradient(ellipse 92% 78% at 50% -5%, rgba(79,46,220,0.22), transparent 62%),
    linear-gradient(180deg, rgba(4,7,18,0.99) 0%, #020817 100%) !important;
}

.cta-inner h2 {
  font-size: clamp(2.7rem, 5.2vw, 4.8rem) !important;
  letter-spacing: -0.04em !important;
  line-height: 1.02 !important;
}

/* ── Nav pill — slightly more defined ───────────────────────── */
.nav-links {
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.048),
    0 12px 48px rgba(0,0,0,0.6),
    inset 0 1px 0 rgba(255,255,255,0.1) !important;
}

/* ── Marquee — more contrast ─────────────────────────────────── */
.marquee-item {
  color: rgba(226,234,248,0.32) !important;
  transition: color 0.25s !important;
}

.marquee-item:hover {
  color: #c4b5fd !important;
}

/* ── Progress bars — richer gradient ───────────────────────── */
.ow-progress-fill {
  background: linear-gradient(90deg, #4f46e5, #818cf8, #06b6d4) !important;
}

/* ── Hero stat cards — more defined ────────────────────────── */
.hero-stat {
  background:
    linear-gradient(162deg, rgba(99,102,241,0.1), rgba(255,255,255,0.028)) !important;
  border: 1px solid rgba(139,92,246,0.2) !important;
}

.hero-stat:hover {
  background:
    linear-gradient(162deg, rgba(99,102,241,0.16), rgba(255,255,255,0.042)) !important;
  border-color: rgba(139,92,246,0.36) !important;
}

/* ── Scroll progress bar — brighter ─────────────────────────── */
.scroll-progress {
  background: linear-gradient(90deg, #4f46e5, #818cf8 45%, #06b6d4) !important;
  box-shadow: 0 0 16px rgba(99,102,241,0.7) !important;
  height: 2px !important;
}

/* ── Bento icon SVGs — more vivid stroke ───────────────────── */
.mark-svg {
  stroke: var(--cyan) !important;
  filter: drop-shadow(0 0 6px rgba(34,211,238,0.45)) !important;
}

/* ── Footer — subtle improvements ───────────────────────────── */
footer {
  background: linear-gradient(180deg, rgba(3,6,16,0.99), #010610) !important;
}

/* ── Mobile responsive — keep hero heading readable ─────────── */
@media (max-width: 760px) {
  .hero-h1 {
    font-size: clamp(1.9rem, 7vw, 2.6rem) !important;
    letter-spacing: -0.028em !important;
    line-height: 1.08 !important;
  }

  .section-title {
    font-size: clamp(2rem, 7.5vw, 2.8rem) !important;
  }

  .cta-inner h2 {
    font-size: clamp(2rem, 7.5vw, 2.8rem) !important;
  }
}

/* ── Reduced motion safety ───────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .announce-pill::before {
    animation: none !important;
  }
}