/* ============================================================
   Thank You — premium build (brand #ff7a45 / black / white / cream)
   ============================================================ */
.ty,
.ty h1,
.ty h2,
.ty h3,
.ty h4,
.ty p,
.ty span,
.ty a,
.ty div {
   font-family: "Poppins", sans-serif
}

.ty {
   --o: #ff7a45;
   --o2: #ff9e6b;
   --od: #e5622f;
   --ink: #141414;
   --cream: #FFF4EF;
   --dark: #0e0f12;
   --dark2: #17181d;
   position: relative;
   z-index: 2
}

#mainfooter {
   position: relative;
   z-index: 1
}

.ty * {
   box-sizing: border-box
}

#mainheader {
   min-height: 0 !important;
   padding: 0 !important
}

.ty .container {
   max-width: 1180px;
   width: 100%;
   margin-left: auto;
   margin-right: auto;
   padding-left: 20px;
   padding-right: 20px
}

.ty .cmn_padd {
   padding: 82px 20px
}

/* reveal */
.ty .reveal {
   opacity: 0;
   transform: translateY(26px);
   transition: opacity .7s cubic-bezier(.16, 1, .3, 1), transform .7s cubic-bezier(.16, 1, .3, 1);
   transition-delay: var(--d, 0s)
}

.ty .reveal.in {
   opacity: 1;
   transform: none
}

@media(prefers-reduced-motion:reduce) {
   .ty .reveal {
      opacity: 1 !important;
      transform: none !important;
      transition: none !important
   }
}

/* ============================================================
   HERO (dark)
   ============================================================ */
.ty-hero {
   position: relative;
   overflow: hidden;
   background: var(--dark);
   padding: 160px 20px 92px;
   text-align: center
}

.ty-hero:before {
   content: "";
   position: absolute;
   top: -200px;
   left: 50%;
   transform: translateX(-50%);
   width: 760px;
   height: 560px;
   background: radial-gradient(circle, rgba(255, 122, 69, .28), transparent 62%);
   pointer-events: none
}

.ty-hero:after {
   content: "";
   position: absolute;
   inset: 0;
   background-image: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
   background-size: 46px 46px;
   mask-image: radial-gradient(circle at 50% 34%, #000, transparent 72%);
   -webkit-mask-image: radial-gradient(circle at 50% 34%, #000, transparent 72%);
   pointer-events: none
}

.ty-hero .container {
   position: relative;
   z-index: 2
}

.ty-check {
   width: 88px;
   height: 88px;
   border-radius: 50%;
   background: linear-gradient(135deg, var(--o), #ff9e6b);
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 0 auto 30px;
   box-shadow: 0 18px 44px rgba(255, 122, 69, .5);
   animation: tyPop .6s cubic-bezier(.16, 1.4, .3, 1) both
}

.ty-check svg {
   width: 44px;
   height: 44px;
   stroke: #fff;
   stroke-width: 3
}

@keyframes tyPop {
   0% {
      opacity: 0;
      transform: scale(.4)
   }

   100% {
      opacity: 1;
      transform: scale(1)
   }
}

@media(prefers-reduced-motion:reduce) {
   .ty-check {
      animation: none
   }
}

.ty-h1 {
   font-size: 46px;
   line-height: 1.1;
   font-weight: 800;
   color: #fff;
   margin: 0 0 16px;
   letter-spacing: -.5px
}

.ty-h1 span {
   color: var(--o)
}

.ty .ty-sub {
   font-size: 18px;
   line-height: 1.7;
   color: #b9bcc6;
   max-width: 560px;
   margin: 0 auto;
   text-align: center
}

/* ============================================================
   NEXT STEP (white)
   ============================================================ */
.ty-next {
   background: #fff;
   text-align: center
}

.ty-next h2 {
   font-size: 32px;
   font-weight: 700;
   color: var(--ink);
   margin: 0 0 14px;
   letter-spacing: -.4px
}

.ty .ty-next p {
   font-size: 17px;
   line-height: 1.7;
   color: #5c5c5c;
   max-width: 600px;
   margin: 0 auto 30px;
   text-align: center
}

.ty-btn {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   background: var(--o);
   color: #fff;
   font-weight: 700;
   font-size: 17px;
   padding: 18px 40px;
   border-radius: 12px;
   text-decoration: none;
   border: 2px solid var(--o);
   box-shadow: 0 14px 32px rgba(255, 122, 69, .32);
   transition: transform .25s ease, box-shadow .25s ease, background .25s ease
}

.ty-btn:hover {
   background: var(--od);
   border-color: var(--od);
   color: #fff;
   transform: translateY(-3px);
   box-shadow: 0 20px 42px rgba(255, 122, 69, .45)
}

.ty-btn svg {
   width: 19px;
   height: 19px;
   stroke: #fff
}

/* ============================================================
   WHILE YOU'RE HERE (cream)
   ============================================================ */
.ty-more {
   background: var(--cream)
}

.ty-head {
   text-align: center;
   max-width: 720px;
   margin: 0 auto
}

.ty-eyebrow {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   font-size: 12px;
   font-weight: 700;
   letter-spacing: 1.6px;
   text-transform: uppercase;
   color: var(--o);
   background: #fff4ef;
   border: 1px solid #ffd8c6;
   padding: 7px 15px;
   border-radius: 30px;
   margin-bottom: 16px
}

.ty-eyebrow svg {
   width: 14px;
   height: 14px;
   stroke: var(--o)
}

.ty-head h2 {
   font-size: 30px;
   font-weight: 700;
   color: var(--ink);
   margin: 0
}

.ty-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 24px;
   margin-top: 44px
}

.ty-card {
   display: flex;
   flex-direction: column;
   background: #fff;
   border: 1px solid #f2ece7;
   border-radius: 18px;
   padding: 30px 28px;
   text-decoration: none;
   box-shadow: 0 10px 30px rgba(0, 0, 0, .06);
   transition: transform .32s cubic-bezier(.16, 1, .3, 1), box-shadow .32s ease, border-color .32s ease
}

.ty-card:hover {
   transform: translateY(-10px);
   box-shadow: 0 26px 52px rgba(255, 122, 69, .16);
   border-color: #ffd8c6
}

.ty-ic {
   width: 52px;
   height: 52px;
   border-radius: 14px;
   background: linear-gradient(135deg, #fff2ea, #ffe0d1);
   border: 1px solid #ffe0d1;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 18px
}

.ty-ic svg {
   width: 25px;
   height: 25px;
   stroke: var(--o)
}

.ty-card h3 {
   font-size: 17px;
   font-weight: 700;
   color: #111;
   margin: 0 0 8px
}

.ty-card p {
   font-size: 14px;
   line-height: 1.65;
   color: #666;
   margin: 0 0 18px
}

.ty-go {
   margin-top: auto;
   display: inline-flex;
   align-items: center;
   gap: 7px;
   font-size: 14px;
   font-weight: 700;
   color: var(--o)
}

.ty-go svg {
   width: 15px;
   height: 15px;
   stroke: var(--o);
   transition: transform .25s ease
}

.ty-card:hover .ty-go svg {
   transform: translateX(4px)
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:900px) {
   .ty-hero {
      padding: 140px 18px 72px
   }

   .ty-h1 {
      font-size: 36px
   }

   .ty-grid {
      grid-template-columns: 1fr;
      gap: 18px
   }
}

@media(max-width:520px) {
   .ty-h1 {
      font-size: 30px
   }

   .ty-next h2 {
      font-size: 26px
   }

   .ty-btn {
      width: 100%;
      justify-content: center
   }
}