@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;500;600;700&display=swap');

/* =========================================
   1. COMMON SECTION BACKGROUND
========================================= */

.wla-section {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    box-sizing: border-box;

    width: 100%;
    padding: 15px 40px 30px;

    background: #170154;

    border:1px solid rgba(255,255,255,0.09);
    border-radius: 24px;

    color: #ffffff;

    transition:
        border-color 0.35s ease,
        box-shadow 0.35s ease;
}

.wla-section:hover {
    border-color: rgba(38, 198, 249, 0.4);
    box-shadow: 0 0 18px rgba(38, 198, 249, 0.30);
}


@media (max-width: 1024px) {
    .wla-section {
        padding: 10px 30px 20px;
        border-radius: 21px;
    }
}


@media (max-width: 767px) {
    .wla-section {
        padding: 10px 5px;
        border-radius: 18px;
    }
}



.wla-section__inner {
    position: relative;
    z-index: 1;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

















/* =========================================
   2. COMMON BACKGROUND GLOW
========================================= */

.wla-section__glow {
  position: absolute;
  width: 500px;
  height: 500px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    circle,
    rgba(38, 198, 249, 0.22) 0%,
    rgba(38, 198, 249, 0.12) 45%,
    transparent 75%
  );
  filter: blur(30px);
  opacity: 1;
  pointer-events: none;
  z-index: 0;
}


@media (max-width: 1024px) {
    .wla-section__glow {
        width: 450px;
        height: 450px;
    }
}


@media (max-width: 767px) {
    .wla-section__glow {
        width: 400px;
        height: 400px;
    }
}
















/* =========================================
   3. COMMON BADGE
========================================= */

.wla-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    width: fit-content;
    max-width: 100%;
    box-sizing: border-box;
    padding: 10px 19px;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 999px;
    font-family: inherit;
    font-size: 18px;
    font-weight: 500;
    line-height: 22px;
    letter-spacing: 0.02em;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.wla-badge__dot {
    position: relative;
    flex: 0 0 11px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 10px rgba(34, 197, 94, 0.7);
}


/* BADGE PULSE RING */

.wla-badge__dot::after {
    content: "";
    position: absolute;
    inset: -4px;
    border: 1px solid #22c55e;
    border-radius: 50%;
    animation: wla-dot-pulse 2s ease-out infinite;
    pointer-events: none;
}

@keyframes wla-dot-pulse {
    0% {
        transform: scale(0.65);
        opacity: 0.8;
    }

    100% {
        transform: scale(1.9);
        opacity: 0;
    }
}


@media (max-width: 1024px) {
    .wla-badge {
        padding: 9px 18px;
        font-size: 17px;
    }
    
    .wla-badge__dot {
        flex: 0 0 10px !important;
        width: 10px !important;
        height: 10px !important;
        box-shadow: 0 0 9px rgba(34, 197, 94, 0.7) !important;
    }
}


@media (max-width: 767px) {
    .wla-badge {
        padding: 8px 17px !important;
        font-size: 16px !important;
    }
    
    .wla-badge__dot {
        flex: 0 0 9px !important;
        width: 9px !important;
        height: 9px !important;
        box-shadow: 0 0 8px rgba(34, 197, 94, 0.7) !important;
    }
}


.wla-badge-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 25px;
}



















/* =========================================
   4. COMMON BUTTON
========================================= */

.wla-button-link,
.wla-button-link:hover,
.wla-button-link:focus,
.wla-button-link:active {
    display: inline-flex;
    max-width: 100%;
    text-decoration: none !important;
    color: #ffffff !important;
    outline-offset: 4px;
}

.wla-button-link span,
.wla-button-link:hover span,
.wla-button-link:focus span {
    text-decoration: none !important;
}


/* =========================================
   GLOBAL BUTTON
========================================= */

.wla-button {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    box-sizing: border-box;
    height: 40px;
    min-height: 40px;
    width: fit-content;
    max-width: 100%;
    padding: 0 19px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
    border:1px solid rgba(38, 198, 249, 0.40);
    background: rgba(38, 198, 249, 0.12) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    color: #26c6f9 !important;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 1;
    text-decoration: none !important;
    white-space: nowrap;
    box-shadow: none;
    cursor: pointer;
    transition:
        background 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease,
        transform 0.35s ease,
        color 0.35s ease;
}


/* =========================================
   SLIDING BUTTON TEXT
========================================= */

.wla-button__text {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none !important;
    animation: wla-button-text-slide 6s linear infinite;
}


/* =========================================
   TEXT SLIDE ANIMATION
========================================= */

@keyframes wla-button-text-slide {
    0%, 20%, 40%, 100% {
        transform: translateX(0);
    }

    30% {
        transform: translateX(-150%);
    }

    30.01% {
        transform: translateX(150%);
    }
}


/* =========================================
   BUTTON HOVER — ORANGE GLOW
========================================= */

.wla-button-link:hover .wla-button,
.wla-button:hover {
    background: rgba(38, 198, 249, 0.18) !important;
    border: 1px solid rgba(38, 198, 249, 0.55) !important;
    box-shadow: 0 0 25px rgba(38, 198, 249, 0.35);
    color: #ffffff !important;
}


/* =========================================
   BUTTON ACTIVE / CLICK
========================================= */

.wla-button-link:active .wla-button,
.wla-button:active {
    transform: scale(0.97);
}


/* =========================================
   KEYBOARD FOCUS
========================================= */

.wla-button-link:focus-visible,
.wla-button:focus-visible {
    outline: 2px solid #26c6f9;
    outline-offset: 4px;
    border-radius: 50px;
}


/* =========================================
   MOBILE & TABLET RESPONSIVE
========================================= */

@media (max-width: 1024px) {
    .wla-button {
        max-width: 100%;
        padding: 0 18px;
        font-size: 17px;
    }

    .wla-button__text {
        font-size: 17px;
    }
}


/* =========================================
   MOBILE RESPONSIVE
========================================= */

@media (max-width: 767px) {
    .wla-button {
        max-width: 100%;
        padding: 0 17px;
        font-size: 16px;
    }

    .wla-button__text {
        font-size: 16px;
    }
}


.wla-button-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}




















/* =========================================
   5. COMMON DIVIDER
========================================= */

.wla-divider {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 1px;
    flex: 0 0 1px;
    margin: 30px 0;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.18),
        rgba(38, 198, 249, 0.35),
        rgba(255, 255, 255, 0.18),
        transparent
    );
}

@media (max-width: 1024px) {
    .wla-divider {
        margin: 25px 0;
    }
}

@media (max-width: 767px) {
    .wla-divider {
        margin: 20px 0;
    }
}

















/* =========================================
   6. COMMON CARD
========================================= */

.wla-card {
    border: 1px solid rgba(255, 255, 255, 0.09);
    background: rgba(255, 255, 255, 0.045);
    border-radius: 24px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    overflow: hidden;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transition:
        background 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease,
        transform 0.35s ease,
        color 0.35s ease;
}

.wla-card:hover,
.wla-card:focus {
    background: rgba(38, 198, 249, 0.03);
    border: 1px solid rgba(38, 198, 249, 0.55);
    box-shadow: 0 0 25px rgba(38, 198, 249, 0.3);
}


@media (max-width: 1024px) {   
    .wla-card {
        border-radius: 21px;
    }
}

@media (max-width: 767px) {
    .wla-card {
        border-radius: 18px;
    }
}












/* =========================================
   7. GLOBAL MODAL — ONE DESIGN FOR ALL PAGES
   Used by Pricing, Blog and Career modals.
   HTML pattern:
   <div class="wla-modal-overlay">
     <div class="wla-modal-box">
       <div class="wla-modal-header">
         <span class="wla-badge">...</span>
         <button class="wla-modal-close">&times;</button>
       </div>
       ...
     </div>
   </div>
   Open states supported: .active class OR aria-hidden="false".
========================================= */

.wla-modal-overlay {
    display: none;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.09);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    height: 100vh !important;
    height: 100dvh !important;
    padding: 0 !important;
    margin: 0 !important;
    align-items: stretch !important;
    justify-content: center !important;
    overflow: hidden !important;
    z-index: 999;
    max-height: 100vh;
    max-height: 100dvh;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.wla-modal-overlay.active,
.wla-modal-overlay[aria-hidden="false"] {
    display: flex !important;
}

.wla-modal-box {
    box-sizing: border-box;
    color: #fff;
    background: #170154;
    border: 1px solid rgba(255, 255, 255, 0.09);
    padding: 20px;
    border-radius: 24px;
    position: relative;
    width: min(850px, calc(100% - 24px)) !important;
    max-width: 850px !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    margin: 0 auto !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    font-family: 'Plus Jakarta Sans', sans-serif;
    transition:
        border-color 0.35s ease,
        box-shadow 0.35s ease;
}

.wla-modal-box:hover {
    border: 1px solid rgba(38, 198, 249, 0.55) !important;
    box-shadow: 0 0 25px rgba(38, 198, 249, 0.25);
}

.wla-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    margin: 0 0 25px;
    padding: 0;
}

/* v50 (2026-11-12): in EVERY modal the badge is exactly as tall as
   the close button (40px; 36px on mobile), so the badge and the
   cross always sit in one row with their centres exactly level.
   The row's top gap is the box padding, and the side gaps are the
   box padding too — badge's left edge and cross's right edge are
   the same distance from the modal's edges — identical in all
   modals because every modal uses this one box and header. */
.wla-modal-box .wla-modal-header .wla-badge {
    height: 40px;
}


.wla-modal-close {
    margin-left: auto;
    color: #fff;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    display: inline-grid !important;
    place-items: center !important;
    box-sizing: border-box !important;
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    text-align: center !important;
    vertical-align: middle;
    font-family: Arial, sans-serif !important;
    font-size: 27px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    position: static !important;
    flex: 0 0 40px !important;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid rgba(38, 198, 249, 0.40);
    border-radius: 50%;
    background: rgba(38, 198, 249, 0.12) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    transition:
        background 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease,
        color 0.3s ease;
}

.wla-modal-close:hover {
    background: rgba(38, 198, 249, 0.18) !important;
    border: 1px solid rgba(38, 198, 249, 0.55) !important;
    box-shadow: 0 0 25px rgba(38, 198, 249, 0.35);
    color: #ffffff !important;
}

.wla-modal-close:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

@media (max-width: 1024px) {
    .wla-modal-box {
        padding: 18px;
        border-radius: 21px;
    }
}

@media (max-width: 767px) {
    .wla-modal-box {
        flex-basis: 100%;
        width: 100% !important;
        /* Full screen height on mobile, same as desktop/tablet.
           Was calc(100vh - 20px) / calc(100dvh - 20px) !important, which
           left a gap at the bottom and overrode the page CSS. */
        max-height: 100vh !important;
        max-height: 100dvh !important;
        padding: 17px;
        border-radius: 18px;
    }

    .wla-modal-header {
        gap: 10px;
        margin-bottom: 16px;
    }

    .wla-modal-box .wla-modal-header .wla-badge {
        height: 36px;
    }


    .wla-modal-close {
        flex-basis: 36px !important;
        width: 36px !important;
        min-width: 36px !important;
        height: 36px !important;
        min-height: 36px !important;
        font-size: 27px !important;
    }
}














/* =========================================
   7. GLOBAL TEXT.
========================================= */

.wla-big-text {
    font-size: 53px;
    line-height: 1.1;
    color: #ffffff;
    font-weight: 700;
}

.wla-big-text span {
    color: #26c6f9;
}

.wla-medium-text {
    font-family: 'Caveat', cursive;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 600;
    font-size: 42px;
    line-height: 1.1;
}

.wla-subtittle-text {
    color: rgba(255, 255, 255, 0.75);
    font-weight: 500;
    font-size: 30px;
}

.wla-description-text {
  color: rgba(255, 255, 255, 0.60);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.1;
}

.wla-description-text span {
  color: #26c6f9;
}

.wla-small-text {
  color: #ffffff;
  font-weight: 400;
  font-size: 12px;
}

.wla-card-big-text {
    color: #ffffff;
    font-size: 28px;
    font-weight: 600;
}

.wla-card-medium-text {
    color: rgba(255, 255, 255, 0.80);
    font-size: 24px;
    font-weight: 500;
}

.wla-card-description-text {
    color: rgba(255, 255, 255, 0.60);
    font-size: 16px;
    font-weight: 400;
}





/* =========================
   TABLET
========================= */

@media (max-width: 1024px) {
  .wla-big-text {
    font-size: 40px;
  }

  .wla-medium-text {
    font-size: 35px;
  }

  .wla-subtittle-text {
    font-size: 28px;
}

.wla-description-text {
  font-size: 17px;
}

.wla-small-text {
  font-size: 11px;
}

.wla-card-big-text {
    font-size: 23px;
}

.wla-card-medium-text {
    font-size: 21px;
}

.wla-card-description-text {
    font-size: 15px;
}
}



/*=========================
   MOBILE
========================= */

@media (max-width: 767px) {
  .wla-big-text {
    font-size: 30px;
  }

  .wla-medium-text {
    font-size: 28px;
}

.wla-subtittle-text {
    font-size: 26px;
}

.wla-description-text {
  font-size: 16px;
}

.wla-small-text {
  font-size: 10px;
}

.wla-card-big-text {
    font-size: 20px;
}

.wla-card-medium-text {
    font-size: 18px;
}

.wla-card-description-text {
    font-size: 14px;
}
}