/* SocialOS Custom Styles */
:root {
  --sos-blue: #1A73E8;
  --sos-blue-dark: #1457B0;
  --sos-blue-light: #E8F0FE;
  --sos-navy: #0A0A0A;
  --sos-gray: #5F6368;
  --sos-gray-light: #F7F8FA;
  --sos-orange: #E8740A;
  --sos-orange-dark: #C95A00;
  --sos-border: #E0E0E0;
}

/* Smooth scrolling + prevent horizontal overflow on mobile */
html { scroll-behavior: smooth; overflow-x: hidden; }
body { overflow-x: hidden; }

/* Code blocks */
pre {
  background: #1E1E1E;
  border-radius: 8px;
  overflow-x: auto;
  max-width: 100%;
}
pre code {
  font-size: 0.875rem;
  line-height: 1.7;
}
@media (max-width: 639px) {
  pre code {
    font-size: 0.75rem;
    line-height: 1.5;
  }
}
code:not(pre code) {
  background: #F7F8FA;
  padding: 0.2em 0.4em;
  border-radius: 3px;
  font-size: 0.875em;
  font-family: 'JetBrains Mono', monospace;
  color: #0A0A0A;
}

/* API class grid cards */
.api-card {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.api-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

/* Example cards */
.example-card {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.example-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

/* Gradient hero */
.hero-gradient {
  background: linear-gradient(135deg, #0A0A0A 0%, #1A365D 50%, #1A73E8 100%);
}

/* Architecture diagrams */
.arch-diagram {
  font-family: 'JetBrains Mono', monospace;
  background: #F7F8FA;
  border: 1px solid #E0E0E0;
  border-radius: 0.5rem;
  padding: 1.5rem;
  overflow-x: auto;
  line-height: 1.5;
}

/* Nav active link */
.nav-link {
  position: relative;
}
.nav-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: #1A73E8;
  transition: width 0.2s ease;
}
.nav-link:hover::after {
  width: 100%;
}

/* Pricing card highlight */
.pricing-highlight {
  border: 2px solid #1A73E8;
  position: relative;
}
.pricing-highlight::before {
  content: 'Most Popular';
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: #1A73E8;
  color: white;
  padding: 2px 16px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
}

/* Step connector lines */
.step-connector {
  position: relative;
}
.step-connector::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -2rem;
  width: 2rem;
  height: 2px;
  background: #cbd5e1;
}
@media (max-width: 768px) {
  .step-connector::after {
    display: none;
  }
}

/* Mobile nav toggle */
.mobile-nav {
  display: none;
}
.mobile-nav.active {
  display: block;
}

/* Badge pill */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
}

/* ============================================================
   HERO ANIMATED VISUAL
   ============================================================ */

/* Full-bleed background layer */
.hero-visual-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 1;
}

.hero-visual-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* ---- Central Node ---- */
.central-core {
  animation: pulse-central 4s ease-in-out infinite;
}
.central-ring {
  animation: pulse-ring 6s ease-in-out infinite;
}
.central-halo {
  animation: pulse-halo 5s ease-in-out infinite;
}

.central-core,
.central-ring,
.central-halo {
  transform-box: fill-box;
  transform-origin: center;
}

@keyframes pulse-central {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.7; transform: scale(1.15); }
}
@keyframes pulse-ring {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50%      { opacity: 0.2; transform: scale(1.3); }
}
@keyframes pulse-halo {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.6; transform: scale(1.2); }
}

/* ---- Constellation Nodes ---- */
.node {
  transform-box: fill-box;
  transform-origin: center;
}

.node-1  { animation: pulse-node 5s   ease-in-out 0s    infinite; }
.node-2  { animation: pulse-node 6s   ease-in-out 1.5s  infinite; }
.node-3  { animation: pulse-node 7s   ease-in-out 0.8s  infinite; }
.node-4  { animation: pulse-node 5.5s ease-in-out 2.2s  infinite; }
.node-5  { animation: pulse-node 8s   ease-in-out 0.3s  infinite; }
.node-6  { animation: pulse-node 6.5s ease-in-out 3s    infinite; }
.node-7  { animation: pulse-node 7s   ease-in-out 1s    infinite; }
.node-8  { animation: pulse-node 6s   ease-in-out 2.5s  infinite; }
.node-9  { animation: pulse-node 9s   ease-in-out 4s    infinite; }
.node-10 { animation: pulse-node 8s   ease-in-out 1.8s  infinite; }
.node-11 { animation: pulse-node 6s   ease-in-out 0.5s  infinite; }
.node-12 { animation: pulse-node 7.5s ease-in-out 3.2s  infinite; }
.node-13 { animation: pulse-node 8.5s ease-in-out 1.2s  infinite; }
.node-14 { animation: pulse-node 5.5s ease-in-out 2.8s  infinite; }
.node-15 { animation: pulse-node 7s   ease-in-out 0.6s  infinite; }
.node-16 { animation: pulse-node 9.5s ease-in-out 3.5s  infinite; }
.node-17 { animation: pulse-node 8s   ease-in-out 2s    infinite; }

@keyframes pulse-node {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(0.8); }
}

/* ---- Data Flow Streaks ---- */
.data-streak {
  will-change: transform;
}

.data-streak-1 { animation: flow-streak 6s  linear 0s   infinite; }
.data-streak-2 { animation: flow-streak 9s  linear 2s   infinite; }
.data-streak-3 { animation: flow-streak 12s linear 0s   infinite; }
.data-streak-4 { animation: flow-streak 8s  linear 3.5s infinite; }
.data-streak-5 { animation: flow-streak 11s linear 1s   infinite; }
.data-streak-6 { animation: flow-streak 7s  linear 4s   infinite; }

@keyframes flow-streak {
  0%   { transform: translateX(0); opacity: 0; }
  5%   { opacity: 0.7; }
  80%  { opacity: 0.7; }
  100% { transform: translateX(1800px); opacity: 0; }
}

/* ---- Floating Particles ---- */
.particle-1 { animation: drift-1 14s ease-in-out infinite; }
.particle-2 { animation: drift-2 18s ease-in-out 2s infinite; }
.particle-3 { animation: drift-3 16s ease-in-out 4s infinite; }
.particle-4 { animation: drift-4 20s ease-in-out 1s infinite; }
.particle-5 { animation: drift-5 15s ease-in-out 3s infinite; }
.particle-6 { animation: drift-6 17s ease-in-out 5s infinite; }
.particle-7 { animation: drift-7 19s ease-in-out 2.5s infinite; }
.particle-8  { animation: drift-8 16s ease-in-out 6s infinite; }
.particle-9  { animation: drift-1 22s ease-in-out 3s infinite; }
.particle-10 { animation: drift-4 18s ease-in-out 7s infinite; }
.particle-11 { animation: drift-6 20s ease-in-out 4.5s infinite; }
.particle-12 { animation: drift-2 24s ease-in-out 8s infinite; }

@keyframes drift-1 {
  0%, 100% { transform: translate(0, 0); opacity: 0.3; }
  25%      { transform: translate(12px, -8px); opacity: 0.15; }
  50%      { transform: translate(6px, -16px); opacity: 0.35; }
  75%      { transform: translate(-4px, -6px); opacity: 0.2; }
}
@keyframes drift-2 {
  0%, 100% { transform: translate(0, 0); opacity: 0.25; }
  25%      { transform: translate(-10px, 6px); opacity: 0.35; }
  50%      { transform: translate(-5px, 14px); opacity: 0.15; }
  75%      { transform: translate(8px, 4px); opacity: 0.3; }
}
@keyframes drift-3 {
  0%, 100% { transform: translate(0, 0); opacity: 0.2; }
  33%      { transform: translate(15px, -10px); opacity: 0.3; }
  66%      { transform: translate(-8px, -18px); opacity: 0.15; }
}
@keyframes drift-4 {
  0%, 100% { transform: translate(0, 0); opacity: 0.3; }
  50%      { transform: translate(-12px, 10px); opacity: 0.15; }
}
@keyframes drift-5 {
  0%, 100% { transform: translate(0, 0); opacity: 0.25; }
  25%      { transform: translate(8px, -12px); opacity: 0.1; }
  50%      { transform: translate(16px, -4px); opacity: 0.3; }
  75%      { transform: translate(4px, 6px); opacity: 0.15; }
}
@keyframes drift-6 {
  0%, 100% { transform: translate(0, 0); opacity: 0.2; }
  33%      { transform: translate(-6px, 12px); opacity: 0.3; }
  66%      { transform: translate(10px, 8px); opacity: 0.1; }
}
@keyframes drift-7 {
  0%, 100% { transform: translate(0, 0); opacity: 0.15; }
  50%      { transform: translate(10px, -14px); opacity: 0.3; }
}
@keyframes drift-8 {
  0%, 100% { transform: translate(0, 0); opacity: 0.2; }
  50%      { transform: translate(-14px, -8px); opacity: 0.35; }
}

/* ---- Constellation Lines Breathing ---- */
.constellation-lines {
  animation: breathe-lines 8s ease-in-out infinite;
}
@keyframes breathe-lines {
  0%, 100% { opacity: 0.25; }
  50%      { opacity: 0.12; }
}

/* ---- Reduced Motion ---- */
@media (prefers-reduced-motion: reduce) {
  .central-core,
  .central-ring,
  .central-halo,
  .node,
  .data-streak,
  .particle,
  .constellation-lines {
    animation: none !important;
  }
  .data-streak {
    transform: translateX(720px);
    opacity: 0.4;
  }
}

/* ============================================================
   MOBILE OPTIMISATIONS
   ============================================================ */

/* --- Small screens (< 640px) --- */
@media (max-width: 639px) {
  /* Tighter section padding */
  section {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  /* Hero: reduce padding, prevent overflow */
  .hero-gradient {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  /* Pricing cards: reduce inner padding */
  #pricing .grid > div {
    padding: 1.25rem;
  }
  #pricing .grid > div h3 {
    font-size: 1rem;
  }

  /* "What You Can Build" cards: tighter padding */
  .example-card .p-8 {
    padding: 1.25rem;
  }
  .example-card .px-8 {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  /* OpenAPI spec code block in Built for Agents */
  .bg-navy pre {
    font-size: 0.7rem;
  }
  .bg-navy .p-8 {
    padding: 1.25rem;
  }

  /* Enterprise section cards */
  #enterprise .p-6 {
    padding: 1rem;
  }

  /* Footer: adjust grid for mobile */
  footer .grid {
    gap: 1.5rem;
  }
}

/* --- Pricing highlight badge fix on small screens --- */
@media (max-width: 639px) {
  .pricing-highlight {
    margin-top: 1rem;
  }
}