/* ---------- HERO ---------- */
.n-hero{ padding:100px 0 55px; }

.n-hero-title{
  font-weight:300;
  font-size:90px;
  line-height:1.0;
  letter-spacing:-1.5px;
  margin:0; margin-bottom:30px
}








.n-hero-title .n-line{ display:block; white-space:nowrap; }

.n-letter{
  display:inline-block;
  opacity:0;
  transform:translateY(18px);
  animation:n-letterIn .45s cubic-bezier(.2,.8,.2,1) forwards;
}

.n-letter.n-space{ width:.4em; }
.n-red{ color:#ce0001; }

@keyframes n-letterIn{ to{ opacity:1; transform:translateY(0); } }

.n-hero-sub{
  color:var(--n-text-muted);
  font-size:1.05rem;
  font-weight:500;
  max-width:420px;
  margin:22px 0 32px;
  opacity:0;
  animation:n-fadeUp .6s ease forwards;
  animation-delay:1.4s;
}

.n-hero-ctas{
  opacity:0;
  animation:n-fadeUp .6s ease forwards;
  animation-delay:1.6s;
}

@keyframes n-fadeUp{
  from{ opacity:0; transform:translateY(14px); }
  to{ opacity:1; transform:translateY(0); }
}

.n-btn-primary{
  background:var(--n-yellow);
  color:#141213;
  font-weight:700;
  border:none;
  border-radius:50px;
  padding:13px 26px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  transition:transform .25s ease, box-shadow .25s ease;
}
.n-btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(244,200,28,.25);
  color:#141213;
}
.n-btn-primary svg{ transition:transform .25s ease; }
.n-btn-primary:hover svg{ transform:translateX(4px); }

.n-btn-outline{
  background:transparent;
  color:var(--n-text);
  font-weight:600;
  border:1px solid var(--n-border);
  border-radius:50px;
  padding:13px 24px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-left:14px;
  transition:border-color .25s ease, background .25s ease;
}
.n-btn-outline:hover{
  border-color:var(--n-text-muted);
  background:rgba(255,255,255,.04);
  color:var(--n-text);
}

/* ---------- PLAN CARDS ---------- */
.n-plans{ padding:35px 0 40px; }

.n-plan-card{
  position:relative;
  border-radius:14px;
  overflow:hidden;
  height:100%;
  min-height:500px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  cursor:pointer;
  background:#000;
  isolation:isolate;
}

.n-plan-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,.05) 20%, rgba(0,0,0,.15) 100%);
  z-index:1;
}

.n-plan-img{
  position:absolute;
  inset:0;
  height:100%;
  width:auto;
  object-fit:cover;
  object-position:center;
  transform:scale(1);
  transition:transform .5s ease;
  z-index:0;
  }
  
  
  
  
  .n-plan-img {
  position: absolute;
  inset: 0;
  height: 100%;
  width: auto; /* This is likely the culprit */
  object-fit: cover;
  object-position: center;
}  
  
  

  
  
  
  
  
  
  
  
  
  
.n-plan-card:hover .n-plan-img{ transform:scale(1.12); }

.n-plan-body{
  position:relative;
  z-index:2;
  padding:24px 20px 0;
}

.n-plan-logo{
  height:22px;
  margin-bottom:12px;
  display:block;
}

.n-plan-title{
  font-weight:800;
  font-size:1.9rem;
  letter-spacing:-1px;
  line-height:1;
  margin-bottom:12px;
  text-transform:uppercase;
}

.n-plan-desc{
  color:#e6e3e3;
  font-size:.88rem;
  font-weight:500;
  margin-bottom:20px;
}

.n-plan-badge-wrap{
  position:relative;
  z-index:2;
  display:flex;
  justify-content:flex-end;
  padding:0 0 0;
}

.n-plan-badge{
  background:var(--n-yellow);
  color:#141213;
  font-weight:700;
  font-size:.85rem;
  letter-spacing:.3px;
  text-align:center;
  white-space:nowrap;
  border-radius:5px 0 5px 0;
  padding:10px 14px;
  transition:padding .35s ease, color .35s ease;
}
.n-plan-badge b{ font-weight:800; }

.n-plan-card:hover .n-plan-badge{
  padding:14px 16px;
  color:var(--n-red);
}

/* ---------- APP DOWNLOAD ---------- */
.n-app{ padding:75px 0; }

.n-app-title{ font-weight:500; font-size:52px; }
.n-app-title .n-hl{ color:var(--n-yellow); }

.n-app-sub{
  color:var(--n-text-muted);
  font-weight:500;
  max-width:380px;
  margin:18px 0 26px;
}

.n-store-badges img{ height:44px; margin-right:12px; }
.w80{
	width:80%
}
.n-qr-wrap{ display:flex; align-items:center; gap:14px; margin-top:26px; }
.n-qr-wrap .n-qr{ width:66px; height:66px; background:#fff; border-radius:6px; padding:5px; }
.n-qr-wrap span{ color:var(--n-text-muted); font-size:.9rem; font-weight:500; }

.n-phone-wrap{ display:flex; justify-content:center; min-height:320px; }

/* Phone: off-screen right by default. Toggled in/out by JS as it
   scrolls in and out of view (scroll down = enters, scroll up =
   exits back to the right), smooth both ways via transition. */
.n-phone{
  max-width:98%;
  transform:translateX(160%) rotate(8deg);
  opacity:0;
  transition:transform .8s cubic-bezier(.16,.9,.3,1), opacity .8s ease;
}
.n-phone.n-phone-in{
  transform:translateX(0) rotate(0deg);
  opacity:1;
}

/* Hover tilt: ONLY on devices with a real mouse/trackpad.
   Touch devices have no true ":hover", so this never fires there
   (which is correct — the tap-based rule below covers touch). */
@media (hover:hover) and (pointer:fine){
  .n-phone-wrap:hover .n-phone.n-phone-in{
    transform:rotate(-4deg) scale(1.03);
  }
}

/* Touch fallback: tap-and-hold triggers the same tilt, added/removed
   via touchstart/touchend in script.js. Same transition as hover so
   it eases in/out instead of snapping. */
.n-phone.n-phone-tap{
  transform:rotate(-4deg) scale(1.03);
}

/* ---------- TAILORED SECTION ---------- */
.n-tailored{ padding:50px 0 80px; }

.n-tailored-eyebrow{ color:var(--n-text-muted); font-size:.95rem; font-weight:600; margin-bottom:6px; }

.n-tailored-title{ font-weight:500; font-size:52px; margin-bottom:36px; }
.n-tailored-title .n-hl{ color:var(--n-yellow); }

.n-mini-card{
  background:var(--n-card);
  border:1px solid var(--n-border);
  border-radius:12px;
  padding:22px 20px;
  height:100%;
  transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.n-mini-card img{ width:65%; padding-bottom:20px }

.n-mini-card:hover{
  transform:translateY(-6px);
  border-color:var(--n-yellow);
  box-shadow:0 14px 30px rgba(0,0,0,.35);
}

.n-mini-tag{
  background:var(--n-yellow);
  color:#141213;
  font-weight:800;
  font-size:.65rem;
  letter-spacing:1px;
  padding:2px 8px;
  border-radius:4px;
  display:inline-block;
  margin-bottom:6px;
}

.n-mini-title{
  font-weight:800;
  font-size:1.1rem;
  text-transform:uppercase;
  letter-spacing:-.5px;
  margin-bottom:16px;
}

.n-mini-card ul{ list-style:none; padding:0; margin:0 0 18px; }
.n-mini-card ul li{
  position:relative;
  padding-left:16px;
  margin-bottom:10px;
  font-size:.83rem;
  font-weight:500;
  color:#d8d5d5;
}
.n-mini-card ul li::before{
  content:"";
  position:absolute;
  left:0; top:7px;
  width:5px; height:5px;
  border-radius:50%;
  background:var(--n-yellow);
}

.n-mini-more{
  color:var(--n-yellow);
  font-size:.85rem;
  font-weight:700;
  display:inline-flex;
  align-items:center;
  gap:6px;
  transition:gap .25s ease;
}
.n-mini-more:hover{ gap:10px; color:var(--n-yellow); }

/* ---------- BUSINESS BANNER (full width, edge to edge, parallax bg) ---------- */
.n-biz{
  position:relative;
  width:100%;
  overflow:hidden;      /* hides the extra scale/translate overflow from the parallax */
  min-height:480px;
  display:flex;
  align-items:center;
  background:#0a1120;
}

.n-biz-bg{
  position:absolute;
  top:-15%;
  left:0;
  width:100%;
  height:130%;      /* extra height = "slack" for the parallax translate */
  object-fit:cover;
  will-change:transform;
}
 

 









.n-biz-shade{
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(90deg, rgba(6,10,20,.97) 0%, rgba(6,10,20,.85) 35%, rgba(6,10,20,.25) 70%, rgba(6,10,20,0) 100%);
}

.n-biz .container{ position:relative; z-index:2; }
.n-biz-content{ padding:55px 0; }

.n-biz-title{ font-weight:500; font-size:44px; line-height:1.25; }

.n-btn-ghost{
  border:1px solid rgba(255,255,255,.4);
  color:#fff;
  font-weight:600;
  border-radius:50px;
  padding:13px 26px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-top:26px;
  transition:background .25s ease, transform .25s ease;
}
.n-btn-ghost:hover{ background:rgba(255,255,255,.08); transform:translateY(-2px); color:#fff; }

 

 

 
/* Ensure the swiper wrapper uses flexbox for equal height columns */
.n-tailored-slider .swiper-wrapper {
  display: flex;
  align-items: stretch;
}

/* Force cards to fill the height of the slide container */
.n-tailored-slider .swiper-slide {
  height: auto; /* Required for swiper to calculate correctly */
  display: flex;
  flex-direction: column;
}

/* Optional: Pushes the "Learn more" link to the bottom if content length varies */
.n-mini-card {
  height: 100%;
}

.n-mini-card ul {
  flex-grow: 1; /* Pushes the link to the bottom */
}















/* 1. Hide arrows on desktop */
 

/* Mobile-specific adjustments */
@media (max-width: 767px) {
.n-hero-title {font-size: 69px;}

/* Ensure the wrapper is centered */
.n-plans-slider {
  display: flex;
  justify-content: center;
}

/* Force specific card dimensions */
.n-plan-card {
  width: 310px !important;
  height: 500px !important;
  margin: 0 auto; /* Centers the card within its slide */
}
  .n-plans-slider .swiper-slide {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important; /* Ensures the slide takes full width for alignment */
  }
  


    



/* Force specific card dimensions */
.n-mini-card{
  width: 310px !important;
  margin: 0 auto; /* Centers the card within its slide */
}
  .swiper-slide .swiper-slide {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important; /* Ensures the slide takes full width for alignment */
  }
  








  
}

 

 

.swiper-button-disabled {
  display: none !important;
}








/* Ensure the wrapper respects the layout */
.n-tailored-slider {
  overflow: hidden;
}



/* Desktop */
@media (min-width: 992px) {
    
    
    
    
    .n-carousel-wrapper {
        display: block;
    }

    .n-carousel {
        display: flex;
        gap: 20px;
        overflow: visible;
    }

    .n-carousel-item {
        flex: 1;
    }

    .n-carousel-btn {
        display: none;
    }

}

/* Mobile */
@media (max-width:599px){
.n-hero-title {font-size: 49px;}

.n-carousel-wrapper{
    position:relative;
    padding:0 40px;
}

.n-carousel{
    display:flex;
    overflow-x:auto;
    scroll-behavior:smooth;
    scroll-snap-type:x mandatory;
    -ms-overflow-style:none;
    scrollbar-width:none;
}

.n-carousel::-webkit-scrollbar{
    display:none;
}

.n-carousel-item{
    min-width:100%;
    scroll-snap-align:center;
    flex:0 0 100%;
}

.n-carousel-btn{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:38px;
    height:38px;
    border:none;
    border-radius:50%;
    background:#fff;
    box-shadow:0 4px 12px rgba(0,0,0,.15);
    cursor:pointer;
    z-index:10;
}

.n-carousel-btn.prev{
    left:0;
}

.n-carousel-btn.next{
    right:0;
}

}





@media (max-width:991px){
  .n-plan-card{ min-height:340px; }
}
@media (max-width:767px){
  .n-btn-outline{ margin-left:0; margin-top:12px; }
  .n-phone{ margin-top:30px; }
  .n-biz-content{ padding:40px 24px; }
  .n-biz-bg{ opacity:.35; }
  .n-biz-shade{ background:linear-gradient(90deg, rgba(6,10,20,.95) 0%, rgba(6,10,20,.85) 100%); }
}





/* Make all slides equal height */
  .n-plans-slider .swiper-wrapper {
    align-items: stretch;
  }

  .n-plans-slider .swiper-slide {
    height: auto;
    display: flex;
  }

  .n-plan-card {
    width: 100%;
    height: 100%;
  }

.swiper {
    padding-top: 10px!important;
  }









  .swiper-button-next,
  .swiper-button-prev {
    color: #fff !important;
    background: #000;
    width: 45px !important;
    height: 45px !important;
    border-radius: 50%;
    transition: all 0.3s ease;
  }

  .swiper-button-next:hover,
  .swiper-button-prev:hover {
    transform: scale(1.2);
  }

  .swiper-button-next:after,
  .swiper-button-prev:after {
    font-size: 16px !important;
    font-weight: bold;
  }


.ml-0 {
	 margin-left:0px
}







  @media (max-width: 600px) {
    /* Mobile: Carousel styles */
    .n-plans-slider { overflow: hidden; }
    .n-plans-slider .swiper-button-next,
    .n-plans-slider .swiper-button-prev {
      color: #000;
    }
  }
 












  @media (max-width: 600px) {
    /* Mobile: Carousel styles */
    .n-tailored-slider { overflow: hidden; }
    .swiper-button-next, .swiper-button-prev { color: #000; }
  


/* Ensure individual slides are sized correctly for the slider */
 




 

 
 
 }