/* =========================================================
   DEUTSCH GO — PHONE INTRO / SMOKE SEPARATOR FINAL
   HERO → SMOKE → TEXT
   Mobile only
========================================================= */

#deutschgoPhoneIntro {
  display: none !important;
}

@media screen and (max-width: 768px) {

  #deutschgoHero {
    position: relative !important;
  }

  #deutschgoPhoneIntro {
    position: absolute !important;
    inset: 0 !important;

    display: block !important;

    width: 100% !important;
    height: 100vh !important;
    height: 100svh !important;

    z-index: 12 !important;
    overflow: hidden !important;

    pointer-events: none !important;

    opacity: 1;
    visibility: visible;

    will-change: opacity;
  }

  /*
    True smoke separator:
    no rectangular veil, no hard edge, no visible box.
  */
  .deutschgo-phone-intro__smoke {
    position: absolute;

    left: 50%;
    bottom: 8.5vh;

    width: 124%;
    height: 31%;

    transform: translateX(-50%) scale(1.02);

    z-index: 1;
    pointer-events: none;

    background:
      radial-gradient(
        ellipse at 50% 58%,
        rgba(18, 59, 74, .58) 0%,
        rgba(18, 59, 74, .40) 24%,
        rgba(8, 31, 43, .24) 43%,
        rgba(8, 31, 43, .10) 58%,
        transparent 76%
      ),
      radial-gradient(
        ellipse at 42% 72%,
        rgba(28, 93, 112, .22) 0%,
        rgba(18, 59, 74, .12) 38%,
        transparent 72%
      ),
      radial-gradient(
        ellipse at 60% 76%,
        rgba(8, 31, 43, .28) 0%,
        rgba(8, 31, 43, .12) 38%,
        transparent 70%
      );

    filter: blur(22px);

    -webkit-mask-image:
      radial-gradient(
        ellipse at center,
        #000 0%,
        rgba(0,0,0,.95) 36%,
        rgba(0,0,0,.62) 58%,
        transparent 82%
      );
    mask-image:
      radial-gradient(
        ellipse at center,
        #000 0%,
        rgba(0,0,0,.95) 36%,
        rgba(0,0,0,.62) 58%,
        transparent 82%
      );

    opacity: .98;

    will-change: opacity, transform;
  }

  .deutschgo-phone-intro__content {
    position: absolute;

    left: 22px;
    right: 22px;
    bottom: 3.6vh;

    z-index: 2;

    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center;
  }

  .deutschgo-phone-intro__title-wrap,
  .deutschgo-phone-intro__body-wrap {
    width: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;

    will-change: transform, opacity;
  }

  .deutschgo-phone-intro__title {
    margin: 0;

    color: #FFF8F1;

    font-size: clamp(34px, 10.4vw, 48px);
    line-height: .94;
    font-weight: 900;
    letter-spacing: -.045em;

    text-shadow:
      0 7px 22px rgba(0, 0, 0, .34),
      0 0 14px rgba(255, 248, 241, .05);
  }

  .deutschgo-phone-intro__title span {
    color: #F4C542;

    text-shadow:
      0 0 16px rgba(244, 197, 66, .18),
      0 7px 20px rgba(0, 0, 0, .24);
  }

  .deutschgo-phone-intro__text {
    width: min(100%, 310px);

    margin: 11px auto 0;

    color: rgba(255, 248, 241, .91);

    font-size: 13px;
    line-height: 1.55;
    font-weight: 500;

    text-shadow: 0 4px 14px rgba(0, 0, 0, .34);
  }

  .deutschgo-phone-intro__button {
    pointer-events: auto !important;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    min-width: 152px;
    height: 46px;

    margin-top: 15px;
    padding: 0 20px;

    border: 0;
    border-radius: 999px;

    background: #F4C542;
    color: #081F2B;

    font-size: 12px;
    font-weight: 900;
    letter-spacing: .05em;

    box-shadow:
      0 13px 26px rgba(0, 0, 0, .22),
      inset 0 1px 0 rgba(255, 255, 255, .34);

    cursor: pointer;

    transition:
      transform .2s ease,
      box-shadow .2s ease;
  }

  .deutschgo-phone-intro__button:active {
    transform: scale(.95);
  }

  .deutschgo-phone-intro__arrow {
    width: 17px;
    height: 17px;

    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
}

/* =========================================================
   CACHE / RE-INJECTION SAFETY
========================================================= */
@media screen and (max-width: 768px) {
  #deutschgoHero > #deutschgoPhoneIntro {
    display: block !important;
  }

  #deutschgoHero:not(:has(> #deutschgoPhoneIntro)) {
    position: relative !important;
  }

  #deutschgoPhoneIntro[aria-hidden="false"] {
    display: block !important;
  }
}