/* ===================== APPLICATION PAGE ===================== */

.app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: #232328;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.app__header-container{
  position: relative;
}
/* ---- Ball: top-left ---- */
.app::before {
content: '';
    content: '';
    position: absolute;
    top: 5%;
    left: -10%;
    background: url(../img/app/ball.webp) no-repeat center / contain;
    transform: rotate(12.745deg);
    pointer-events: none;
    z-index: 34;
    width: 800px;
    height: 800px;
}

/* ---- Trophy: bottom-right ---- */
.app::after {
   content: '';
    position: absolute;
    right: -2%;
    bottom: -7%;
    width: 715px;
    height: 715px;
    background: url(../img/app/trophy.webp) no-repeat center / contain;
    transform: rotate(-47.136deg);
    pointer-events: none;
    z-index: 2;
 
}

/* ---- ASCII art decorations ---- */
.app__ascii {
  position: absolute;
  pointer-events: none;
  user-select: none;
}
.app__ascii img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Ball ASCII: behind ball (z<34) */
.app__ascii--ball {
 z-index: 25;
    left: 8%;
    top: 8%;
}

/* Trophy ASCII: behind trophy (z<2) */
.app__ascii--trophy {
 
    transform: translateX(-50%);
    z-index: 1;

    transform: rotate(3.241deg);
    right: 1%;
    bottom: 0%;
}

/* ---- Header ---- */
.app__header {
  position: relative;
  z-index: 10;
  padding-top: 26px;
  overflow: visible;
}
.app__header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.app__logo {
  display: block;
  width: 129.794px;
  height: 48.281px;
}
.app__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.app__nav {
  display: inline-flex;
  align-items: center;
  gap: 72px;
}
.app__nav a {
  color: #fff;
  font-family: "Klaster Sans";
  font-size: 18px;
  font-weight: 400;
  line-height: 99.974%;
  text-transform: uppercase;
  padding: 4px 10px;
}
.app__cta {
  display: inline-flex;
  padding: 12px 16px;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-image: linear-gradient(to right, #eb147c, transparent) 1;
  color: #fff;
  font-family: "Klaster Sans";
  font-size: 18px;
  font-weight: 400;
  line-height: 1.2;
  text-transform: uppercase;
}

/* Googles: pseudo-element on header */
.app__header-container::after {
 content: '';
    position: absolute;
    right: 96px;
    top: 113px;
    width: 161px;
    height: 70px;
    background: url(../img/app/googles.svg) no-repeat center / contain;
    pointer-events: none;
    width: 247.999px;
    height: 108.423px;

}

/* ---- Main: vertically centered ---- */
.app__main {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 40px 0;
  position: relative;
  z-index: 40;
}

.app__main .container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Decorative tags inside container */
.app__tag {
  position: absolute;
  font-family: "PP Supply Sans", monospace;
  font-size: 14px;
  color: #d2a9c2;
  text-transform: uppercase;
  line-height: 1.24;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}
.app__tag--closed {     left: 116px;
    bottom: 18%; }
.app__tag--minds  {     left: 72px;
    bottom: 14%; }
.app__tag--error  { right: 96px; top: 3%; text-align: right; }

/* ---- Background title: inside header, same height as googles ---- */
.app__bg-title {
position: absolute;
    z-index: 2;
    top: 104px;
    left: 96px;
    right: 0;
    overflow: hidden;
    color: #76717c;
    font-family: "Klaster Sans";
    font-size: 148px;
    font-weight: 900;
    line-height: 0.8;
    text-transform: uppercase;
    white-space: nowrap;
    text-align: left;
    pointer-events: none;
    user-select: none;
}

/* Mobile-only title: hidden by default */
.app__bg-title-mobile {
  display: none;
}

/* ---- Form column ---- */
.app__form-col {
  position: relative;
  z-index: 50;
  width: 888px;
}


/* ---- Form ---- */
.app-form__title {
  position: relative;
  color: #fff;
  font-family: "Klaster Sans";
  font-size: 36px;
  font-weight: 900;
  line-height: 0.8;
  text-transform: uppercase;
  margin-bottom: 54px;
}


.app-form {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.app-form__field {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.app-form__label {
  color: #fff;
  font-family: "Klaster Sans";
  font-size: 16px;
  font-weight: 400;
  line-height: 1.2;
  text-transform: uppercase;
}

/* Textarea */
.app-form__textarea-wrap {
  position: relative;
}
.app-form__textarea {
  display: block;
  width: 100%;
  height: 115px;
  padding: 16px 16px 12px;
  border: 1px solid #76717c;
  background: transparent;
  color: #76717c;
  font-family: "Klaster Sans";
  font-size: 14px;
  font-weight: 400;
  line-height: 1.2;
  text-transform: uppercase;
  resize: none;
  outline: none;
  box-sizing: border-box;
}
.app-form__textarea::placeholder { color: #76717c; }

.app-form__counter {
  position: absolute;
  bottom: 12px;
  right: 16px;
  color: #76717c;
  font-family: "Klaster Sans";
  font-size: 14px;
  line-height: 1.2;
  text-transform: uppercase;
  pointer-events: none;
}

/* Text inputs */
.app-form__input {
  display: block;
  width: 100%;
  padding: 16px;
  border: 1px solid #76717c;
  background: transparent;
  color: #76717c;
  font-family: "Klaster Sans";
  font-size: 14px;
  font-weight: 400;
  line-height: 1.2;
  text-transform: uppercase;
  outline: none;
  box-sizing: border-box;
}
.app-form__input::placeholder { color: #76717c; }

/* Two-column row */
.app-form__row {
  display: flex;
  gap: 30px;
}
.app-form__row .app-form__field {
  flex: 1;
  min-width: 0;
}

/* Submit */
.app-form__submit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 12px 16px;
  border: 1px solid transparent;
  border-image: linear-gradient(to right, #eb147c, transparent) 1;
  background: transparent;
  color: #fff;
  font-family: "Klaster Sans";
  font-size: 18px;
  font-weight: 400;
  line-height: 1.2;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

/* ===================== HOVER & STATES ===================== */

/* Nav links */
.app__nav a { transition: color 0.18s; }
.app__nav a:hover { color: #eb147c; }

/* CTA button (Pink Button): hover → white fill, dark text */
.app__cta { transition: background 0.18s, color 0.18s; }
.app__cta:hover {
  background: #fff;
  color: #232328;
  border-image: none;
  border-color: transparent;
}
.app__cta:active {
  background: #fff;
  color: #232328;
  border-image: none;
  border-color: transparent;
  opacity: 0.8;
}

/* Submit button (Pink Button): same behavior */
.app-form__submit:hover {
  background: #fff;
  color: #232328;
  border-image: none;
  border-color: transparent;
}
.app-form__submit:active {
  background: #fff;
  color: #232328;
  border-image: none;
  border-color: transparent;
  opacity: 0.8;
}

/* Input & Textarea: hover → pink border; focus → pink border + white text */
.app-form__input,
.app-form__textarea {
  transition: border-color 0.18s, color 0.18s;
}
.app-form__input:hover,
.app-form__textarea:hover {
  border-color: #eb147c;
}
.app-form__input:focus,
.app-form__textarea:focus {
  border-color: #eb147c;
  color: #fff;
}
.app-form__input:focus::placeholder,
.app-form__textarea:focus::placeholder {
  color: transparent;
}
.app-form__input:focus-visible,
.app-form__textarea:focus-visible {
  box-shadow: 0 0 0 3px rgba(235, 20, 124, 0.5);
}

/* Error state (JS-toggled) */
.app-form__textarea--error { border-color: #eb1418 !important; }
.app-form__counter--error  { color: #eb1418; }

@media(max-width:2200px){
  .app::before{
           left: -13%;
        top: 7%;
  }
  .app__ascii--ball{
        z-index: 25;
    left: 8%;
    top: 10%;
  }
}
/* ===================== 1920px BREAKPOINT ===================== */
@media (max-width: 1920px) {
  .app::before{
    top: 11%;
    left: -12%;
    width: 556.807px;
    height: 556.807px;
  }
  .app::after{
    right: -8%;
    bottom: -7%;
    height: 550px;
  }
  .app__ascii--trophy{
    right: -3%;
    height: 550px;
  }
  .app__ascii--ball {
    left: 0%;
    top: 10%;
    height: 555px;
  }
}

@media(max-width:1820px){
  .app__bg-title{
    font-size: 96px;
  }
  .app__header-container::after{
    width: 160.112px;
height: 70px;
  }
}
@media(max-width:1700px){
 .app::before{
  width: 356.807px;
height: 356.807px;
left: -7%;

 }
 .app__ascii--ball{
  left: 4%;
        top: 13%;
        height: 320px;
 }
}

/* ===================== 1440px BREAKPOINT ===================== */
@media (max-width: 1440px) {
  /* Header */
  .app__header { padding-top: 24px; }
  .app__nav { gap: 48px; }
  .app__nav a { font-size: 14px; }
  .app__cta { font-size: 14px; }

  /* Form column */
  .app__form-col { width: 612px; }

  /* Form title */
  .app-form__title {
    font-size: 24px;
    margin-bottom: 36px;
  }

  /* Labels */
  .app-form__label { font-size: 14px; }

  /* Textarea & inputs */
  .app-form__textarea { font-size: 12px; }
  .app-form__textarea::placeholder { font-size: 12px; }
  .app-form__input { font-size: 12px; }
  .app-form__input::placeholder { font-size: 12px; }
  .app-form__counter { font-size: 12px; }

  /* Gaps */
  .app-form { gap: 20px; }
  .app-form__field { gap: 16px; }
  .app-form__row { gap: 24px; }

  /* Submit */
  .app-form__submit { font-size: 16px; }
  .app::after{
              width: 440.235px;
            height: 440.235px;
            right: -4%;
            bottom: -3%;
  }
  .app::before{
  left: -10%;
              top: 16%;
  }
  .app__ascii--ball{
    top: 18%;
  }
  .app__ascii--trophy{
    height: 480px;
  }
}
@media(max-width:1260px){
  .app__header-container::after{
    display: none;
  }
}
/* ===================== 768px BREAKPOINT ===================== */
@media (max-width: 1200px) {
  /* Container padding */
  .app__header-container,
  .app__main .container {
    padding-left: 24px;
    padding-right: 24px;
  }

  /* Nav: tighter gap */
  .app__nav { gap: 16px; }

  /* Title: smaller, centered */
  .app__bg-title {
    font-size: 72px;
    left: 0;
    right: 0;
    text-align: center;
  }

  /* Hide googles */
  .app__header-container::after { display: none; }

  /* Form column */
  .app__form-col { width: 472px; }

  /* Form title: centered */
  .app-form__title { text-align: center; }
   .app::after{
width: 243.369px;
            height: 243.369px;
  }
  .app::before{
   left: -7%;
   width: 231.318px;
height: 231.318px;
            top: 12%;
  }
  .app__ascii--trophy{
    height: 270px;
  }
  .app__ascii--ball{
                     left: 4%;
        top: 11%;
        height: 232px;
  }
}
@media(max-width:900px){
  .app__tag--closed{
        bottom: -23%;
  }
  .app__tag--minds{
    bottom: -27%;
  }
}
@media(max-width:760px){
  .app__ascii--ball{
    left: 1%;
            top: 15%;
            height: 232px;
  }
          .app::before {
            left: -12%;
            width: 231.318px;
            height: 231.318px;
            top: 15%;
        }
                .app__ascii--ball {
            left: 0%;
            top: 18%;
            height: 232px;
        }
                .app::before {
            left: -12%;
            width: 231.318px;
            height: 231.318px;
            top: 17%;
        }
}

/* ===================== 690px BREAKPOINT ===================== */
@media (max-width: 690px) {
  /* Container padding */
  .app__header-container,
  .app__main .container {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Header */
  .app__header { padding-top: 16px; }
  .app__nav { display: none; }
  .app__cta { font-size: 12px; padding: 10px 12px; }
  .app__header-container::after { display: none; }

  /* Hide old absolute title (it's inside header) */
  .app__bg-title { display: none; }

  /* Show mobile title block */
  .app__bg-title-mobile {
    display: block;
    color: #76717c;
    font-family: "Klaster Sans";
    font-size: clamp(20px, 9.2vw, 36px);
    font-weight: 900;
    line-height: 0.8;
    text-transform: uppercase;
    text-align: center;
    padding: 24px 16px 0;
    pointer-events: none;
    user-select: none;
  }

  /* Main: align to top, leave room for ball/trophy at bottom */
  .app__main { align-items: flex-start; padding: 24px 0 180px; }

  /* Form col: full width */
  .app__form-col { width: 100%; }

  /* Form title */
  .app-form__title { font-size: 20px; margin-bottom: 24px; text-align: center; }

  /* Labels */
  .app-form__label { font-size: 12px; }

  /* Gaps */
  .app-form { gap: 12px; }
  .app-form__field { gap: 8px; }

  /* Textarea */
  .app-form__textarea { height: 84px; padding: 12px; font-size: 11px; }
  .app-form__textarea::placeholder { font-size: 11px; }
  .app-form__counter { font-size: 11px; }

  /* Inputs */
  .app-form__input { padding: 12px; font-size: 11px; }
  .app-form__input::placeholder { font-size: 11px; }

  /* Rows: stack fields vertically */
  .app-form__row { flex-direction: column; gap: 12px; }

  /* Submit */
  .app-form__submit { font-size: 12px; padding: 10px 12px; }

  /* Ball: bottom-left */
  .app::before {
  left: -7%;
            top: auto;
            bottom: -3%;
            width: 153.757px;
            height: 153.757px;
  }

  /* Trophy: bottom-right */
  .app::after {
 right: -3%;
            top: auto;
            bottom: -4%;
            width: 159.963px;
            height: 159.963px;
  }

  /* ASCII decorations: hide */
  .app__ascii { display: none; }

  /* Decorative tags: hide */
  .app__tag { display: none; }
  .app__ascii--trophy{
        display: block;
    height: 170px;
    right: -8%;
  }
}

/* ===================== 370px BREAKPOINT ===================== */
@media (max-width: 370px) {
  /* Logo: scale down */
  .app__logo {
    width: 90px;
    height: 33px;
  }

  /* CTA button: hide text overflow, smaller padding */
  .app__cta {
    font-size: 10px;
    padding: 8px 10px;
  }

  /* Burger button: keep same but ensure it's not squeezed */
  .hero__burger {
    font-size: 10px;
  }
}

/* ===================== MODAL ===================== */
.app-modal {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(35, 35, 40, 0);
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s, visibility 0.3s, background-color 0.3s;
}
.app-modal--open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  background: rgba(35, 35, 40, 0.75);
}

.app-modal__card {
  position: relative;
  width: 510px;
  background: #dcdfe5;
  overflow: hidden;
  padding: 297px 24px 40px;
  opacity: 0;
  transform: translateY(24px) scale(0.97);
  transition: opacity 0.35s, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.app-modal--open .app-modal__card {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.app-modal__ball {
  position: absolute;
  top: -257px;
  left: -47px;
  width: 582px;
  height: 582px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.app-modal__ball img {
  width: 488px;
  height: 488px;
  max-width: none;
  transform: rotate(12.43deg);
  object-fit: contain;
}

.app-modal__title {
  font-family: "Klaster Sans";
  font-weight: 900;
  font-size: 36px;
  line-height: 0.8;
  text-align: center;
  color: #eb147c;
  text-transform: uppercase;
  margin-bottom: 24px;
}

.app-modal__subtitle {
  font-family: "Klaster Sans";
  font-size: 14px;
  line-height: 1.2;
  color: #232328;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 48px;
}

.app-modal__ok {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background: #fff;
  color: #232328;
  font-family: "Klaster Sans";
  font-size: 16px;
  font-weight: 400;
  line-height: 1.2;
  text-transform: uppercase;
  padding: 12px 16px;
  border: none;
  cursor: pointer;
  transition: opacity 0.18s;
}
.app-modal__ok { transition: background 0.18s, color 0.18s, opacity 0.18s; }
.app-modal__ok:hover  { background: #eb147c; color: #fff; opacity: 1; }
.app-modal__ok:active { background: #eb147c; color: #fff; opacity: 0.8; }

@media (max-width: 690px) {
  .app-modal__card {
    width: calc(100% - 32px);
    padding: 189px 20px 24px;
  }
  .app-modal__ball {
    top: -181px;
    left: -13px;
    width: 376px;
    height: 376px;
  }
  .app-modal__ball img {
    width: 315px;
    height: 315px;
  }
  .app-modal__title {
    font-size: 20px;
    text-align: center;
    margin-bottom: 16px;
  }
  .app-modal__subtitle {
    font-size: 12px;
    margin-bottom: 36px;
  }
  .app-modal__ok {
    font-size: 12px;
    padding: 10px 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-modal {
    transition: opacity 0s, visibility 0s, background-color 0s;
  }
  .app-modal__card {
    transition: none;
    transform: none;
  }
  .app-modal--open .app-modal__card {
    transform: none;
  }
}