/* ==========================================================================
   Fast Launch — Hero.
   The hero is styled identically to the /web-development hero: it reuses the
   shared #marketing rules (marketingPage/style.css) and the tech-pin icon
   layout from webDevelopmentPage/hero.css. Only the Shopify + WordPress icons
   are shown and only the wording is Fast Launch's — no custom text styling is
   applied, so the eyebrow, heading and secondary line all render exactly as
   on the Web Development page.

   Single adjustment: Fast Launch has three text lines (eyebrow → heading →
   secondary line) instead of web-development's two, so keep them in natural
   order on mobile (the shared rule column-reverses a two-line block).
   ========================================================================== */

#marketing.web-hero .top-part .title-block {
  flex-direction: column;
}

/* ==========================================================================
   Raise and enlarge the two platform icons toward the centre.
   On /web-development the centre is filled by the Node/Laravel icons; here
   only Shopify + WordPress exist, so make them bigger and lift them high
   toward the middle to fill the empty centre (especially on mobile).
   Overrides webDevelopmentPage/hero.css.
   ========================================================================== */
#marketing.web-hero .tp-wp {
  width: 340px;
  left: 20%;
  top: 26%;
}
#marketing.web-hero .tp-shopify {
  width: 340px;
  right: 20%;
  top: 24%;
}

@media (max-width: 768px) {
  #marketing.web-hero .tp-wp {
    width: 230px;
    left: 3%;
    top: 26%;
  }
  #marketing.web-hero .tp-shopify {
    width: 230px;
    right: 3%;
    top: 24%;
  }
}

/* ==========================================================================
   Extra scattered Shopify & WordPress copies.
   Only the two platforms are used (no other tech icons); they are multiplied
   into smaller, dimmer copies so the hero doesn't feel empty. They reuse the
   web-development .tech-pin base (position/glow/float) and its float keyframes
   (tp-float-a … tp-float-e).
   ========================================================================== */
#marketing.web-hero .tp-mini {
  z-index: -3;
}
#marketing.web-hero .tp-mini .tech-glow {
  opacity: 0.55;
}

/* Desktop scatter — top corners, inner accents and lower centre */
#marketing.web-hero .tp-shopify-a {
  width: 120px;
  left: 5%;
  top: 15%;
  opacity: 0.55;
  animation-name: tp-float-a;
  animation-duration: 12s;
}
#marketing.web-hero .tp-shopify-b {
  width: 78px;
  left: 32%;
  top: 72%;
  opacity: 0.4;
  filter: blur(1px);
  animation-name: tp-float-b;
  animation-duration: 14s;
}
#marketing.web-hero .tp-shopify-c {
  width: 64px;
  right: 28%;
  top: 20%;
  opacity: 0.45;
  filter: blur(0.6px);
  animation-name: tp-float-c;
  animation-duration: 13s;
}
#marketing.web-hero .tp-wp-a {
  width: 120px;
  right: 5%;
  top: 13%;
  opacity: 0.55;
  animation-name: tp-float-d;
  animation-duration: 12.5s;
}
#marketing.web-hero .tp-wp-b {
  width: 78px;
  right: 32%;
  top: 74%;
  opacity: 0.4;
  filter: blur(1px);
  animation-name: tp-float-e;
  animation-duration: 15s;
}
#marketing.web-hero .tp-wp-c {
  width: 64px;
  left: 28%;
  top: 22%;
  opacity: 0.45;
  filter: blur(0.6px);
  animation-name: tp-float-a;
  animation-duration: 13.5s;
}

/* Mobile scatter — corners only, scaled down; drop the tiny inner accents to
   keep the phone layout clean. */
@media (max-width: 768px) {
  #marketing.web-hero .tp-shopify-a {
    width: 64px;
    left: 2%;
    top: 8%;
  }
  #marketing.web-hero .tp-wp-a {
    width: 64px;
    right: 2%;
    top: 8%;
  }
  #marketing.web-hero .tp-shopify-b {
    width: 52px;
    left: 5%;
    top: 82%;
  }
  #marketing.web-hero .tp-wp-b {
    width: 52px;
    right: 5%;
    top: 82%;
  }
  #marketing.web-hero .tp-shopify-c,
  #marketing.web-hero .tp-wp-c {
    display: none;
  }
}