/* ==========================================================================
   TABLET VIEW STYLES (769px - 1024px)
   ========================================================================== */

/* ========================================
   RESPONSIVE — TABLET  ≤ 1024px
   ======================================== */
@media (max-width: 1024px) {
  :root {
    --container-px: clamp(24px, 4vw, 48px);
  }

  .hero-text {
    padding-top: clamp(80px, 10vh, 130px) !important;
    padding-bottom: clamp(70px, 8vh, 110px) !important;
  }

  .hero-headline {
    font-size: clamp(48px, 7.5vw, 68px) !important;
    white-space: normal !important;
    flex-wrap: wrap !important;
    line-height: 1.15 !important;
    justify-content: center !important;
    text-align: center !important;
  }

  .service-block {
    grid-template-columns: 1fr;
    gap: clamp(24px, 3vh, 40px);
    position: relative !important;
    top: auto !important;
    min-height: auto !important;
    height: auto !important;
    overflow: visible !important;
    margin-bottom: clamp(30px, 4vh, 48px) !important;
  }

  .service-block:nth-child(even) {
    direction: ltr;
  }

  .service-block:nth-child(even) > * {
    direction: ltr;
  }

  /* On mobile, even blocks have the header in service-block-right (DOM second).
     Force it to render first so title always appears above the cards. */
  .service-block:nth-child(even) .service-block-right {
    order: -1;
  }
  .service-block:nth-child(even) .service-block-left {
    order: 1;
  }

  /* Always stack badge above title on mobile — never side-by-side */
  .service-block-header {
    flex-direction: column;
    gap: 10px;
  }

  /* Improved service cards for tablet and mobile */
  .service-sub-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: clamp(10px, 2vw, 16px) !important;
    width: 100% !important;
    align-content: stretch !important;
    justify-items: stretch !important;
  }

  .service-sub-block {
    min-height: auto !important;
    width: 100% !important;
    display: flex !important;
    align-items: stretch !important;
    justify-content: stretch !important;
  }

  .service-sub-block h4 {
    width: 100% !important;
    height: 100% !important;
    min-height: 52px !important;
    margin: 0 !important;
    padding: clamp(12px, 1.8vh, 16px) clamp(10px, 2vw, 14px) !important;
    font-size: clamp(11px, 2.8vw, 13px) !important;
    font-family: var(--font-display) !important;
    font-weight: 700 !important;
    letter-spacing: 0.8px !important;
    border-radius: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    word-break: break-word !important;
    hyphens: auto !important;
    color: rgba(255, 255, 255, 0.95) !important;
    background: linear-gradient(135deg, rgba(61, 61, 255, 0.15) 0%, rgba(61, 61, 255, 0.05) 100%) !important;
    border: 1px solid rgba(61, 61, 255, 0.28) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  .service-sub-block h4:active,
  .service-sub-block h4:hover {
    transform: translateY(-2px) !important;
    background: linear-gradient(135deg, rgba(61, 61, 255, 0.24) 0%, rgba(61, 61, 255, 0.08) 100%) !important;
    border-color: rgba(61, 61, 255, 0.45) !important;
    box-shadow: 0 6px 20px rgba(59, 79, 255, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  }


  .who-grid {
    grid-template-columns: 1fr;
    gap: clamp(24px, 4vh, 48px);
  }

  .howwework-grid {
    grid-template-columns: 1fr;
    gap: clamp(24px, 3vh, 40px);
  }

  .founders-grid {
    grid-template-columns: repeat(2, 1fr);
    max-width: 700px;
  }

  .trusted-stats {
    gap: clamp(20px, 3vw, 40px);
  }

  .info-card {
    min-height: clamp(320px, 38vh, 460px);
  }

  /* Parallax word section — tablet */
  .service-big-word {
    font-size: clamp(90px, 18vw, 200px);
    letter-spacing: -4px;
  }

  .parallax-images {
    gap: 12px;
  }

  .bb-tags-row {
    animation: bb-tags-scroll 18s linear infinite;
    flex-wrap: nowrap;
  }

  .bb-tags-row--2 {
    animation-direction: reverse;
    animation-duration: 22s;
  }

  .bb-tags-row--3 {
    animation-duration: 26s;
  }

  .bb-tags-row .bb-tag:nth-child(n+5) {
    display: inline-flex;
  }

  .bb-tag {
    font-size: 11px;
    padding: 7px 12px;
  }

  .bb-tags-area {
    overflow: hidden;
  }
}


/* ========================================
   BLINK / BUILD / BOOM — MOBILE & TABLET STICKY STACK
   Overrides earlier mobile rules (placed last so !important wins)
   ======================================== */
@media (max-width: 1024px) {

  /* Each card sticks at top and the next slides over it */
  #section-blink,
  #section-build,
  #section-boom {
    position: sticky !important;
    top: 0 !important;
    height: 100svh !important;
    min-height: 100svh !important;
    padding: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #section-blink { z-index: 1; background: #F3F3F4 !important; }
  #section-build { z-index: 2; background: #0a0a0a !important; }
  #section-boom  { z-index: 3; background: var(--blue, #3D3DFF) !important; }

  /* Inner wrapper — full size, centered, no GSAP transforms */
  #section-blink .parallax-sticky,
  #section-build .parallax-sticky,
  #section-boom  .parallax-sticky {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    min-height: unset !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    transform: none !important;
    will-change: auto !important;
    transform-origin: unset !important;
    padding: 48px 28px !important;
    background: transparent !important;
    gap: 20px !important;
  }

  /* Text block — centered */
  #section-blink .parallax-text-content,
  #section-build .parallax-text-content,
  #section-boom  .parallax-text-content {
    text-align: center !important;
    width: 100% !important;
    margin-bottom: 0 !important;
    order: 0 !important;
    position: relative !important;
    z-index: 2 !important;
  }

  /* Word wrap — relative so labels sit top-left / bottom-right */
  #section-blink .service-word-wrap,
  #section-build .service-word-wrap,
  #section-boom  .service-word-wrap {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: 18px 24px 18px !important;
    margin-bottom: 20px !important;
    overflow: visible !important;
  }

  /* Script labels — absolute, matching desktop positioning */
  #section-blink .script-label.top-left,
  #section-build .script-label.top-left,
  #section-boom  .script-label.top-left {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    font-size: 17px !important;
    order: unset !important;
    align-self: unset !important;
    margin: 0 !important;
    font-family: var(--font-script, cursive) !important;
  }

  #section-blink .script-label.bottom-right,
  #section-build .script-label.bottom-right,
  #section-boom  .script-label.bottom-right {
    position: absolute !important;
    bottom: 0 !important;
    right: 0 !important;
    font-size: 17px !important;
    order: unset !important;
    align-self: unset !important;
    margin: 0 !important;
    font-family: var(--font-script, cursive) !important;
  }

  /* Big word — massive and centered */
  #section-blink .service-big-word,
  #section-build .service-big-word,
  #section-boom  .service-big-word {
    order: 1 !important;
    font-size: clamp(88px, 30vw, 128px) !important;
    letter-spacing: -4px !important;
    line-height: 0.88 !important;
    margin: 0 !important;
  }

  /* Description — centered, readable */
  #section-blink .service-word-desc,
  #section-build .service-word-desc,
  #section-boom  .service-word-desc {
    font-size: 15px !important;
    line-height: 1.7 !important;
    max-width: 290px !important;
    margin: 0 auto !important;
    margin-top: 0 !important;
    text-align: center !important;
  }

  /* ── Per-section colour tokens ── */

  /* BLINK — light card */
  #section-blink .service-big-word { color: #0a0a0a !important; }
  #section-blink .script-label     { color: rgba(0,0,0,0.32) !important; }
  #section-blink .service-word-desc{ color: rgba(0,0,0,0.50) !important; }

  /* BUILD — dark card */
  #section-build .service-big-word { color: #ffffff !important; }
  #section-build .script-label     { color: rgba(255,255,255,0.32) !important; }
  #section-build .service-word-desc{ color: rgba(255,255,255,0.55) !important; }

  /* BOOM — blue card */
  #section-boom .service-big-word  { color: #ffffff !important; }
  #section-boom .script-label      { color: rgba(255,255,255,0.40) !important; }
  #section-boom .service-word-desc { color: rgba(255,255,255,0.72) !important; }

  /* Hide images on mobile */
  #section-blink .parallax-images,
  #section-build .parallax-images,
  #section-boom  .parallax-images  { display: none !important; }
}


@media (min-width: 769px) {
  .hero-pills {
    display: none !important;
  }
}


/* ── Responsive ── */
@media (max-width: 1024px) {
  .bb-cards-wrapper {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .bb-center-btn {
    margin: 0 auto;
    width: 72px;
    height: 72px;
  }

  .bb-card {
    min-height: 280px;
  }

  .bb-tags-row {
    animation: bb-tags-scroll 18s linear infinite;
    flex-wrap: nowrap;
  }

  .bb-tags-row--2 {
    animation-direction: reverse;
    animation-duration: 22s;
  }

  .bb-tags-row--3 {
    animation-duration: 26s;
  }

  .bb-tags-row .bb-tag:nth-child(n+5) {
    display: inline-flex;
  }

  .bb-tag {
    font-size: 11px;
    padding: 7px 12px;
  }

  .bb-tags-area {
    overflow: hidden;
  }
}

/* Tablet specific hero adjustments (768px to 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
  .arc-ring {
    width: 170vw !important;
    height: 170vw !important;
    top: 44vh !important;
  }
  .a-card {
    width: clamp(240px, 24vw, 290px) !important;
    height: clamp(175px, 18vw, 215px) !important;
  }
  .gif-num {
    font-size: clamp(32px, 4vw, 48px) !important;
  }
  .card-label {
    font-size: clamp(9px, 1.2vw, 11px) !important;
    padding: 12px 10px 8px !important;
  }

  /* Video and play button adjustments for tablet view to be perfectly proportional and clickable */
  #home-card-anchor,
  #about-card-anchor {
    width: clamp(200px, 20vw, 240px) !important;
    height: clamp(130px, 14vw, 160px) !important;
  }
  
  .about-play-btn {
    gap: clamp(32px, 4.5vw, 56px) !important;
  }

  #home-reel-section {
    margin-top: 32vh !important;
    gap: 48px !important;
  }

  .arc-hero-para {
    font-size: clamp(14px, 1.8vw, 18px) !important;
    max-width: 680px !important;
    line-height: 1.5 !important;
  }
}