/* ==========================================================================
   INNOVENTURE FINTECH PVT LTD — RESPONSIVE STYLESHEET
   --------------------------------------------------------------------------
   Loaded after style.css. Bootstrap 5 breakpoints are used throughout so the
   custom layout and the grid always agree on where they break:

     xs  <576px    Portrait phones      (base styles in style.css)
     sm  ≥576px    Landscape phones
     md  ≥768px    Tablets
     lg  ≥992px    Small laptops
     xl  ≥1200px   Desktops             (navbar expands here)
     xxl ≥1400px   Large desktops

   Sections are ordered largest → smallest so the cascade reads top-down.

   TABLE OF CONTENTS
   01. ≥1400px  Large desktop refinements
   02. ≤1399px  Standard desktop
   03. ≤1199px  Tablet landscape + mobile navigation panel
   04. ≤991px   Tablet portrait — timeline collapses to a single rail
   05. ≤767px   Mobile landscape — sticky CTA appears
   06. ≤575px   Mobile portrait
   07. ≤400px   Small phones
   08. Landscape & pointer/hover capability queries
   ========================================================================== */


/* ==========================================================================
   01. ≥1400px — LARGE DESKTOP
   ========================================================================== */
@media (min-width: 1400px) {
  .hero { min-height: 96vh; }

  .section__head { margin-bottom: 4rem; }
}


/* ==========================================================================
   02. ≤1399px — STANDARD DESKTOP
   ========================================================================== */
@media (max-width: 1399.98px) {
  /* 14 industries over two tidy rows of 5 + 4 rather than a cramped 7 */
  .industry-grid { grid-template-columns: repeat(5, 1fr); }
}


/* ==========================================================================
   03. ≤1199px — TABLET LANDSCAPE & MOBILE NAVIGATION
   The navbar collapses at xl, so this is where the off-canvas-style
   dropdown panel is defined.
   ========================================================================== */
@media (max-width: 1199.98px) {

  :root { --nav-h: 72px; }

  /* ---- Collapsed navigation panel ---- */
  .navbar-collapse {
    margin-top: .85rem;
    padding: 1rem;
    border-radius: var(--r-lg);
    background: var(--glass-bg-solid);
    border: 1px solid var(--glass-border);
    box-shadow: var(--sh-lg);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    max-height: calc(100vh - var(--nav-h) - 2rem);
    overflow-y: auto;
  }

  .navbar-nav { gap: .15rem; }

  .nav-link {
    padding: .7rem .9rem;
    border-radius: var(--r-sm);
    font-size: .96rem;
  }
  .nav-link:hover,
  .nav-link.active { background: var(--c-primary-50); }

  /* The sliding underline reads as a misplaced artefact in a stacked menu */
  .nav-link::after { display: none; }

  .navbar-nav .nav-item:last-child {
    margin-top: .7rem;
    padding-top: .9rem;
    border-top: 1px solid var(--border);
  }

  /* ---- Hero ----
     Keep a real min-height: the copy alone (headline + typed + CTA) is too
     short to hold the banner open on its own. */
  .hero {
    min-height: 82vh;
    padding-bottom: 5.5rem;
  }

  /* ---- Timeline: tighten the gutter around the centre spine ---- */
  .timeline__item { padding-right: 2.6rem; }
  .timeline__item:nth-child(even) { padding-left: 2.6rem; }

  /* ---- Footer offices stack into two columns ---- */
  .footer__offices { grid-template-columns: repeat(2, 1fr); }
}


/* ==========================================================================
   04. ≤991px — TABLET PORTRAIT
   The two-sided timeline collapses onto a single left-hand rail, which is
   the standard mobile pattern and keeps the markup order intact.
   ========================================================================== */
@media (max-width: 991.98px) {

  /* ---- Hero ---- */
  .hero__title { letter-spacing: -.025em; }

  /* The scroll cue collides with content once the hero shortens */
  .hero__scroll { display: none; }

  /* ---- About ---- */
  .about__visual { max-width: 520px; margin: 0 auto; }
  .about__badge { right: 0; }

  /* ---- Timeline → single rail ---- */
  .timeline__spine { left: 27px; transform: none; }

  .timeline__item,
  .timeline__item:nth-child(even) {
    width: 100%;
    margin-left: 0;
    padding-left: 4.5rem;
    padding-right: 0;
  }
  .timeline__marker,
  .timeline__item:nth-child(even) .timeline__marker {
    left: 0;
    right: auto;
    top: 1.3rem;
  }

  /* ---- Industries ---- */
  .industry-grid { grid-template-columns: repeat(4, 1fr); }

  /* ---- Newsletter stacks ---- */
  .newsletter { padding: 1.8rem; }
  .newsletter__form { max-width: 100%; }
}


/* ==========================================================================
   05. ≤767px — MOBILE LANDSCAPE
   The sticky bottom CTA bar activates here, so floating buttons and the
   cookie banner all shift up to clear it.
   ========================================================================== */
@media (max-width: 767.98px) {

  :root { --sp-section: 3.5rem; }

  /* ---- Certificate: the 150px label column starves the value beside it ---- */
  .cert__row {
    grid-template-columns: 1fr;
    gap: .15rem;
  }
  /* Hover-reveal is meaningless on touch — show the cue outright */
  .cert__preview::after { opacity: 1; transform: scale(1); }

  /* ---- Top bar: keep only what is tappable and useful ---- */
  .topbar { font-size: .72rem; }
  .topbar__row {
    justify-content: center;
    gap: .5rem 1rem;
    padding: .45rem 0;
  }
  .topbar__contact { justify-content: center; gap: 1rem; }
  .topbar__social { display: none; }

  /* ---- Hero ---- */
  .hero { padding-bottom: 4rem; }

  .hero__cta .btn { width: 100%; justify-content: center; }

  /* ---- Sections ---- */
  .section__head { margin-bottom: 2.4rem; }

  /* ---- About ---- */
  .about__list { grid-template-columns: 1fr; }
  .about__actions { gap: 1.2rem; }
  .about__actions .btn { width: 100%; justify-content: center; }
  .about__badge {
    position: static;
    margin: 1.2rem auto 0;
    width: fit-content;
  }

  /* ---- Filters scroll horizontally instead of wrapping to four rows ---- */
  .filter-bar {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: .6rem;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .filter-bar::-webkit-scrollbar { display: none; }
  .filter-btn { flex: none; scroll-snap-align: start; }

  /* ---- Industries ---- */
  .industry-grid { grid-template-columns: repeat(3, 1fr); gap: .7rem; }
  .industry-tile { padding: 1.25rem .5rem; }
  .industry-tile i { font-size: 1.4rem; }
  .industry-tile span { font-size: .74rem; }

  /* ---- Tech ---- */
  .tech-grid { grid-template-columns: repeat(auto-fill, minmax(98px, 1fr)); gap: .7rem; }
  .tech-chip { padding: 1.1rem .5rem; }
  .tech-chip i { font-size: 1.55rem; }

  /* ---- Timeline ---- */
  .timeline__spine { left: 21px; }
  .timeline__item,
  .timeline__item:nth-child(even) { padding-left: 3.6rem; }
  .timeline__marker,
  .timeline__item:nth-child(even) .timeline__marker {
    width: 44px;
    height: 44px;
    font-size: .95rem;
    box-shadow: 0 0 0 5px var(--bg-body), var(--sh-brand);
  }

  /* ---- CTA ---- */
  .cta__actions { flex-direction: column; }
  .cta__actions .btn { width: 100%; }
  .cta__assurances { flex-direction: column; align-items: center; gap: .55rem; }

  /* ---- Testimonials: arrows are redundant once slides are full width ---- */
  .testimonial-nav { display: none; }
  /* No arrows, so give their lane back to the card */
  .testimonial-swiper { padding-inline: .5rem; }

  /* ---- Footer ---- */
  .footer__title { margin-bottom: 1rem; }
  .footer__bottom-row { justify-content: center; text-align: center; }
  .footer__legal { justify-content: center; gap: 1rem; }

  /* ---- Sticky CTA bar activates ---- */
  .sticky-cta { display: flex; }

  /* Everything floating lifts above the 52px sticky bar */
  .fab--top      { bottom: 74px; }
  .fab--chat     { bottom: 140px; }
  .fab--whatsapp { bottom: 206px; }

  .fab {
    right: 14px;
    width: 48px;
    height: 48px;
    font-size: 1.15rem;
  }
  /* Tooltips have no hover state to trigger them on touch devices */
  .fab__tip { display: none; }

  /* The hero's CTAs go full-width here, so a floating button sitting in that
     band lands right on top of them. Hold the FABs back until the hero has
     scrolled past — the same moment the sticky CTA arrives. (.fab--top has
     its own .is-visible gate and is already hidden up here.) */
  .fab--whatsapp,
  .fab--chat {
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
  }
  body.is-past-hero .fab--whatsapp,
  body.is-past-hero .fab--chat {
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .chat-panel {
    right: 14px;
    left: 14px;
    bottom: 200px;
    width: auto;
    max-width: none;
  }
  .chat-panel__body { max-height: 190px; }

  /* ---- Cookie banner ----
     Sits flush to the bottom: the sticky CTA is suppressed while consent is
     pending (see initCookies), so there is nothing underneath to clear, and
     those 52px become clearance for the hero CTA instead. */
  .cookie-banner {
    bottom: 0;
    flex-wrap: wrap;
    padding: .85rem 1rem;
  }
  .cookie-banner__actions { width: 100%; }
  .cookie-banner__actions .btn { flex: 1; }

  /* Every px of bar height eats into the hero CTA's clearance. */
  .cookie-banner__copy strong { font-size: .84rem; }
  .cookie-banner__copy p { font-size: .7rem; line-height: 1.55; }
}


/* ==========================================================================
   06. ≤575px — MOBILE PORTRAIT
   ========================================================================== */
@media (max-width: 575.98px) {

  :root { --gutter: 1rem; }

  /* ---- About highlight cards: 2-up is too tight to read on a phone ---- */
  .about__highlights { grid-template-columns: 1fr; }

  /* ---- Top bar: the email address no longer fits legibly ---- */
  .topbar__contact li:nth-child(2) { display: none; }

  /* ---- Brand shrinks so the toggle + hamburger stay comfortable.
     At 5.02:1 the logo is wide, so height is capped hard here: 30px still
     leaves ~150px of width, which fits beside both buttons on a 360px screen. ---- */
  .brand__logo,
  #mainNav.is-stuck .brand__logo { height: 30px; }

  /* ---- Hero ---- */
  .hero__title { line-height: 1.14; }
  .hero__typed-wrap { min-height: 3.2em; }

  /* ---- Cards ---- */
  .feature-card { padding: 1.7rem 1.4rem; }
  .feature-card__no { font-size: 2.5rem; top: .8rem; right: 1.1rem; }

  .service-card,
  .product-card,
  .job-card { padding: 1.5rem 1.3rem; }

  .testimonial-card { padding: 1.6rem 1.4rem; }
  .testimonial-card::before { font-size: 4.5rem; right: 1rem; }

  .timeline__card { padding: 1.5rem 1.3rem; }

  /* ---- Industries ---- */
  .industry-grid { grid-template-columns: repeat(2, 1fr); }

  /* ---- Tech ---- */
  .tech-grid { grid-template-columns: repeat(3, 1fr); }

  /* ---- Contact ---- */
  .contact__form-wrap { padding: 1.3rem; }
  .contact__info { padding: 1.5rem 1.3rem; }
  #contactSubmit { width: 100%; justify-content: center; }

  /* ---- Newsletter: the inline button wraps under the field ---- */
  .newsletter { padding: 1.5rem; }
  .newsletter__form {
    flex-direction: column;
    min-width: 0;
  }
  .newsletter__form .btn { width: 100%; justify-content: center; }
  .newsletter__status { position: static; margin-top: .5rem; }

  /* ---- Footer ---- */
  .footer__offices { grid-template-columns: 1fr; gap: 1.1rem; }

  /* ---- Cookie banner ---- */
  .cookie-banner__icon { display: none; }
  .cookie-banner__copy p { font-size: .72rem; }

  /* ---- Sticky CTA ---- */
  .sticky-cta__btn { font-size: .78rem; padding: .8rem .35rem; }
}


/* ==========================================================================
   07. ≤400px — SMALL PHONES
   ========================================================================== */
@media (max-width: 400px) {
  .industry-grid { gap: .5rem; }
  .tech-grid { grid-template-columns: repeat(2, 1fr); }

  .filter-btn { padding: .48rem 1rem; font-size: .78rem; }

  .sticky-cta__btn { font-size: .72rem; gap: .3rem; }
  .sticky-cta__btn i { font-size: .8rem; }
}


/* ==========================================================================
   08. CAPABILITY & ORIENTATION QUERIES
   ========================================================================== */

/* ---- Short desktop viewports ----
   The hero is NOT viewport-height-driven: its content column exceeds
   min-height, so `align-items: center` never engages and padding cannot lift
   anything. The only way to keep the CTA and the stats row on the fold is to
   make the content itself shorter. Two tiers, because 900px and 768px screens
   need very different amounts of trimming.

   Tier 1 — 900px-tall desktops (the most common laptop fold).

   NOTE: min-height stays a real value. It was `auto` while the hero held a
   subtitle, CTA and stats row — content that overflowed min-height anyway. With
   that copy gone the hero collapsed to ~374px, which is shorter than the hand
   artwork, and the hands spilled up into the navbar. */
@media (min-width: 992px) and (max-height: 940px) {
  .hero {
    min-height: 86vh;
    padding-top: calc(var(--nav-h) + 2rem);
    padding-bottom: 4rem;
  }
  .hero__title { font-size: clamp(2rem, 1rem + 2.9vw, 3.5rem); }
  .hero__typed-wrap { margin-bottom: 1.2rem; }

  /* Once the hero is trimmed, the cue sits at the same height as the stats row
     and collides with "Countries Served". There is also nothing left to hint at
     — the whole hero is already on the fold. */
  .hero__scroll { display: none; }
}

/* Tier 2 — 768px-tall laptops and 13" screens. */
@media (min-width: 992px) and (max-height: 820px) {
  .hero {
    padding-top: calc(var(--nav-h) + 1.25rem);
    padding-bottom: 3rem;
  }
  .hero__title { font-size: clamp(1.9rem, 1rem + 2.5vw, 2.9rem); }
  .hero__typed-wrap { margin-bottom: .9rem; min-height: 1.6em; }
}

/* Short landscape viewports (phones held sideways): the full-height hero
   would otherwise push every CTA below the fold. */
@media (max-height: 560px) and (orientation: landscape) {
  .hero {
    min-height: auto;
    padding-top: calc(var(--nav-h) + 2rem);
    padding-bottom: 3rem;
  }
  .hero__scroll { display: none; }
  #preloader .preloader__ring { width: 58px; height: 58px; margin-bottom: 1rem; }
}

/* Touch devices: hover effects either do nothing or stick after a tap, so
   the lift transforms are dropped and tap targets are enlarged instead. */
@media (hover: none) {
  .feature-card:hover,
  .service-card:hover,
  .product-card:hover,
  .portfolio-card:hover,
  .blog-card:hover,
  .job-card:hover,
  .tech-chip:hover,
  .industry-tile:hover,
  .timeline__card:hover,
  .counter-card:hover,
  .testimonial-card:hover {
    transform: none;
  }

  /* The portfolio overlay is hover-only on desktop; on touch it is always on
     at low opacity so the "open case study" affordance stays discoverable. */
  .portfolio-card__overlay {
    opacity: 1;
    background: linear-gradient(0deg, rgba(18, 24, 68, .55) 0%, transparent 55%);
  }
  .portfolio-card__zoom {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    width: 42px;
    height: 42px;
    font-size: .85rem;
    transform: none;
  }

  /* WCAG 2.5.5 — minimum 44×44px touch targets */
  .nav-link { min-height: 44px; display: flex; align-items: center; }
  .topbar__social a { width: 32px; height: 32px; }
}

/* ==========================================================================
   TOUCH TARGET SIZING
   Audited at 390x844: these were the only interactive elements whose smaller
   dimension fell under ~24px. They are all text links whose hit area was just
   the line box, so padding fixes them without moving anything visually, the
   surrounding rows already have the vertical room.
   ========================================================================== */
@media (max-width: 991.98px) {
  .topbar__contact a {
    display: inline-flex;
    align-items: center;
    font-size: .75rem;          /* was 11.52px, the only sub-12px rendered text */
    padding-block: .3rem;
  }
  .footer__contact a,
  .contact__list a {
    display: inline-block;
    padding-block: .3rem;
  }
  .footer__legal a {
    display: inline-block;
    padding-block: .35rem;
  }
  .link-more { padding-block: .3rem; }

  /* Inline links inside body copy (e.g. the mailto in the careers intro).
     Padding on an inline element grows the hit box without touching the line
     box, so nothing reflows. */
  .section__lead a,
  .blog-body a { padding-block: .25rem; }

  /* Consent checkbox was 16x16 and is a required field on the contact form.
     Bootstrap indents .form-check by 1.5em and pulls the input back by the
     same amount, so growing the input alone desyncs the pair and the label
     wraps underneath it. The row's padding and the input's negative margin
     have to move together. */
  .form-check {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding-left: 0;
  }
  .form-check-input {
    flex: 0 0 auto;
    float: none;
    width: 1.5rem;
    height: 1.5rem;
    margin: .1rem 0 0;
  }
  .form-check-label { flex: 1 1 auto; }
  .form-check .invalid-feedback { flex: 1 0 100%; }

}

/* Carousel bullets are 9px dots. Enlarging their hit area enough to pass would
   either overlap the neighbouring bullet or, for the 28-bullet services run,
   push the block onto five rows. On a touch device they become a progress
   indicator and the 46px arrows plus swipe do the navigating; a mouse keeps
   them clickable. Keyed off pointer type, not width, because that is the
   actual condition, a 1024px tablet has the same fat-finger problem. */
@media (pointer: coarse) {
  .services-swiper .swiper-pagination,
  .industries-swiper .swiper-pagination,
  .tech-swiper .swiper-pagination,
  .products-swiper .swiper-pagination,
  .testimonial-swiper .swiper-pagination { pointer-events: none; }
}

/* Fine pointers only: parallax and magnetic hover are pointless (and can
   misfire) on touch, so script.js also gates them on this query. */
@media (hover: hover) and (pointer: fine) {
  .btn,
  .glass-card { will-change: transform; }
}