/* ============================================
   PEGATRON LANDING PAGE - STYLES
   ============================================ */

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

   @font-face {
     font-family: 'TeleNeo';
     src: url('fonts/Tele Neo.otf') format('opentype');
     font-weight: 400;
     font-style: normal;
   }

   @font-face {
     font-family: 'TeleNeo';
     src: url('fonts/Tele Neo Medium.otf') format('opentype');
     font-weight: 500;
     font-style: normal;
   }

   @font-face {
     font-family: 'TeleNeo';
     src: url('fonts/Tele Neo Bold.otf') format('opentype');
     font-weight: 700;
     font-style: normal;
   }

   @font-face {
     font-family: 'TeleNeo';
     src: url('fonts/Tele Neo Extrabold.otf') format('opentype');
     font-weight: 800;
     font-style: normal;
   }
 
   * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     max-width: 100%;
   }

   html, body {
     overflow-x: hidden;
     width: 100%;
   }

   body {
     font-family: 'TeleNeo', 'Inter', 'Source Sans Pro', sans-serif;
     background: #f9fafb;
     color: #0a0a0a;
   }
    
   /* ── HERO ─────────────────────────────────── */
    
   .hero {
     position: relative;
     width: 100%;
     height: 646px;
     overflow: hidden;
     background-color: #2b455b;
   }
    
   .hero__bg {
     position: absolute;
     inset: 0;
     width: 100%;
     height: 100%;
     object-fit: cover;
     object-position: center center;
     z-index: 0;
   }
    
   .hero__overlay {
     position: absolute;
     inset: 0;
     background: rgba(43, 69, 91, 0.4);
     z-index: 1;
   }
    
   .hero__inner {
     position: relative;
     z-index: 2;
     max-width: 1440px;
     margin: 0 auto;
     padding: 60px 80px 0px 80px;
     display: flex;
     align-items: flex-start;
     justify-content: space-between;
     height: 100%;
   }
    
   /* Left column */
   .hero__left {
     position: relative;
     display: flex;
     flex-direction: column;
     gap: 24px;
     width: 550px;
   }
    
   .hero__logo {
     width: 327px;
     height: 49px;
     object-fit: contain;
     display: block;
   }
    
   .hero__text {
     display: flex;
     flex-direction: column;
     gap: 8px;
     color: #fff;
     margin-top: 40px;
   }
    
   .hero__tagline {
     font-size: 20px;
     font-family: 'TeleNeo', sans-serif;
     font-weight: 400;
     letter-spacing: 0.5px;
     text-transform: uppercase;
   }
    
   .hero__headline {
     font-size: 48px;
     line-height: 1;
     font-family: 'Source Sans Pro', sans-serif;
     font-weight: 100;
   }
    
   .hero__headline strong {
     font-weight: 700;
   }
    
   /* Officer image */
   .hero__officer {
     position: absolute;
     left: 409px;
     top: 30px;
     width: 430px;
     height: 487px;
     border-radius: 8px;
     overflow: hidden;
   }
    
   .hero__officer img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     object-position: center top;
     margin-left: 0%;
   }
    
   /* ── FORM CARD ────────────────────────────── */
    
   .form-card {
     background: #096e75;
     border-radius: 8px;
     padding: 24px;
     width: 478px;
     flex-shrink: 0;
     display: flex;
     flex-direction: column;
     gap: 24px;
     align-self: flex-start;
     z-index: 1;
   }
    
   .form-card__heading {
     display: flex;
     flex-direction: column;
     gap: 4px;
     color: #fff;
   }
    
   .form-card__title {
     font-size: 26px;
     font-family: 'Source Sans Pro', sans-serif;
     font-weight: 400;
     line-height: 1.3;
   }
    
   .form-card__subtitle {
     font-size: 16px;
     font-weight: 400;
     font-family: 'TeleNeo', sans-serif;
   }
    
   .form-row {
     display: flex;
     gap: 16px;
   }
    
   .form-group {
     display: flex;
     flex-direction: column;
     gap: 4px;
     flex: 1;
   }
    
   .form-group--full {
     width: 100%;
   }
    
   .form-label {
     font-size: 16px;
     color: #fff;
     font-weight: 400;
     line-height: 24px;
     font-family: 'TeleNeo', sans-serif;
   }
    
   .form-label span {
     color: #fff;
     padding-left: 3px;
   }
    
   .form-input {
     height: 38px;
     background: #fafafa;
     border: 1px solid #ced4da;
     border-radius: 4px;
     padding: 0 12px;
     font-size: 16px;
     color: #0a0a0a;
     font-family: 'TeleNeo', sans-serif;
     width: 100%;
     outline: none;
     transition: border-color 0.2s;
   }
    
   .form-input:focus {
     border-color: #096e75;
   }
    
   .form-btn {
     display: flex;
     align-items: center;
     justify-content: center;
     background: #BD4821;
     border: 1px solid white;
     border-radius: 8px;
     padding: 12px 24px;
     font-size: 16px;
     font-weight: 700;
     font-family: 'Source Sans Pro', sans-serif;
     color: #fff;
     cursor: pointer;
     transition: background 0.2s;
     width: 100%;
   }
    
   .form-btn:hover {
     background: #873115;
   }
    
   /* ── FEATURE CARDS ────────────────────────── */
    
   .features-section {
     max-width: 1280px;
     margin: 0 auto;
     padding: 0 0 0 0;
     position: relative;
   }
    
   .features-wrapper {
     padding: 64px 0 0;
     position: relative;
   }
    
   .feature-cards {
     display: flex;
     align-items: stretch;
     justify-content: space-between;
     gap: 24px;
     padding-top: 64px;
     margin-top: -150px;
     position: relative;
     z-index: 10;
   }
    
   .feature-card {
     background: #fff;
     border: 1px solid #e5e7eb;
     border-radius: 10px;
     box-shadow: 0px 4px 3px rgba(0,0,0,0.1), 0px 2px 2px rgba(0,0,0,0.1);
     padding: 24px;
     flex: 1;
     display: flex;
     flex-direction: column;
     gap: 24px;
   }
    
   .feature-card__icon {
     width: 56px;
     height: 56px;
     background: rgba(9, 110, 117, 0.15);
     border-radius: 10px;
     display: flex;
     align-items: center;
     justify-content: center;
     color: #096e75;
     font-size: 24px;
   }
    
   .feature-card__content {
     display: flex;
     flex-direction: column;
     gap: 8px;
   }
    
   .feature-card__title {
     font-size: 24px;
     font-weight: 600;
     color: #101828;
     line-height: 28px;
     letter-spacing: -0.3px;
     font-family: 'Source Sans Pro', sans-serif;
     white-space: nowrap;
   }
    
   .feature-card__desc {
     font-size: 20px;
     color: #4a5565;
     line-height: 24px;
     letter-spacing: -0.31px;
     font-weight: 400;
     font-family: 'TeleNeo', sans-serif;
   }
    
   /* ── PRODUCT SECTION ──────────────────────── */
    
   .product-section {
     margin-top: 120px;
     position: relative;
   }
    
   .product-section-wrap {
     max-width: 1280px;
     margin: 0 auto;
     padding: 141px 0 64px;
   }
    
   .product-card {
     background: #fff;
     border: 1px solid #e5e7eb;
     border-radius: 10px;
     box-shadow: 0px 4px 3px rgba(0,0,0,0.1), 0px 2px 2px rgba(0,0,0,0.1);
     padding: 41px;
     display: flex;
     align-items: center;
     position: relative;
     min-height: 351px;
   }
    
   .product-image{
     width: 700px;
   }
    
   .product-card__image-wrap {
     position: relative;
     width: 500px;
     height: 290px;
     flex-shrink: 0;
   }
    
   .product-card__image-wrap img {
     width: 100%;
     height: auto;
     position: absolute;
     left: 20%;
     top: 6%;
   }
    
   .product-card__info {
     display: flex;
     flex-direction: column;
     gap: 24px;
     max-width: 549px;
   }
    
   .product-card__name {
     font-size: 40px;
     font-weight: 700;
     color: #000;
     line-height: 1;
     letter-spacing: -0.4px;
   }
    
   .product-card__desc {
     font-size: 24px;
     color: #4a5565;
     line-height: 24px;
     letter-spacing: -0.31px;
     font-weight: 400;
     font-family: 'TeleNeo', sans-serif;
   }
    
   .contact-heading {
     font-size: 24px;
     font-weight: 600;
     color: #101828;
     line-height: 32px;
     letter-spacing: 0.07px;
   }
    
   .contact-list {
     display: flex;
     flex-direction: column;
     gap: 8px;
     margin-top: 8px;
   }
    
   .contact-item {
     display: flex;
     align-items: center;
     gap: 12px;
   }
    
   .contact-item__icon {
     width: 40px;
     height: 40px;
     background: rgba(9, 110, 117, 0.15);
     border-radius: 4px;
     display: flex;
     align-items: center;
     justify-content: center;
     color: #096e75;
     font-size: 18px;
     flex-shrink: 0;
   }
    
   .contact-item__text {
     font-size: 24px;
     color: #4a5565;
     font-weight: 500;
     line-height: 24px;
     letter-spacing: -0.31px;
     font-family: 'TeleNeo', sans-serif;
   }
    
   /* ── TRIAL BADGE ──────────────────────────── */
    
   .trial-badge {
     position: absolute;
     left: 20px;
     top: -28px;
     width: 120px;
     text-align: center;
     color: #fff;
     font-family: 'TeleNeo', sans-serif;
     z-index: 1;
   }
    
   .trial-badge__bg {
     background-image: url('images/badge-with-lines.png');
     background-size: 100% 100%;
     background-repeat: no-repeat;
     padding: 4px 12px 32px 0px;
     position: relative;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     min-height: 200px;
   }
    
   .trial-badge__no-cost,
   .trial-badge__days,
   .trial-badge__label {
     position: relative;
     z-index: 1;
   }
    
   .trial-badge__no-cost {
     font-size: 13px;
     letter-spacing: 0.5px;
     font-weight: 400;
     line-height: 1.4;
     text-transform: uppercase;
   }
    
   .trial-badge__days {
     font-size: 30px;
     font-weight: 700;
     line-height: 1.1;
     font-family: 'Source Sans Pro', sans-serif;
   }
    
   .trial-badge__label {
     font-size: 18px;
     font-weight: 400;
     line-height: 1.5;
     margin-top: 4px;
     text-transform: uppercase;
   }
    
   /* ── PARTNER LOGOS ────────────────────────── */
    
   .partners-bar {
     background: #f2f2f2;
     padding: 12px 48px;
   }
    
   #partners{
     max-width: 1264px;
       margin: 0 auto;
       position: relative;
       display: flex;
       justify-content: space-between;
       align-items: center;
   }
    
   .partners-bar img {
     object-fit: contain;
   }
    
   .partners-bar .logo-bmp {
     height: 56px;
     width: 136px;
   }
    
   .partners-bar .logo-tmobile {
     height: 40px;
     width: 156px;
   }
    
   /* ── MAIN CONTENT WRAPPER ─────────────────── */
    
   .main-content {
     max-width: 1280px;
     margin: 0 auto;
     padding: 0 80px;
   }
    
   @media (max-width: 1300px) {
     .hero__inner {
       padding: 60px 40px;
     }
     .hero__bg {
       left: 0;
       width: 100%;
     }
     .hero__officer {
       left: 360px;
     }
     .product-card {
       flex-direction: row;
       gap: 24px;
       padding: 32px;
     }
     .product-card__image-wrap {
       width: 320px;
       height: 240px;
       flex-shrink: 0;
     }
     .product-card__name {
       font-size: 30px;
     }
     .product-card__desc {
       font-size: 18px;
     }
     .contact-item__text {
       font-size: 18px;
     }
   }
    
   /* ── MOBILE ───────────────────────────────── */
    
   @media (max-width: 768px) {
     /* Hero */
     .hero {
       height: auto;
       min-height: unset;
     }

     .hero__bg {
       display: block;
       object-position: 60% center;
     }

     .hero__overlay {
       display: block;
       background: rgba(43, 69, 91, 0.78);
     }

     .hero__inner {
       flex-direction: column;
       padding: 40px 24px;
       gap: 32px;
     }

     .hero__left {
       width: 100%;
       max-width: 100%;
     }

     .hero__inner {
       max-width: 100vw;
     }

     .product-card {
       max-width: 100%;
     }

     .product-card__info {
       max-width: 100%;
       min-width: 0;
     }

     .hero__officer {
       display: none;
     }

     .hero__logo {
       width: 200px;
       height: auto;
     }

     .hero__tagline,
     .hero__headline {
       color: #fff;
     }

     .hero__top-stack {
       gap: 32px !important;
     }

     .hero__tagline {
       font-size: 14px;
     }

     .hero__headline {
       font-size: 32px;
     }

     /* Form card */
     .form-card {
       width: 100%;
       align-self: stretch;
     }

     /* Reorder: product first, features second */
     .content-wrap {
       display: flex;
       flex-direction: column;
     }

     .product-section {
       order: 1;
       margin-top: 32px;
     }

     /* Feature cards */
     .feature-cards {
       order: 2;
       flex-direction: column;
       margin-top: 32px;
       padding-top: 0;
     }

     .feature-card {
       width: 100%;
     }
    
     /* Product card */
     .product-card {
       flex-direction: column;
       padding: 32px 24px;
     }
    
     .product-card__image-wrap {
       width: 100%;
       max-width: 100%;
       height: auto;
       display: flex;
       justify-content: center;
       overflow: hidden;
     }

     .product-card__image-wrap img {
       width: 80%;
       height: auto;
       object-fit: contain;
       position: static;
       margin: 0;
     }

     .product-card__desc {
       font-size: 22px;
     }

     .contact-item__text {
       font-size: 22px;
     }
    
     .trial-badge {
       display: none;
     }
    
     /* Main content padding */
     .content-wrap {
       padding-left: 24px !important;
       padding-right: 24px !important;
     }
    
     /* Main section */
     .main-section {
       padding-bottom: 32px !important;
     }

     /* Partners */
     .partners-bar {
       padding: 16px 24px;
     }
   }

/* ============================================
   THANK YOU PAGE
   ============================================ */

.ty-hero {
  position: relative;
  width: 100%;
  min-height: 860px;
  overflow: hidden;
  background-color: #2b455b;
}

.ty-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  z-index: 0;
}

.ty-hero__overlay {
  position: absolute;
  inset: 0;
  background: rgba(43, 69, 91, 0.6);
  z-index: 1;
}

.ty-hero__inner {
  position: relative;
  z-index: 2;
  max-width: 1440px;
  margin: 0 auto;
  padding: 60px 80px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 40px;
  min-height: 599px;
}

.ty-hero__left {
  display: flex;
  flex-direction: column;
  gap: 150px;
  flex: 0 0 50%;
  max-width: 550px;
}

.ty-hero__logo {
  width: 327px;
  height: 49px;
  object-fit: contain;
  display: block;
}

.ty-hero__content {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.ty-hero__heading {
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: #fff;
}

.ty-hero__title {
  font-size: 32px;
  line-height: 38px;
  font-family: 'Source Sans Pro', 'Inter', sans-serif;
  font-weight: 400;
  color: #fff;
}

.ty-hero__title strong {
  font-weight: 700;
  font-family: 'Source Sans Pro', 'Inter', sans-serif;
}

.ty-hero__subtitle {
  font-size: 16px;
  line-height: 24px;
  color: #fff;
  font-family: 'TeleNeo', 'Inter', sans-serif;
  font-weight: 400;
  letter-spacing: -0.31px;
}

.ty-contact {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ty-contact__heading {
  font-size: 22px;
  font-weight: 600;
  color: #fff;
  font-family: 'Source Sans Pro', 'Inter', sans-serif;
  line-height: 32px;
  letter-spacing: 0.07px;
}

.ty-contact__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}

.ty-contact__item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ty-contact__icon {
  width: 40px;
  height: 40px;
  min-width: 40px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #096e75;
  font-size: 18px;
}

.ty-contact__text {
  font-size: 20px;
  color: #fff;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: -0.31px;
  font-family: 'TeleNeo', 'Inter', sans-serif;
}

.ty-contact__text a {
  color: #fff;
  text-decoration: underline;
}

.ty-hero__right {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 80px;
}

.ty-hero__right img {
  width: 100%;
  max-width: 700px;
  height: auto;
  object-fit: contain;
  display: block;
  margin: 170px 0px 0px 90px;
}

@media (max-width: 768px) {
  .ty-hero {
    min-height: unset;
  }

  .ty-hero__overlay {
    background: rgba(43, 69, 91, 0.78);
  }

  .ty-hero__inner {
    flex-direction: column;
    padding: 40px 24px 100px 24px;
    gap: 32px;
    min-height: unset;
    align-items: flex-start;
  }

  .ty-hero__left {
    flex: none;
    width: 100%;
    max-width: 100%;
    gap: 48px;
  }

  .ty-hero__logo {
    width: 200px;
    height: auto;
  }

  .ty-hero__title {
    font-size: 26px;
  }

  .ty-hero__right {
    width: 100%;
    padding-top: 40px;
  }

  .ty-hero__right img {
    max-width: 80%;
    margin: 0 auto;
  }

  .ty-contact__text {
    font-size: 18px;
  }
}