/* =============================================
   Niagara Parks — Ticket Landing Page CSS
   Brand: Teal #1BA7B4 / Navy #363E5B
   ============================================= */

/* ── Reset & Base ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --np-teal:#1BA7B4;
  --np-teal-dark:#148E99;
  --np-teal-light:#5ED4DD;
  --np-navy:#363E5B;
  --np-navy-dark:#252B42;
  --np-gold:#F4C542;
  --np-white:#ffffff;
  --np-gray-50:#f8fafc;
  --np-gray-100:#f1f5f9;
  --np-gray-200:#e2e8f0;
  --np-gray-300:#cbd5e1;
  --np-gray-400:#94a3b8;
  --np-gray-500:#64748b;
  --np-gray-600:#475569;
  --np-gray-700:#334155;
  --np-gray-800:#1e293b;
  --np-gray-900:#0f172a;
  --np-radius:12px;
  --np-radius-lg:20px;
  --np-radius-xl:28px;
  --np-shadow:0 4px 24px rgba(0,0,0,.08);
  --np-shadow-lg:0 12px 40px rgba(0,0,0,.12);
  --np-transition:all .3s cubic-bezier(.4,0,.2,1);
  --np-font:'Inter',system-ui,-apple-system,sans-serif;
}
html{scroll-behavior:smooth}
body{font-family:var(--np-font);color:var(--np-gray-800);background:var(--np-white);line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{text-decoration:none;color:inherit}
button{cursor:pointer;border:none;background:none;font-family:inherit}

/* ── Container ── */
.np-container{max-width:1200px;margin:0 auto;padding:0 24px}

/* ── Buttons ── */
.np-btn{display:inline-flex;align-items:center;gap:8px;font-weight:700;border-radius:var(--np-radius);transition:var(--np-transition);position:relative;overflow:hidden}
.np-btn::after{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .5s}
.np-btn:hover::after{left:100%}
.np-btn--primary{background:linear-gradient(135deg,var(--np-teal),var(--np-teal-dark));color:var(--np-white);padding:14px 28px;font-size:1rem;box-shadow:0 4px 16px rgba(27,167,180,.3)}
.np-btn--primary:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(27,167,180,.4)}
.np-btn--secondary{background:var(--np-white);color:var(--np-teal);border:2px solid var(--np-teal);padding:12px 26px;font-size:1rem}
.np-btn--secondary:hover{background:var(--np-teal);color:var(--np-white)}
.np-btn--sm{padding:10px 20px;font-size:.875rem}
.np-btn--lg{padding:18px 36px;font-size:1.1rem}

/* ── Promo Banner ── */
.np-promo-banner{background:linear-gradient(90deg,var(--np-navy-dark),var(--np-navy));color:var(--np-white);display:flex;align-items:center;justify-content:center;gap:12px;padding:10px 16px;font-size:.875rem;font-weight:600;position:relative;z-index:100}
.np-promo-banner__icon{font-size:1.1rem}
.np-promo-banner__discount{background:var(--np-gold);color:var(--np-navy-dark);padding:2px 10px;border-radius:20px;font-weight:800;font-size:.8rem;animation:pulse 2s infinite}
.np-promo-banner__timer{display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.1);padding:4px 12px;border-radius:20px;font-size:.8rem}

/* ── Header ── */
.np-header{background:var(--np-navy-dark);position:sticky;top:0;z-index:99;box-shadow:0 2px 20px rgba(0,0,0,.15);backdrop-filter:blur(10px)}
.np-header__inner{display:flex;align-items:center;justify-content:space-between;padding:12px 24px}
.np-header__logo img{height:44px;width:auto;filter:brightness(0) invert(1)}
.np-header__nav{display:flex;gap:32px}
.np-header__link{color:rgba(255,255,255,.8);font-weight:500;font-size:.95rem;transition:var(--np-transition);position:relative}
.np-header__link::after{content:'';position:absolute;bottom:-6px;left:0;width:0;height:2px;background:var(--np-teal-light);transition:width .3s}
.np-header__link:hover,.np-header__link--active{color:var(--np-white)}
.np-header__link:hover::after,.np-header__link--active::after{width:100%}
.np-header__actions{display:flex;align-items:center}
.np-header__menu{display:none;flex-direction:column;gap:5px;padding:8px}
.np-header__menu span{width:22px;height:2px;background:var(--np-white);border-radius:2px;transition:var(--np-transition)}

/* ── Hero ── */
.np-hero{position:relative;min-height:85vh;display:flex;align-items:center;overflow:hidden}
.np-hero__bg{position:absolute;inset:0}
.np-hero__bg img{width:100%;height:100%;object-fit:cover}
.np-hero__overlay{position:absolute;inset:0;background:linear-gradient(135deg,rgba(15,23,42,.75) 0%,rgba(27,167,180,.25) 100%)}
.np-hero__content{position:relative;z-index:2;color:var(--np-white);max-width:720px;padding:80px 0}
.np-hero__badge{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.12);backdrop-filter:blur(10px);padding:8px 16px;border-radius:30px;font-size:.85rem;font-weight:600;margin-bottom:20px;border:1px solid rgba(255,255,255,.15);animation:fadeInDown .6s}
.np-hero__title{font-family:'Playfair Display',serif;font-size:clamp(2.2rem,5vw,3.6rem);line-height:1.15;margin-bottom:20px;animation:fadeInUp .6s}
.np-hero__title span{display:block;background:linear-gradient(90deg,var(--np-teal-light),var(--np-gold));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.np-hero__subtitle{font-size:1.15rem;line-height:1.7;opacity:.92;margin-bottom:32px;animation:fadeInUp .6s .15s both}
.np-hero__cta-group{margin-bottom:28px;animation:fadeInUp .6s .25s both}
.np-hero__features{display:flex;flex-wrap:wrap;gap:16px;animation:fadeInUp .6s .35s both}
.np-hero__feature{display:flex;align-items:center;gap:6px;font-size:.9rem;font-weight:500;opacity:.9}
.np-hero__feature-icon{color:var(--np-teal-light);font-weight:800}

/* ── Sections ── */
.np-section{padding:80px 0}
.np-section--alt{background:var(--np-gray-50)}
.np-section__header{text-align:center;max-width:640px;margin:0 auto 56px}
.np-section__label{display:inline-block;color:var(--np-teal);font-weight:700;font-size:.85rem;text-transform:uppercase;letter-spacing:2px;margin-bottom:12px}
.np-section__title{font-family:'Playfair Display',serif;font-size:clamp(1.8rem,4vw,2.6rem);color:var(--np-navy-dark);margin-bottom:16px}
.np-section__subtitle{color:var(--np-gray-500);font-size:1.05rem;line-height:1.7}

/* ── Ticket Cards ── */
.np-tickets{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.np-ticket{background:var(--np-white);border-radius:var(--np-radius-lg);overflow:hidden;box-shadow:var(--np-shadow);transition:var(--np-transition);position:relative;border:1px solid var(--np-gray-200)}
.np-ticket:hover{transform:translateY(-8px);box-shadow:var(--np-shadow-lg)}
.np-ticket__badge{position:absolute;top:16px;left:16px;background:var(--np-teal);color:var(--np-white);padding:4px 14px;border-radius:20px;font-size:.75rem;font-weight:700;z-index:3;text-transform:uppercase;letter-spacing:.5px}
.np-ticket__badge--hot{background:linear-gradient(135deg,#f59e0b,#ef4444)}
.np-ticket__badge--vip{background:linear-gradient(135deg,#8b5cf6,#6d28d9)}
.np-ticket__discount{position:absolute;top:16px;right:16px;background:var(--np-gold);color:var(--np-navy-dark);width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.8rem;z-index:3;box-shadow:0 4px 12px rgba(244,197,66,.4)}
.np-ticket__image{height:200px;overflow:hidden;position:relative}
.np-ticket__image img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.np-ticket:hover .np-ticket__image img{transform:scale(1.08)}
.np-ticket__body{padding:24px}
.np-ticket__icon{font-size:1.6rem;margin-bottom:8px}
.np-ticket__title{font-size:1.2rem;font-weight:700;color:var(--np-navy-dark);margin-bottom:8px}
.np-ticket__desc{font-size:.9rem;color:var(--np-gray-500);margin-bottom:16px;line-height:1.5}
.np-ticket__features{list-style:none;margin-bottom:20px}
.np-ticket__feature{padding:4px 0;font-size:.85rem;color:var(--np-gray-600);display:flex;align-items:flex-start;gap:8px}
.np-ticket__feature::before{content:'✓';color:var(--np-teal);font-weight:700;flex-shrink:0}
.np-ticket__pricing{margin-bottom:20px;padding:12px;background:var(--np-gray-50);border-radius:var(--np-radius)}
.np-ticket__price-row{display:flex;align-items:center;justify-content:space-between;padding:4px 0}
.np-ticket__price-row--child{border-top:1px solid var(--np-gray-200);margin-top:6px;padding-top:8px}
.np-ticket__price-label{font-size:.85rem;font-weight:600;color:var(--np-gray-600)}
.np-ticket__price-value{display:flex;align-items:center;gap:8px}
.np-ticket__price-original{text-decoration:line-through;color:var(--np-gray-400);font-size:.85rem}
.np-ticket__price-current{font-size:1.2rem;font-weight:800;color:var(--np-teal)}
.np-ticket__cta{width:100%;padding:14px;background:linear-gradient(135deg,var(--np-teal),var(--np-teal-dark));color:var(--np-white);font-weight:700;font-size:.95rem;border-radius:var(--np-radius);transition:var(--np-transition);position:relative;overflow:hidden}
.np-ticket__cta::after{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .5s}
.np-ticket__cta:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(27,167,180,.35)}
.np-ticket__cta:hover::after{left:100%}

/* ── Experiences ── */
.np-experiences{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.np-experience{background:var(--np-white);padding:32px 24px;border-radius:var(--np-radius-lg);text-align:center;box-shadow:var(--np-shadow);transition:var(--np-transition);border:1px solid var(--np-gray-100)}
.np-experience:hover{transform:translateY(-6px);box-shadow:var(--np-shadow-lg);border-color:var(--np-teal)}
.np-experience__icon{font-size:2.4rem;margin-bottom:16px}
.np-experience__title{font-size:1.05rem;font-weight:700;color:var(--np-navy-dark);margin-bottom:10px}
.np-experience__desc{font-size:.9rem;color:var(--np-gray-500);line-height:1.6}

/* ── Benefits ── */
.np-benefits{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.np-benefit{text-align:center;padding:32px 20px;background:var(--np-white);border-radius:var(--np-radius-lg);box-shadow:var(--np-shadow);transition:var(--np-transition)}
.np-benefit:hover{transform:translateY(-4px);box-shadow:var(--np-shadow-lg)}
.np-benefit__icon{font-size:2.2rem;margin-bottom:14px}
.np-benefit__title{font-size:1rem;font-weight:700;color:var(--np-navy-dark);margin-bottom:8px}
.np-benefit__desc{font-size:.88rem;color:var(--np-gray-500);line-height:1.6}

/* ── Steps ── */
.np-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.np-step{text-align:center;padding:32px 20px;position:relative}
.np-step__number{width:56px;height:56px;background:linear-gradient(135deg,var(--np-teal),var(--np-teal-dark));color:var(--np-white);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.4rem;font-weight:800;margin:0 auto 16px;box-shadow:0 4px 16px rgba(27,167,180,.3)}
.np-step__title{font-size:1.05rem;font-weight:700;color:var(--np-navy-dark);margin-bottom:8px}
.np-step__desc{font-size:.88rem;color:var(--np-gray-500);line-height:1.6}
.np-step__arrow{position:absolute;right:-12px;top:48px;font-size:1.5rem;color:var(--np-gray-300);font-weight:700}

/* ── CTA ── */
.np-cta{background:linear-gradient(135deg,var(--np-navy-dark) 0%,var(--np-navy) 50%,var(--np-teal-dark) 100%);color:var(--np-white);text-align:center;padding:80px 0;position:relative;overflow:hidden}
.np-cta::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(27,167,180,.1) 0%,transparent 60%);animation:rotate 20s linear infinite}
.np-cta__title{font-family:'Playfair Display',serif;font-size:clamp(1.8rem,4vw,2.6rem);margin-bottom:16px}
.np-cta__subtitle{font-size:1.1rem;opacity:.85;margin-bottom:28px}
.np-cta__timer{display:inline-flex;align-items:center;gap:10px;background:rgba(255,255,255,.1);padding:10px 24px;border-radius:30px;margin-bottom:28px;font-weight:600;font-size:.95rem;border:1px solid rgba(255,255,255,.15)}
.np-cta__timer-value{font-size:1.1rem;font-weight:800;color:var(--np-gold)}
.np-cta__buttons{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}

/* ── Footer ── */
.np-footer{background:var(--np-gray-900);color:var(--np-gray-400);padding:64px 0 32px}
.np-footer__grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;margin-bottom:40px}
.np-footer__logo{height:40px;width:auto;margin-bottom:16px;filter:brightness(0) invert(1);opacity:.9}
.np-footer__desc{font-size:.88rem;line-height:1.7;max-width:300px}
.np-footer__title{color:var(--np-white);font-size:.9rem;font-weight:700;margin-bottom:16px;text-transform:uppercase;letter-spacing:1px}
.np-footer__links{list-style:none}
.np-footer__link{font-size:.88rem;padding:4px 0;display:block;transition:color .3s}
a.np-footer__link:hover{color:var(--np-teal-light)}
.np-footer__bottom{border-top:1px solid var(--np-gray-800);padding-top:24px;display:flex;justify-content:space-between;align-items:center}
.np-footer__copy{font-size:.82rem}
.np-footer__payments{display:flex;align-items:center;gap:10px;font-size:.82rem;color:var(--np-gray-500)}

/* ── Animations ── */
@keyframes fadeInUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeInDown{from{opacity:0;transform:translateY(-16px)}to{opacity:1;transform:translateY(0)}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
@keyframes rotate{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}

/* ── Mobile Nav ── */
@media(max-width:1024px){
  .np-header__nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--np-navy-dark);flex-direction:column;padding:20px;gap:16px;box-shadow:0 8px 24px rgba(0,0,0,.2)}
  .np-header__nav--open{display:flex}
  .np-header__actions{display:none}
  .np-header__menu{display:flex}
}
@media(max-width:1024px){
  .np-tickets{grid-template-columns:1fr}
  .np-experiences,.np-benefits,.np-steps{grid-template-columns:repeat(2,1fr)}
  .np-step__arrow{display:none}
  .np-footer__grid{grid-template-columns:1fr 1fr}
}
@media(max-width:768px){
  .np-hero{min-height:75vh}
  .np-hero__content{padding:50px 0}
  .np-section{padding:56px 0}
  .np-promo-banner{font-size:.78rem;gap:8px;flex-wrap:wrap;justify-content:center}
  .np-hero__title{font-size:2rem}
}
@media(max-width:480px){
  .np-hero{min-height:auto;padding:0}
  .np-hero__content{padding:40px 0}
  .np-hero__title{font-size:1.7rem}
  .np-hero__subtitle{font-size:1rem}
  .np-hero__features{gap:10px}
  .np-hero__feature{font-size:.8rem}
  .np-experiences,.np-benefits,.np-steps{grid-template-columns:1fr}
  .np-footer__grid{grid-template-columns:1fr}
  .np-footer__bottom{flex-direction:column;gap:16px;text-align:center}
  .np-btn--lg{padding:14px 24px;font-size:1rem;width:100%;justify-content:center}
}
