/* ============================================
   RESPONSIVE
   ============================================ */

/* Tablet breakpoint */
@media (max-width: 1024px) {
  .bento-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .bento-large {
    grid-column: span 2;
    grid-row: span 1;
    min-height: 380px;
  }

  .bento-medium {
    grid-column: span 1;
  }
}

@media (max-width: 768px) {
  /* Hero code/CTA mobile styles moved to hero.css */


  .services, .process, .cta-section {
    padding: 60px 0;
  }

  .cta-section {
    padding: 80px 0;
  }

  /* Section titles smaller on mobile */
  .section-title {
    font-size: clamp(1.6rem, 6vw, 2.2rem);
    margin-bottom: 16px;
  }

  .section-subtitle {
    font-size: 0.9rem;
    line-height: 1.5;
  }

  /* Bento grid responsive */
  .bento-grid {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 2rem;
  }

  .bento-large,
  .bento-medium,
  .bento-small {
    grid-column: span 1;
    grid-row: span 1;
    min-height: auto;
  }

  .bento-large {
    min-height: 280px;
  }

  .bento-medium {
    min-height: 200px;
  }

  /* Bento card content - tighter on mobile */
  .bento-card {
    padding: 0.5rem 0.75rem 0.75rem;
  }

  .bento-content {
    margin-bottom: 0.75rem;
  }

  .bento-title {
    font-size: 1rem;
    margin-bottom: 0;
  }

  .bento-desc {
    font-size: 0.8rem;
    line-height: 1.4;
  }

  /* Mockup stats - tighter */
  .mockup-stats {
    flex-direction: column;
    gap: 6px;
  }

  .stat-card {
    padding: 8px;
    gap: 4px;
  }

  .stat-icon {
    width: 22px;
    height: 22px;
  }

  .stat-icon svg {
    width: 12px;
    height: 12px;
  }

  .stat-value {
    font-size: 12px;
  }

  .stat-label {
    font-size: 8px;
  }

  .stat-trend {
    font-size: 8px;
  }

  /* Dashboard mockup adjustments */
  .mockup-dashboard {
    min-height: 240px;
  }

  .mockup-sidebar {
    width: 42px;
    padding: 0.5rem 0.25rem;
  }

  .sidebar-item {
    width: 32px;
    height: 32px;
  }

  .sidebar-item svg {
    width: 14px;
    height: 14px;
  }

  .mockup-main {
    padding: 10px;
    gap: 8px;
  }

  .header-title {
    font-size: 12px;
  }

  .header-breadcrumb {
    font-size: 8px;
  }

  /* Browser mockup adjustments */
  .mockup-browser {
    min-height: 180px;
  }

  .browser-bar {
    padding: 6px 8px;
  }

  .browser-url {
    font-size: 8px;
    padding: 4px 8px;
  }

  /* API mockup adjustments */
  .mockup-api {
    min-height: 160px;
  }

  .api-hub {
    width: 50px;
    height: 50px;
  }

  .endpoint-box {
    padding: 6px 8px;
    font-size: 8px;
  }

  /* Scroll-based animation states */
  .bento-card {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
  }

  .bento-card.in-view {
    opacity: 1;
    transform: translateY(0);
  }

  /* Hide opacity-based elements when card is not in view */
  .bento-card:not(.in-view) .tracking-dot,
  .bento-card:not(.in-view) .packet,
  .bento-card:not(.in-view) .browser-cursor {
    opacity: 0 !important;
  }
  .bento-card:not(.in-view) .webhook-notification {
    opacity: 0;
    transform: translateX(20px) scale(0.9);
  }
  .bento-card:not(.in-view) .api-code-snippets {
    opacity: 0;
    transform: translateX(-20px);
  }

  /* Hide circuit decorations on mobile */
  .circuit-left,
  .circuit-right {
    display: none;
  }

  /* Move JS logo lower on mobile */
  .tech-icon.tech-js {
    top: 18%;
  }

  /* ============================================
     PROCESS SECTION - MOBILE
     ============================================ */
  /* Hide the code block on mobile */
  .process-code-block {
    display: none !important;
  }

  /* Timeline panel fills width */
  .process-layout {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-top: 2rem;
  }

  /* Process phases panel mobile */
  .process-phases-panel {
    border-radius: 16px;
  }

  .phases-panel-header {
    padding: 10px 14px;
  }

  .phases-header-left {
    font-size: 0.75rem;
    gap: 8px;
  }

  .phases-header-left svg {
    width: 14px;
    height: 14px;
  }

  .phases-list {
    padding: 6px;
    gap: 0;
  }

  .phase-card {
    padding: 14px 12px;
    gap: 12px;
  }

  .phase-number {
    font-size: 1.2rem;
    min-width: 28px;
  }

  .phase-name {
    font-size: 0.8rem;
  }

  .phase-weeks {
    font-size: 0.6rem;
    padding: 2px 6px;
  }

  .phase-detail {
    font-size: 0.7rem;
    margin-bottom: 6px;
    line-height: 1.4;
  }

  .phase-deliverables {
    gap: 4px;
  }

  .phase-deliverable {
    font-size: 0.55rem;
    padding: 2px 6px;
  }

  /* Reduce particle count effect on mobile */
  .particles-container .particle:nth-child(n+4) {
    display: none;
  }

  /* Simplify flowing lines on mobile */
  .flowing-lines .flowing-line:nth-child(n+2) {
    display: none;
  }

  /* Smaller grid pattern on mobile */
  .process-squares {
    background-size: 40px 40px, 40px 40px, 120px 120px;
  }

  /* Simplify CTA effects on mobile */
  .cta-glow-orb {
    width: 300px;
    height: 300px;
  }

  .cta-accent-line {
    display: none;
  }

  .cta-star:nth-child(n+5) {
    display: none;
  }

  /* Reduce diamonds on mobile */
  .cta-diamonds {
    gap: 25px;
  }

  .diamond { width: 40px; height: 40px; }
  .diamond.sm { width: 28px; height: 28px; }
  .diamond.lg { width: 55px; height: 55px; }
  .diamond.xl { width: 70px; height: 70px; }

  .diamond:nth-child(n+25) {
    display: none;
  }

  /* Adjust section label on mobile */
  .section-label {
    font-size: 0.75rem;
    padding: 6px 12px;
  }

  .cta-buttons-final {
    flex-direction: column;
    align-items: center;
  }

  .btn-primary, .btn-secondary {
    width: 100%;
    max-width: 300px;
    justify-content: center;
  }

  .cta-content {
    padding: 20px;
  }

  /* Footer Responsive */
  .footer {
    padding: 60px 0 0;
  }
  
  .footer-main {
    grid-template-columns: 1fr;
    gap: 32px;
    padding-bottom: 32px;
    text-align: center;
  }

  .footer-brand-col {
    align-items: center;
    gap: 12px;
  }
  
  .footer-logo-img {
    height: 36px;
  }

  .footer-tagline {
    max-width: 100%;
    font-size: 0.8rem;
  }

  .footer-social {
    justify-content: center;
    gap: 10px;
    margin-top: 4px;
  }
  
  .social-link {
    width: 36px;
    height: 36px;
    border-radius: 8px;
  }
  
  .social-link svg {
    width: 16px;
    height: 16px;
  }

  .footer-nav-cols {
    justify-content: center;
    gap: 40px;
  }

  .footer-nav-col {
    align-items: center;
    gap: 12px;
  }
  
  .footer-nav-title {
    font-size: 0.7rem;
    margin-bottom: 2px;
  }
  
  .footer-nav-list {
    gap: 10px;
  }
  
  .footer-nav-list a {
    font-size: 0.85rem;
  }

  .footer-nav-list a::after {
    display: none;
  }

  .footer-status-col {
    justify-content: center;
  }

  .footer-status-card {
    max-width: 280px;
    margin: 0 auto;
    padding: 0.75rem;
    gap: 14px;
    border-radius: 0.4rem;
  }
  
  .status-header {
    gap: 8px;
  }
  
  .status-text {
    font-size: 0.75rem;
  }

  .status-metrics {
    justify-content: center;
    gap: 20px;
  }
  
  .status-metric .metric-label {
    font-size: 0.65rem;
  }
  
  .status-metric .metric-value {
    font-size: 1rem;
  }
  
  .footer-cta-btn {
    padding: 0.4rem 0.75rem;
    font-size: 0.8rem;
    border-radius: 0.3rem;
  }
  
  .footer-cta-btn svg {
    width: 14px;
    height: 14px;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 12px;
    text-align: center;
    padding: 16px 0;
  }
  
  .footer-bottom-left p {
    font-size: 0.75rem;
  }

  .footer-circuit {
    display: none;
  }
}
/* Utility to pause animations for performance */
.paused, .paused * {
  animation-play-state: paused !important;
}

/* ============================================
   BENTO IN-VIEW ANIMATIONS
   Triggered by JS IntersectionObserver (mobile scroll).
   Lives OUTSIDE any media query so CSS always applies.
   ============================================ */
.bento-card.in-view .card-glow { opacity: 1; }
.bento-card.in-view::before { opacity: 1; }
.bento-card.in-view .tracking-dot { opacity: 1; }
.bento-card.in-view .connection-lines { opacity: 1; }
.bento-card.in-view .packet { opacity: 1; }
.bento-card.in-view .browser-bg-pattern { opacity: 1; }
.bento-card.in-view .api-code-snippets { opacity: 1; transform: translateX(0); }
.bento-card.in-view .webhook-notification { opacity: 1; transform: translateX(0) scale(1); }

.bento-card.in-view .chart-path { animation: chartDraw 2s ease-out forwards; }
.bento-card.in-view .chart-area { animation: chartFadeIn 1s ease-out 1s forwards; }
.bento-card.in-view .data-point { animation: pointPop 0.3s ease-out forwards; }
.bento-card.in-view .data-point:nth-child(1) { animation-delay: 0.4s; }
.bento-card.in-view .data-point:nth-child(2) { animation-delay: 0.8s; }
.bento-card.in-view .data-point:nth-child(3) { animation-delay: 1.2s; }
.bento-card.in-view .data-point:nth-child(4) { animation-delay: 1.6s; }
.bento-card.in-view .data-point:nth-child(5) { animation-delay: 2s; }

.bento-card.in-view .hub-inner { transform: scale(1.05) rotate(5deg); box-shadow: 0 0 30px rgba(100,220,255,0.5); }
.bento-card.in-view .hub-glow { animation: hubGlow 3s ease-in-out infinite; }
.bento-card.in-view .api-ring.ring-1 { animation: ringRotate 20s linear infinite; }
.bento-card.in-view .api-ring.ring-2 { animation: ringRotate 30s linear infinite reverse; }
.bento-card.in-view .api-ring.ring-3 { animation: ringPulse 4s ease-in-out infinite; }

.bento-card.in-view .api-path { stroke-dasharray: 8 4; animation: pathFlow 1.5s linear infinite; }
.bento-card.in-view .webhook-notification { animation: webhookSlide 0.5s ease-out, webhookPulse 3s ease-in-out 0.5s infinite; }
.bento-card.in-view .browser-cursor { opacity: 1; animation: cursorMove 4s ease-in-out infinite; }
.bento-card.in-view .btn-shine { animation: btnShine 3s ease-in-out infinite; }
.bento-card.in-view .card-shimmer { animation: cardShimmer 3s ease-in-out infinite; }

.bento-card.in-view .mockup-dashboard { border-color: rgba(53,118,197,0.3); }
.bento-card.in-view .stat-card { border-color: rgba(100,220,255,0.12); background: rgba(255,255,255,0.04); }
.bento-card.in-view .mockup-chart,
.bento-card.in-view .activity-feed { border-color: rgba(100,220,255,0.1); }
.bento-card.in-view .tech-logo { border-color: rgba(100,220,255,0.15); color: var(--text-primary); background: rgba(255,255,255,0.05); }
.bento-card.in-view .tech-logo:nth-child(1) { color: #61dafb; }
.bento-card.in-view .tech-logo:nth-child(2) { color: #68a063; }
.bento-card.in-view .tech-logo:nth-child(3) { color: #ff9900; }
.bento-card.in-view .tech-logo:nth-child(4) { color: #3178c6; }