/* Import fonts first */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700;900&family=Inter+Display:wght@700;900&display=swap');

/* CSS Variables for Design Tokens */
:root {
  /* Colors */
  --primary-blue: rgb(0, 145, 248);
  --secondary-blue: rgb(75, 125, 246);
  --gradient-stop-1: rgb(0, 145, 248);
  --gradient-stop-2: rgb(203, 91, 243);
  --gradient-stop-3: rgb(242, 65, 109);
  --dark-text: rgb(28, 25, 23);
  --gray-text: rgb(122, 122, 122);
  --light-gray: rgba(0, 0, 0, 0.08);
  --white: rgb(255, 255, 255);
  
  /* Typography */
  --font-inter: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: "Inter Display", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  
  /* Spacing */
  --base-unit: 4px;
  
  /* Shadows */
  --shadow-xs: rgba(0, 0, 0, 0.05) 0px 2px 4px;
  --shadow-sm: rgba(0, 0, 0, 0.08) 0px 4px 8px;
  --shadow-md: rgba(0, 0, 0, 0.1) 0px 8px 16px;
  --shadow-lg: rgba(0, 0, 0, 0.15) 0px 12px 24px;
  --shadow-colored: rgba(0, 145, 248, 0.2) 0px 8px 24px;
}

/* Base Styles - Tailwind handles the reset, so we only need custom styles */

body {
  font-family: var(--font-inter);
  color: var(--dark-text);
  line-height: 1.5;
  background: #f8f6f2;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Utility Classes */
.font-inter { font-family: var(--font-inter); }
.font-display { font-family: var(--font-display); }
.text-dark-text { color: var(--dark-text); }

/* Responsive Utilities */
.desktop-only { display: block; }
.mobile-only { display: none; }

@media (max-width: 809px) {
  .desktop-only { display: none; }
  .mobile-only { display: block; }
}

/* Navigation Styles */




.nav-link {
  font-family: var(--font-inter);
  font-weight: 500;
  font-size: 15px;
  color: var(--dark-text);
  text-decoration: none;
  letter-spacing: -0.01em;
  line-height: 140%;
  transition: color 200ms ease;
}

.nav-link:hover {
  color: var(--primary-blue);
}

.nav-cta {
  max-width: 0;
  opacity: 0;
  transition: max-width 400ms cubic-bezier(0.4, 0, 0.2, 1),
              opacity 400ms ease,
              margin-left 400ms cubic-bezier(0.4, 0, 0.2, 1),
              margin-right 400ms cubic-bezier(0.4, 0, 0.2, 1);
  margin-left: 0;
  margin-right: -30px;
}

.nav-cta.visible {
  max-width: 200px; /* Slightly larger than button width to ensure no clipping */
  opacity: 1;
  margin-left: -20px;
  margin-right: 0; /* Remove negative margin when visible */
}

.nav-cta-button {
  height: 40px !important;
  font-size: 14px !important;
  padding: 10px 20px !important;
  transform: translateX(30px);
  transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-cta.visible .nav-cta-button {
  transform: translateX(0);
}


.menu-icon {
  width: 24px;
  height: 24px;
  stroke-width: 2px;
}

.mobile-cta-button {
  width: 200px;
  height: 48px;
  background: var(--dark-text);
  color: var(--white);
  border-radius: 200px;
  font-family: var(--font-inter);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  margin-top: 16px;
}

/* Hero Section */

.hero-card {
  /* Only keeping pseudo-elements for gradient effects */
}

.hero-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    /* Dot grid pattern */
    radial-gradient(circle at center, rgba(0, 0, 0, 0.04) 2px, transparent 2px),
    /* Top corner gradients */
    radial-gradient(circle 400px at top left, rgba(0, 153, 255, 0.25), transparent),
    radial-gradient(circle 350px at top right, rgba(203, 91, 243, 0.18), transparent);
  background-size:
    15px 15px, /* dot grid */
    100% 100%, 100% 100%; /* top corner gradients */
  pointer-events: none;
  z-index: 0;
}

.hero-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0, 145, 248, 0.2) 20%,
    rgba(203, 91, 243, 0.2) 50%,
    rgba(242, 65, 109, 0.2) 80%,
    transparent 100%
  );
  opacity: 0.5;
}

@media (max-width: 809px) {
  .hero-card::before {
    animation-duration: 25s;
  }
}

.hero-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  z-index: 1;
}

.hero-badge {
  width: auto;
  height: 32px;
  padding: 6px 16px;
  background: transparent;
  border: 1px solid transparent;
  background-image: linear-gradient(transparent, transparent),
                    linear-gradient(90deg, var(--gradient-stop-1), var(--gradient-stop-2));
  background-origin: border-box;
  background-clip: content-box, border-box;
  border-radius: 200px;
  font-family: var(--font-inter);
  font-weight: 600;
  font-size: 13px;
  background: linear-gradient(90deg, var(--gradient-stop-1), var(--gradient-stop-2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin-bottom: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.hero-badge::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 200px;
  padding: 1px;
  background: linear-gradient(90deg, var(--gradient-stop-1), var(--gradient-stop-2));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.hero-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 72px;
  line-height: 105%;
  letter-spacing: -0.02em;
  color: var(--dark-text);
  text-align: center;
  max-width: 900px;
  margin-bottom: 24px;
}

@media (max-width: 1199px) {
  .hero-title {
    font-size: 48px;
  }
}

@media (max-width: 809px) {
  .hero-title {
    font-size: 40px;
  }
}

.gradient-text {
  background: linear-gradient(90deg, var(--gradient-stop-1) 0%, var(--gradient-stop-2) 50%, var(--gradient-stop-3) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 900;
  animation: gradient-shift 3s ease infinite;
  background-size: 200% 200%;
}

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

.hero-subtitle {
  font-family: var(--font-inter);
  font-weight: 400;
  font-size: 20px;
  line-height: 140%;
  letter-spacing: -0.01em;
  color: var(--gray-text);
  text-align: center;
  max-width: 600px;
  margin-bottom: 40px;
}

@media (max-width: 809px) {
  .hero-subtitle {
    font-size: 18px;
  }
}


.primary-cta-button {
  height: 48px;
  background: var(--dark-text);
  color: var(--white);
  border-radius: 200px;
  font-family: var(--font-inter);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.01em;
  padding: 14px 20px;
  box-shadow: var(--shadow-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  text-decoration: none;
  transition: all 300ms ease;
  white-space: nowrap;
}

.primary-cta-button {
  position: relative;
  overflow: hidden;
}

.primary-cta-button:hover {
  background: rgba(0, 0, 0, 0.8);
}

.cta-arrow {
  width: 20px;
  height: 20px;
  transition: all 300ms ease;
  position: relative;
  display: inline-block;
}

.cta-arrow-dimmed {
  width: 20px;
  height: 20px;
  opacity: 0.6;
  transition: all 300ms ease;
  position: absolute;
  right: 0;
}

.cta-arrow-white {
  width: 20px;
  height: 20px;
  opacity: 0;
  transition: all 300ms ease;
  position: absolute;
  right: 0;
  transform: translateX(-20px);
}

.primary-cta-button:hover .cta-arrow-dimmed {
  opacity: 0;
  transform: translateX(20px);
}

.primary-cta-button:hover .cta-arrow-white {
  opacity: 1;
  transform: translateX(0);
}

.secondary-cta-button {
  width: 180px;
  height: 48px;
  background: transparent;
  border: 1px solid rgba(28, 25, 23, 0.2);
  color: var(--dark-text);
  border-radius: 200px;
  font-family: var(--font-inter);
  font-weight: 600;
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: background 300ms ease;
}

.secondary-cta-button:hover {
  background: rgba(28, 25, 23, 0.05);
}

/* Waitlist Form Styles */


.form-button {
  flex-shrink: 0;
  border: none;
  cursor: pointer;
  background: var(--dark-text);
}

.form-button:hover {
  background: rgba(0, 0, 0, 0.8);
}

.form-button:disabled {
  background: rgba(0, 0, 0, 0.3);
  cursor: not-allowed;
}

.form-button:disabled:hover {
  background: rgba(0, 0, 0, 0.3);
}

@media (max-width: 809px) {
  .form-button {
    width: 100%;
  }
}


/* Hero Graphic */


/* Keyframes for animations */
@keyframes float-up {
  0% {
    opacity: 0;
    transform: translateY(0px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

/* Browser Header */
.browser-header {
  background: linear-gradient(135deg, #f8f8f8, #f0f0f0);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.browser-controls {
  padding: 8px 16px;
  padding-bottom: 0px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.browser-dots {
  display: flex;
  gap: 6px;
}

.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  cursor: pointer;
  transition: all 200ms ease;
}

.dot.red {
  background: #ff5f57;
}

.dot.yellow {
  background: #ffbd2e;
}

.dot.green {
  background: #28ca42;
}

.dot:hover {
  opacity: 0.8;
  transform: scale(1.1);
}

.browser-tabs {
  display: flex;
  align-items: center;
  margin-left: 12px;
}

.browser-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--white);
  border-radius: 8px 8px 0 0;
  font-family: var(--font-inter);
  font-weight: 500;
  font-size: 12px;
  color: var(--dark-text);
  margin-right: 4px;
  cursor: pointer;
  transition: all 200ms ease;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-bottom: none;
}

.browser-tab:not(.active) {
  background: rgba(255, 255, 255, 0.7);
  color: rgba(0, 0, 0, 0.6);
}

.browser-tab:hover {
  background: var(--white);
  color: var(--dark-text);
}

.tab-icon {
  font-size: 12px;
}

.tab-title {
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tab-close {
  font-size: 14px;
  opacity: 0.5;
  margin-left: 4px;
  hover: opacity: 1;
}

.browser-address-bar {
  padding: 8px 16px;
  background: var(--white);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.address-bar-content {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  background: #f5f5f5;
  border-radius: 20px;
  padding: 6px 12px;
  margin-right: 12px;
}

.security-icon {
  width: 14px;
  height: 14px;
  color: #22c55e;
  flex-shrink: 0;
}

.url-text {
  font-family: var(--font-inter);
  font-weight: 400;
  font-size: 13px;
  color: rgba(0, 0, 0, 0.7);
}

.browser-actions {
  display: flex;
  gap: 8px;
}

.browser-icon {
  width: 16px;
  height: 16px;
  color: rgba(0, 0, 0, 0.5);
  cursor: pointer;
  transition: color 200ms ease;
}

.browser-icon:hover {
  color: rgba(0, 0, 0, 0.8);
}

/* Chat Interface */

@media (max-width: 809px) {
  .browser-tabs {
    display: none;
  }

  .browser-tab {
    display: none;
  }
}


@keyframes fade-in-float {
  0% {
    opacity: 0;
    transform: translateY(30px) scale(0.8) rotate(-5deg);
  }
  50% {
    opacity: 0.7;
    transform: translateY(-5px) scale(1.02) rotate(2deg);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(0deg);
  }
}

@keyframes continuous-float {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  25% {
    transform: translateY(-2px) rotate(0.3deg);
  }
  50% {
    transform: translateY(-1px) rotate(-0.2deg);
  }
  75% {
    transform: translateY(-3px) rotate(0.2deg);
  }
}


/* Features Section */
.features-section {
  padding: 80px 0;
  background: #f8f6f2;
}

@media (max-width: 809px) {
  .features-section {
    padding: 60px 0;
  }
}


.section-header {
  text-align: center;
  margin-bottom: 60px;
}

.section-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 48px;
  line-height: 110%;
  letter-spacing: -0.02em;
  color: var(--dark-text);
  text-align: center;
  margin-bottom: 16px;
}

@media (max-width: 809px) {
  .section-title {
    font-size: 36px;
  }
}

.section-subtitle {
  font-family: var(--font-inter);
  font-weight: 400;
  font-size: 18px;
  line-height: 140%;
  color: var(--gray-text);
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

@media (max-width: 1199px) {
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
  }
}

@media (max-width: 809px) {
  .features-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
}

.feature-card {
  padding: 40px;
  background: var(--white);
  border: 1px solid var(--light-gray);
  border-radius: 20px;
  box-shadow: var(--shadow-xs);
  transition: all 300ms ease;
}

.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.feature-icon-container {
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, rgba(0, 145, 248, 0.1), rgba(203, 91, 243, 0.1));
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
}

.feature-icon {
  width: 28px;
  height: 28px;
  color: var(--primary-blue);
}

.feature-title {
  font-family: var(--font-inter);
  font-weight: 600;
  font-size: 20px;
  line-height: 130%;
  letter-spacing: -0.01em;
  color: var(--dark-text);
  margin-bottom: 12px;
}

.feature-description {
  font-family: var(--font-inter);
  font-weight: 400;
  font-size: 15px;
  line-height: 140%;
  letter-spacing: -0.01em;
  color: var(--gray-text);
}

/* Testimonials Section */
.testimonials-section {
  padding: 80px 40px;
  background: #f8f6f2;
  border-radius: 40px;
  margin: 0 40px;
}

@media (max-width: 809px) {
  .testimonials-section {
    padding: 60px 20px;
    margin: 0 20px;
  }
}

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
}

@media (max-width: 809px) {
  .testimonials-grid {
    grid-template-columns: 1fr;
  }
}

.testimonial-card {
  padding: 32px;
  background: var(--white);
  border-radius: 20px;
  box-shadow: var(--shadow-sm);
}

.quote-marks {
  font-size: 24px;
  color: var(--primary-blue);
  opacity: 0.3;
  margin-bottom: 16px;
}

.quote-text {
  font-family: var(--font-inter);
  font-weight: 400;
  font-size: 16px;
  line-height: 150%;
  color: var(--dark-text);
  margin-bottom: 24px;
}

.author-info {
  display: flex;
  align-items: center;
  gap: 16px;
}

.author-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid rgba(0, 145, 248, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
}

.avatar-placeholder {
  width: 100%;
  height: 100%;
  background: var(--primary-blue);
  color: var(--white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}

.author-name {
  font-family: var(--font-inter);
  font-weight: 600;
  font-size: 15px;
  color: var(--dark-text);
  line-height: 120%;
}

.author-title {
  font-family: var(--font-inter);
  font-weight: 400;
  font-size: 14px;
  color: var(--gray-text);
  line-height: 120%;
}

/* Footer Section */
.footer-section {
  padding: 80px 0 40px;
  background: var(--dark-text);
  color: var(--white);
}

.footer-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
}

@media (max-width: 809px) {
  .footer-container {
    padding: 0 20px;
  }
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr auto auto;
  gap: 40px;
  justify-content: space-between;
  margin-bottom: 60px;
}

@media (max-width: 809px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 60px;
  }
}

/* .footer-column.company moved to Tailwind: max-w-xs */

.footer-logo-text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  color: var(--white);
  text-decoration: none;
  letter-spacing: -0.02em;
  display: block;
  margin-bottom: 16px;
}

.footer-description {
  font-family: var(--font-inter);
  font-weight: 400;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 140%;
}

/* .footer-column-title moved to Tailwind: font-inter font-semibold text-sm text-white tracking-widest uppercase mb-5 */

/* .footer-column-right moved to Tailwind: text-right */

/* .footer-column-right .footer-links moved to Tailwind: items-end */

.footer-links {
  list-style: none;
}

.footer-link {
  font-family: var(--font-inter);
  font-weight: 400;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  line-height: 200%;
  transition: color 200ms ease;
}

.footer-link:hover {
  color: var(--white);
}

.footer-bottom {
  padding-top: 40px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

@media (max-width: 809px) {
  .footer-bottom {
    flex-direction: column;
    gap: 20px;
  }
}

.copyright p {
  font-family: var(--font-inter);
  font-weight: 400;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.5);
}

.social-icons {
  display: flex;
  gap: 16px;
}

.social-icon {
  width: 24px;
  height: 24px;
  color: rgba(255, 255, 255, 0.5);
  transition: color 200ms ease;
}

.social-icon:hover {
  color: rgba(255, 255, 255, 1);
}

.social-icon svg {
  width: 100%;
  height: 100%;
}

/* Scroll Animations */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 500ms ease, transform 500ms ease;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

.scale-in {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 300ms ease, transform 300ms ease;
}

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

/* Benefits Section */
.benefits-section {
  padding: 120px 40px;
  background: #f8f6f2;
  position: relative;
}

@media (max-width: 809px) {
  .benefits-section {
    padding: 80px 20px;
  }
}

.benefits-content {
  margin-top: 80px;
}

.benefit-row:last-child {
  margin-bottom: 0;
}


.benefit-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 40px;
  color: var(--dark-text);
  letter-spacing: -0.02em;
  line-height: 110%;
}

@media (max-width: 1199px) {
  .benefit-title {
    font-size: 32px;
  }
}

@media (max-width: 809px) {
  .benefit-title {
    font-size: 28px;
  }
}

.benefit-description {
  font-family: var(--font-inter);
  font-weight: 400;
  font-size: 18px;
  color: rgba(0, 0, 0, 0.7);
  line-height: 150%;
  letter-spacing: -0.01em;
}

@media (max-width: 809px) {
  .benefit-description {
    font-size: 16px;
  }
}



.benefit-check {
  width: 20px;
  height: 20px;
  color: var(--primary-blue);
  stroke-width: 2.5px;
  flex-shrink: 0;
}


.graphic-placeholder {
  background: linear-gradient(135deg, #f8f6f2 0%, #f0f0f0 100%);
  border: 1px solid rgba(0, 0, 0, 0.05);
}

/* Typing Text - styles only, animation handled by JavaScript */
.typed-text {
  position: relative;
  display: inline-block;
}

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

.cursor,
.cursor-blink {
  animation: blink 1s infinite;
  color: var(--primary-blue);
  font-weight: 400;
}


.answer-cards {
  animation: resultsCycle 30s infinite;
}

.answer-card {
  background: var(--white);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  padding: 16px;
  box-shadow: var(--shadow-xs);
  animation: fadeInUp 0.5s ease forwards;
}

.source-results-header {
  animation: headerCycle 30s infinite;
  opacity: 0;
}

.search-result-item:nth-child(1) { animation: resultItem1Cycle 30s infinite; opacity: 0; }
.search-result-item:nth-child(2) { animation: resultItem2Cycle 30s infinite; opacity: 0; }
.search-result-item:nth-child(3) { animation: resultItem3Cycle 30s infinite; opacity: 0; }

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Cycling Animations */
@keyframes resultsCycle {
  0% { opacity: 0; }
  9% { opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes aiCardCycle {
  0% { opacity: 0; transform: translateY(10px); }
  8% { opacity: 0; transform: translateY(10px); }
  9% { opacity: 0.3; transform: translateY(6px); }
  10% { opacity: 1; transform: translateY(0); }
  90% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(10px); }
}

@keyframes headerCycle {
  0% { opacity: 0; transform: translateY(10px); }
  8.5% { opacity: 0; transform: translateY(10px); }
  9% { opacity: 0.4; transform: translateY(6px); }
  9.5% { opacity: 1; transform: translateY(0); }
  90% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(10px); }
}

@keyframes resultItem1Cycle {
  0% { opacity: 0; transform: translateY(10px); }
  9.5% { opacity: 0; transform: translateY(10px); }
  10% { opacity: 0.3; transform: translateY(6px); }
  10.5% { opacity: 1; transform: translateY(0); }
  90% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(10px); }
}

@keyframes resultItem2Cycle {
  0% { opacity: 0; transform: translateY(10px); }
  10.5% { opacity: 0; transform: translateY(10px); }
  11% { opacity: 0.3; transform: translateY(6px); }
  11.5% { opacity: 1; transform: translateY(0); }
  90% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(10px); }
}

@keyframes resultItem3Cycle {
  0% { opacity: 0; transform: translateY(10px); }
  11.5% { opacity: 0; transform: translateY(10px); }
  12% { opacity: 0.3; transform: translateY(6px); }
  12.5% { opacity: 1; transform: translateY(0); }
  90% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(10px); }
}

.source-badge {
  font-family: var(--font-inter);
  font-weight: 600;
  font-size: 11px;
  color: var(--primary-blue);
  background: rgba(0, 145, 248, 0.1);
  border-radius: 4px;
  padding: 2px 6px;
  display: inline-block;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.source-badge-with-icon {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-inter);
  font-weight: 600;
  font-size: 11px;
  color: var(--primary-blue);
  background: rgba(0, 145, 248, 0.1);
  border-radius: 4px;
  padding: 4px 8px;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.source-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.answer-text {
  font-family: var(--font-inter);
  font-weight: 400;
  font-size: 13px;
  color: rgba(0, 0, 0, 0.8);
  line-height: 140%;
}

/* Time Savings Demo */
.time-savings-demo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  width: 100%;
  padding: 40px;
}

.time-comparison {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  max-width: 280px;
}

.time-before, .time-after {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.time-label {
  font-family: var(--font-inter);
  font-weight: 500;
  font-size: 12px;
  color: rgba(0, 0, 0, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.time-bar {
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  position: relative;
  overflow: hidden;
}

.time-bar.long {
  background: #ff6b6b;
  width: 100%;
}

.time-bar.short {
  background: var(--primary-blue);
  width: 20%;
}

.time-value {
  font-family: var(--font-inter);
  font-weight: 600;
  font-size: 14px;
  color: var(--white);
}

.savings-highlight {
  text-align: center;
  background: var(--white);
  border: 2px solid var(--primary-blue);
  border-radius: 12px;
  padding: 20px;
  box-shadow: var(--shadow-sm);
}

.savings-percentage {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 36px;
  color: var(--primary-blue);
  line-height: 1;
}

.savings-text {
  font-family: var(--font-inter);
  font-weight: 500;
  font-size: 12px;
  color: rgba(0, 0, 0, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 4px;
}

/* Permissions Demo */
.permissions-demo {
  background: linear-gradient(135deg, #0099ff03 0%, #4b7df603 50%, #80e8cc03 100%);
}

.permissions-demo::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(circle at 20% 20%, rgba(0, 153, 255, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(128, 232, 204, 0.08) 0%, transparent 50%);
  pointer-events: none;
  animation: breathe 8s ease-in-out infinite;
}

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


.permission-user {
  background: linear-gradient(135deg, white 0%, #fafbfd 100%);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.04),
    0 8px 32px rgba(0, 0, 0, 0.08),
    0 2px 8px rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 153, 255, 0.1);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}


.user-avatar {
  background: linear-gradient(135deg, #0099ff 0%, #4b7df6 100%);
  box-shadow:
    0 4px 16px rgba(0, 153, 255, 0.3),
    inset 0 2px 4px rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
}

.user-avatar::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0099ff30 0%, #4b7df630 100%);
  z-index: -1;
  opacity: 0.6;
  animation: pulse 2s ease infinite;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.2); opacity: 0.5; }
}

.avatar-icon {
  font-size: 24px;
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
}

.avatar-icon svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}

.user-name {
  font-family: var(--font-inter);
  font-weight: 700;
  font-size: 16px;
  color: #0f172a;
  letter-spacing: -0.02em;
}

.permission-results {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
}


.result-icon {
  font-size: 18px;
  width: 24px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  border-radius: 8px;
  padding: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.result-icon svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 2.5;
}






@keyframes stepIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}



@keyframes moveArrow {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(4px); }
}


/* Open Source Demo */
.opensource-demo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 100%;
  padding: 40px;
}

.code-window {
  background: #1a1a1a;
  border-radius: 12px;
  overflow: hidden;
  width: 100%;
  max-width: 350px;
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.window-header {
  background: #2d2d2d;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.window-dots {
  display: flex;
  gap: 6px;
}

.window-dots .dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.window-dots .dot.red {
  background: #ff5f56;
}

.window-dots .dot.yellow {
  background: #ffbd2e;
}

.window-dots .dot.green {
  background: #27ca3f;
}

.window-title {
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 400;
}

.code-content {
  padding: 16px;
  background: #1a1a1a;
}

.code-line {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 13px;
  line-height: 1.4;
}

.line-number {
  color: rgba(255, 255, 255, 0.3);
  margin-right: 16px;
  min-width: 20px;
  text-align: right;
}

.code-text {
  color: #e6e6e6;
}

.code-keyword {
  color: #66d9ef;
  font-weight: 600;
}

.code-comment {
  color: #75715e;
  font-style: italic;
}

.benefit-item {
  background: var(--white);
  box-shadow: var(--shadow-xs);
}

.benefit-label {
  font-family: var(--font-inter);
  font-weight: 600;
  font-size: 11px;
  color: var(--dark-text);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.github-stats {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.stat-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: var(--white);
  border-radius: 20px;
  box-shadow: var(--shadow-xs);
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.stat-icon {
  font-size: 14px;
}

.stat-value {
  font-family: var(--font-inter);
  font-weight: 700;
  font-size: 14px;
  color: var(--dark-text);
}

.stat-label {
  font-family: var(--font-inter);
  font-weight: 500;
  font-size: 11px;
  color: rgba(0, 0, 0, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

@media (max-width: 809px) {
  .opensource-demo {
    padding: 20px;
    gap: 20px;
  }
  
  .code-window {
    max-width: 100%;
  }
  
  /* All .opensource-benefits and .benefit-item responsive styles moved to Tailwind */
  
  .github-stats {
    gap: 8px;
  }
  
  .stat-badge {
    padding: 6px 10px;
  }
}

/* Security Demo */
.security-demo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  width: 100%;
  padding: 40px;
}

.shield-icon {
  width: 80px;
  height: 80px;
  color: var(--primary-blue);
  margin-bottom: 8px;
}

.shield-icon svg {
  width: 100%;
  height: 100%;
}

.security-features {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: 240px;
}

.security-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--white);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  padding: 12px 16px;
  box-shadow: var(--shadow-xs);
}

.security-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  flex-shrink: 0;
}

.security-item span {
  font-family: var(--font-inter);
  font-weight: 500;
  font-size: 13px;
  color: var(--dark-text);
}

/* AI Answer Card */
.ai-answer-card {
  background: linear-gradient(135deg, rgba(0, 145, 248, 0.02) 0%, rgba(0, 145, 248, 0.05) 100%);
  border: 1px solid rgba(0, 145, 248, 0.15);
  box-shadow: rgba(0, 145, 248, 0.1) 0px 4px 12px;
  animation: aiCardCycle 30s infinite;
}

.ai-answer-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--primary-blue), rgba(0, 145, 248, 0.3));
  border-radius: 12px 12px 0 0;
}

.ai-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-inter);
  font-weight: 600;
  font-size: 11px;
  color: var(--primary-blue);
  background: rgba(0, 145, 248, 0.1);
  border-radius: 6px;
  padding: 4px 8px;
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.ai-icon {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}



.sources-label {
  font-family: var(--font-inter);
  font-weight: 500;
  font-size: 11px;
  color: rgba(0, 0, 0, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: block;
  margin-bottom: 8px;
}

.source-references {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.source-ref {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--white);
  border: 1px solid rgba(0, 145, 248, 0.15);
  border-radius: 6px;
  padding: 4px 8px;
  font-family: var(--font-inter);
  font-weight: 500;
  font-size: 11px;
  color: rgba(0, 0, 0, 0.7);
  transition: all 200ms ease;
}

.source-ref:hover {
  background: rgba(0, 145, 248, 0.05);
  transform: translateY(-1px);
}

.ref-icon {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

.source-results-header {
  font-family: var(--font-inter);
  font-weight: 500;
  font-size: 12px;
  color: rgba(0, 0, 0, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 8px;
  margin-bottom: 8px;
  padding-left: 4px;
}

/* Google-style Search Results */


.result-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.result-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.result-title {
  font-family: var(--font-inter);
  font-weight: 500;
  font-size: 14px;
  color: var(--primary-blue);
  text-decoration: none;
  cursor: pointer;
  transition: color 200ms ease;
}

.result-title:hover {
  text-decoration: underline;
}

.result-snippet {
  font-family: var(--font-inter);
  font-weight: 400;
  font-size: 13px;
  color: rgba(0, 0, 0, 0.7);
  line-height: 140%;
  margin-left: 24px;
}

/* Integration Infographic */
.integration-infographic {
  position: relative;
  width: 100vw;
  left: 50%;
  transform: translateX(-50%);
  height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image:
    radial-gradient(circle at center, rgba(0, 0, 0, 0.06) 1px, transparent 1px);
  background-size: 24px 24px;
}

@media (max-width: 809px) {
  .integration-infographic {
    height: 500px;
  }
}

/* Omni Center Hub */
.omni-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
  border: 2px solid rgba(0, 145, 248, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 
    var(--shadow-md),
    0 0 0 4px rgba(255, 255, 255, 0.8);
  z-index: 10;
}

.omni-center::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    radial-gradient(circle at 30% 70%, var(--gradient-stop-1) 0%, var(--gradient-stop-2) 40%, transparent 80%),
    radial-gradient(circle at 70% 30%, var(--gradient-stop-2) 0%, var(--gradient-stop-3) 40%, transparent 80%),
    radial-gradient(circle at 50% 80%, var(--gradient-stop-3) 0%, var(--gradient-stop-1) 40%, transparent 80%),
    radial-gradient(circle at 20% 20%, var(--gradient-stop-2) 0%, var(--gradient-stop-1) 50%, transparent 90%),
    linear-gradient(135deg, var(--gradient-stop-1), var(--gradient-stop-2));
  background-size: 300% 300%, 250% 250%, 350% 350%, 400% 400%, 100% 100%;
  border-radius: 50%;
  filter: blur(0.5px);
  animation: gasSwirl 12s ease-in-out infinite;
  z-index: -1;
}

@media (max-width: 809px) {
  .omni-center {
    width: 80px;
    height: 80px;
    border-width: 2px;
  }
  
  .omni-center::before {
    width: 100%;
    height: 100%;
  }
}

@keyframes centerPulse {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
    box-shadow: 
      var(--shadow-lg),
      0 0 0 8px rgba(0, 145, 248, 0.1),
      0 0 0 16px rgba(0, 145, 248, 0.05);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.05);
    box-shadow: 
      var(--shadow-lg),
      0 0 0 12px rgba(0, 145, 248, 0.15),
      0 0 0 24px rgba(0, 145, 248, 0.08);
  }
}

@keyframes gasSwirl {
  0% {
    background-position: 0% 0%, 100% 100%, 50% 0%, 0% 50%;
  }
  25% {
    background-position: 50% 25%, 75% 50%, 25% 75%, 75% 25%;
  }
  50% {
    background-position: 100% 50%, 50% 0%, 0% 100%, 100% 0%;
  }
  75% {
    background-position: 75% 75%, 25% 25%, 75% 25%, 25% 75%;
  }
  100% {
    background-position: 0% 0%, 100% 100%, 50% 0%, 0% 50%;
  }
}

.omni-logo {
  position: relative;
  z-index: 2;
}

.omni-text {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 22px;
  color: var(--white);
  letter-spacing: -0.02em;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

@media (max-width: 809px) {
  .omni-text {
    font-size: 18px;
  }
}


/* App Icons Positioning */

@keyframes iconFloat {
  0%, 100% {
    transform: translate(-50%, -50%) translateY(0px);
  }
  50% {
    transform: translate(-50%, -50%) translateY(-8px);
  }
}


/* Specific App Icon Positions - Perfectly evenly spaced using trigonometry */
/* 7 icons: 360deg / 7 = 51.43deg apart, calculated with Python script */

.drive-icon {
  /* -90.0 degrees (top) */
  top: calc(50% - 200px);
  left: calc(50% + 0px);
  transform: translate(-50%, -50%);
  animation-delay: 0.0s;
}

.docs-icon {
  /* -38.6 degrees */
  top: calc(50% - 125px);
  left: calc(50% + 156px);
  transform: translate(-50%, -50%);
  animation-delay: 0.5s;
}

.sheets-icon {
  /* 12.9 degrees */
  top: calc(50% + 45px);
  left: calc(50% + 195px);
  transform: translate(-50%, -50%);
  animation-delay: 1.0s;
}

.slides-icon {
  /* 64.3 degrees */
  top: calc(50% + 180px);
  left: calc(50% + 87px);
  transform: translate(-50%, -50%);
  animation-delay: 1.5s;
}

.slack-icon {
  /* 115.7 degrees */
  top: calc(50% + 180px);
  left: calc(50% - 87px);
  transform: translate(-50%, -50%);
  animation-delay: 2.0s;
}

.jira-icon {
  /* 167.1 degrees */
  top: calc(50% + 45px);
  left: calc(50% - 195px);
  transform: translate(-50%, -50%);
  animation-delay: 2.5s;
}

.confluence-icon {
  /* 218.6 degrees */
  top: calc(50% - 125px);
  left: calc(50% - 156px);
  transform: translate(-50%, -50%);
  animation-delay: 3.0s;
}

@media (max-width: 809px) {
  .drive-icon {
    /* -90.0 degrees (top) - mobile radius 150px */
    top: calc(50% - 150px);
    left: calc(50% + 0px);
    transform: translate(-50%, -50%);
  }
  
  .docs-icon {
    /* -38.6 degrees */
    top: calc(50% - 94px);
    left: calc(50% + 117px);
    transform: translate(-50%, -50%);
  }
  
  .sheets-icon {
    /* 12.9 degrees */
    top: calc(50% + 33px);
    left: calc(50% + 146px);
    transform: translate(-50%, -50%);
  }
  
  .slides-icon {
    /* 64.3 degrees */
    top: calc(50% + 135px);
    left: calc(50% + 65px);
    transform: translate(-50%, -50%);
  }
  
  .slack-icon {
    /* 115.7 degrees */
    top: calc(50% + 135px);
    left: calc(50% - 65px);
    transform: translate(-50%, -50%);
  }
  
  .jira-icon {
    /* 167.1 degrees */
    top: calc(50% + 33px);
    left: calc(50% - 146px);
    transform: translate(-50%, -50%);
  }
  
  .confluence-icon {
    /* 218.6 degrees */
    top: calc(50% - 94px);
    left: calc(50% - 117px);
    transform: translate(-50%, -50%);
  }
}

/* Connection Lines */
.connection-lines {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.connection-line {
  fill: none;
  stroke: rgba(0, 145, 248, 0.3);
  stroke-width: 2;
  stroke-dasharray: 8, 4;
  animation: connectionPulse 3s ease-in-out infinite;
}

@keyframes connectionPulse {
  0%, 100% {
    stroke-opacity: 0.3;
    stroke-width: 2;
  }
  50% {
    stroke-opacity: 0.6;
    stroke-width: 3;
  }
}

.connection-line[data-app="drive"] {
  animation-delay: 0s;
}

.connection-line[data-app="docs"] {
  animation-delay: 0.2s;
}

.connection-line[data-app="sheets"] {
  animation-delay: 0.4s;
}

.connection-line[data-app="slides"] {
  animation-delay: 0.6s;
}

.connection-line[data-app="slack"] {
  animation-delay: 0.8s;
}

.connection-line[data-app="jira"] {
  animation-delay: 1s;
}

.connection-line[data-app="confluence"] {
  animation-delay: 1.2s;
}

/* Hover Effects for Interactive Connection */
.app-icon:hover + .connection-lines .connection-line,
.app-icon:hover ~ .connection-lines .connection-line[data-app] {
  stroke: var(--primary-blue);
  stroke-opacity: 0.8;
  stroke-width: 3;
  animation: connectionActive 0.5s ease-out;
}

@keyframes connectionActive {
  0% {
    stroke-dashoffset: 20;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

/* App Icon Tooltip on Hover */
.app-icon::after {
  content: attr(data-app);
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--dark-text);
  color: var(--white);
  padding: 6px 12px;
  border-radius: 6px;
  font-family: var(--font-inter);
  font-weight: 500;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 300ms ease;
  pointer-events: none;
  z-index: 20;
}

.app-icon::before {
  content: '';
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid var(--dark-text);
  opacity: 0;
  transition: opacity 300ms ease;
  pointer-events: none;
  z-index: 20;
}

.app-icon:hover::after,
.app-icon:hover::before {
  opacity: 1;
}