/* ==========================================================================
   landing-new.css — Pixel-perfect copy of New Theme_Postwale
   ========================================================================== */

/* ── CSS Custom Properties ─────────────────────────────────────────────── */
:root {
  --nt-primary:          #2563eb;
  --nt-primary-dark:     #1e3a8a;
  --nt-primary-glow:     #1d4ed8;
  --nt-primary-light:    #3b82f6;
  --nt-primary-faint:    #eff6ff;
  --nt-secondary:        #1a1a2e;
  --nt-bg:               #ffffff;
  --nt-fg:               #0f172a;
  --nt-muted:            #64748b;
  --nt-muted-bg:         #f1f5f9;
  --nt-card:             #ffffff;
  --nt-border:           #e2e8f0;
  --nt-border-soft:      rgba(37,99,235,.15);

  --nt-shadow-soft:      0 2px 8px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.04);
  --nt-shadow-card:      0 4px 20px rgba(0,0,0,.08),0 1px 4px rgba(0,0,0,.04);
  --nt-shadow-card-hover:0 12px 40px rgba(0,0,0,.12),0 4px 12px rgba(0,0,0,.06);
  --nt-shadow-elevated:  0 8px 30px rgba(0,0,0,.12),0 2px 8px rgba(0,0,0,.06);
  --nt-shadow-button:    0 4px 14px rgba(37,99,235,.35);
  --nt-shadow-glow:      0 8px 24px rgba(37,99,235,.45);

  --nt-radius-sm:   12px;
  --nt-radius:      16px;
  --nt-radius-lg:   20px;
  --nt-radius-xl:   24px;
  --nt-radius-2xl:  32px;
  --nt-radius-full: 9999px;
}

/* ── Page body ────────────────────────────────────────────────────────── */
body.nt-page {
  overflow-x: hidden;
  font-family: 'Poppins', sans-serif;
  background: #fff;
  color: var(--nt-fg);
}
body.nt-page * { box-sizing: border-box; }

/* ── Animations ──────────────────────────────────────────────────────── */
@keyframes nt-float {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}
@keyframes nt-float-delayed {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
@keyframes nt-pulse-soft {
  0%,100% { opacity: 1; }
  50%      { opacity: .6; }
}
@keyframes nt-ping {
  75%,100% { transform: scale(2); opacity: 0; }
}
@keyframes nt-slide-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes nt-scroll-left {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@keyframes col-scroll-up {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}
@keyframes col-scroll-down {
  0%   { transform: translateY(-50%); }
  100% { transform: translateY(0); }
}

.nt-animate-float      { animation: nt-float 4s ease-in-out infinite; }
.nt-animate-float-d    { animation: nt-float 4s ease-in-out infinite 1s; }
.nt-animate-pulse-soft { animation: nt-pulse-soft 3s ease-in-out infinite; }

/* ── Utilities ───────────────────────────────────────────────────────── */
.nt-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}
@media (max-width:640px) { .nt-container { padding: 0 16px; } }

.nt-gradient-text {
  background: linear-gradient(135deg,var(--nt-primary),var(--nt-primary-glow));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.nt-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 18px;
  background: rgba(37,99,235,.1);
  color: var(--nt-primary);
  border-radius: var(--nt-radius-full);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .3px;
  margin-bottom: 16px;
}

.nt-section-header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 64px;
}
.nt-section-h2 {
  font-size: clamp(30px,4vw,52px);
  font-weight: 800;
  color: var(--nt-fg);
  margin: 0 0 16px;
  line-height: 1.15;
}
.nt-section-desc {
  font-size: 17px;
  color: var(--nt-muted);
  line-height: 1.7;
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   HEADER — transparent on landing page, white on scroll
   Applied immediately via html[data-lp] (set by inline script in head)
   ═══════════════════════════════════════════════════════════════════════ */
html[data-lp] .ud-header {
  background: transparent !important;
  position: fixed !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  z-index: 9999 !important;
  border-bottom: 1px solid rgba(255,255,255,.1) !important;
  box-shadow: none !important;
  transition: background .4s ease, box-shadow .4s ease, border-color .4s ease !important;
}
html[data-lp] .ud-header.nt-scrolled {
  background: rgba(255,255,255,.97) !important;
  backdrop-filter: blur(16px) !important;
  box-shadow: 0 2px 20px rgba(0,0,0,.08) !important;
  border-bottom: 1px solid #f1f5f9 !important;
}
html[data-lp] .ud-header.nt-scrolled .nav-link-item { color: #0f172a !important; }
html[data-lp] .ud-header.nt-scrolled #loginBtn { color: #0f172a !important; }
html[data-lp] .ud-header.nt-scrolled #signUpBtn.signUpBtn {
  background: linear-gradient(135deg,#2563eb,#1d4ed8) !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(37,99,235,.35) !important;
}
html[data-lp] .ud-header.nt-scrolled #navbarToggler span { background: #0f172a !important; }
/* Non-landing pages keep orange header */
.ud-header {
  background: linear-gradient(135deg,#1e3a8a 0%,#2563eb 60%,#3b82f6 100%) !important;
  transition: all .4s ease;
}

/* ═══════════════════════════════════════════════════════════════════════
   1. HERO
   ═══════════════════════════════════════════════════════════════════════ */
.nt-hero {
  position: relative;
  min-height: 100vh;
  background: linear-gradient(135deg,#0f172a 0%,#1e3a8a 40%,#1d4ed8 75%,#2563eb 100%);
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: 120px 0 80px;
  width: 100%;
  max-width: 100vw;
}
@media (min-width:1024px) { .nt-hero { padding: 160px 0 128px; } }
@media (max-width:768px)  { .nt-hero { padding: 96px 0 60px; min-height: auto; } }
@media (max-width:480px)  { .nt-hero { padding: 84px 0 48px; } }

/* Background blobs */
.nt-hero-blob-1 {
  position: absolute; top: 80px; left: 40px;
  width: 288px; height: 288px;
  background: rgba(255,255,255,.1);
  border-radius: 50%; filter: blur(40px);
  animation: nt-pulse-soft 4s ease-in-out infinite;
}
.nt-hero-blob-2 {
  position: absolute; bottom: 80px; right: 40px;
  width: 384px; height: 384px;
  background: rgba(255,255,255,.06);
  border-radius: 50%; filter: blur(40px);
  animation: nt-pulse-soft 4s ease-in-out infinite 1s;
}
.nt-hero-blob-3 {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 600px; height: 600px;
  background: rgba(255,255,255,.04);
  border-radius: 50%; filter: blur(60px);
}
.nt-hero-pattern {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size: 50px 50px;
  z-index: 0;
}
.nt-hero-wave {
  position: absolute; bottom: -1px; left: 0; right: 0;
  z-index: 1; line-height: 0;
}
.nt-hero-wave svg { display: block; width: 100%; }
.nt-hero-inner { position: relative; z-index: 2; width: 100%; }

/* Hero 2-column grid */
.nt-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
@media (max-width:1024px) { .nt-hero-grid { gap: 40px; } }
@media (max-width:768px) {
  .nt-hero-grid { grid-template-columns: 1fr; text-align: center; gap: 48px; }
  .nt-hero-grid > div:last-child { display: none; }
}

/* Badge */
.nt-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: rgba(255,255,255,.12);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: var(--nt-radius-full);
  color: rgba(255,255,255,.9);
  font-size: 13px; font-weight: 600;
  margin-bottom: 24px;
  animation: nt-slide-up .6s ease both;
  max-width: 100%;
}
@media (max-width:480px) {
  .nt-hero-badge { font-size: 12px; padding: 8px 16px; margin-bottom: 18px; }
}
.nt-badge-ping {
  position: relative; display: inline-flex; width: 8px; height: 8px;
}
.nt-badge-ping::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: rgba(255,255,255,.75);
  animation: nt-ping 1.5s cubic-bezier(0,0,.2,1) infinite;
}
.nt-badge-ping::after {
  content: ''; display: inline-block; width: 8px; height: 8px;
  border-radius: 50%; background: #fff; position: relative;
}

/* Heading */
.nt-hero-h1 {
  font-size: clamp(28px,5vw,60px);
  font-weight: 800;
  line-height: 1.15;
  color: #fff;
  margin: 0 0 24px;
  word-wrap: break-word;
  overflow-wrap: break-word;
  animation: nt-slide-up .7s ease .1s both;
}
.nt-hero-h1 .nt-hl {
  display: inline-block;
  background: #fff;
  color: var(--nt-primary);
  padding: 2px 14px 6px;
  border-radius: 12px;
  box-shadow: 0 6px 24px rgba(0,0,0,.18);
  font-size: clamp(32px,5.5vw,64px);
  margin-top: 6px;
}
@media (max-width:480px) {
  .nt-hero-h1 { font-size: 26px; line-height: 1.2; }
  .nt-hero-h1 .nt-hl { font-size: 30px; padding: 2px 10px 5px; }
}

/* Description */
.nt-hero-desc {
  font-size: 18px; line-height: 1.75;
  color: rgba(255,255,255,.85);
  max-width: 520px; margin: 0 0 36px;
  animation: nt-slide-up .7s ease .2s both;
}
@media (max-width:768px) { .nt-hero-desc { margin-left: auto; margin-right: auto; font-size: 16px; } }
@media (max-width:480px) { .nt-hero-desc { font-size: 14px; line-height: 1.65; margin-bottom: 28px; } }

/* CTAs */
.nt-hero-ctas {
  display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 0;
  animation: nt-slide-up .7s ease .35s both;
}
@media (max-width:768px) { .nt-hero-ctas { justify-content: center; } }
@media (max-width:480px) {
  .nt-hero-ctas { gap: 10px; }
  .nt-btn { height: 48px; padding: 0 20px; font-size: 14px; min-width: 130px; }
}

/* Stats */
.nt-hero-stats {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 16px;
  margin-top: 36px; padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.18);
  animation: nt-slide-up .7s ease .5s both;
}
@media (max-width:768px) { .nt-hero-stats { justify-items: center; gap: 12px; } }
@media (max-width:480px) {
  .nt-hero-stats { gap: 8px; margin-top: 24px; padding-top: 20px; }
  .nt-stat-value { font-size: 18px !important; gap: 4px; }
  .nt-stat-value svg { width: 15px; height: 15px; }
  .nt-stat-label { font-size: 10px; letter-spacing: .3px; }
}
.nt-stat-value {
  display: flex; align-items: center; gap: 6px;
  font-size: clamp(22px,2.5vw,30px); font-weight: 800; color: #fff; margin-bottom: 2px;
}
.nt-stat-value svg { opacity: .75; }
.nt-stat-label {
  font-size: 12px; color: rgba(255,255,255,.6);
  text-transform: uppercase; letter-spacing: .6px; font-weight: 500;
}

/* Phone mockup */
.nt-phone-wrap {
  display: flex; justify-content: center; align-items: center; position: relative;
}
.nt-phone-glow {
  position: absolute; inset: 0;
  background: rgba(255,255,255,.2); filter: blur(40px);
  border-radius: 50%; transform: scale(.75);
}
.nt-phone {
  position: relative;
  background: var(--nt-secondary);
  padding: 12px; border-radius: 48px;
  box-shadow: 0 40px 80px rgba(0,0,0,.32);
  border: 2px solid rgba(255,255,255,.12);
  animation: nt-float 4s ease-in-out infinite;
  width: min(310px,72vw);
}
.nt-phone-notch {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  width: 80px; height: 6px; background: rgba(255,255,255,.08);
  border-radius: 4px; z-index: 5;
}
.nt-phone-screen {
  border-radius: 36px; overflow: hidden;
  background: #f8fafc; aspect-ratio: 9/19;
}
.nt-phone-screen img { width:100%; height:100%; object-fit:cover; display:block; }
.nt-phone-screen .slick-slide img { height:100%; object-fit:cover; }
.nt-phone-screen .slick-list,
.nt-phone-screen .slick-track { height:100%; }
.nt-phone-screen .slick-slide > div { height:100%; }

/* ── Hero Scrolling Columns ──────────────────────────────────────────── */
.nt-hero-cols-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.nt-hero-cols {
  display: flex;
  gap: 12px;
  height: 500px;
  overflow: hidden;
  border-radius: 24px;
  position: relative;
  width: 100%;
}

/* Fade top & bottom */
.nt-hero-cols::before,
.nt-hero-cols::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 100px;
  z-index: 3;
  pointer-events: none;
}
.nt-hero-cols::before {
  top: 0;
  background: linear-gradient(to bottom, rgba(15,23,42,.95) 0%, transparent 100%);
}
.nt-hero-cols::after {
  bottom: 0;
  background: linear-gradient(to top, rgba(29,78,216,.9) 0%, transparent 100%);
}

.nt-hero-col {
  flex: 1;
  overflow: hidden;
  min-width: 0;
}

.nt-hero-col-inner {
  display: flex;
  flex-direction: column;
  gap: 10px;
  will-change: transform;
}

.nt-hero-col-inner.col-up {
  animation: col-scroll-up 40s linear infinite;
}
.nt-hero-col-inner.col-down {
  animation: col-scroll-down 48s linear infinite;
}
.nt-hero-col-inner.col-up-offset {
  animation: col-scroll-up 44s linear infinite;
  animation-delay: -14s;
}

.nt-hero-col-item {
  flex-shrink: 0;
}
.nt-hero-col-item img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: 12px;
  display: block;
  border: 1px solid rgba(255,255,255,.08);
}

@media (max-width:1024px) {
  .nt-hero-cols { height: 420px; }
}
@media (max-width:768px) {
  .nt-hero-cols-wrap { display: none; }
}

/* Floating cards */
.nt-float-card {
  position: absolute; background: #fff;
  border-radius: 18px; padding: 14px 18px;
  box-shadow: 0 12px 36px rgba(0,0,0,.18);
  display: flex; align-items: center; gap: 12px;
  z-index: 5; white-space: nowrap;
}
.nt-float-card-1 { top: -16px; right: -16px; animation: nt-float 3.5s ease-in-out infinite; }
.nt-float-card-2 { bottom: -16px; left: -16px; animation: nt-float-delayed 3.5s ease-in-out infinite 1s; }
@media (max-width:768px) { .nt-float-card { display: none; } }

.nt-float-icon {
  width: 40px; height: 40px; flex-shrink: 0;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
}
.nt-float-icon-green  { background: rgba(34,197,94,.12); }
.nt-float-icon-orange { background: rgba(37,99,235,.12); }
.nt-float-num { font-size: 15px; font-weight: 800; color: var(--nt-fg); line-height: 1.2; }
.nt-float-lbl { font-size: 11px; color: var(--nt-muted); font-weight: 500; }

/* ═══════════════════════════════════════════════════════════════════════
   2. TRENDING CATEGORIES (Infinite Scroll)
   ═══════════════════════════════════════════════════════════════════════ */
.nt-trending {
  padding: 64px 0 80px;
  background: linear-gradient(to bottom,#fff,var(--nt-primary-faint));
  overflow: hidden;
}
@media (min-width:768px) { .nt-trending { padding: 96px 0; } }
@media (max-width:640px)  { .nt-trending { padding: 48px 0 64px; } }

.nt-trending-header { text-align: center; margin-bottom: 48px; }
.nt-trending-h2 {
  font-size: clamp(28px,4vw,48px); font-weight: 800;
  color: var(--nt-fg); margin: 0 0 14px; line-height: 1.2;
}
.nt-trending-desc {
  font-size: 17px; color: var(--nt-muted); max-width: 560px; margin: 0 auto;
}

/* Infinite scroll track */
.nt-scroll-wrapper { position: relative; }
.nt-scroll-fade-left {
  position: absolute; left: 0; top: 0; bottom: 0; width: 120px;
  background: linear-gradient(to right,#fff,transparent);
  z-index: 10; pointer-events: none;
}
.nt-scroll-fade-right {
  position: absolute; right: 0; top: 0; bottom: 0; width: 120px;
  background: linear-gradient(to left,var(--nt-primary-faint,#fff),transparent);
  z-index: 10; pointer-events: none;
}
.nt-scroll-track {
  display: flex;
  animation: nt-scroll-left 60s linear infinite;
  width: max-content;
}
.nt-scroll-track:hover { animation-play-state: paused; }

.nt-cat-card {
  flex-shrink: 0; width: 190px; margin: 0 10px;
  background: var(--nt-card);
  border-radius: var(--nt-radius); overflow: hidden;
  box-shadow: var(--nt-shadow-card);
  border: 1px solid rgba(226,232,240,.5);
  transition: transform .3s, box-shadow .3s;
  display: block; text-decoration: none;
}
.nt-cat-card:hover {
  transform: scale(1.05) translateY(-8px);
  box-shadow: var(--nt-shadow-card-hover);
}
.nt-cat-img-wrap { position: relative; aspect-ratio: 1/1; overflow: hidden; }
.nt-cat-img-wrap img {
  width:100%; height:100%; object-fit:cover;
  transition: transform .5s ease; display:block;
}
.nt-cat-card:hover .nt-cat-img-wrap img { transform: scale(1.1); }
.nt-cat-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top,rgba(0,0,0,.6),transparent);
  opacity: 0; transition: opacity .3s;
}
.nt-cat-card:hover .nt-cat-overlay { opacity: 1; }
.nt-cat-label {
  padding: 12px 14px; font-size: 13px; font-weight: 600;
  color: var(--nt-fg); text-align: center;
  background: linear-gradient(to right,rgba(37,99,235,.04),rgba(59,130,246,.04));
  transition: color .2s;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nt-cat-card:hover .nt-cat-label { color: var(--nt-primary); }

.nt-trending-cta { text-align: center; margin-top: 48px; }
.nt-view-all-link {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--nt-primary); font-weight: 600; font-size: 15px;
  text-decoration: none; transition: gap .2s, color .2s;
}
.nt-view-all-link:hover { gap: 14px; color: var(--nt-primary-dark); }
.nt-view-all-link svg { transition: transform .2s; }
.nt-view-all-link:hover svg { transform: translateX(4px); }

/* ═══════════════════════════════════════════════════════════════════════
   3. HOW IT WORKS  (py-20 lg:py-32 = 80px / 128px)
   ═══════════════════════════════════════════════════════════════════════ */
.nt-how {
  padding: 80px 0;
  background: rgba(241,245,249,.35);
  position: relative; overflow: hidden;
}
@media (min-width:1024px) { .nt-how { padding: 128px 0; } }
@media (max-width:640px)  { .nt-how { padding: 56px 0; } }

.nt-how-bg-1 {
  position: absolute; top: 25%; right: 0;
  width: 384px; height: 384px;
  background: rgba(37,99,235,.05); border-radius: 50%; filter: blur(60px);
}
.nt-how-bg-2 {
  position: absolute; bottom: 25%; left: 0;
  width: 320px; height: 320px;
  background: rgba(37,99,235,.04); border-radius: 50%; filter: blur(60px);
}

/* Steps */
.nt-steps-grid {
  display: grid; grid-template-columns: repeat(4,1fr); gap: 28px; position: relative;
}
@media (max-width:1024px) { .nt-steps-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width:540px)  { .nt-steps-grid { grid-template-columns: 1fr; } }

.nt-step-card {
  position: relative;
  background: var(--nt-card);
  border-radius: var(--nt-radius-lg); padding: 36px 24px 28px;
  border: 1px solid rgba(226,232,240,.5);
  box-shadow: var(--nt-shadow-soft);
  transition: transform .4s, box-shadow .4s, border-color .3s;
  height: 100%;
}
.nt-step-card:hover {
  transform: translateY(-10px);
  box-shadow: var(--nt-shadow-card);
  border-color: rgba(37,99,235,.25);
}
/* connector line */
.nt-step-card:not(:last-child)::after {
  content: '';
  position: absolute; top: 48px; right: -15px;
  width: 28px; height: 2px;
  background: linear-gradient(to right,rgba(37,99,235,.4),rgba(37,99,235,.6),transparent);
}
@media (max-width:1024px) { .nt-step-card:not(:last-child)::after { display: none; } }

.nt-step-badge {
  position: absolute; top: -14px; left: 24px;
  background: linear-gradient(135deg,var(--nt-primary),var(--nt-primary-glow));
  color: #fff; font-size: 12px; font-weight: 700;
  padding: 5px 14px; border-radius: var(--nt-radius-full);
  box-shadow: 0 4px 10px rgba(37,99,235,.3);
}
.nt-step-icon {
  width: 64px; height: 64px; border-radius: 20px;
  background: linear-gradient(135deg,var(--nt-primary),var(--nt-primary-glow));
  display: flex; align-items: center; justify-content: center;
  margin: 6px 0 20px;
  box-shadow: 0 8px 20px rgba(37,99,235,.28);
  transition: transform .4s, box-shadow .4s;
}
.nt-step-icon svg { stroke: #fff; }
.nt-step-card:hover .nt-step-icon {
  transform: scale(1.12);
  box-shadow: 0 12px 28px rgba(37,99,235,.4);
}
.nt-step-title {
  font-size: 19px; font-weight: 700; color: var(--nt-fg); margin: 0 0 10px;
  transition: color .2s;
}
.nt-step-card:hover .nt-step-title { color: var(--nt-primary); }
.nt-step-desc { font-size: 14px; line-height: 1.7; color: var(--nt-muted); margin: 0; }

/* "10 Seconds!" underline SVG wrapper (inside h2) */
.nt-underline-wrap { position: relative; display: inline-block; }
.nt-underline-wrap svg {
  position: absolute; bottom: -6px; left: 0; width: 100%; overflow: visible;
}

/* Features bar */
.nt-features-bar {
  margin-top: 56px;
  background: var(--nt-card);
  border-radius: var(--nt-radius-lg);
  border: 1px solid rgba(226,232,240,.5);
  padding: 20px 28px;
  box-shadow: var(--nt-shadow-soft);
}
.nt-features-bar-inner {
  display: flex; flex-wrap: wrap;
  justify-content: center; align-items: center; gap: 12px 32px;
}
.nt-feature-pill { display: flex; align-items: center; gap: 12px; }
.nt-feature-pill-icon {
  width: 42px; height: 42px; border-radius: 12px;
  background: rgba(37,99,235,.1);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.nt-feature-pill-icon svg { color: var(--nt-primary); stroke: var(--nt-primary); }
.nt-feature-pill-text { font-size: 14px; font-weight: 600; color: var(--nt-fg); }

/* How CTA */
.nt-how-cta { margin-top: 48px; text-align: center; }
.nt-how-cta-btns { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; }

/* ═══════════════════════════════════════════════════════════════════════
   4. FEATURES  (py-20 lg:py-32)
   ═══════════════════════════════════════════════════════════════════════ */
.nt-features { padding: 80px 0; background: var(--nt-bg); }
@media (min-width:1024px) { .nt-features { padding: 128px 0; } }
@media (max-width:640px)  { .nt-features { padding: 56px 0; } }

.nt-features-grid {
  display: grid; grid-template-columns: repeat(4,1fr); gap: 24px;
}
@media (max-width:1024px) { .nt-features-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width:480px)  { .nt-features-grid { grid-template-columns: 1fr; } }

.nt-feat-card {
  position: relative; background: var(--nt-card);
  border-radius: var(--nt-radius-lg); padding: 24px;
  border: 1px solid rgba(226,232,240,.5);
  box-shadow: var(--nt-shadow-soft);
  transition: transform .45s, box-shadow .45s; overflow: hidden;
}
.nt-feat-card:hover { transform: translateY(-8px); box-shadow: var(--nt-shadow-card); }
.nt-feat-card-bg { position: absolute; inset: 0; opacity: 0; transition: opacity .5s; }
.nt-feat-card:hover .nt-feat-card-bg { opacity: 1; }

.nt-feat-icon {
  width: 48px; height: 48px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
  transition: transform .3s;
  position: relative; z-index: 1;
}
.nt-feat-card:hover .nt-feat-icon { transform: scale(1.12); }
.nt-feat-title { font-size: 16px; font-weight: 700; color: var(--nt-fg); margin: 0 0 8px; position: relative; z-index: 1; }
.nt-feat-desc  { font-size: 13px; color: var(--nt-muted); line-height: 1.65; margin: 0; position: relative; z-index: 1; }

/* ═══════════════════════════════════════════════════════════════════════
   5. BUSINESS CATEGORIES  (py-20 md:py-28)
   ═══════════════════════════════════════════════════════════════════════ */
.nt-biz-cats {
  padding: 80px 0; background: var(--nt-bg);
  position: relative; overflow: hidden;
}
@media (min-width:768px)  { .nt-biz-cats { padding: 112px 0; } }
@media (max-width:640px)  { .nt-biz-cats { padding: 56px 0; } }

.nt-biz-cats-bg {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 600px; height: 600px; border-radius: 50%;
  background: rgba(37,99,235,.04); filter: blur(120px); pointer-events: none;
}

.nt-bento-grid {
  display: grid; grid-template-columns: repeat(4,1fr); gap: 16px;
}
@media (max-width:1024px) { .nt-bento-grid { grid-template-columns: repeat(3,1fr); } }
@media (max-width:640px)  { .nt-bento-grid { grid-template-columns: repeat(2,1fr); } }

.nt-bento-item {
  position: relative; border-radius: var(--nt-radius-lg);
  overflow: hidden; aspect-ratio: 4/3;
  display: block; text-decoration: none; cursor: pointer;
}
.nt-bento-item img {
  position: absolute; inset: 0; width:100%; height:100%;
  object-fit: cover; transition: transform .7s ease;
}
.nt-bento-item:hover img { transform: scale(1.1); }
.nt-bento-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top,rgba(15,23,42,.9) 0%,rgba(15,23,42,.3) 50%,transparent 100%);
  transition: background .4s;
}
.nt-bento-item:hover .nt-bento-overlay {
  background: linear-gradient(to top,rgba(37,99,235,.9) 0%,rgba(37,99,235,.4) 50%,transparent 100%);
}
/* Shine effect on hover */
.nt-bento-shine {
  position: absolute; inset: 0;
  background: linear-gradient(135deg,rgba(255,255,255,.12),transparent);
  opacity: 0; transition: opacity .5s; pointer-events: none;
}
.nt-bento-item:hover .nt-bento-shine { opacity: 1; }

.nt-bento-content {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: flex-end; padding: 16px;
}
.nt-bento-row { display: flex; align-items: flex-end; justify-content: space-between; width: 100%; }
.nt-bento-title { color: #fff; font-weight: 700; font-size: 14px; line-height: 1.3; margin: 0 0 4px; }
.nt-bento-sub {
  display: flex; align-items: center; gap: 4px;
  color: rgba(255,255,255,.8); font-size: 11px; font-weight: 500;
  opacity: 0; transform: translateY(4px); transition: opacity .3s, transform .3s;
}
.nt-bento-item:hover .nt-bento-sub { opacity: 1; transform: translateY(0); }
.nt-bento-arrow {
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(255,255,255,.22); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-bottom: 4px;
  opacity: 0; transform: translateX(6px); transition: opacity .3s, transform .3s;
}
.nt-bento-item:hover .nt-bento-arrow { opacity: 1; transform: translateX(0); }

.nt-biz-cats-cta { text-align: center; margin-top: 48px; }
.nt-cta-pill {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 36px;
  background: linear-gradient(135deg,var(--nt-primary),var(--nt-primary-glow));
  color: #fff; border-radius: var(--nt-radius-full);
  font-weight: 600; font-size: 15px; text-decoration: none;
  box-shadow: var(--nt-shadow-button);
  transition: transform .25s, box-shadow .25s;
}
.nt-cta-pill:hover { transform: translateY(-2px); box-shadow: var(--nt-shadow-glow); color: #fff; }
.nt-cta-pill svg { transition: transform .2s; }
.nt-cta-pill:hover svg { transform: translateX(4px); }

/* ═══════════════════════════════════════════════════════════════════════
   6. TARGET AUDIENCE  (py-20 lg:py-32)
   ═══════════════════════════════════════════════════════════════════════ */
.nt-audience {
  padding: 80px 0;
  background: linear-gradient(to bottom,rgba(241,245,249,.6),var(--nt-bg));
  position: relative; overflow: hidden;
}
@media (min-width:1024px) { .nt-audience { padding: 128px 0; } }
@media (max-width:640px)  { .nt-audience { padding: 56px 0; } }

.nt-audience-bg-1,.nt-audience-bg-2 {
  position: absolute; top: 50%;
  width: 384px; height: 384px;
  border-radius: 50%; filter: blur(60px);
}
.nt-audience-bg-1 { left: 0; transform: translateY(-50%); background: rgba(37,99,235,.04); }
.nt-audience-bg-2 { right: 0; transform: translateY(-50%); background: rgba(37,99,235,.03); }

.nt-audience-grid {
  display: grid; grid-template-columns: repeat(2,1fr); gap: 28px; position: relative;
}
@media (max-width:768px) { .nt-audience-grid { grid-template-columns: 1fr; } }

.nt-audience-card {
  background: var(--nt-card);
  border-radius: var(--nt-radius-2xl); padding: 32px;
  border: 1px solid rgba(226,232,240,.5);
  box-shadow: var(--nt-shadow-soft);
  display: flex; gap: 24px;
  transition: transform .4s, box-shadow .4s;
}
.nt-audience-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--nt-shadow-elevated);
}
.nt-audience-icon {
  width: 64px; height: 64px; flex-shrink: 0; border-radius: 20px;
  background: linear-gradient(135deg,var(--nt-primary),var(--nt-primary-glow));
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--nt-shadow-button);
  transition: transform .3s, box-shadow .3s;
}
.nt-audience-card:hover .nt-audience-icon {
  transform: scale(1.1); box-shadow: var(--nt-shadow-glow);
}
.nt-audience-body { flex: 1; }
.nt-audience-title {
  font-size: 22px; font-weight: 700; color: var(--nt-fg); margin: 0 0 8px;
  transition: color .2s;
}
.nt-audience-card:hover .nt-audience-title { color: var(--nt-primary); }
.nt-audience-desc { font-size: 14px; color: var(--nt-muted); line-height: 1.7; margin: 0 0 16px; }
.nt-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.nt-tag {
  padding: 4px 14px; background: var(--nt-muted-bg); color: var(--nt-muted);
  font-size: 12px; font-weight: 500;
  border-radius: var(--nt-radius-full); border: 1px solid var(--nt-border);
}

/* ═══════════════════════════════════════════════════════════════════════
   7. TESTIMONIALS  (py-20 lg:py-32, bg-muted/50)
   ═══════════════════════════════════════════════════════════════════════ */
.nt-testimonials {
  padding: 80px 0;
  background: rgba(241,245,249,.5);
  position: relative; overflow: hidden;
}
@media (min-width:1024px) { .nt-testimonials { padding: 128px 0; } }
@media (max-width:640px)  { .nt-testimonials { padding: 56px 0; } }

.nt-testimonials-bg-1,.nt-testimonials-bg-2 {
  position: absolute; width: 384px; height: 384px;
  border-radius: 50%; filter: blur(60px);
}
.nt-testimonials-bg-1 { top: 0; right: 0; background: rgba(37,99,235,.04); }
.nt-testimonials-bg-2 { bottom: 0; left: 0; background: rgba(37,99,235,.03); }

.nt-testimonials-grid {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; position: relative;
}
@media (max-width:1024px) { .nt-testimonials-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width:640px)  { .nt-testimonials-grid { grid-template-columns: 1fr; } }

.nt-testi-card {
  background: var(--nt-card); border-radius: var(--nt-radius-lg); padding: 24px;
  border: 1px solid rgba(226,232,240,.5);
  box-shadow: var(--nt-shadow-soft); position: relative;
  transition: transform .35s, box-shadow .35s;
}
.nt-testi-card:hover { transform: translateY(-8px); box-shadow: var(--nt-shadow-card); }
.nt-testi-quote {
  position: absolute; top: 12px; right: 16px;
  color: rgba(37,99,235,.12); transition: color .3s;
}
.nt-testi-card:hover .nt-testi-quote { color: rgba(37,99,235,.22); }
.nt-testi-stars { display: flex; gap: 3px; margin-bottom: 16px; }
.nt-testi-stars svg { fill: var(--nt-primary); color: var(--nt-primary); }
.nt-testi-text {
  font-size: 14px; color: var(--nt-muted); line-height: 1.7;
  margin: 0 0 20px; font-style: italic; min-height: 68px;
}
.nt-testi-author {
  display: flex; align-items: center; gap: 12px;
  padding-top: 16px; border-top: 1px solid var(--nt-border);
}
.nt-testi-avatar {
  width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%;
  background: linear-gradient(135deg,var(--nt-primary),var(--nt-primary-glow));
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 14px; overflow: hidden;
}
.nt-testi-avatar img { width:44px; height:44px; border-radius:50%; object-fit:cover; }
.nt-testi-name { font-size: 14px; font-weight: 600; color: var(--nt-fg); }
.nt-testi-role { font-size: 12px; color: var(--nt-muted); }

/* ═══════════════════════════════════════════════════════════════════════
   8. APP DOWNLOAD  (py-20 lg:py-32 on hero-gradient)
   ═══════════════════════════════════════════════════════════════════════ */
.nt-app-banner {
  padding: 80px 0;
  background: linear-gradient(135deg,#0f172a 0%,#1e3a8a 35%,#1d4ed8 65%,#2563eb 100%);
  position: relative; overflow: hidden;
}
@media (min-width:1024px) { .nt-app-banner { padding: 128px 0; } }
@media (max-width:640px)  { .nt-app-banner { padding: 56px 0; } }

.nt-app-banner-blob-1 {
  position: absolute; top: -80px; left: -80px;
  width: 300px; height: 300px; border-radius: 50%;
  background: rgba(255,255,255,.07); filter: blur(24px);
  animation: nt-pulse-soft 4s ease-in-out infinite;
}
.nt-app-banner-blob-2 {
  position: absolute; bottom: -60px; right: -60px;
  width: 260px; height: 260px; border-radius: 50%;
  background: rgba(255,255,255,.05); filter: blur(24px);
  animation: nt-pulse-soft 4s ease-in-out infinite 1s;
}
.nt-app-banner-pattern {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size: 40px 40px;
}

.nt-app-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center;
  position: relative; z-index: 1;
}
@media (max-width:768px) { .nt-app-grid { grid-template-columns: 1fr; text-align: center; gap: 48px; } }

.nt-app-label {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 18px;
  background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.2);
  border-radius: var(--nt-radius-full); color: rgba(255,255,255,.95);
  font-size: 13px; font-weight: 600; margin-bottom: 24px;
}
.nt-app-h2 {
  font-size: clamp(26px,3.5vw,46px); font-weight: 800; color: #fff;
  margin: 0 0 20px; line-height: 1.2;
}
.nt-app-desc {
  font-size: 17px; color: rgba(255,255,255,.82); margin: 0 0 28px; line-height: 1.75;
  max-width: 480px;
}
@media (max-width:768px) { .nt-app-desc { margin-left:auto; margin-right:auto; } }
.nt-app-pills { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 36px; }
@media (max-width:768px) { .nt-app-pills { justify-content: center; } }
.nt-app-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px; background: rgba(255,255,255,.12);
  backdrop-filter: blur(4px); border: 1px solid rgba(255,255,255,.2);
  border-radius: var(--nt-radius-full); color: rgba(255,255,255,.9);
  font-size: 12px; font-weight: 600;
}
.nt-app-ctas { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width:768px) { .nt-app-ctas { justify-content: center; } }

/* App phone */
.nt-app-phone-wrap { display: flex; justify-content: center; position: relative; }
.nt-app-phone-glow {
  position: absolute; inset: 0; background: rgba(255,255,255,.2);
  filter: blur(40px); border-radius: 50%; transform: scale(.75);
}
.nt-app-phone {
  position: relative; background: var(--nt-secondary);
  padding: 12px; border-radius: 48px;
  box-shadow: 0 40px 80px rgba(0,0,0,.32);
  border: 2px solid rgba(255,255,255,.12);
  animation: nt-float 4s ease-in-out infinite;
  width: min(270px,65vw);
}
.nt-app-phone-notch {
  position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
  width: 72px; height: 5px; background: rgba(255,255,255,.08);
  border-radius: 4px; z-index: 5;
}
.nt-app-phone-screen { border-radius: 36px; overflow: hidden; aspect-ratio: 9/20; background: #f8fafc; }
.nt-app-phone-screen img { width:100%; height:100%; object-fit:cover; object-position:top; display:block; }

.nt-download-badge {
  position: absolute; bottom: -26px; left: 50%; transform: translateX(-50%);
  background: var(--nt-card); border-radius: var(--nt-radius-lg);
  padding: 12px 24px; box-shadow: var(--nt-shadow-elevated);
  display: flex; align-items: center; gap: 12px; white-space: nowrap;
}
.nt-download-badge svg { color: var(--nt-primary); stroke: var(--nt-primary); }
.nt-download-num { font-size: 18px; font-weight: 800; color: var(--nt-fg); }
.nt-download-lbl { font-size: 12px; color: var(--nt-muted); }

/* ═══════════════════════════════════════════════════════════════════════
   9. FINAL CTA  (py-20 lg:py-32 on white + radial orange glow)
   ═══════════════════════════════════════════════════════════════════════ */
.nt-final-cta {
  padding: 80px 0; background: var(--nt-bg);
  position: relative; overflow: hidden; text-align: center;
}
@media (min-width:1024px) { .nt-final-cta { padding: 128px 0; } }
@media (max-width:640px)  { .nt-final-cta { padding: 56px 24px; } }

.nt-final-cta-bg {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center,rgba(37,99,235,.09) 0%,transparent 68%);
}
.nt-final-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 24px; background: rgba(37,99,235,.1);
  border: 1px solid rgba(37,99,235,.2); border-radius: var(--nt-radius-full);
  color: var(--nt-primary); font-weight: 600; font-size: 14px;
  margin-bottom: 28px;
  animation: nt-float 4s ease-in-out infinite; position: relative;
}
.nt-final-h2 {
  font-size: clamp(28px,4.5vw,56px); font-weight: 800; color: var(--nt-fg);
  margin: 0 0 20px; line-height: 1.15; position: relative;
}
.nt-final-desc {
  font-size: 18px; color: var(--nt-muted); max-width: 580px;
  margin: 0 auto 44px; line-height: 1.7; position: relative;
}
.nt-final-ctas {
  display: flex; flex-wrap: wrap; gap: 16px;
  justify-content: center; position: relative; margin-bottom: 44px;
}
.nt-trust-row {
  display: flex; flex-wrap: wrap; gap: 28px;
  justify-content: center; position: relative;
}
.nt-trust-item {
  display: flex; align-items: center; gap: 6px;
  font-size: 14px; color: var(--nt-muted);
}
.nt-trust-item svg { color: #22c55e; fill: #22c55e; flex-shrink: 0; }

/* ═══════════════════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════════════════ */
.nt-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 0 30px; height: 56px; min-width: 160px;
  border-radius: var(--nt-radius-sm); font-size: 15px; font-weight: 600;
  text-decoration: none; border: none; cursor: pointer;
  transition: transform .25s, box-shadow .25s, background .25s;
  line-height: 1.3; font-family: 'Poppins', sans-serif;
  white-space: nowrap;
}
.nt-btn:hover { transform: translateY(-2px); }

.nt-btn-white {
  background: #fff; color: var(--nt-primary);
  box-shadow: 0 4px 18px rgba(0,0,0,.14);
}
.nt-btn-white:hover { box-shadow: 0 8px 28px rgba(0,0,0,.2); color: var(--nt-primary); }

.nt-btn-ghost {
  background: rgba(255,255,255,.15); color: #fff;
  border: 2px solid rgba(255,255,255,.3);
  backdrop-filter: blur(4px);
}
.nt-btn-ghost:hover { background: rgba(255,255,255,.25); color: #fff; }

.nt-btn-primary {
  background: linear-gradient(135deg,var(--nt-primary),var(--nt-primary-glow));
  color: #fff; box-shadow: var(--nt-shadow-button);
}
.nt-btn-primary:hover { box-shadow: var(--nt-shadow-glow); color: #fff; }

.nt-btn-outline {
  background: transparent; color: var(--nt-primary);
  border: 2px solid var(--nt-primary); height: 56px;
}
.nt-btn-outline:hover { background: var(--nt-primary); color: #fff; }

/* ═══════════════════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════════════════ */
#footer {
  background: linear-gradient(180deg,#1a1a2e 0%,#0f0f1a 100%) !important;
  color: rgba(255,255,255,.7);
}
#footer a { color: rgba(255,255,255,.6); text-decoration: none; font-size: 14px; transition: color .2s, padding-left .2s; }
#footer a:hover { color: #3b82f6; padding-left: 4px; }
#footer h4 {
  color: #fff; font-size: 16px; font-weight: 700; margin-bottom: 24px;
  position: relative; padding-bottom: 12px;
}
#footer h4::after {
  content: ''; position: absolute; bottom: 0; left: 0;
  width: 32px; height: 3px;
  background: linear-gradient(135deg,#2563eb,#3b82f6); border-radius: 2px;
}
#footer li { margin-bottom: 10px; }
.ft-social {
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,.08);
  display: inline-flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.7); border: 1px solid rgba(255,255,255,.08);
  transition: background .25s, color .25s, transform .25s;
}
.ft-social:hover { background: var(--nt-primary); color: #fff; transform: translateY(-3px); }

/* ═══════════════════════════════════════════════════════════════════════
   UPCOMING FESTIVALS SECTION
   ═══════════════════════════════════════════════════════════════════════ */
.nt-upcoming {
  padding: 80px 0;
  background: linear-gradient(135deg,#0f172a 0%,#1e3a8a 50%,#1d4ed8 100%);
  position: relative;
  overflow: hidden;
}
@media (min-width:1024px) { .nt-upcoming { padding: 112px 0; } }
@media (max-width:640px)  { .nt-upcoming { padding: 56px 0; } }

.nt-upcoming::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size: 50px 50px;
  pointer-events: none;
}

.nt-upcoming .nt-eyebrow {
  background: rgba(255,255,255,.12);
  color: rgba(255,255,255,.95);
  border: 1px solid rgba(255,255,255,.2);
}
.nt-upcoming .nt-section-h2 { color: #fff; }
.nt-upcoming .nt-section-desc { color: rgba(255,255,255,.7); }

.nt-upcoming-scroll-wrapper {
  position: relative;
  overflow: hidden;
}
.nt-upcoming-scroll-fade-left {
  position: absolute; left: 0; top: 0; bottom: 0; width: 80px;
  background: linear-gradient(to right,#0f172a,transparent);
  z-index: 10; pointer-events: none;
}
.nt-upcoming-scroll-fade-right {
  position: absolute; right: 0; top: 0; bottom: 0; width: 80px;
  background: linear-gradient(to left,#1d4ed8,transparent);
  z-index: 10; pointer-events: none;
}

.nt-upcoming-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 14px;
}
@media (max-width:1200px) { .nt-upcoming-grid { grid-template-columns: repeat(5, 1fr); } }
@media (max-width:900px)  { .nt-upcoming-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width:640px)  { .nt-upcoming-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; } }
@media (max-width:400px)  { .nt-upcoming-grid { grid-template-columns: repeat(2, 1fr); } }

.nt-upcoming-card {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 3/4;
  display: block;
  text-decoration: none;
  border: 2px solid rgba(255,255,255,.08);
  transition: transform .3s, box-shadow .3s, border-color .3s;
}
.nt-upcoming-card:hover {
  transform: translateY(-6px) scale(1.03);
  box-shadow: 0 16px 40px rgba(0,0,0,.4);
  border-color: rgba(255,255,255,.25);
}
.nt-upcoming-card img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .5s ease;
}
.nt-upcoming-card:hover img { transform: scale(1.08); }

.nt-upcoming-overlay {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 28px 8px 10px;
  background: linear-gradient(to top, rgba(0,0,0,.85) 0%, transparent 100%);
}
.nt-upcoming-label {
  color: #fff;
  font-size: 11px; font-weight: 600;
  text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  display: block;
}

.nt-upcoming-date-badge {
  position: absolute;
  top: 8px; right: 8px;
  background: rgba(255,255,255,.9);
  color: #1e3a8a;
  font-size: 10px; font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  line-height: 1.4;
  text-align: center;
}

.nt-upcoming-view-all {
  text-align: center;
  margin-top: 44px;
}
.nt-upcoming-view-all .nt-view-all-link {
  color: rgba(255,255,255,.9);
}
.nt-upcoming-view-all .nt-view-all-link:hover { color: #fff; }

/* ═══════════════════════════════════════════════════════════════════════
   NUF — UPCOMING FESTIVALS SLIDER  (above Powerful Features)
   ═══════════════════════════════════════════════════════════════════════ */
.nuf-section {
  position: relative;
  padding: 80px 0 88px;
  background: linear-gradient(135deg, #0b1120 0%, #0f1f40 35%, #0e2254 65%, #0a172e 100%);
  overflow: hidden;
}
@media (min-width:1024px) { .nuf-section { padding: 100px 0 108px; } }
@media (max-width:640px)  { .nuf-section { padding: 60px 0 72px; } }

/* grid pattern overlay */
.nuf-bg-pattern {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none; z-index: 0;
}
.nuf-blob-left {
  position: absolute; left: -120px; top: 50%;
  transform: translateY(-50%);
  width: 420px; height: 420px; border-radius: 50%;
  background: rgba(37,99,235,.12); filter: blur(80px);
  pointer-events: none; z-index: 0;
}
.nuf-blob-right {
  position: absolute; right: -120px; top: 50%;
  transform: translateY(-50%);
  width: 380px; height: 380px; border-radius: 50%;
  background: rgba(99,102,241,.10); filter: blur(80px);
  pointer-events: none; z-index: 0;
}

/* Top badge */
.nuf-top-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 22px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  color: rgba(255,255,255,.85);
  font-size: 13px; font-weight: 600;
  backdrop-filter: blur(6px);
}

/* Gradient heading text */
.nuf-gradient-text {
  background: linear-gradient(135deg, #60a5fa, #818cf8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── NUF Manual Slider ── */
.nuf-slider-outer {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0 64px;
  max-width: 1440px;
  margin: 0 auto;
}

.nuf-scroll-wrap {
  overflow-x: auto;
  overflow-y: visible;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  flex: 1;
  padding: 24px 0 32px;
}
.nuf-scroll-wrap::-webkit-scrollbar { display: none; }

.nuf-scroll-track {
  display: flex;
  gap: 22px;
  padding: 10px 4px 16px;
  width: max-content;
}

.nuf-nav-btn {
  flex-shrink: 0;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: rgba(255,255,255,.15);
  border: 1.5px solid rgba(255,255,255,.3);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: background .2s, opacity .2s, transform .2s;
  z-index: 10;
}
.nuf-nav-btn:hover {
  background: rgba(255,255,255,.28);
  transform: scale(1.1);
}
.nuf-nav-prev { margin-right: 12px; }
.nuf-nav-next { margin-left: 12px; }

/* Card */
.nuf-card {
  display: block; text-decoration: none;
  flex-shrink: 0;
  width: 248px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 20px; overflow: visible;
  transition: transform .4s cubic-bezier(.34,1.4,.64,1), box-shadow .35s, border-color .3s;
  position: relative;
  overflow: hidden;
}

/* ── Mobile: full-width single-card slider with overlay nav buttons ── */
@media (max-width:640px) {
  .nuf-slider-outer {
    padding: 0;
    align-items: stretch;
  }
  .nuf-nav-btn {
    position: absolute;
    width: 38px; height: 38px;
    top: 50%; transform: translateY(-50%);
    margin: 0;
    background: rgba(11,17,32,.75);
    border-color: rgba(255,255,255,.2);
    box-shadow: 0 2px 12px rgba(0,0,0,.35);
    z-index: 20;
  }
  .nuf-nav-btn:hover { transform: translateY(-50%) scale(1.08); }
  .nuf-nav-prev { left: 10px; }
  .nuf-nav-next { right: 10px; }
  .nuf-scroll-wrap { padding: 20px 14px 28px; }
  .nuf-scroll-track { padding: 10px 44px 16px; gap: 16px; }
  .nuf-card { width: calc(80vw); max-width: 260px; min-width: 200px; }
  .nuf-card-name { font-size: 14px; }
  .nuf-section .nt-section-header { margin-bottom: 28px !important; }
}
.nuf-card:hover {
  transform: scale(1.07) translateY(-6px);
  box-shadow: 0 28px 60px rgba(0,0,0,.55), 0 0 0 1.5px rgba(96,165,250,.55), 0 0 40px rgba(37,99,235,.2);
  border-color: rgba(96,165,250,.65);
  z-index: 20;
}

/* Date badge — white bg, month on top small, day number large */
.nuf-date-badge {
  position: absolute; top: 12px; left: 12px; z-index: 4;
  background: #fff;
  border-radius: 11px;
  padding: 5px 10px; text-align: center; line-height: 1.1;
  box-shadow: 0 3px 10px rgba(0,0,0,.3);
  min-width: 46px;
}
.nuf-date-mon  { display: block; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .7px; color: #1d4ed8; }
.nuf-date-day  { display: block; font-size: 20px; font-weight: 900; color: #111827; line-height: 1.2; }

/* Today badge — top right white pill */
.nuf-today-badge {
  position: absolute; top: 12px; right: 12px; z-index: 4;
  background: #fff;
  color: #1d4ed8;
  border-radius: 999px;
  padding: 4px 11px;
  font-size: 11px; font-weight: 700; letter-spacing: .2px;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}

/* Image */
.nuf-img-wrap {
  width: 100%; aspect-ratio: 1/1; overflow: hidden;
  background: rgba(255,255,255,.04);
}
.nuf-img-wrap img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .55s ease;
}
.nuf-card:hover .nuf-img-wrap img { transform: scale(1.1); }

/* Card body */
.nuf-card-body {
  padding: 14px 14px 16px;
}
.nuf-card-name {
  font-size: 15px; font-weight: 700; color: #fff;
  margin: 0 0 10px; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.7em;
}
.nuf-card-footer {
  display: flex; align-items: center; justify-content: space-between;
}
.nuf-card-tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 500;
  color: rgba(255,255,255,.55);
}
.nuf-card-tag svg { opacity: .65; stroke: rgba(255,255,255,.55); }

/* Circle arrow button */
.nuf-card-arrow {
  flex-shrink: 0;
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.75);
  transition: background .25s, border-color .25s, color .25s, box-shadow .25s;
}
.nuf-card:hover .nuf-card-arrow {
  background: #2563eb;
  border-color: #2563eb;
  color: #fff;
  box-shadow: 0 4px 14px rgba(37,99,235,.55);
}

/* ═══════════════════════════════════════════════════════
   WHY CHOOSE SECTION
═══════════════════════════════════════════════════════ */
.wpw-section {
  position: relative;
  background: #f0f4ff;
  padding: 96px 0 108px;
  overflow: hidden;
}

/* subtle dot pattern */
.wpw-dots-tl,
.wpw-dots-br {
  position: absolute;
  width: 260px; height: 260px;
  background-image: radial-gradient(circle, rgba(99,102,241,.18) 1.5px, transparent 1.5px);
  background-size: 22px 22px;
  pointer-events: none; z-index: 0;
}
.wpw-dots-tl { top: -40px; left: -40px; }
.wpw-dots-br { bottom: -40px; right: -40px; }

.wpw-inner {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
@media (max-width: 900px) {
  .wpw-inner { grid-template-columns: 1fr; gap: 40px; }
  .wpw-visual-col { order: 2; }
  .wpw-features-col { order: 1; }
}

/* ── Left visual ── */
.wpw-visual-col { position: relative; }

.wpw-visual-card {
  background: #fff;
  border-radius: 28px;
  box-shadow: 0 24px 72px rgba(37,99,235,.12), 0 4px 16px rgba(0,0,0,.06);
  position: relative;
  height: 460px;
  overflow: hidden;
}

.wpw-panel {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 32px 24px;
  opacity: 0;
  transform: translateY(14px) scale(.96);
  transition: opacity .45s ease, transform .45s ease;
  pointer-events: none;
  z-index: 0;
}
.wpw-panel.active {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
  z-index: 1;
}
.wpw-panel svg {
  width: 100%; height: 100%;
  max-height: 396px;
  display: block;
}

.wpw-visual-label {
  display: flex; align-items: center; gap: 14px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  padding: 14px 20px;
  margin-top: 18px;
}
.wpw-label-num {
  width: 36px; height: 36px; border-radius: 10px;
  background: #2563eb; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 800;
  flex-shrink: 0;
  transition: background .4s;
}
.wpw-label-sub { font-size: 11px; color: #94a3b8; font-weight: 500; }
.wpw-label-main { font-size: 14px; color: #0f172a; font-weight: 700; }

/* ── Right features ── */
.wpw-features-col { position: relative; z-index: 1; }

.wpw-top-badge {
  display: inline-block;
  padding: 6px 18px;
  background: rgba(219,234,254,.8);
  border: 1px solid #bfdbfe;
  border-radius: 999px;
  font-size: 12px; font-weight: 600;
  color: #1d4ed8;
  margin-bottom: 16px;
  letter-spacing: .2px;
}

.wpw-heading {
  font-size: clamp(26px, 3.2vw, 38px);
  font-weight: 800;
  color: #0f172a;
  line-height: 1.2;
  margin: 0 0 28px;
}
.wpw-blue { color: #2563eb; }

.wpw-items { display: flex; flex-direction: column; gap: 4px; }

.wpw-item {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 16px 18px;
  border-radius: 16px;
  cursor: pointer;
  transition: background .3s, box-shadow .3s;
  border: 1px solid transparent;
}
.wpw-item:hover {
  background: rgba(219,234,254,.3);
}
.wpw-item.active {
  background: rgba(219,234,254,.5);
  border-color: rgba(147,197,253,.5);
  box-shadow: 0 2px 16px rgba(37,99,235,.08);
}

.wpw-item-icon {
  width: 44px; height: 44px; border-radius: 12px;
  background: rgba(99,102,241,.1);
  display: flex; align-items: center; justify-content: center;
  color: #4f46e5; flex-shrink: 0;
  transition: background .3s, color .3s;
}
.wpw-item.active .wpw-item-icon {
  background: #2563eb;
  color: #fff;
}

.wpw-item-text { flex: 1; }
.wpw-item-text h3 {
  font-size: 15px; font-weight: 700; color: #0f172a;
  margin: 0 0 5px; line-height: 1.3;
}
.wpw-item-text p {
  font-size: 13px; color: #64748b;
  margin: 0; line-height: 1.55;
  display: none;
}
.wpw-item.active .wpw-item-text p { display: block; }

.wpw-item-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: #2563eb;
  flex-shrink: 0; margin-top: 7px;
  opacity: 0; transform: scale(0);
  transition: opacity .3s, transform .3s;
}
.wpw-item.active .wpw-item-dot {
  opacity: 1; transform: scale(1);
}

/* ── Panel 1: Phone ── */
.wpw-phone-wrap { display:flex; align-items:center; justify-content:center; width:100%; height:100%; }
.wpw-phone {
  width: 178px;
  background: #1e293b;
  border-radius: 28px;
  padding: 10px 8px 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,.25), 0 0 0 1px rgba(255,255,255,.06);
  display: flex; flex-direction: column; gap: 0;
}
.wpw-phone-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 2px 8px 6px;
}
.wpw-phone-time { font-size: 10px; color: rgba(255,255,255,.8); font-weight: 600; font-family: sans-serif; }
.wpw-phone-notch {
  width: 40px; height: 12px; border-radius: 6px;
  background: #0f172a;
}
.wpw-phone-screen {
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  flex: 1;
}
.wpw-phone-header {
  background: #2563eb;
  color: #fff;
  font-size: 10px; font-weight: 700;
  padding: 7px 12px;
  display: flex; align-items: center; gap: 5px;
  font-family: sans-serif;
}
.wpw-phone-hero-num {
  font-size: 26px; font-weight: 900;
  color: #2563eb; text-align: center;
  padding: 14px 0 2px;
  font-family: sans-serif;
  line-height: 1;
}
.wpw-phone-hero-sub {
  font-size: 10px; color: #64748b; text-align: center;
  padding-bottom: 10px;
  font-family: sans-serif;
}
.wpw-phone-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  padding: 0 8px 8px;
}
.wpw-phone-grid > div { aspect-ratio: 1/1; }
.wpw-phone-bar {
  width: 40px; height: 3px; border-radius: 2px;
  background: rgba(255,255,255,.3);
  margin: 8px auto 0;
}

/* ── Panel 2: Business Categories ── */
.wpw-cat-wrap { width:100%; }
.wpw-cat-title {
  font-size: 14px; font-weight: 700; color: #0f172a;
  text-align: center; margin-bottom: 16px;
  font-family: sans-serif;
}
.wpw-cat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.wpw-cat-tile {
  background: var(--bg);
  border-radius: 12px;
  padding: 12px 6px 8px;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  color: var(--ic);
}
.wpw-cat-tile span { font-size: 10px; font-weight: 600; color: #475569; font-family: sans-serif; text-align: center; }
.wpw-cat-more {
  margin-top: 12px;
  text-align: center;
  background: #2563eb;
  color: #fff;
  border-radius: 20px;
  padding: 7px 16px;
  font-size: 12px; font-weight: 600;
  font-family: sans-serif;
}

/* ── Panel 3: Languages ── */
.wpw-lang-wrap { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.wpw-lang-globe { position: relative; display: flex; align-items: center; justify-content: center; }
.wpw-lang-ring {
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.wpw-lang-ring-3 { width: 130px; height: 130px; background: #eff6ff; position: absolute; }
.wpw-lang-ring-2 { width: 100px; height: 100px; background: #dbeafe; position: absolute; }
.wpw-lang-ring-1 { width: 70px; height: 70px; background: #2563eb; position: relative; z-index: 1; }
.wpw-lang-tags {
  display: flex; flex-wrap: wrap; gap: 7px; justify-content: center;
}
.wpw-lang-tag {
  background: #fff;
  border: 1.5px solid #bfdbfe;
  border-radius: 20px;
  padding: 5px 13px;
  font-size: 12px; font-weight: 600;
  color: #1e40af;
  font-family: sans-serif;
}

/* ── Panel 4: Lightning Fast ── */
.wpw-speed-wrap { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.wpw-speed-circle { position: relative; display: flex; align-items: center; justify-content: center; }
.wpw-speed-ring { border-radius: 50%; position: absolute; }
.wpw-speed-ring-outer { width: 160px; height: 160px; background: #fffbeb; border: 2px solid #fde68a; }
.wpw-speed-ring-mid  { width: 120px; height: 120px; background: #fef3c7; border: 2px solid #fcd34d; }
.wpw-speed-center {
  position: relative; z-index: 1;
  width: 82px; height: 82px; border-radius: 50%;
  background: #fff;
  border: 2px solid #fde68a;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px;
}
.wpw-speed-num { font-size: 22px; font-weight: 900; color: #d97706; font-family: sans-serif; line-height: 1; }
.wpw-speed-unit { font-size: 9px; color: #92400e; font-family: sans-serif; }
.wpw-speed-steps { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 220px; }
.wpw-speed-step { display: flex; align-items: center; gap: 10px; }
.wpw-speed-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.wpw-speed-step span { font-size: 13px; color: #374151; font-family: sans-serif; }

/* ── Panel 5: India ── */
.wpw-india-wrap { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.wpw-india-flag {
  width: 200px; height: 120px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  display: flex; flex-direction: column;
}
.wpw-india-stripe { flex: 1; }
.wpw-india-wheel {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 2px solid #000080;
  position: relative;
}
.wpw-india-wheel::before {
  content: '';
  position: absolute; inset: 3px;
  border-radius: 50%;
  background: radial-gradient(circle, #000080 2px, transparent 2px),
              conic-gradient(from 0deg, #000080 0deg 3deg, transparent 3deg 30deg,
              #000080 30deg 33deg, transparent 33deg 60deg,
              #000080 60deg 63deg, transparent 63deg 90deg,
              #000080 90deg 93deg, transparent 93deg 120deg,
              #000080 120deg 123deg, transparent 123deg 150deg,
              #000080 150deg 153deg, transparent 153deg 180deg,
              #000080 180deg 183deg, transparent 183deg 210deg,
              #000080 210deg 213deg, transparent 213deg 240deg,
              #000080 240deg 243deg, transparent 243deg 270deg,
              #000080 270deg 273deg, transparent 273deg 300deg,
              #000080 300deg 303deg, transparent 303deg 330deg,
              #000080 330deg 333deg, transparent 333deg 360deg);
}
.wpw-india-tags {
  display: flex; flex-wrap: wrap; gap: 7px; justify-content: center;
}
.wpw-india-tag {
  padding: 5px 12px;
  border-radius: 20px;
  border: 1px solid;
  font-size: 11px; font-weight: 600;
  font-family: sans-serif;
}

/* ── Panel 6: Pricing ── */
.wpw-price-wrap { width: 100%; }
.wpw-price-cards {
  display: flex; gap: 12px; align-items: flex-start;
}
.wpw-price-card {
  flex: 1; border-radius: 16px;
  padding: 18px 14px;
}
.wpw-price-free {
  background: #f1f5f9;
  border: 1.5px solid #e2e8f0;
}
.wpw-price-pro {
  background: #2563eb;
  box-shadow: 0 12px 32px rgba(37,99,235,.35);
  position: relative;
}
.wpw-price-plan { font-size: 11px; font-weight: 700; color: #64748b; font-family: sans-serif; margin-bottom: 6px; }
.wpw-price-badge-pro {
  display: inline-block;
  background: rgba(255,255,255,.2);
  color: #fff;
  font-size: 11px; font-weight: 700;
  padding: 3px 12px; border-radius: 20px;
  margin-bottom: 6px;
  font-family: sans-serif;
}
.wpw-price-amount { font-size: 30px; font-weight: 900; color: #334155; font-family: sans-serif; line-height: 1.1; }
.wpw-price-period { font-size: 11px; color: #94a3b8; font-family: sans-serif; margin-bottom: 2px; }
.wpw-price-feature { font-size: 11px; color: #475569; font-family: sans-serif; padding: 3px 0; }
.wpw-pf-yes::before { content: '✓ '; color: #16a34a; font-weight: 700; }
.wpw-pf-no::before  { content: '✗ '; color: #94a3b8; }
.wpw-price-best {
  margin-top: 10px;
  background: #fbbf24;
  color: #92400e;
  font-size: 10px; font-weight: 700;
  padding: 4px 10px; border-radius: 10px;
  display: inline-block;
  font-family: sans-serif;
}

/* CTA button */
.nuf-cta-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 36px;
  background: linear-gradient(135deg, #2563eb, #4f46e5);
  color: #fff; border-radius: 999px;
  font-size: 15px; font-weight: 600;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(37,99,235,.45);
  transition: transform .25s, box-shadow .25s;
}
.nuf-cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(37,99,235,.6);
  color: #fff;
}
.nuf-cta-btn svg { transition: transform .2s; }
.nuf-cta-btn:hover svg { transform: translateX(4px); }
@media (max-width:640px) {
  .nuf-cta-btn { padding: 13px 28px; font-size: 14px; }
}