/**
 * Antigravity-inspired theme for Allpixel (index; can be extended site-wide).
 * Dark starfield backgrounds, high contrast, clean sans-serif, minimal UI.
 *
 * CONTRAST RULE (for rollout to other pages):
 * - Light background (#fff, #f8f9fa) → dark text (#1a1a1a, rgba(0,0,0,0.75))
 * - Dark background (#0a0a0a, #0f172a, hero, footer, modals) → light text (#fff, rgba(255,255,255,0.9))
 * Override any inline color with !important where needed so text is always visible.
 */

/* ---------- Starfield (sparse white dots on dark) ---------- */
.starfield-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background-color: #0a0a0a;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 18%, rgba(255,255,255,0.9) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 88% 72%, rgba(255,255,255,0.85) 0%, transparent 100%),
    radial-gradient(1px 1px at 45% 35%, rgba(255,255,255,0.7) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 72% 12%, rgba(255,255,255,0.8) 0%, transparent 100%),
    radial-gradient(1px 1px at 25% 88%, rgba(255,255,255,0.6) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 60% 55%, rgba(255,255,255,0.75) 0%, transparent 100%),
    radial-gradient(1px 1px at 5% 45%, rgba(255,255,255,0.65) 0%, transparent 100%),
    radial-gradient(1px 1px at 95% 25%, rgba(255,255,255,0.7) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 38% 78%, rgba(255,255,255,0.8) 0%, transparent 100%),
    radial-gradient(1px 1px at 68% 92%, rgba(255,255,255,0.6) 0%, transparent 100%);
  background-size: 100% 100%;
  background-repeat: repeat;
  opacity: 0.85;
}

.starfield-section {
  position: relative;
  background-color: #0a0a0a !important;
}

.starfield-section::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(1.5px 1.5px at 15% 22%, rgba(255,255,255,0.7) 0%, transparent 100%),
    radial-gradient(1px 1px at 85% 65%, rgba(255,255,255,0.6) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 50% 40%, rgba(255,255,255,0.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 30% 85%, rgba(255,255,255,0.55) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 70% 15%, rgba(255,255,255,0.6) 0%, transparent 100%);
  background-size: 100% 100%;
  opacity: 0.6;
  z-index: 0;
}

.starfield-section > .container,
.starfield-section > .container-fluid {
  position: relative;
  z-index: 1;
}

/* Full-page starfield behind all content */
body.index-page::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background-color: transparent;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 18%, rgba(255,255,255,0.5) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 88% 72%, rgba(255,255,255,0.45) 0%, transparent 100%),
    radial-gradient(1px 1px at 45% 35%, rgba(255,255,255,0.4) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 72% 12%, rgba(255,255,255,0.45) 0%, transparent 100%),
    radial-gradient(1px 1px at 25% 88%, rgba(255,255,255,0.35) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 60% 55%, rgba(255,255,255,0.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 5% 45%, rgba(255,255,255,0.35) 0%, transparent 100%),
    radial-gradient(1px 1px at 95% 25%, rgba(255,255,255,0.4) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 38% 78%, rgba(255,255,255,0.45) 0%, transparent 100%),
    radial-gradient(1px 1px at 68% 92%, rgba(255,255,255,0.35) 0%, transparent 100%);
  background-size: 100% 100%;
  background-repeat: repeat;
  opacity: 0.9;
}

/* Starfield on dark sections only (not footer - footer gets gradient shine) */
#allopen-section::before,
#allin-local-section::before,
.pixel-game-section::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(1.5px 1.5px at 18% 25%, rgba(255,255,255,0.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 82% 70%, rgba(255,255,255,0.4) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 55% 45%, rgba(255,255,255,0.35) 0%, transparent 100%),
    radial-gradient(1px 1px at 35% 82%, rgba(255,255,255,0.4) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 68% 18%, rgba(255,255,255,0.45) 0%, transparent 100%);
  background-size: 100% 100%;
  opacity: 0.5;
  z-index: 0;
}

#allopen-section,
#allin-local-section,
.pixel-game-section {
  position: relative;
}

#allopen-section > .container,
#allin-local-section > .container,
.pixel-game-section > .container {
  position: relative;
  z-index: 1;
}

/* ---------- Body & base: light default (all pages), dark + starfield on index only ---------- */
/* Prevent index (and all pages) from expanding past viewport – no black bar on right */
html {
  overflow-x: hidden !important;
  max-width: 100% !important;
}

body {
  background: #f0f4f8 !important;
  font-family: 'Google Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  color: #1a1a1a !important;
  overflow-x: hidden !important;
  max-width: 100% !important;
}

body.index-page {
  background: #0a0a0a !important;
  color: #fff !important;
}

body::before {
  display: none !important;
}

/* ---------- Navbar: same on index, about, career, contact (no shrinking on index) ---------- */
.custom-navbar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 1000 !important;
  background: rgba(255, 255, 255, 0.96) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
  backdrop-filter: blur(12px);
  padding: 1.1rem 0 !important;
  width: 100% !important;
}
.custom-navbar .container {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  max-width: 1140px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 1rem !important;
  padding-right: 1rem !important;
  width: 100% !important;
}
.custom-navbar .navbar-brand.logo {
  font-size: 1.35rem !important;
  font-weight: 600 !important;
}

.custom-navbar:hover {
  background: rgba(255, 255, 255, 0.98) !important;
  box-shadow: 0 1px 0 rgba(0,0,0,0.06) !important;
}

.custom-navbar .logo {
  color: #1a1a1a !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  -webkit-text-fill-color: #1a1a1a !important;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.custom-navbar .logo::after {
  background: linear-gradient(90deg, transparent, #1a1a1a, transparent) !important;
}

.navbar-links li a {
  font-size: 1rem !important;
  color: rgba(0, 0, 0, 0.75) !important;
}

.navbar-links li a:hover,
.navbar-links li a.active {
  color: #1a1a1a !important;
  text-shadow: none !important;
}

.navbar-links li a::before {
  background: linear-gradient(90deg, transparent, #1a1a1a, transparent) !important;
}

.navbar-links li a::after {
  background: linear-gradient(90deg, #1a1a1a, #333) !important;
}

.burger span {
  background: rgba(0, 0, 0, 0.8) !important;
  box-shadow: none !important;
}

.burger.active span {
  background: #1a1a1a !important;
}

.custom-navbar .dropdown-menu {
  background: rgba(255, 255, 255, 0.98) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

.custom-navbar .dropdown-item {
  color: rgba(0, 0, 0, 0.85) !important;
}

.custom-navbar .dropdown-item:hover {
  background: rgba(0, 0, 0, 0.06) !important;
  color: #1a1a1a !important;
}

/* Mobile navbar: same placement on index, about, career, contact (burger not shifted right) */
@media (max-width: 900px) {
  .custom-navbar .container {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    box-sizing: border-box !important;
  }
  .custom-navbar .navbar-brand.logo {
    flex-shrink: 0 !important;
    margin-right: 0.5rem !important;
  }
  .burger {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    width: 32px !important;
    height: 32px !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    padding-right: 0 !important;
    cursor: pointer !important;
    z-index: 1100 !important;
  }
  /* Index: navbar horizontal padding so burger is not touching right edge (match other pages) */
  body.index-page .custom-navbar {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  body.index-page .custom-navbar .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* ---------- Cards/boxes: darker borders so container is visible ---------- */
/* (Container = card/box borders; no change to .container wrapper) */

/* ---------- Hero: full-height dark + Allpixel retro canvas ---------- */
.hero.custom-hero-section {
  background: #000000 !important;
  min-height: 100vh;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 120px 0 0 !important;
  padding-bottom: 0 !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: inset 0 0 120px 60px rgba(0, 0, 0, 0.25) !important;
}

/* CRT scanline overlay – retro video-game vibe (Allpixel signature) */
.hero.custom-hero-section::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background: repeating-linear-gradient(
    0deg,
    transparent 0px,
    transparent 1px,
    rgba(0, 0, 0, 0.12) 1px,
    rgba(0, 0, 0, 0.12) 2px
  ) !important;
  opacity: 0.7 !important;
}

.hero.custom-hero-section::after {
  background: none !important;
}

/* Chunky pixel canvas – crisp 8-bit look */
.pixel-grid-canvas {
  opacity: 0.9 !important;
  image-rendering: pixelated !important;
  image-rendering: crisp-edges !important;
  -moz-image-rendering: crisp-edges !important;
}

.hero-content h1,
.hero-content h1 .display-5 {
  font-size: clamp(2.5rem, 5.5vw, 4.5rem) !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  -webkit-text-fill-color: #ffffff !important;
  letter-spacing: -0.03em !important;
  line-height: 1.15 !important;
  text-shadow: none !important;
}

.hero-content h1 span#typewriter-text {
  color: rgba(255, 255, 255, 0.92) !important;
  font-size: clamp(1.75rem, 4vw, 2.5rem) !important;
  font-weight: 500 !important;
  display: inline-block;
  min-height: 1.2em;
}

/* Hero typewriter blinking cursor (hidden when .typewriter-done) */
#typewriter-text::after {
  content: '|';
  color: rgba(255, 255, 255, 0.9);
  font-weight: 300;
  margin-left: 2px;
  animation: typewriter-blink 0.7s step-end infinite;
}

#typewriter-text.typewriter-done::after {
  content: none;
}

@keyframes typewriter-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* Scroll-triggered typewriter-like reveal for section headings */
.typewriter-reveal {
  overflow: hidden;
  display: inline-block;
  white-space: nowrap;
  border-right: 2px solid currentColor;
  animation: typewriter-reveal 0.8s steps(40, end) forwards;
  max-width: 100%;
}

.typewriter-reveal.done {
  border-right: none;
  white-space: normal;
}

@keyframes typewriter-reveal {
  from { width: 0; opacity: 0.6; }
  to { width: 100%; opacity: 1; }
}

.hero-content .lead {
  color: rgba(255, 255, 255, 0.75) !important;
  font-size: 1.35rem !important;
  font-weight: 400 !important;
  text-shadow: none !important;
}

/* Hero buttons: clean primary + outline */
.hero-button.modern-tech-btn.cursor-style-btn {
  background: #1a1a1a !important;
  border: 1px solid #000000 !important;
  color: #ffffff !important;
  border-radius: 999px !important;
  padding: 0.6rem 1.35rem !important;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
  letter-spacing: 0.01em !important;
  box-shadow: none !important;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease !important;
}

.hero-button.modern-tech-btn.cursor-style-btn:hover {
  background: #000000 !important;
  color: #ffffff !important;
  border-color: #000000 !important;
  transform: translateY(-1px) !important;
  box-shadow: none !important;
}

.hero-button.modern-tech-btn.cursor-style-btn:active {
  transform: translateY(0) !important;
}

.hero-button.modern-tech-btn.cursor-style-btn::before {
  display: none !important;
}

.hero-button.modern-tech-btn.cursor-style-btn .btn-logo {
  filter: brightness(0) invert(1) !important;
}

.hero-button.join-team-btn {
  background: #ffffff !important;
  border: 1px solid #000000 !important;
  color: #000000 !important;
  border-radius: 999px !important;
  padding: 0.6rem 1.35rem !important;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease !important;
}

.hero-button.join-team-btn:hover {
  background: #f0f0f0 !important;
  border-color: #000000 !important;
  color: #000000 !important;
}

.btn-logo {
  filter: none !important;
}

/* ---------- Section alternation: default light bg + dark text, dark sections override ---------- */
/* Default: all sections light background and dark text (fixes invisible text on dark) */
section {
  background: #ffffff !important;
  color: #1a1a1a !important;
}

section .display-5,
section h2,
section .lead,
section .fw-bold {
  color: #1a1a1a !important;
}

section p.lead,
section .lead {
  color: rgba(0, 0, 0, 0.75) !important;
}

#our-products-section {
  background: #ffffff !important;
  color: #1a1a1a !important;
}

/* Override inline white text on light Our Products section */
#our-products-section h2,
#our-products-section h2.fw-bold {
  color: #1a1a1a !important;
}

#our-products-section p {
  color: rgba(0, 0, 0, 0.75) !important;
}

#our-products-section div[style*="width: 60px"] {
  background: linear-gradient(90deg, #2563eb, #3b82f6) !important;
}

/* Product sections: keep light */
#allinvoice-section,
#alltask-section,
#allin-details-section,
#features-section {
  background: #ffffff !important;
}

#allinvoice-section .section-header h2,
#allinvoice-section .section-header .lead,
#alltask-section .section-header h2,
#alltask-section .section-header .lead {
  color: #1a1a1a !important;
}

#allinvoice-section .section-header .lead,
#alltask-section .section-header .lead {
  color: rgba(0, 0, 0, 0.7) !important;
}

/* Dark starfield sections: override to dark bg + white text */
#allopen-section,
#allin-local-section {
  background: #0a0a0a !important;
  color: #ffffff !important;
}

#allopen-section .section-header h2,
#allin-local-section .section-header h2,
#allopen-section .display-5,
#allin-local-section .display-5,
#allopen-section h2,
#allin-local-section h2 {
  color: #ffffff !important;
}

#allopen-section .section-header .lead,
#allin-local-section .section-header .lead,
#allopen-section .lead,
#allin-local-section .lead {
  color: rgba(255, 255, 255, 0.8) !important;
}

/* Allin Platform & Features: ensure light + dark text */
#allin-details-section h2,
#allin-details-section .lead,
#features-section h2,
#features-section .lead,
#features-section .features-header-wrapper h2,
#features-section .features-header-wrapper .lead {
  color: #1a1a1a !important;
}

#allin-details-section .lead,
#features-section .lead {
  color: rgba(0, 0, 0, 0.75) !important;
}

/* Features section: force light background and dark text everywhere (overrides base dark cards) */
#features-section {
  background: #ffffff !important;
}

#features-section .features-header-wrapper .lead,
#features-section p.lead,
#features-section .lead {
  color: #333333 !important;
  font-size: 1.15rem !important;
}

#features-section .tech-card {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.2) !important;
  border-radius: 16px !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important;
}

#features-section .tech-card h3,
#features-section .tech-card h4,
#features-section .tech-card p {
  color: #1a1a1a !important;
}

/* Feature badges: light inner area and dark text (override base dark ::after) */
#features-section .tech-badge,
#features-section .tech-badge[data-feature="all-internet"],
#features-section .tech-badge[data-feature="all-text"],
#features-section .tech-badge[data-feature="future-ready"] {
  background: #f0f4f8 !important;
  color: #1a1a1a !important;
  border: 1px solid rgba(0, 242, 254, 0.25) !important;
}

#features-section .tech-badge[data-feature="all-internet"]::after,
#features-section .tech-badge[data-feature="all-text"]::after,
#features-section .tech-badge[data-feature="future-ready"]::after {
  background: #f0f4f8 !important;
  border-radius: 10px !important;
}

#features-section .tech-badge[data-feature="all-internet"]::before,
#features-section .tech-badge[data-feature="all-text"]::before,
#features-section .tech-badge[data-feature="future-ready"]::before {
  background: linear-gradient(90deg, #2563eb, #3b82f6) !important;
  background-size: 200% 100% !important;
  opacity: 0.6 !important;
}

#features-section .features-title-divider {
  background: linear-gradient(90deg, #2563eb, #3b82f6) !important;
}

/* Feature cards: subtle hover lift and icon animation */
#features-section .tech-card {
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease !important;
}

#features-section .tech-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.1) !important;
}

#features-section .feature-icon {
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

#features-section .tech-card:hover .feature-icon {
  transform: scale(1.08) !important;
}

/* ---------- Scroll-triggered reveal animations (Antigravity-style) ---------- */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-on-scroll.reveal-in {
  opacity: 1;
  transform: translateY(0);
}

.reveal-on-scroll.reveal-stagger-1 { transition-delay: 0.05s; }
.reveal-on-scroll.reveal-stagger-2 { transition-delay: 0.15s; }
.reveal-on-scroll.reveal-stagger-3 { transition-delay: 0.25s; }
.reveal-on-scroll.reveal-stagger-4 { transition-delay: 0.35s; }
.reveal-on-scroll.reveal-stagger-5 { transition-delay: 0.45s; }

.reveal-scale {
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1), transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-scale.reveal-in {
  opacity: 1;
  transform: scale(1);
}

/* Why Allin? – alternating left/right slide-in */
.reveal-from-left {
  opacity: 0;
  transform: translateX(-70px);
  transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1), transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-from-left.reveal-in {
  opacity: 1;
  transform: translateX(0);
}

.reveal-from-right {
  opacity: 0;
  transform: translateX(70px);
  transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1), transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-from-right.reveal-in {
  opacity: 1;
  transform: translateX(0);
}

/* Why Allin blocks: bigger containers, alternating layout */
#features-section .container {
  max-width: 1000px !important;
}

.why-allin-blocks {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.why-allin-block {
  width: 100%;
}

.why-allin-inner {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.2) !important;
  border-radius: 18px !important;
  padding: 2.5rem 2.75rem !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06) !important;
  display: flex;
  align-items: flex-start;
  gap: 1.75rem;
  text-align: left;
  transition: box-shadow 0.3s ease !important;
}

.why-allin-inner:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important;
}

.why-allin-icon {
  flex-shrink: 0;
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(0, 242, 254, 0.15) 0%, rgba(79, 172, 254, 0.15) 100%);
  border-radius: 20px;
}

.why-allin-icon .feature-icon {
  width: 58px;
  height: 58px;
  object-fit: contain;
}

.why-allin-title {
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  color: #1a1a1a !important;
  margin: 0 0 0.5rem 0 !important;
}

.why-allin-desc {
  font-size: 1.0625rem !important;
  line-height: 1.65 !important;
  color: #333 !important;
  margin: 0 !important;
}

/* Product sections: reduce space between header and slogan, and between header and boxes */
.product-section .section-header {
  margin-bottom: 0.75rem !important;
}

.product-section .section-header h2,
.product-section .section-header .display-5 {
  margin-bottom: 0.25rem !important;
}

.product-section .section-header .lead {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.product-section .allopen-boxes-container,
.allopen-boxes-container.product-boxes-center {
  margin-top: 0 !important;
  padding-top: 0 !important;
  padding: 0 1rem 1.25rem 1rem !important;
}

.product-section {
  padding-top: 1.75rem !important;
  padding-bottom: 1.75rem !important;
}

/* Contact & form sections: covered by default section rule (light bg, dark text) */

/* Tech cards on light sections: clean bordered boxes, darker border */
#allin-details-section > .container > .tech-card {
  background: linear-gradient(145deg, #f8f9fa, #fff) !important;
  border: 1px solid rgba(0, 0, 0, 0.2) !important;
  border-radius: 20px !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.06) !important;
}

#allin-details-section > .container > .tech-card h3,
#allin-details-section > .container > .tech-card h4,
#allin-details-section > .container > .tech-card p,
#allin-details-section > .container > .tech-card li {
  color: #1a1a1a !important;
}

#allin-details-section > .container > .tech-card::before {
  display: none !important;
}

/* Allin Platform: restructured section – header, hero block, feature cards */
.allin-platform-section {
  padding-top: 4rem !important;
  padding-bottom: 4rem !important;
}

.allin-platform-header .display-5 {
  letter-spacing: -0.02em !important;
  color: #1a1a1a !important;
}

.allin-platform-tagline {
  font-size: 1.2rem !important;
  color: rgba(0, 0, 0, 0.75) !important;
  max-width: 640px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-top: 0.75rem !important;
}

/* Hero block: copy + video – one clear area, not a heavy card */
.allin-platform-hero {
  background: #f8fafc !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-radius: 20px !important;
  padding: 2.5rem 2rem !important;
  margin-bottom: 2.5rem !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

.allin-platform-copy {
  padding: 0.5rem 0 !important;
}

.allin-platform-title {
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  color: #1a1a1a !important;
  margin-bottom: 1rem !important;
  letter-spacing: -0.01em !important;
}

.allin-platform-desc {
  font-size: 1.05rem !important;
  line-height: 1.65 !important;
  color: rgba(0, 0, 0, 0.8) !important;
  margin-bottom: 1.5rem !important;
}

.allin-platform-cta {
  margin-top: 0.5rem !important;
}

.allin-platform-video-wrap {
  border-radius: 16px !important;
  overflow: hidden !important;
  background: #000 !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12) !important;
}

.allin-platform-video-wrap video {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  object-fit: cover !important;
}

/* Feature cards: minimal, clean list boxes */
.allin-platform-features {
  margin-top: 0 !important;
}

.allin-feature-card {
  background: #fff !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  border-radius: 16px !important;
  padding: 1.75rem 1.5rem !important;
  height: 100% !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04) !important;
  transition: box-shadow 0.25s ease, border-color 0.25s ease !important;
}

.allin-feature-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06) !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
}

.allin-feature-card-title {
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  color: #1a1a1a !important;
  margin-bottom: 1rem !important;
  padding-bottom: 0.6rem !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
}

.allin-feature-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.allin-feature-list li {
  color: #333 !important;
  font-size: 0.9375rem !important;
  line-height: 1.6 !important;
  padding: 0.4rem 0 !important;
  padding-left: 1.25rem !important;
  position: relative !important;
}

.allin-feature-list li::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 0.65em !important;
  width: 6px !important;
  height: 6px !important;
  background: #2563eb !important;
  border-radius: 50% !important;
}

#allin-details-section .tech-button {
  background: #1a1a1a !important;
  color: #fff !important;
  border: 1px solid #000000 !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
  padding: 0.55rem 1.2rem !important;
  font-size: 0.875rem !important;
  transition: background 0.2s ease, transform 0.15s ease !important;
}
#allin-details-section .tech-button:hover {
  background: #000000 !important;
  color: #fff !important;
  border-color: #000000 !important;
  transform: translateY(-1px) !important;
}

/* Product boxes (allopen-box): Antigravity-style cards */
.allopen-box {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 16px !important;
  backdrop-filter: blur(8px);
}

#allinvoice-section .allopen-box,
#alltask-section .allopen-box,
.hindi-technology-section .allopen-box {
  background: #f8f9fa !important;
  border: 1px solid rgba(0, 0, 0, 0.2) !important;
}

#allinvoice-section .allopen-box-title,
#allinvoice-section .allopen-box-desc,
#alltask-section .allopen-box-title,
#alltask-section .allopen-box-desc,
.hindi-technology-section .allopen-box-title,
.hindi-technology-section .allopen-box-desc {
  color: #1a1a1a !important;
}

#allinvoice-section .allopen-box-desc,
#alltask-section .allopen-box-desc {
  color: rgba(0, 0, 0, 0.7) !important;
}

/* AllTask / product content sections: force dark text (override inline white/cyan) */
#description-section,
#description-section .tech-card {
  background: #fff !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
}
#description-section .display-5,
#description-section .lead,
#description-section h2,
#description-section p,
#description-section li,
#description-section div,
#description-section ol li,
#description-section .tech-card p,
#description-section .tech-card li,
#description-section .tech-card div {
  color: #1a1a1a !important;
}
#description-section h3,
#description-section h4,
#description-section .tech-card h3,
#description-section .tech-card h4 {
  color: #2563eb !important;
}
#description-section .fa-check-circle,
#description-section .tech-card .fas {
  color: #2563eb !important;
}
/* Remove text shadow on product page text (AllinLocal, AllTask) */
#description-section,
#description-section p,
#description-section .product-page-intro,
#description-section .tech-card p,
#description-section .tech-card h3,
#description-section .tech-card h4,
.product-page-intro,
.product-page-cta-title,
.product-page-cta-desc,
.product-page-cta p,
.product-page-cta h3 {
  text-shadow: none !important;
}
section.py-5 .tech-card p,
section.py-5 .tech-card h3,
section.py-5 .tech-card h4,
section.py-5 .tech-card li,
section.py-5 .tech-card div,
section.py-5 .tech-card ol li {
  color: #1a1a1a !important;
}
section.py-5 .tech-card h3,
section.py-5 .tech-card h4 {
  color: #2563eb !important;
}
section.py-5 .tech-card .fas {
  color: #2563eb !important;
}

/* Product pages (AllinLocal, AllTask): Antigravity-style – light containers, simple motion */
.product-page-main,
.product-page-cta {
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease !important;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.04) !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
}
.product-page-main.reveal-in,
.product-page-cta.reveal-in {
  transform: translateX(0);
}
.product-page-cta {
  border-left: 4px solid #1a1a1a !important;
  background: #fff !important;
  border-radius: 14px !important;
}
.product-page-card {
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease !important;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.04) !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
}
.product-page-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06) !important;
}
/* Ensure product page cards stay light (override .tech-card) */
#description-section .tech-card.product-page-main,
#description-section .tech-card.product-page-card {
  border-color: rgba(0, 0, 0, 0.06) !important;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.04) !important;
}
#description-section .tech-card.product-page-card {
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.04) !important;
}
.product-page-screenshot {
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
.product-page-main:hover .product-page-screenshot {
  transform: scale(1.02) !important;
}
.product-page-intro,
.product-page-cta-desc {
  color: #1a1a1a !important;
  font-size: 1.05rem !important;
  line-height: 1.65 !important;
  margin: 1rem 0 0 !important;
  text-shadow: none !important;
}
/* AllinLocal: intro text clearly below mobile screenshot (no overlap) */
#description-section .product-page-intro {
  margin-top: 1.75rem !important;
}
@media (max-width: 991px) {
  #description-section .product-page-intro {
    margin-top: 2rem !important;
  }
}
.product-page-cta-title {
  color: #1a1a1a !important;
  font-size: 1.2rem !important;
  font-weight: 700 !important;
  margin: 0 0 0.5rem !important;
  text-shadow: none !important;
}
.product-page-cta-desc {
  margin: 0 !important;
  color: rgba(0, 0, 0, 0.72) !important;
  text-shadow: none !important;
}
/* Spacing between CTA text and buttons (e.g. Download AllTask) */
.product-page-cta-buttons {
  margin-top: 1.25rem !important;
}
.product-page-main .tech-card,
#description-section .tech-card {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
}
.product-page-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 1rem 0 0 !important;
  color: #1a1a1a !important;
}
.product-page-list li {
  padding: 0.35rem 0 !important;
  padding-left: 1.25rem !important;
  position: relative !important;
  color: #1a1a1a !important;
}
.product-page-list li::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 0.65em !important;
  width: 6px !important;
  height: 6px !important;
  background: #2563eb !important;
  border-radius: 50% !important;
}

/* Single button direct in box (e.g. Allinvoice): center like product-buttons */
.allopen-box > a.allopen-box-btn,
.allopen-box > .allopen-box-btn {
  align-self: center !important;
}

.allopen-box-btn {
  background: #1a1a1a !important;
  color: #ffffff !important;
  border: 1px solid #000000 !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
  padding: 0.55rem 1.2rem !important;
  font-size: 0.875rem !important;
  letter-spacing: 0.01em !important;
  box-shadow: none !important;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
}

.allopen-box-btn:hover {
  background: #000000 !important;
  color: #ffffff !important;
  border-color: #000000 !important;
  transform: translateY(-1px) !important;
  box-shadow: none !important;
}

/* Dark sections: keep white text on product boxes */
#allopen-section .allopen-box,
#allin-local-section .allopen-box {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

#allopen-section .allopen-box-title,
#allopen-section .allopen-box-desc,
#allin-local-section .allopen-box-title,
#allin-local-section .allopen-box-desc,
#allin-local-section .allopen-box li {
  color: rgba(255, 255, 255, 0.9) !important;
}

#allopen-section .allopen-box-btn,
#allin-local-section .allopen-box-btn {
  background: #ffffff !important;
  color: #000000 !important;
  border: 1px solid #000000 !important;
  box-shadow: none !important;
}

#allopen-section .allopen-box-btn:hover,
#allin-local-section .allopen-box-btn:hover {
  background: #f0f0f0 !important;
  color: #000000 !important;
  border-color: #000000 !important;
}

/* App store pairs site-wide: one filled (btn-app), one outline (btn-play) */
.allopen-box-btn.btn-app {
  background: #1a1a1a !important;
  color: #ffffff !important;
  border: 1px solid #000000 !important;
}
.allopen-box-btn.btn-app:hover {
  background: #000000 !important;
  color: #ffffff !important;
  border-color: #000000 !important;
}
.allopen-box-btn.btn-play {
  background: #ffffff !important;
  color: #000000 !important;
  border: 1px solid #000000 !important;
}
.allopen-box-btn.btn-play:hover {
  background: #f5f5f5 !important;
  color: #000000 !important;
  border-color: #000000 !important;
}
/* Dark sections: primary (btn-app) stays filled white, secondary (btn-play) outline */
#allopen-section .allopen-box-btn.btn-app,
#allin-local-section .allopen-box-btn.btn-app {
  background: #ffffff !important;
  color: #000000 !important;
  border: 1px solid #000000 !important;
}
#allopen-section .allopen-box-btn.btn-app:hover,
#allin-local-section .allopen-box-btn.btn-app:hover {
  background: #f0f0f0 !important;
  color: #000000 !important;
  border-color: #000000 !important;
}
#allopen-section .allopen-box-btn.btn-play,
#allin-local-section .allopen-box-btn.btn-play {
  background: transparent !important;
  color: rgba(255, 255, 255, 0.95) !important;
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
}
#allopen-section .allopen-box-btn.btn-play:hover,
#allin-local-section .allopen-box-btn.btn-play:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.6) !important;
}

/* Contact cards & form: darker border so container visible */
.tech-card {
  background: #f8f9fa !important;
  border: 1px solid rgba(0, 0, 0, 0.22) !important;
  border-radius: 16px !important;
  box-shadow: 0 2px 16px rgba(0,0,0,0.06) !important;
}

.tech-card h3,
.tech-card h4 {
  color: #1a1a1a !important;
  text-shadow: none !important;
}

.tech-card p {
  color: rgba(0, 0, 0, 0.8) !important;
  text-shadow: none !important;
}

/* Buttons: black & white with border, pill-shaped – site-wide (slightly larger tap targets) */
.tech-button {
  background: #1a1a1a !important;
  color: #ffffff !important;
  border: 1px solid #000000 !important;
  border-radius: 999px !important;
  padding: 0.55rem 1.2rem !important;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
  letter-spacing: 0.01em !important;
  box-shadow: none !important;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
}

.tech-button::before,
.tech-button::after {
  display: none !important;
}

.tech-button:hover {
  background: #000000 !important;
  color: #ffffff !important;
  border-color: #000000 !important;
  transform: translateY(-1px) !important;
  box-shadow: none !important;
}

.tech-button:active {
  transform: translateY(0) !important;
}

.tech-button a {
  color: inherit !important;
}

/* Outline variant: white bg, black text, black border */
.tech-button.btn-play,
.btn-play {
  background: #ffffff !important;
  color: #000000 !important;
  border: 1px solid #000000 !important;
  box-shadow: none !important;
}
.tech-button.btn-play:hover,
.btn-play:hover {
  background: #f5f5f5 !important;
  color: #000000 !important;
  border-color: #000000 !important;
}
.tech-button.btn-app,
.btn-app {
  background: #1a1a1a !important;
  color: #ffffff !important;
  border: 1px solid #000000 !important;
  box-shadow: none !important;
}
.tech-button.btn-app:hover,
.btn-app:hover {
  background: #000000 !important;
  color: #ffffff !important;
  border-color: #000000 !important;
}

/* Form inputs */
.form-control {
  background: #fff !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  color: #1a1a1a !important;
  border-radius: 12px !important;
}

.form-control:focus {
  border-color: #0f172a !important;
  box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.15) !important;
}

.form-label {
  color: #1a1a1a !important;
}

/* Section divider */
.section-divider {
  background: linear-gradient(90deg, transparent, rgba(0,0,0,0.08), transparent) !important;
}

/* Pixel game section: dark with stars (override default section light bg) */
.pixel-game-section {
  background: #0a0a0a !important;
  color: #ffffff !important;
}

.pixel-game-title {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: none !important;
}

.pixel-game-subtitle {
  color: rgba(255, 255, 255, 0.75) !important;
}

/* Allow vertical scroll over game when not playing (JS only preventDefault when playing) */
#pixelGameCanvas {
  touch-action: pan-y !important;
  image-rendering: pixelated !important;
  image-rendering: crisp-edges !important;
}

/* Light CRT scanlines on game section – same retro vibe as hero */
.pixel-game-section .pixel-game-container {
  position: relative;
}
.pixel-game-section .pixel-game-container::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent 0px,
    transparent 1px,
    rgba(0, 0, 0, 0.08) 1px,
    rgba(0, 0, 0, 0.08) 2px
  );
  border-radius: inherit;
}

/* Reduce space above footer: tighter section bottom + footer top */
section.py-5 {
  padding-bottom: 1.75rem !important;
}
.section-divider {
  margin: 0 !important;
  height: 1px !important;
  min-height: 1px !important;
  padding: 0 !important;
}

/* Footer: dark + restore gradient shine, less top padding */
footer {
  background: #0a0a0a !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  position: relative !important;
  overflow: hidden !important;
  padding: 2rem 0 1.5rem !important;
}

footer::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background:
    radial-gradient(circle at 0% 0%, rgba(124, 58, 237, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 100% 100%, rgba(0, 242, 254, 0.1) 0%, transparent 50%) !important;
  opacity: 0.5 !important;
  transform: translateX(-50%) skewX(-20deg) !important;
  animation: footerShine 8s linear infinite !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

@keyframes footerShine {
  0% { opacity: 0.5; }
  50% { opacity: 1; }
  100% { opacity: 0.5; }
}

footer > .container {
  position: relative !important;
  z-index: 1 !important;
}

footer h4 {
  color: #fff !important;
}

footer a {
  color: rgba(255, 255, 255, 0.85) !important;
}

footer a:hover {
  color: #2563eb !important;
  opacity: 1 !important;
}

footer a::after {
  background: #2563eb !important;
}

footer .text-center p {
  color: rgba(255, 255, 255, 0.7) !important;
}

.social-icon {
  color: rgba(255, 255, 255, 0.85) !important;
}

.social-icon:hover {
  color: #2563eb !important;
}

/* Modals */
.allopen-alert-content {
  background: #1a1a1a !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 16px !important;
}

.allopen-alert-btn {
  background: #1a1a1a !important;
  color: #fff !important;
  border: 1px solid #000000 !important;
  border-radius: 999px !important;
  padding: 0.55rem 1.2rem !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  transition: background 0.2s ease, transform 0.15s ease !important;
}
.allopen-alert-btn:hover {
  background: #000000 !important;
  color: #fff !important;
  border-color: #000000 !important;
  transform: translateY(-1px) !important;
}

/* ---------- Antigravity-style alerts & buttons (site-wide) ---------- */
@keyframes antigravity-modal-in {
  from {
    opacity: 0;
    transform: scale(0.88) translateY(24px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}
@keyframes antigravity-modal-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
@keyframes antigravity-btn-glow {
  0%, 100% {
    box-shadow: 0 0 12px rgba(0, 242, 254, 0.4), 0 0 24px rgba(124, 58, 237, 0.25);
  }
  50% {
    box-shadow: 0 0 20px rgba(0, 242, 254, 0.6), 0 0 36px rgba(124, 58, 237, 0.35);
  }
}
@keyframes antigravity-backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Modal backdrop: smooth fade (Bootstrap adds .modal-backdrop) */
.modal-backdrop.show {
  animation: antigravity-backdrop-in 0.25s ease-out !important;
}

/* Thank-you / success modals: gradient border, bounce-in + subtle float */
#thankYouModal .modal-dialog {
  animation: antigravity-modal-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards !important;
}
#thankYouModal .modal-content {
  background: #0f0f0f !important;
  border: none !important;
  border-radius: 16px !important;
  box-shadow: 0 0 0 2px #0f0f0f, 0 25px 50px -12px rgba(0, 0, 0, 0.6) !important;
  background-clip: padding-box !important;
  position: relative !important;
  overflow: hidden !important;
  animation: antigravity-modal-float 3s ease-in-out infinite 0.5s !important;
}
#thankYouModal .modal-content::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 16px;
  padding: 2px;
  background: linear-gradient(135deg, #00f2fe, #4facfe, #7c3aed, #a855f7);
  -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: xor;
  mask-composite: exclude;
  pointer-events: none;
}
#thankYouModal .modal-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  padding: 1.25rem 1.5rem !important;
}
#thankYouModal .modal-title {
  color: #ffffff !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  width: 100% !important;
  text-align: center !important;
}
#thankYouModal .modal-title .fa-check-circle {
  color: #22c55e !important;
  font-size: 1.35rem !important;
}
#thankYouModal .modal-body {
  color: rgba(255, 255, 255, 0.9) !important;
  padding: 1.5rem 2rem !important;
}
#thankYouModal .modal-body p {
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: 1.05rem !important;
  margin: 0 !important;
}
#thankYouModal .modal-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  padding: 1rem 1.5rem 1.25rem !important;
  justify-content: center !important;
}
#thankYouModal .btn-close {
  filter: invert(1) !important;
  opacity: 0.8 !important;
}

/* Antigravity primary button: gradient border, glow on hover */
.antigravity-btn,
#thankYouModal .modal-footer .btn,
.tech-button.antigravity-btn {
  background: transparent !important;
  color: #ffffff !important;
  border: 2px solid transparent !important;
  border-radius: 999px !important;
  padding: 0.6rem 1.5rem !important;
  font-weight: 600 !important;
  font-size: 0.9375rem !important;
  position: relative !important;
  background-clip: padding-box !important;
  box-shadow: 0 0 12px rgba(0, 242, 254, 0.25), 0 0 24px rgba(124, 58, 237, 0.15) !important;
  transition: transform 0.2s ease, box-shadow 0.3s ease, color 0.2s ease !important;
}
.antigravity-btn::before,
#thankYouModal .modal-footer .btn::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 999px;
  padding: 2px;
  background: linear-gradient(135deg, #00f2fe, #4facfe, #7c3aed);
  -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: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.antigravity-btn:hover,
#thankYouModal .modal-footer .btn:hover {
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  animation: antigravity-btn-glow 1.5s ease-in-out infinite !important;
}
.antigravity-btn:active,
#thankYouModal .modal-footer .btn:active {
  transform: translateY(0) !important;
}

/* Delete account / light-background CTA: visible text on light cards */
.btn-deletion-cta,
.delete-account-page .tech-card .btn-primary.tech-button,
.delete-account-page .tech-card .antigravity-btn {
  background: linear-gradient(135deg, #0ea5e9, #6366f1) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(14, 165, 233, 0.4) !important;
}
.btn-deletion-cta::before,
.delete-account-page .tech-card .antigravity-btn::before {
  display: none !important;
}
.btn-deletion-cta:hover,
.delete-account-page .tech-card .btn-primary.tech-button:hover,
.delete-account-page .tech-card .antigravity-btn:hover {
  background: linear-gradient(135deg, #0284c7, #4f46e5) !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
}

/* Form submit (Send Message) – same antigravity style */
button.tech-button#contactSubmitBtn,
button#contactSubmitBtn.tech-button,
#contactForm .tech-button[type="submit"],
#contactForm button[type="submit"].tech-button {
  background: transparent !important;
  color: #1a1a1a !important;
  border: 2px solid transparent !important;
  border-radius: 999px !important;
  padding: 0.6rem 1.5rem !important;
  font-weight: 600 !important;
  position: relative !important;
  box-shadow: 0 0 12px rgba(0, 242, 254, 0.2), 0 0 24px rgba(124, 58, 237, 0.1) !important;
  transition: transform 0.2s ease, box-shadow 0.3s ease !important;
}
#contactForm button[type="submit"].tech-button::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 999px;
  padding: 2px;
  background: linear-gradient(135deg, #00f2fe, #4facfe, #7c3aed);
  -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: xor;
  mask-composite: exclude;
  pointer-events: none;
}
#contactForm button[type="submit"].tech-button:hover {
  transform: translateY(-2px) !important;
  animation: antigravity-btn-glow 1.5s ease-in-out infinite !important;
  color: #1a1a1a !important;
}

/* Allopen / product alert modals: bounce-in + gradient border + subtle float */
.allopen-alert-modal {
  opacity: 0;
  transition: opacity 0.25s ease-out !important;
}
.allopen-alert-modal.active,
.allopen-alert-modal.allopen-alert-modal-active {
  opacity: 1 !important;
}
.allopen-alert-modal.active .allopen-alert-content,
.allopen-alert-modal.allopen-alert-modal-active .allopen-alert-content {
  border: none !important;
  border-radius: 16px !important;
  box-shadow: 0 0 0 2px #1a1a1a, 0 25px 50px -12px rgba(0, 0, 0, 0.5) !important;
  animation: antigravity-modal-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
             antigravity-modal-float 3.5s ease-in-out infinite 0.5s !important;
}
.allopen-alert-modal .allopen-alert-content {
  position: relative !important;
}
.allopen-alert-modal .allopen-alert-content::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 16px;
  padding: 2px;
  background: linear-gradient(135deg, #00f2fe, #4facfe, #7c3aed);
  -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: xor;
  mask-composite: exclude;
  pointer-events: none;
}
/* Product alert buttons: gradient border + glow on hover (antigravity) */
.allopen-alert-btn {
  border: 2px solid transparent !important;
  background: rgba(26, 26, 26, 0.9) !important;
  color: #ffffff !important;
  position: relative !important;
  border-radius: 999px !important;
  padding: 0.6rem 1.25rem !important;
  font-weight: 600 !important;
  box-shadow: 0 0 10px rgba(0, 242, 254, 0.25) !important;
  transition: transform 0.2s ease, box-shadow 0.3s ease, color 0.2s ease !important;
}
.allopen-alert-btn::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 999px;
  padding: 2px;
  background: linear-gradient(135deg, #00f2fe, #4facfe, #7c3aed);
  -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: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.allopen-alert-btn:hover {
  transform: translateY(-2px) !important;
  animation: antigravity-btn-glow 1.5s ease-in-out infinite !important;
  color: #ffffff !important;
}

/* ---------- Responsive: thank-you modal & antigravity buttons ---------- */
@media (max-width: 768px) {
  #thankYouModal .modal-content {
    border-radius: 14px !important;
  }
  #thankYouModal .modal-header {
    padding: 1rem 1.25rem !important;
  }
  #thankYouModal .modal-title {
    font-size: 1.1rem !important;
  }
  #thankYouModal .modal-title .fa-check-circle {
    font-size: 1.2rem !important;
  }
  #thankYouModal .modal-body {
    padding: 1.25rem 1.5rem !important;
  }
  #thankYouModal .modal-body p {
    font-size: 1rem !important;
  }
  #thankYouModal .modal-footer {
    padding: 0.75rem 1.25rem 1rem !important;
  }
  .antigravity-btn,
  #thankYouModal .modal-footer .btn,
  .allopen-alert-btn {
    padding: 0.55rem 1.25rem !important;
    font-size: 0.875rem !important;
  }
}

@media (max-width: 576px) {
  #thankYouModal .modal-dialog {
    margin: 0.5rem !important;
    max-width: calc(100% - 1rem) !important;
  }
  #thankYouModal .modal-content {
    border-radius: 12px !important;
  }
  #thankYouModal .modal-content::before {
    border-radius: 12px !important;
  }
  #thankYouModal .modal-header {
    padding: 0.875rem 1rem !important;
  }
  #thankYouModal .modal-title {
    font-size: 1rem !important;
  }
  #thankYouModal .modal-title .fa-check-circle {
    font-size: 1.1rem !important;
  }
  #thankYouModal .modal-body {
    padding: 1rem 1.25rem !important;
  }
  #thankYouModal .modal-body p {
    font-size: 0.9375rem !important;
  }
  #thankYouModal .modal-footer {
    padding: 0.75rem 1rem !important;
  }
  .antigravity-btn,
  #thankYouModal .modal-footer .btn {
    padding: 0.5rem 1.1rem !important;
    font-size: 0.8125rem !important;
  }
  .allopen-alert-btn {
    padding: 0.5rem 1rem !important;
    font-size: 0.8125rem !important;
  }
}

/* Hero CTAs (AllinLocal, AllTask, etc.): black & white with border */
.hero-cta-button {
  background: #1a1a1a !important;
  color: #ffffff !important;
  border: 1px solid #000000 !important;
  border-radius: 999px !important;
  padding: 0.6rem 1.25rem !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease !important;
}
.hero-cta-button:hover {
  background: #000000 !important;
  color: #ffffff !important;
  border-color: #000000 !important;
}
/* Hero CTA outline variant (e.g. Register as provider) */
.hero-cta-button[style*="background: rgba"],
a.hero-cta-button[href*="register"],
.hero-cta-button.hero-cta-white {
  background: #ffffff !important;
  color: #000000 !important;
  border: 1px solid #000000 !important;
}
.hero-cta-button[style*="background: rgba"]:hover,
a.hero-cta-button[href*="register"]:hover,
.hero-cta-button.hero-cta-white:hover {
  background: #f0f0f0 !important;
  color: #000000 !important;
  border-color: #000000 !important;
}
.hero-cta-button.hero-cta-white .allpixel-logo {
  filter: brightness(0) !important;
}

/* Rocket: hide on index for cleaner look, or keep - user said don't change other things so keep */
.rocket-container {
  opacity: 0.5;
}

/* Loading screen: match Antigravity dark */
.loading-screen {
  background: #0a0a0a !important;
}

.loading-content {
  color: rgba(255, 255, 255, 0.9) !important;
}

.loading-text {
  color: #fff !important;
}

.loading-subtext {
  color: rgba(255, 255, 255, 0.7) !important;
}

.loading-sign {
  color: #fff !important;
}

.loading-logo-img {
  filter: brightness(0) invert(1) !important;
}

/* ========== CONTRAST GUARANTEE: Light bg → dark text, Dark bg → light text ========== */
/* Light sections (white/off-white bg): force dark text */
#our-products-section,
#allinvoice-section,
#alltask-section,
#allin-details-section,
#features-section,
.hindi-technology-section,
section.py-5 {
  background: #ffffff !important;
}

#our-products-section *,
#allinvoice-section .section-header *,
#alltask-section .section-header *,
#allin-details-section h2, #allin-details-section .lead, #allin-details-section h3, #allin-details-section h4, #allin-details-section p, #allin-details-section li,
#features-section h2, #features-section .lead, #features-section .why-allin-title, #features-section .why-allin-desc,
.hindi-technology-section .hindi-tech-intro-title,
.hindi-technology-section .allopen-box-title,
.hindi-technology-section .allopen-box-desc,
section.py-5 .display-5, section.py-5 .lead, section.py-5 h2, section.py-5 h3, section.py-5 h4, section.py-5 p {
  color: #1a1a1a !important;
}

#allinvoice-section .section-header .lead,
#alltask-section .section-header .lead,
section.py-5 .lead,
.tech-card p,
.why-allin-desc {
  color: rgba(0, 0, 0, 0.75) !important;
}

/* Dark sections: force light text */
.hero, #allopen-section, #allin-local-section, .pixel-game-section, footer,
.allopen-alert-content, .allopen-alert-content h3, .allopen-alert-content p {
  color: #ffffff !important;
}

#allopen-section *, #allin-local-section * {
  color: inherit !important;
}

#allopen-section .section-header h2, #allopen-section .section-header .lead,
#allin-local-section .section-header h2, #allin-local-section .section-header .lead,
#allopen-section .allopen-box-title, #allopen-section .allopen-box-desc, #allopen-section .allopen-box li,
#allin-local-section .allopen-box-title, #allin-local-section .allopen-box-desc, #allin-local-section .allopen-box li {
  color: rgba(255, 255, 255, 0.9) !important;
}

/* ========== RESPONSIVE: all new CSS adapts to screen size ========== */

@media (max-width: 992px) {
  #features-section .container {
    max-width: 100% !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  .why-allin-inner {
    padding: 2rem 2rem !important;
  }
  .why-allin-title {
    font-size: 1.35rem !important;
  }
  .why-allin-desc {
    font-size: 1rem !important;
  }
  /* About: Our Creations – stack cards on tablet and below */
  #hindi-technology-section .allopen-boxes-container,
  #hindi-technology-section .container .allopen-boxes-container {
    display: grid !important;
    grid-template-columns: 1fr !important;
    max-width: 100% !important;
    gap: 1.25rem !important;
    padding: 0 1rem 1.5rem !important;
  }
  #hindi-technology-section .allopen-box {
    min-width: 0 !important;
  }
  #hindi-technology-section .container {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }
}

@media (max-width: 768px) {
  .hero-content h1 {
    font-size: 2.75rem !important;
  }
  .hero-content h1 span#typewriter-text {
    font-size: 1.85rem !important;
  }
  .hero-content .lead {
    font-size: 1.1rem !important;
  }
  .hero-button.modern-tech-btn.cursor-style-btn,
  .hero-button.join-team-btn {
    padding: 0.6rem 1.25rem !important;
    font-size: 0.875rem !important;
  }
  .custom-navbar .navbar-links.open {
    background: rgba(255, 255, 255, 0.98) !important;
    border-left: 1px solid rgba(0,0,0,0.08) !important;
  }
  .navbar-links li a {
    color: rgba(0, 0, 0, 0.85) !important;
  }
  /* Why Allin: stack icon above text, reduce padding */
  .why-allin-inner {
    flex-direction: column !important;
    padding: 1.5rem 1.25rem !important;
    border-radius: 14px !important;
  }
  .why-allin-blocks {
    gap: 1.25rem !important;
  }
  .why-allin-icon {
    width: 76px !important;
    height: 76px !important;
    border-radius: 16px !important;
  }
  .why-allin-icon .feature-icon {
    width: 44px !important;
    height: 44px !important;
  }
  .why-allin-title {
    font-size: 1.25rem !important;
  }
  .why-allin-desc {
    font-size: 0.9375rem !important;
    line-height: 1.6 !important;
  }
  /* Product sections: tighter on tablet */
  .product-section .section-header h2,
  .product-section .section-header .display-5 {
    font-size: 1.75rem !important;
  }
  .product-section .section-header .lead {
    font-size: 1rem !important;
  }
  .allopen-box {
    padding: 1.5rem !important;
  }
  .allopen-box-btn,
  .tech-button {
    padding: 0.55rem 1.15rem !important;
    font-size: 0.875rem !important;
  }
  .tech-card {
    padding: 1.5rem !important;
  }
  /* Allin Platform: reduce hero padding on tablet */
  .allin-platform-hero {
    padding: 1.75rem 1.25rem !important;
  }
  .allin-platform-title {
    font-size: 1.35rem !important;
  }
  .allin-platform-tagline {
    font-size: 1.1rem !important;
  }
  /* About: Our Creations – single column, comfortable padding on mobile */
  #hindi-technology-section .allopen-boxes-container,
  #hindi-technology-section .container .allopen-boxes-container {
    grid-template-columns: 1fr !important;
    max-width: 100% !important;
    padding: 0 0.75rem 1.25rem !important;
    gap: 1rem !important;
  }
  #hindi-technology-section .allopen-box {
    padding: 1.25rem 1rem !important;
  }
  #hindi-technology-section .hindi-tech-intro-title {
    font-size: 1.5rem !important;
    line-height: 1.3 !important;
  }
  #hindi-technology-section .allopen-box-title {
    font-size: 1.15rem !important;
  }
  #hindi-technology-section .allopen-box-desc {
    font-size: 0.9rem !important;
    line-height: 1.55 !important;
  }
  #hindi-technology-section .container {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }
  /* Reveal: smaller movement on mobile – animations work across breakpoints */
  .reveal-from-left {
    transform: translateX(-40px);
  }
  .reveal-from-right {
    transform: translateX(40px);
  }
  .reveal-on-scroll {
    transform: translateY(18px);
  }
}

@media (max-width: 576px) {
  .hero-content h1 {
    font-size: 2.25rem !important;
  }
  .hero-content h1 span#typewriter-text {
    font-size: 1.5rem !important;
  }
  .hero-content .lead {
    font-size: 1.1rem !important;
  }
  .hero-button.modern-tech-btn.cursor-style-btn,
  .hero-button.join-team-btn {
    padding: 0.55rem 1.1rem !important;
    font-size: 0.875rem !important;
    border-radius: 999px !important;
  }
  #features-section .container {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }
  .why-allin-inner {
    padding: 1.25rem 1rem !important;
    border-radius: 12px !important;
  }
  .why-allin-icon {
    width: 64px !important;
    height: 64px !important;
    border-radius: 14px !important;
  }
  .why-allin-icon .feature-icon {
    width: 38px !important;
    height: 38px !important;
  }
  .why-allin-title {
    font-size: 1.125rem !important;
  }
  .why-allin-desc {
    font-size: 0.875rem !important;
  }
  .product-section .section-header h2,
  .product-section .section-header .display-5 {
    font-size: 1.5rem !important;
  }
  .product-section .section-header .lead {
    font-size: 0.9375rem !important;
  }
  .allopen-box {
    padding: 1.25rem !important;
  }
  .allopen-box-title {
    font-size: 1.2rem !important;
  }
  .allopen-box-desc {
    font-size: 0.875rem !important;
  }
  .allopen-box-btn,
  .tech-button {
    padding: 0.5rem 1rem !important;
    font-size: 0.8125rem !important;
    border-radius: 999px !important;
  }
  .tech-card {
    padding: 1.25rem !important;
    border-radius: 12px !important;
  }
  .form-control {
    padding: 0.75rem 1rem !important;
    font-size: 0.9375rem !important;
  }
  footer .container {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }
  .allopen-alert-content {
    padding: 1.5rem 1.25rem !important;
    margin: 0 0.75rem !important;
  }
  .reveal-from-left {
    transform: translateX(-28px);
  }
  .reveal-from-right {
    transform: translateX(28px);
  }
  .reveal-on-scroll {
    transform: translateY(14px);
  }
  .allin-platform-hero {
    padding: 1.5rem 1rem !important;
    border-radius: 16px !important;
  }
  .allin-platform-title {
    font-size: 1.25rem !important;
  }
  .allin-platform-desc {
    font-size: 1rem !important;
  }
  .allin-feature-card {
    padding: 1.35rem 1.25rem !important;
  }
  /* About: Our Creations – extra small screens */
  #hindi-technology-section .allopen-boxes-container,
  #hindi-technology-section .container .allopen-boxes-container {
    padding: 0 0.5rem 1rem !important;
    gap: 0.875rem !important;
  }
  #hindi-technology-section .allopen-box {
    padding: 1rem 0.75rem !important;
  }
  #hindi-technology-section .hindi-tech-intro-title {
    font-size: 1.35rem !important;
  }
  #hindi-technology-section .allopen-box-title {
    font-size: 1.1rem !important;
  }
  #hindi-technology-section .allopen-box-desc {
    font-size: 0.875rem !important;
  }
}

/* ========== Override older CSS (style.css, modern.css, allin-hero.css) so theme wins ========== */
/* style.css uses a.allopen-box-btn, button.allopen-box-btn (higher specificity) – match and override */
a.allopen-box-btn,
button.allopen-box-btn {
  background: #1a1a1a !important;
  color: #ffffff !important;
  border: 1px solid #000000 !important;
  border-radius: 999px !important;
  padding: 0.55rem 1.2rem !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  box-shadow: none !important;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
  text-decoration: none !important;
}
a.allopen-box-btn:hover,
button.allopen-box-btn:hover {
  background: #000000 !important;
  color: #ffffff !important;
  border-color: #000000 !important;
  transform: translateY(-1px) !important;
  box-shadow: none !important;
}
/* Outline variant (btn-play) – override style.css for app store pairs */
a.allopen-box-btn.btn-play,
button.allopen-box-btn.btn-play {
  background: #ffffff !important;
  color: #000000 !important;
  border: 1px solid #000000 !important;
}
a.allopen-box-btn.btn-play:hover,
button.allopen-box-btn.btn-play:hover {
  background: #f5f5f5 !important;
  color: #000000 !important;
  border-color: #000000 !important;
}
#allopen-section a.allopen-box-btn.btn-play,
#allopen-section button.allopen-box-btn.btn-play,
#allin-local-section a.allopen-box-btn.btn-play,
#allin-local-section button.allopen-box-btn.btn-play {
  background: transparent !important;
  color: rgba(255, 255, 255, 0.95) !important;
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
}
#allopen-section a.allopen-box-btn.btn-play:hover,
#allopen-section button.allopen-box-btn.btn-play:hover,
#allin-local-section a.allopen-box-btn.btn-play:hover,
#allin-local-section button.allopen-box-btn.btn-play:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.6) !important;
}
#allopen-section a.allopen-box-btn.btn-app,
#allopen-section button.allopen-box-btn.btn-app,
#allin-local-section a.allopen-box-btn.btn-app,
#allin-local-section button.allopen-box-btn.btn-app {
  background: #ffffff !important;
  color: #000000 !important;
  border: 1px solid #000000 !important;
}
#allopen-section a.allopen-box-btn.btn-app:hover,
#allopen-section button.allopen-box-btn.btn-app:hover,
#allin-local-section a.allopen-box-btn.btn-app:hover,
#allin-local-section button.allopen-box-btn.btn-app:hover {
  background: #f0f0f0 !important;
  color: #000000 !important;
  border-color: #000000 !important;
}

/* modern.css .tech-button:hover transform – we load last, same specificity; ensure our transform wins */
.tech-button:hover {
  transform: translateY(-1px) !important;
}

/* allin-hero.css .hero-cta-button – same specificity, we load last; reassert theme */
.hero-cta-button {
  padding: 0.6rem 1.25rem !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  border-radius: 999px !important;
  background: #1a1a1a !important;
  color: #ffffff !important;
  border: 1px solid #000000 !important;
  box-shadow: none !important;
  min-height: unset !important;
}
.hero-cta-button:hover {
  transform: translateY(-1px) !important;
}

/* section.py-5 .tech-card from style.css – ensure product-page and light cards win where we theme them */
section.py-5 > .container > .tech-card.product-page-main,
section.py-5 > .container > .tech-card.product-page-cta,
#description-section .tech-card {
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.04) !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  background: #fff !important;
}

/* ========== RESPONSIVE: site-wide consistency (all pages) ========== */
/* Force single-column for all grid box layouts on tablet and mobile */
@media (max-width: 992px) {
  .allopen-boxes-container,
  .allopen-boxes-container.product-boxes-center,
  .allopen-boxes-container.two-columns,
  #allopen-section .allopen-boxes-container,
  #allin-local-section .allopen-boxes-container,
  #hindi-technology-section .allopen-boxes-container,
  .container .allopen-boxes-container,
  .product-section .allopen-boxes-container {
    display: grid !important;
    grid-template-columns: 1fr !important;
    max-width: 100% !important;
  }
  .allopen-box {
    min-width: 0 !important;
  }
}

/* Prevent overflow: images and media in cards */
img.mobile-screenshot,
.product-page-screenshot img,
.allopen-box img,
.tech-card img {
  max-width: 100% !important;
  height: auto !important;
}

/* Product logos on index: keep compact (don’t let responsive rule make them full-width) */
.product-logo-container .product-logo,
.allopen-box .product-logo {
  max-height: 68px !important;
  width: auto !important;
  max-width: 105px !important;
  height: auto !important;
}

/* Ensure form and content don't overflow on small screens */
@media (max-width: 768px) {
  .tech-card,
  .allopen-box {
    min-width: 0 !important;
  }
  .form-control,
  textarea.form-control {
    max-width: 100% !important;
  }
}