/* =========================================================
   NOVALAB — BUY BACKLINKS
   Custom page body only.
   WordPress/Bricks controls the real header + footer.
========================================================= */

:root {
  --nl-orange: #ff5a00;
  --nl-orange-dark: #e84f00;
  --nl-navy: #07112f;
  --nl-navy-2: #0b173d;
  --nl-blue: #2f59ff;
  --nl-blue-dark: #1f43d9;
  --nl-white: #ffffff;
  --nl-bg: #f5f6f8;
  --nl-text: #111827;
  --nl-muted: #667085;
  --nl-border: #e3e7ed;
  --nl-shadow: 0 12px 35px rgba(10, 23, 61, 0.08);
}


/* =========================================================
   PAGE RESET — ONLY OUR CUSTOM CONTENT
========================================================= */

#novalab-buy-backlinks,
#novalab-buy-backlinks * {
  box-sizing: border-box;
}

#novalab-buy-backlinks {
  width: 100%;
  margin: 0;
  padding: 0;
  color: var(--nl-text);
  background: #fff;
  line-height: 1.5;
}

#novalab-buy-backlinks img {
  max-width: 100%;
  height: auto;
}

#novalab-buy-backlinks button,
#novalab-buy-backlinks input,
#novalab-buy-backlinks textarea,
#novalab-buy-backlinks select {
  font: inherit;
}

.nl-container {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
}


/* =========================================================
   BUTTONS
========================================================= */

.nl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 52px;
  padding: 0 24px;

  border: 2px solid transparent;
  border-radius: 7px;

  text-decoration: none !important;

  font-size: 14px;
  font-weight: 800;

  transition:
    transform .2s ease,
    background .2s ease,
    color .2s ease,
    border-color .2s ease;
}

.nl-btn:hover {
  transform: translateY(-2px);
}

.nl-btn-light {
  background: #fff;
  color: var(--nl-navy);
}

.nl-btn-light:hover {
  background: var(--nl-navy);
  color: #fff;
}

.nl-btn-outline {
  color: #fff;
  border-color: rgba(255,255,255,.75);
  background: transparent;
}

.nl-btn-outline:hover {
  background: #fff;
  color: var(--nl-navy);
  border-color: #fff;
}

.nl-btn-orange {
  background: var(--nl-orange);
  color: #fff;
}

.nl-btn-orange:hover {
  background: #fff;
  color: var(--nl-navy);
}

.nl-btn-dark {
  background: var(--nl-navy);
  color: #fff;
}

.nl-btn-dark:hover {
  background: var(--nl-orange);
  color: #fff;
}

.nl-full {
  width: 100%;
}


/* =========================================================
   HERO
========================================================= */

.nl-hero {
  position: relative;
  overflow: hidden;

  padding: 100px 0 96px;

  color: #fff;

  background:
    radial-gradient(
      circle at 78% 28%,
      rgba(255,255,255,.14),
      transparent 30%
    ),
    linear-gradient(
      135deg,
      #ff6900 0%,
      #ff5200 62%,
      #ff6500 100%
    );
}

.nl-hero::after {
  content: "";

  position: absolute;
  right: -150px;
  top: -170px;

  width: 500px;
  height: 500px;

  border: 1px solid rgba(255,255,255,.13);
  border-radius: 50%;
}

.nl-hero-grid {
  position: relative;
  z-index: 2;

  display: grid;
  grid-template-columns: 1.05fr .95fr;

  gap: 70px;
  align-items: center;
}


/* HERO COPY */

.nl-eyebrow,
.nl-section-kicker {
  display: inline-block;

  margin-bottom: 14px;

  font-size: 12px;
  font-weight: 900;

  text-transform: uppercase;
  letter-spacing: 1.2px;
}

.nl-eyebrow {
  color: rgba(255,255,255,.88);
}

.nl-section-kicker {
  color: var(--nl-orange);
}

.nl-hero h1 {
  max-width: 720px;

  margin: 0 0 24px !important;

  color: #fff !important;

  font-size: clamp(48px, 6vw, 78px) !important;
  line-height: .96 !important;
  letter-spacing: -3px !important;

  font-weight: 800 !important;
}

.nl-hero-lead {
  max-width: 690px;

  margin: 0 !important;

  color: rgba(255,255,255,.93) !important;

  font-size: 19px;
  line-height: 1.65;
}

.nl-hero-actions {
  display: flex;
  flex-wrap: wrap;

  gap: 12px;

  margin-top: 32px;
}

.nl-trust-row {
  display: flex;
  flex-wrap: wrap;

  gap: 20px;

  margin-top: 30px;

  color: #fff;

  font-size: 13px;
  font-weight: 800;
}

.nl-trust-row span::before {
  content: "✓";
  margin-right: 7px;
}


/* HERO VISUAL */

.nl-hero-visual {
  position: relative;
  min-height: 385px;
}

.nl-floating-card {
  position: absolute;

  width: 265px;

  padding: 25px;

  background: #fff;
  color: var(--nl-text);

  border-radius: 14px;

  box-shadow:
    0 22px 55px rgba(7,17,47,.20);
}

.nl-floating-card span,
.nl-floating-card small {
  display: block;
  color: var(--nl-muted);
}

.nl-floating-card span {
  font-size: 13px;
}

.nl-floating-card small {
  font-size: 12px;
}

.nl-floating-card strong {
  display: block;

  margin: 8px 0;

  color: var(--nl-navy);

  font-size: 38px;
  line-height: 1;

  font-weight: 900;
}

.nl-card-one {
  top: 18px;
  left: 25px;

  background: var(--nl-navy);
  color: #fff;
}

.nl-card-one span,
.nl-card-one small {
  color: rgba(255,255,255,.65);
}

.nl-card-one strong {
  color: #fff;
}

.nl-card-two {
  right: 10px;
  top: 105px;
}

.nl-card-three {
  left: 95px;
  bottom: 10px;
}


/* =========================================================
   COMMON SECTION HEADINGS
========================================================= */

.nl-section-heading {
  max-width: 770px;
  margin-bottom: 42px;
}

.nl-section-heading h2,
.nl-standard h2,
.nl-order-form-box h2 {
  margin: 0 0 14px !important;

  color: var(--nl-navy) !important;

  font-size: clamp(34px, 4vw, 52px) !important;
  line-height: 1 !important;
  letter-spacing: -1.8px !important;

  font-weight: 800 !important;
}

.nl-section-heading p,
.nl-standard p,
.nl-order-form-box p {
  margin: 0 !important;

  color: var(--nl-muted);

  font-size: 17px;
  line-height: 1.65;
}

.nl-light-heading h2 {
  color: #fff !important;
}

.nl-light-heading p {
  color: rgba(255,255,255,.72) !important;
}


/* =========================================================
   PRICING SECTION
========================================================= */

.nl-pricing {
  padding: 92px 0;
  background: var(--nl-bg);
}

.nl-pricing-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;

  gap: 24px;

  align-items: start;
}


/* PRICING CARDS */

.nl-tier-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 16px;
}

.nl-tier-card {
  position: relative;

  min-height: 240px;

  padding: 25px;

  background: #fff;

  border: 1px solid var(--nl-border);
  border-radius: 12px;

  box-shadow: var(--nl-shadow);

  transition:
    transform .2s ease,
    border-color .2s ease,
    box-shadow .2s ease;
}

.nl-tier-card:hover {
  transform: translateY(-4px);

  border-color: var(--nl-blue);

  box-shadow:
    0 16px 42px rgba(10,23,61,.12);
}

.nl-tier-card h3 {
  margin: 0 0 4px !important;

  color: var(--nl-navy) !important;

  font-size: 22px !important;
  line-height: 1.2 !important;

  font-weight: 800 !important;
}

.nl-tier-label {
  display: block;

  color: var(--nl-muted);

  font-size: 12px;
}

.nl-price {
  margin-top: 28px;

  color: var(--nl-navy);

  font-size: 38px;
  line-height: 1;

  font-weight: 900;
}

.nl-per {
  display: block;

  margin-top: 5px;

  color: var(--nl-muted);

  font-size: 12px;
}


/* FEATURED CARD */

.nl-featured {
  background: var(--nl-navy);
  color: #fff;

  border-color: var(--nl-navy);
}

.nl-featured h3,
.nl-featured .nl-price {
  color: #fff !important;
}

.nl-featured .nl-tier-label,
.nl-featured .nl-per {
  color: rgba(255,255,255,.64);
}

.nl-badge {
  position: absolute;

  top: 0;
  right: 0;

  padding: 8px 11px;

  background: var(--nl-orange);
  color: #fff;

  border-radius: 0 12px 0 10px;

  font-size: 10px;
  font-weight: 900;

  text-transform: uppercase;
  letter-spacing: .3px;
}


/* QUANTITY */

.nl-quantity {
  display: grid;
  grid-template-columns: 44px 1fr 44px;

  height: 44px;

  margin-top: 26px;

  overflow: hidden;

  background: #fff;

  border: 1px solid var(--nl-border);
  border-radius: 7px;
}

.nl-quantity button {
  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;

  background: transparent !important;

  color: var(--nl-navy) !important;

  font-size: 21px !important;
  font-weight: 800 !important;

  cursor: pointer;
}

.nl-quantity button:hover {
  background: #edf0f4 !important;
}

.nl-count {
  display: flex;
  align-items: center;
  justify-content: center;

  color: var(--nl-navy);

  font-weight: 800;
}


/* =========================================================
   ORDER SUMMARY
========================================================= */

.nl-order-summary {
  position: sticky;
  top: 100px;

  padding: 29px;

  background: var(--nl-navy);
  color: #fff;

  border-radius: 14px;

  box-shadow:
    0 20px 50px rgba(7,17,47,.15);
}

.nl-order-kicker {
  display: block;

  margin-bottom: 7px;

  color: var(--nl-orange);

  font-size: 11px;
  font-weight: 900;

  letter-spacing: 1px;
  text-transform: uppercase;
}

.nl-order-summary h3 {
  margin: 0 0 20px !important;

  color: #fff !important;

  font-size: 27px !important;
  line-height: 1.1 !important;

  font-weight: 800 !important;
}

#nl-order-items {
  min-height: 100px;

  padding-bottom: 20px;

  border-bottom:
    1px solid rgba(255,255,255,.15);
}

.nl-empty {
  margin: 0 !important;

  color: rgba(255,255,255,.58) !important;

  font-size: 13px;
  line-height: 1.55;
}

.nl-summary-item {
  display: flex;
  justify-content: space-between;

  gap: 15px;

  margin: 10px 0;

  color: #fff;

  font-size: 13px;
}

.nl-summary-total {
  display: flex;
  align-items: end;
  justify-content: space-between;

  padding: 22px 0;
}

.nl-summary-total span,
.nl-summary-total small {
  display: block;
}

.nl-summary-total span {
  color: rgba(255,255,255,.60);

  font-size: 12px;
}

.nl-summary-total small {
  margin-top: 4px;

  color: rgba(255,255,255,.65);

  font-size: 11px;
}

#nl-total {
  color: #fff;

  font-size: 34px;
  line-height: 1;

  font-weight: 900;
}

.nl-summary-note {
  margin: 12px 0 0 !important;

  color: rgba(255,255,255,.54) !important;

  font-size: 11px;
  line-height: 1.5;

  text-align: center;
}


/* =========================================================
   INCLUDED WITH EVERY ORDER
========================================================= */

.nl-included {
  padding: 92px 0;

  background: #fff;
}

.nl-feature-grid {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 16px;
}

.nl-feature-card {
  padding: 28px;

  background: #fff;

  border: 1px solid var(--nl-border);
  border-radius: 10px;

  box-shadow: var(--nl-shadow);

  transition:
    transform .2s ease,
    box-shadow .2s ease;
}

.nl-feature-card:hover {
  transform: translateY(-3px);

  box-shadow:
    0 16px 40px rgba(10,23,61,.11);
}

.nl-feature-card > span {
  display: inline-grid;
  place-items: center;

  width: 38px;
  height: 38px;

  margin-bottom: 18px;

  background: var(--nl-orange);
  color: #fff;

  border-radius: 8px;

  font-weight: 900;
}

.nl-feature-card h3 {
  margin: 0 0 9px !important;

  color: var(--nl-navy) !important;

  font-size: 18px !important;
  line-height: 1.25 !important;

  font-weight: 800 !important;
}

.nl-feature-card p {
  margin: 0 !important;

  color: var(--nl-muted);

  font-size: 14px;
  line-height: 1.6;
}


/* =========================================================
   HOW IT WORKS
========================================================= */

.nl-process {
  padding: 92px 0;

  background:
    radial-gradient(
      circle at 80% 30%,
      rgba(47,89,255,.26),
      transparent 30%
    ),
    var(--nl-navy);

  color: #fff;
}

.nl-process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);

  margin-top: 42px;
}

.nl-process-grid article {
  padding: 0 28px;

  border-right:
    1px solid rgba(255,255,255,.14);
}

.nl-process-grid article:first-child {
  padding-left: 0;
}

.nl-process-grid article:last-child {
  border-right: 0;
}

.nl-process-grid article > span {
  display: inline-grid;
  place-items: center;

  width: 42px;
  height: 42px;

  margin-bottom: 16px;

  background: var(--nl-blue);
  color: #fff;

  border-radius: 8px;

  font-weight: 900;
}

.nl-process-grid h3 {
  margin: 0 0 9px !important;

  color: #fff !important;

  font-size: 18px !important;

  font-weight: 800 !important;
}

.nl-process-grid p {
  margin: 0 !important;

  color: rgba(255,255,255,.66) !important;

  font-size: 14px;
  line-height: 1.6;
}


/* =========================================================
   NOVALAB LINK STANDARD
========================================================= */

.nl-standard {
  padding: 92px 0;

  background: #fff;
}

.nl-standard-layout {
  display: grid;
  grid-template-columns: .9fr 1.1fr;

  gap: 70px;

  align-items: start;
}

.nl-standard-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);

  gap: 14px;
}

.nl-standard-list div {
  position: relative;

  padding: 22px 22px 22px 53px;

  background: var(--nl-bg);

  border-radius: 10px;
}

.nl-standard-list div::before {
  content: "✓";

  position: absolute;
  left: 18px;
  top: 20px;

  width: 24px;
  height: 24px;

  display: grid;
  place-items: center;

  background: var(--nl-orange);
  color: #fff;

  border-radius: 50%;

  font-size: 13px;
  font-weight: 900;
}

.nl-standard-list strong,
.nl-standard-list span {
  display: block;
}

.nl-standard-list strong {
  margin-bottom: 5px;

  color: var(--nl-navy);

  font-size: 15px;
}

.nl-standard-list span {
  color: var(--nl-muted);

  font-size: 13px;
  line-height: 1.55;
}


/* =========================================================
   B2B / SAAS / AGENCIES
========================================================= */

.nl-b2b {
  padding: 92px 0;

  background:
    radial-gradient(
      circle at 65% 40%,
      rgba(47,89,255,.28),
      transparent 28%
    ),
    var(--nl-navy);
}

.nl-b2b-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);

  gap: 18px;
}

.nl-b2b-grid article {
  padding: 30px;

  background: #fff;

  border-radius: 12px;

  transition:
    transform .2s ease,
    box-shadow .2s ease;
}

.nl-b2b-grid article:hover {
  transform: translateY(-4px);

  box-shadow:
    0 15px 35px rgba(0,0,0,.15);
}

.nl-b2b-grid h3 {
  margin: 0 0 10px !important;

  color: var(--nl-navy) !important;

  font-size: 20px !important;

  font-weight: 800 !important;
}

.nl-b2b-grid p {
  margin: 0 !important;

  color: var(--nl-muted) !important;

  font-size: 14px;
  line-height: 1.6;
}


/* =========================================================
   CASE STUDIES
========================================================= */

.nl-case-studies {
  padding: 92px 0;

  background: #fff;
}

.nl-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);

  gap: 20px;

  margin-bottom: 32px;
}

.nl-stats-grid div {
  padding: 27px;

  background: var(--nl-bg);

  border-left: 4px solid var(--nl-orange);
}

.nl-stats-grid strong,
.nl-stats-grid span {
  display: block;
}

.nl-stats-grid strong {
  color: var(--nl-navy);

  font-size: 34px;
  line-height: 1;

  font-weight: 900;

  letter-spacing: -1px;
}

.nl-stats-grid span {
  margin-top: 8px;

  color: var(--nl-muted);

  font-size: 13px;
}


/* =========================================================
   FAQ
========================================================= */

.nl-faq {
  padding: 92px 0;

  background: var(--nl-bg);
}

.nl-faq-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);

  gap: 12px 18px;
}

.nl-faq details {
  padding: 19px 20px;

  background: #fff;

  border: 1px solid var(--nl-border);
  border-radius: 8px;
}

.nl-faq details[open] {
  border-color: rgba(255,90,0,.4);
}

.nl-faq summary {
  cursor: pointer;

  color: var(--nl-navy);

  font-size: 14px;
  font-weight: 800;

  line-height: 1.4;
}

.nl-faq details p {
  margin: 14px 0 0 !important;

  color: var(--nl-muted) !important;

  font-size: 13px;
  line-height: 1.65;
}


/* =========================================================
   FINAL CTA
========================================================= */

.nl-order-form-section {
  padding: 76px 0;

  background:
    linear-gradient(
      110deg,
      #ff5a00,
      #ff6800
    );
}

.nl-order-form-box {
  display: grid;
  grid-template-columns: 1fr auto;

  gap: 40px;

  align-items: center;
}

.nl-order-form-box .nl-section-kicker,
.nl-order-form-box h2,
.nl-order-form-box p {
  color: #fff !important;
}

.nl-order-form-box p {
  max-width: 650px;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 980px) {

  .nl-hero-grid,
  .nl-standard-layout,
  .nl-order-form-box {
    grid-template-columns: 1fr;
  }

  .nl-hero-visual {
    min-height: 340px;
  }

  .nl-pricing-layout {
    grid-template-columns: 1fr;
  }

  .nl-order-summary {
    position: static;
  }

  .nl-tier-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .nl-feature-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .nl-process-grid {
    grid-template-columns: repeat(2, 1fr);

    gap: 35px;
  }

  .nl-process-grid article {
    padding: 0;

    border-right: 0;
  }

  .nl-b2b-grid,
  .nl-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 640px) {

  .nl-container {
    width: min(100% - 26px, 1180px);
  }


  /* HERO */

  .nl-hero {
    padding: 65px 0 70px;
  }

  .nl-hero h1 {
    font-size: 47px !important;
    letter-spacing: -2px !important;
  }

  .nl-hero-lead {
    font-size: 17px;
  }

  .nl-hero-actions {
    width: 100%;
  }

  .nl-hero-actions .nl-btn {
    flex: 1;
  }

  .nl-trust-row {
    display: grid;
    grid-template-columns: repeat(2,1fr);

    gap: 10px;
  }


  /* HERO CARDS */

  .nl-hero-visual {
    min-height: 445px;
  }

  .nl-floating-card {
    width: 86%;
  }

  .nl-card-one {
    left: 0;
  }

  .nl-card-two {
    right: 0;
    top: 145px;
  }

  .nl-card-three {
    left: 10%;
    bottom: 0;
  }


  /* SECTIONS */

  .nl-pricing,
  .nl-included,
  .nl-process,
  .nl-standard,
  .nl-b2b,
  .nl-case-studies,
  .nl-faq {
    padding: 65px 0;
  }

  .nl-section-heading {
    margin-bottom: 30px;
  }

  .nl-section-heading h2,
  .nl-standard h2,
  .nl-order-form-box h2 {
    font-size: 36px !important;
  }


  /* GRIDS */

  .nl-tier-grid,
  .nl-feature-grid,
  .nl-process-grid,
  .nl-standard-list,
  .nl-b2b-grid,
  .nl-stats-grid,
  .nl-faq-grid {
    grid-template-columns: 1fr;
  }


  /* PRICING */

  .nl-tier-card {
    min-height: auto;
  }

  .nl-order-summary {
    padding: 24px;
  }


  /* CTA */

  .nl-order-form-box {
    text-align: left;
  }

}


/* =========================================================
   VERY SMALL PHONES
========================================================= */

@media (max-width: 420px) {

  .nl-hero h1 {
    font-size: 41px !important;
  }

  .nl-trust-row {
    grid-template-columns: 1fr;
  }

  .nl-price {
    font-size: 35px;
  }

}

/* =========================================================
   BUYER CONFIDENCE -> CASE STUDIES SPACING
   Reduces the double 92px white-section gap only here.
========================================================= */

.nl-b2b + .nl-standard {
  padding-bottom: 45px;
}

.nl-standard + .nl-case-studies {
  padding-top: 45px;
}

@media (max-width: 640px) {
  .nl-b2b + .nl-standard {
    padding-bottom: 35px;
  }

  .nl-standard + .nl-case-studies {
    padding-top: 35px;
  }
}

/* =========================================================
   LINK STANDARD -> PLACEMENT GUARANTEE SPACING
   Prevents adjacent white sections from doubling vertical space.
========================================================= */

.nl-standard + #placement-guarantee {
  padding-top: 45px !important;
}

.nl-standard:has(+ #placement-guarantee) {
  padding-bottom: 45px !important;
}

@media (max-width: 640px) {
  .nl-standard + #placement-guarantee {
    padding-top: 35px !important;
  }

  .nl-standard:has(+ #placement-guarantee) {
    padding-bottom: 35px !important;
  }
}