/* =========================================================
   UniMate — offer.css
   Used by BOTH business.html and students.html.
   (Colours differ per page through the body theme class.)

   1. Page hero
   2. Bold lines band
   3. Pricing cards
   4. Project slider
   5. Final call-to-action
   ========================================================= */


/* ---------- 1. PAGE HERO ---------- */
.offer-hero {
  position: relative;
  padding: calc(var(--nav-h) + 56px) 0 clamp(48px, 7vw, 90px);
  overflow: hidden;
}

/* Floating blurred colour balls */
.orb {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.45;
  animation: floaty 9s ease-in-out infinite;
}

.orb--1 {
  top: -80px;
  right: -60px;
  width: 380px;
  height: 380px;
  background: var(--a1);
}

.orb--2 {
  bottom: -120px;
  left: -100px;
  width: 320px;
  height: 320px;
  background: var(--a2);
  animation-delay: -4s;
}

@keyframes floaty {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(-30px, 30px); }
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 34px;
  color: var(--muted);
  font-size: 0.95rem;
  font-weight: 500;
  transition: color 0.2s ease;
}

.back-link:hover {
  color: var(--text);
}

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
  padding: 9px 18px;
  border: 1px solid color-mix(in srgb, var(--a1) 55%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--a1) 14%, transparent);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.offer-hero__title {
  font-size: clamp(2.8rem, 9.5vw, 7.2rem);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.04em;
}

.offer-hero__title span {
  display: block;
}

.offer-hero__lead {
  max-width: 600px;
  margin-top: 28px;
  color: var(--muted);
  font-size: clamp(1.05rem, 2vw, 1.25rem);
}

.offer-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
}


/* ---------- 2. BOLD LINES BAND ---------- */
.bold-lines {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-block: 1px solid var(--line);
}

.bold-line {
  padding: clamp(28px, 4vw, 48px) clamp(20px, 3vw, 36px);
  border-right: 1px solid var(--line);
}

.bold-line:last-child {
  border-right: 0;
}

.bold-line strong {
  display: block;
  margin-bottom: 10px;
  font-family: var(--font-head);
  font-size: clamp(1.4rem, 2.8vw, 2.1rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.bold-line span {
  color: var(--muted);
}

@media (max-width: 800px) {
  .bold-lines {
    grid-template-columns: 1fr;
  }

  .bold-line {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .bold-line:last-child {
    border-bottom: 0;
  }
}


/* ---------- 3. PRICING CARDS ---------- */
.pricing {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  align-items: stretch;
}

/* Students page has only 2 plans */
.pricing--2 {
  grid-template-columns: repeat(2, 1fr);
  max-width: 880px;
  margin-inline: auto;
}

.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 34px 30px 30px;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: var(--surface);
  overflow: hidden;
  isolation: isolate;
}

/* Glow that follows the mouse */
.plan::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--a1) 24%, transparent), transparent 60%);
  transition: opacity 0.3s ease;
}

.plan:hover::before {
  opacity: 1;
}

/* The highlighted ("most popular") plan */
.plan--featured {
  border: 1px solid transparent;
  background:
    linear-gradient(var(--surface-2), var(--surface-2)) padding-box,
    var(--grad) border-box;
  box-shadow: 0 30px 70px -30px color-mix(in srgb, var(--a1) 70%, transparent);
}

.plan__badge {
  position: absolute;
  top: 18px;
  right: 18px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--grad);
  color: #06080f;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.plan__name {
  font-size: 1.6rem;
  font-weight: 800;
}

.plan__for {
  margin-top: 4px;
  color: var(--muted);
}

.plan__price {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 26px;
}

.plan__from {
  color: var(--muted);
  font-size: 0.95rem;
}

.plan__amount {
  font-family: var(--font-head);
  font-size: clamp(2.6rem, 4.5vw, 3.4rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
}

.plan__note {
  margin-top: 6px;
  color: var(--muted);
  font-size: 0.9rem;
}

.plan__list {
  display: grid;
  gap: 12px;
  margin: 26px 0;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}

.plan__list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.96rem;
}

.plan__list .icon {
  margin-top: 3px;
  color: var(--a2);
}

/* Delivery time + revisions */
.plan__meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: auto 0 22px;
}

.plan__meta div {
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
}

.plan__meta dt {
  color: var(--muted);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.plan__meta dd {
  margin: 2px 0 0;
  font-weight: 600;
}

.pricing-note {
  margin-top: 26px;
  color: var(--muted);
  text-align: center;
  font-size: 0.95rem;
}

@media (max-width: 1000px) {
  .pricing {
    grid-template-columns: 1fr;
    max-width: 520px;
    margin-inline: auto;
  }

  .pricing--2 {
    max-width: 520px;
  }
}


/* ---------- 4. PROJECT SLIDER ---------- */
.slider {
  position: relative;
  outline-offset: 8px;
}

.slider__hint {
  margin-top: 14px;
  color: var(--muted);
  font-size: 0.9rem;
}

.slider__viewport {
  padding: 20px 0 28px;
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

.slider__viewport.is-dragging {
  cursor: grabbing;
}

.slider__track {
  position: relative;          /* needed so slide.offsetLeft is measured from here */
  display: flex;
  gap: 28px;
  transition: transform 0.7s cubic-bezier(0.22, 0.8, 0.22, 1);
  will-change: transform;
}

/* One project slide */
.slide {
  flex: 0 0 min(960px, 88vw);
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: var(--surface);
  overflow: hidden;
  opacity: 0.35;
  transform: scale(0.93);
  transition: opacity 0.5s ease, transform 0.5s ease, border-color 0.5s ease;
}

.slide.is-active {
  opacity: 1;
  transform: none;
  border-color: rgba(255, 255, 255, 0.16);
}

.slide__media {
  position: relative;
  min-height: 360px;
  background: var(--surface-2);
}

.slide__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.slide__tag {
  position: absolute;
  top: 18px;
  left: 18px;
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(7, 10, 18, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: 0.82rem;
  font-weight: 600;
}

.slide__body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(22px, 3vw, 38px);
}

.slide__num {
  color: var(--a2);
  font-family: var(--font-head);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.slide__body h3 {
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  font-weight: 800;
}

.slide__body > p {
  color: var(--muted);
}

.slide__features {
  display: grid;
  gap: 8px;
}

.slide__features li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.95rem;
}

.slide__features .icon {
  margin-top: 3px;
  color: var(--a2);
}

.slide__tech {
  margin-top: auto;
}

.slide__result {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.slide__result strong {
  font-family: var(--font-head);
  font-size: 1.5rem;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.slide__result span {
  color: var(--muted);
  font-size: 0.92rem;
}

/* Arrows, dots, counter */
.slider__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 8px;
}

.slider__btn {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, transform 0.2s ease;
}

.slider__btn:hover {
  background: var(--grad);
  color: #06080f;
  transform: scale(1.06);
}

.slider__btn--small {
  width: 40px;
  height: 40px;
}

.slider__dots {
  display: flex;
  align-items: center;
  gap: 8px;
}

.slider__dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  cursor: pointer;
  transition: width 0.3s ease, background 0.3s ease;
}

.slider__dot.is-active {
  width: 32px;
  background: var(--grad);
}

.slider__count {
  min-width: 72px;
  font-family: var(--font-head);
  font-weight: 700;
  text-align: center;
}

/* Autoplay progress line */
.slider__progress {
  max-width: 420px;
  height: 3px;
  margin: 24px auto 0;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.slider__progress span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--grad);
}

.slider.is-playing .slider__progress span {
  animation: sliderProgress var(--autoplay, 6500ms) linear forwards;
}

.slider.is-paused .slider__progress span {
  animation-play-state: paused;
}

@keyframes sliderProgress {
  from { width: 0; }
  to   { width: 100%; }
}

@media (max-width: 860px) {
  .slide {
    grid-template-columns: 1fr;
  }

  .slide__media {
    min-height: 0;
    aspect-ratio: 16 / 10;
  }

  .slider__track {
    gap: 16px;
  }
}

@media (max-width: 480px) {
  .slider__controls {
    gap: 10px;
  }

  .slider__btn {
    width: 46px;
    height: 46px;
  }

  .slider__dots {
    order: 5;
    width: 100%;
    justify-content: center;
    margin-top: 6px;
  }
}


/* ---------- 5. FINAL CALL-TO-ACTION ---------- */
.cta-band {
  padding: clamp(40px, 7vw, 80px) 24px;
  border: 1px solid var(--line);
  border-radius: 32px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--a1) 24%, transparent), color-mix(in srgb, var(--a2) 14%, transparent));
  text-align: center;
}

.cta-band h2 {
  margin-bottom: 14px;
  font-size: clamp(2rem, 5vw, 3.4rem);
  font-weight: 800;
}

.cta-band p {
  max-width: 520px;
  margin: 0 auto 28px;
  color: var(--muted);
  font-size: 1.1rem;
}


/* =========================================================
   6. STUDENTS PAGE EXTRAS
   (top marquee, glowing free perks, mobile polish)
   ========================================================= */

/* ---------- Top marquee: "Special for NUBTK" ---------- */
.nubtk-band {
  position: relative;
  margin-top: var(--nav-h);
  overflow: hidden;
  border-block: 1px solid color-mix(in srgb, var(--a1) 60%, transparent);
  background: linear-gradient(90deg, color-mix(in srgb, var(--a1) 26%, #070a12), color-mix(in srgb, var(--a2) 26%, #070a12));
  animation: bandGlow 3s ease-in-out infinite alternate;
}

.nubtk-band__track {
  display: flex;
  width: max-content;
  animation: nubtkScroll 26s linear infinite;
}

.nubtk-band:hover .nubtk-band__track {
  animation-play-state: paused;
}

.nubtk-band__group {
  display: flex;
  flex: none;
}

.nubtk-band__item {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 14px 28px 14px 0;
  font-family: var(--font-head);
  font-size: clamp(1.15rem, 3.4vw, 2rem);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow: 0 0 22px color-mix(in srgb, var(--a1) 80%, transparent);
}

.nubtk-band__item::after {
  content: "★";
  color: var(--a2);
  font-size: 0.7em;
  text-shadow: 0 0 14px var(--a2);
}

/* every second item is outlined */
.nubtk-band__item:nth-child(even) {
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.85);
  text-shadow: none;
}

@keyframes nubtkScroll {
  to { transform: translateX(-50%); }
}

@keyframes bandGlow {
  from { box-shadow: 0 0 18px -8px color-mix(in srgb, var(--a1) 60%, transparent); }
  to   { box-shadow: 0 0 46px -6px color-mix(in srgb, var(--a2) 70%, transparent); }
}

/* hero sits right under the band, so it needs less top padding */
.offer-hero--flush {
  padding-top: 48px;
}


/* ---------- Glowing "Free with every project" ---------- */
.glow-title .text-grad {
  display: inline-block;
  filter: drop-shadow(0 0 16px color-mix(in srgb, var(--a1) 70%, transparent));
  animation: titleGlow 2.8s ease-in-out infinite alternate;
}

@keyframes titleGlow {
  from { filter: drop-shadow(0 0 8px color-mix(in srgb, var(--a1) 55%, transparent)); }
  to   { filter: drop-shadow(0 0 26px color-mix(in srgb, var(--a2) 90%, transparent)); }
}

.perks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  margin-bottom: 56px;
}

.perk {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 32px 30px;
  border: 1px solid transparent;
  border-radius: 28px;
  background:
    linear-gradient(var(--surface-2), var(--surface-2)) padding-box,
    var(--grad) border-box;
  animation: perkGlow 3.2s ease-in-out infinite alternate;
}

.perk:nth-child(2) {
  animation-delay: -1.6s;
}

/* soft light that follows the mouse */
.perk::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(360px circle at var(--mx, 85%) var(--my, 0%), color-mix(in srgb, var(--a1) 32%, transparent), transparent 65%);
}

.perk__badge {
  position: absolute;
  top: 20px;
  right: 20px;
  padding: 5px 14px;
  border-radius: 999px;
  background: var(--grad);
  color: #06080f;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.perk__icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: 18px;
  border-radius: 17px;
  background: var(--grad);
  color: #06080f;
  box-shadow: 0 0 28px -4px color-mix(in srgb, var(--a1) 80%, transparent);
}

.perk__icon .icon {
  width: 28px;
  height: 28px;
}

.perk h3 {
  margin-bottom: 8px;
  font-size: 1.5rem;
  font-weight: 800;
}

.perk p {
  color: var(--muted);
}

@keyframes perkGlow {
  from { box-shadow: 0 0 16px -6px color-mix(in srgb, var(--a1) 55%, transparent); }
  to   { box-shadow: 0 0 46px -4px color-mix(in srgb, var(--a2) 65%, transparent); }
}

.plans-label {
  margin-bottom: 22px;
}


/* ---------- Mobile polish (all offer pages) ---------- */
@media (max-width: 600px) {
  .offer-hero {
    padding-bottom: 48px;
  }

  .offer-hero--flush {
    padding-top: 32px;
  }

  .offer-hero__title {
    font-size: clamp(2.1rem, 10.5vw, 3rem);
    line-height: 1;
  }

  .offer-hero__lead {
    font-size: 1rem;
  }

  .back-link {
    margin-bottom: 22px;
  }

  .kicker {
    margin-bottom: 18px;
    padding: 8px 14px;
    font-size: 0.75rem;
  }

  .offer-hero__actions .btn,
  .cta-band .btn {
    width: 100%;
  }

  .bold-line {
    padding: 24px 20px;
  }

  .nubtk-band__item {
    gap: 18px;
    padding: 11px 18px 11px 0;
  }

  .perks {
    grid-template-columns: 1fr;
    margin-bottom: 40px;
  }

  .perk {
    padding: 26px 22px;
    border-radius: 24px;
  }

  .perk h3 {
    font-size: 1.3rem;
  }

  .plan {
    padding: 28px 22px 24px;
    border-radius: 24px;
  }

  .plan--featured {
    padding-top: 60px;
  }

  .plan__badge {
    top: 16px;
    right: auto;
    left: 22px;
  }

  .plan__name {
    font-size: 1.4rem;
  }

  .slide__body {
    padding: 20px;
  }

  .cta-band {
    border-radius: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nubtk-band,
  .nubtk-band__track,
  .perk,
  .glow-title .text-grad {
    animation: none;
  }
}