/*
Theme Name: NimbleNest (Hello Biz Child)
Theme URI: https://nimblenest.co.uk
Description: NimbleNest design system — Fresh Blue brand packs, built by Fresh Digital.
Author: Fresh Digital
Template: hello-biz
Version: 1.0.0
Text Domain: nimblenest
*/

/* ==========================================================================
   1. BRAND PACK TOKENS  (pack chosen per page via body class)
   ========================================================================== */
body {
  --nn-font-display: "Bricolage Grotesque", "Instrument Sans", sans-serif;
  --nn-font-body: "Instrument Sans", -apple-system, sans-serif;
  --nn-radius: 16px;
  --nn-radius-sm: 12px;
  --nn-container: 1200px;
  --nn-on-primary: #05202F; /* dark ink on primary buttons — AA on every pack's primary */
  --nn-link: #0A6FA6;       /* body links on light surfaces — AA on white and tint */
}
body.nn-pack-aurora { --nn-link: #3BDAFF; }

/* Pack 1 — DEEP NEST (main site) */
body.nn-pack-deep-nest {
  --nn-primary: #17A8E3;
  --nn-primary-hover: #008FCA;
  --nn-accent: #3BDAFF;
  --nn-success: #35F9A0;
  --nn-dark: #071B2E;
  --nn-dark-2: #0A2440;
  --nn-light: #FFFFFF;
  --nn-light-2: #F2F8FC;
  --nn-ink: #0D2233;
  --nn-ink-soft: #46617A;
  --nn-on-dark: #FFFFFF;
  --nn-on-dark-soft: #A8C4DA;
  --nn-line: rgba(23, 168, 227, .16);
  --nn-line-dark: rgba(59, 218, 255, .16);
  --nn-grad: linear-gradient(92deg, #17A8E3, #3BDAFF);
  --nn-glow: rgba(23, 168, 227, .35);
}

/* Pack 2 — ELECTRIC BERRY (LP variant A) */
body.nn-pack-electric-berry {
  --nn-primary: #17A8E3;
  --nn-primary-hover: #FD2EB3;
  --nn-accent: #FD2EB3;
  --nn-success: #17A8E3;
  --nn-dark: #14082A;
  --nn-dark-2: #1E0E3C;
  --nn-light: #FAFBFF;
  --nn-light-2: #F1EDFB;
  --nn-ink: #101423;
  --nn-ink-soft: #4E5470;
  --nn-on-dark: #FFFFFF;
  --nn-on-dark-soft: #C9BEE6;
  --nn-line: rgba(253, 46, 179, .18);
  --nn-line-dark: rgba(253, 46, 179, .25);
  --nn-grad: linear-gradient(92deg, #17A8E3, #FD2EB3);
  --nn-glow: rgba(253, 46, 179, .3);
}

/* Pack 3 — AURORA (LP variant B) */
body.nn-pack-aurora {
  --nn-primary: #17A8E3;
  --nn-primary-hover: #35F9A0;
  --nn-accent: #35F9A0;
  --nn-success: #35F9A0;
  --nn-dark: #04121F;
  --nn-dark-2: #082033;
  --nn-light: #06182A;
  --nn-light-2: #0A2440;
  --nn-ink: #EAF6FD;
  --nn-ink-soft: #9FC2DB;
  --nn-on-dark: #FFFFFF;
  --nn-on-dark-soft: #9FC2DB;
  --nn-line: rgba(53, 249, 160, .16);
  --nn-line-dark: rgba(53, 249, 160, .2);
  --nn-grad: linear-gradient(92deg, #3BDAFF, #35F9A0);
  --nn-glow: rgba(53, 249, 160, .28);
}
body.nn-pack-aurora .nn-sec--light { color: var(--nn-ink); }

/* Pack 4 — CITRUS SKY (LP variant C) */
body.nn-pack-citrus-sky {
  --nn-primary: #FF934A;
  --nn-primary-hover: #F07722;
  --nn-accent: #17A8E3;
  --nn-success: #2DB742;
  --nn-dark: #0B2A44;
  --nn-dark-2: #10395C;
  --nn-light: #FFFFFF;
  --nn-light-2: #EAF6FD;
  --nn-ink: #12314C;
  --nn-ink-soft: #4A6A86;
  --nn-on-dark: #FFFFFF;
  --nn-on-dark-soft: #B7D6ED;
  --nn-line: rgba(23, 168, 227, .18);
  --nn-line-dark: rgba(255, 147, 74, .25);
  --nn-grad: linear-gradient(92deg, #17A8E3, #FF934A);
  --nn-glow: rgba(255, 147, 74, .32);
}

/* ==========================================================================
   2. BASE TYPOGRAPHY
   ========================================================================== */
body { font-family: var(--nn-font-body) !important; color: var(--nn-ink); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.nn-sec h1, .nn-sec h2, .nn-sec h3, .nn-sec h4,
.nn-sec .elementor-heading-title { font-family: var(--nn-font-display) !important; letter-spacing: -0.02em; line-height: 1.08; font-weight: 800; text-wrap: balance; }
.nn-sec h2, .nn-sec .nn-h2 .elementor-heading-title { font-size: clamp(1.75rem, 1.15rem + 1.9vw, 2.7rem); }
.nn-sec h3 { font-size: clamp(1.12rem, 1rem + .5vw, 1.38rem); line-height: 1.25; }
.nn-sec p { line-height: 1.7; }
.nn-hl { background: var(--nn-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nn-kicker { display: inline-flex; align-items: center; gap: 8px; font: 600 .8rem/1 var(--nn-font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--nn-primary); background: rgba(23, 168, 227, .09); background: color-mix(in srgb, var(--nn-primary) 9%, transparent); border: 1px solid var(--nn-line); padding: 9px 14px; border-radius: 100px; max-width: 100%; text-align: left; }
.nn-kicker::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--nn-grad); box-shadow: 0 0 10px var(--nn-glow); }
.nn-sec--dark .nn-kicker { color: var(--nn-accent); border-color: var(--nn-line-dark); background: rgba(255,255,255,.04); }
.nn-lead { font-size: clamp(1.02rem, .96rem + .32vw, 1.18rem); color: var(--nn-ink-soft); max-width: 720px; }
.nn-sec--dark .nn-lead, .nn-sec--dark p { color: var(--nn-on-dark-soft); }
.nn-sec--dark h1, .nn-sec--dark h2, .nn-sec--dark h3, .nn-sec--dark h4, .nn-sec--dark .elementor-heading-title { color: var(--nn-on-dark); }
.nn-center { text-align: center; }
.nn-center .nn-lead { margin-inline: auto; }

/* ==========================================================================
   3. SECTIONS & SURFACES
   ========================================================================== */
.nn-sec { padding: clamp(56px, 3.5vw + 32px, 96px) 24px; position: relative; overflow: hidden; }
.nn-sec--tight { padding: clamp(40px, 3vw + 24px, 64px) 24px; }
.nn-wrap { max-width: var(--nn-container); margin: 0 auto; position: relative; z-index: 2; }
.nn-sec--light { background: var(--nn-light); }
.nn-sec--tint { background: var(--nn-light-2); }
.nn-sec--dark { background: var(--nn-dark); color: var(--nn-on-dark-soft); }
.nn-sec--dark.nn-mesh::before, .nn-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(900px 480px at 82% -10%, rgba(23, 168, 227, .26), transparent 60%),
    radial-gradient(700px 420px at -8% 108%, rgba(59, 218, 255, .14), transparent 60%);
  background:
    radial-gradient(900px 480px at 82% -10%, color-mix(in srgb, var(--nn-primary) 26%, transparent), transparent 60%),
    radial-gradient(700px 420px at -8% 108%, color-mix(in srgb, var(--nn-accent) 14%, transparent), transparent 60%);
}
.nn-sec--dark.nn-grid-bg::after, .nn-hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, #000 30%, transparent 75%);
          mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, #000 30%, transparent 75%);
}

/* ==========================================================================
   4. BUTTONS
   ========================================================================== */
.nn-btn, .nn-sec .elementor-button, .nn-form .elementor-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font: 700 1rem/1 var(--nn-font-body); text-decoration: none; cursor: pointer;
  padding: 17px 30px; border-radius: 14px; border: 1px solid transparent;
  background: var(--nn-primary); color: var(--nn-on-primary);
  box-shadow: 0 10px 26px -10px var(--nn-glow);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
  position: relative; overflow: hidden;
}
.nn-btn::after { content: "→"; font-weight: 700; transition: transform .2s ease; }
.nn-btn:hover, .nn-sec .elementor-button:hover, .nn-form .elementor-button:hover {
  background: var(--nn-primary-hover); color: var(--nn-on-primary); transform: translateY(-2px);
  box-shadow: 0 16px 34px -10px var(--nn-glow);
}
.nn-btn:hover::after { transform: translateX(4px); }
/* Footer places buttons inside its link scope — keep button ink authoritative. */
.nn-footer a.nn-btn, .nn-footer a.nn-btn:hover { color: var(--nn-on-primary); }
.nn-btn--ghost { background: transparent; border-color: var(--nn-line); color: var(--nn-ink); box-shadow: none; }
.nn-btn--ghost::after { content: none; }
.nn-sec--dark .nn-btn--ghost, .nn-hero .nn-btn--ghost, .nn-cta-band .nn-btn--ghost { color: #fff; border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.04); }
.nn-btn--ghost:hover { background: rgba(23, 168, 227, .12); background: color-mix(in srgb, var(--nn-primary) 12%, transparent); transform: translateY(-2px); }
.nn-btn--xl { padding: 20px 38px; font-size: 1.1rem; border-radius: 16px; }
.nn-btn-row { display: flex; gap: 14px; flex-wrap: wrap; }
.nn-phone-inline { font-weight: 700; color: inherit; text-decoration: none; border-bottom: 2px solid var(--nn-accent); }

/* ==========================================================================
   5. HERO
   ========================================================================== */
.nn-hero { background: linear-gradient(180deg, var(--nn-dark) 0%, var(--nn-dark-2) 100%); color: var(--nn-on-dark-soft); padding-top: clamp(108px, 6vw + 52px, 156px); padding-bottom: clamp(56px, 4vw, 84px); }
.nn-hero h1, .nn-hero .elementor-heading-title { font-family: var(--nn-font-display); color: #fff; font-weight: 800; letter-spacing: -0.025em; line-height: 1.05; font-size: clamp(2.25rem, 1.2rem + 2.7vw, 3.7rem); max-width: 900px; }
.nn-hero .nn-lead { font-size: clamp(1.04rem, .98rem + .35vw, 1.22rem); max-width: 560px; }
/* Hero sits on navy but is not .nn-sec--dark — force readable copy colours here. */
.nn-hero p, .nn-hero .nn-lead, .nn-lp-hero p { color: var(--nn-on-dark-soft); }

/* Split hero: copy left, live-desk visual right. Collapses below 1000px. */
.nn-hero-grid { display: grid; grid-template-columns: 1.06fr .94fr; gap: clamp(36px, 4vw, 76px); align-items: center; }
@media (max-width: 1000px) {
  .nn-hero-grid { grid-template-columns: 1fr; }
  .nn-hero-vis { display: none; }
}
/* Laptop heights (13" MacBook et al) — keep the CTA above the fold. */
@media (min-width: 1000px) and (max-height: 880px) {
  .nn-hero, .e-con.nn-hero { padding-top: 100px !important; padding-bottom: 48px !important; }
  .nn-hero h1 { font-size: clamp(2.1rem, 1rem + 2.4vw, 3.1rem); margin-bottom: 16px !important; }
  .nn-hero .nn-lead { font-size: 1.05rem; margin-bottom: 22px !important; }
  .nn-hero .nn-btn-row { margin-bottom: 24px !important; }
  .nn-hero .nn-kicker { padding: 7px 12px; font-size: .72rem; }
}

/* Hero visual — glass "live helpdesk" cluster (pure CSS/SVG, decorative) */
.nn-hero-vis { position: relative; }
.nn-vis-main { background: rgba(255,255,255,.05); border: 1px solid var(--nn-line-dark); border-radius: 20px; padding: clamp(18px, 1.6vw, 26px); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 44px 90px -44px rgba(0,0,0,.65); }
.nn-vis-head { display: flex; align-items: center; gap: 10px; font: 700 1rem var(--nn-font-display); color: #fff; padding-bottom: 14px; }
.nn-vis-head em { font-style: normal; margin-left: auto; font: 600 .7rem/1 var(--nn-font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--nn-success); background: rgba(53,249,160,.12); padding: 6px 10px; border-radius: 100px; }
.nn-vis-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--nn-success); box-shadow: 0 0 0 0 rgba(53,249,160,.5); animation: nn-pulse 2.2s infinite; }
@keyframes nn-pulse { 70% { box-shadow: 0 0 0 9px rgba(53,249,160,0); } 100% { box-shadow: 0 0 0 0 rgba(53,249,160,0); } }
.nn-vis-row { display: flex; gap: 10px; align-items: center; padding: 12px 0; border-top: 1px solid rgba(255,255,255,.07); font-size: .9rem; color: var(--nn-on-dark); }
.nn-vis-row b { font: 700 .74rem var(--nn-font-display); color: var(--nn-accent); background: rgba(59,218,255,.1); padding: 4px 8px; border-radius: 8px; white-space: nowrap; }
.nn-vis-ok { margin-left: auto; color: var(--nn-success); font-weight: 600; font-size: .82rem; white-space: nowrap; }
.nn-vis-live { margin-left: auto; color: var(--nn-accent); font-size: .82rem; white-space: nowrap; }
.nn-vis-meter { margin-top: 14px; padding: 14px 16px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06); border-radius: 12px; }
.nn-vis-meter span { display: flex; justify-content: space-between; font-size: .82rem; color: var(--nn-on-dark-soft); }
.nn-vis-meter span b { color: #fff; font-family: var(--nn-font-display); font-size: .95rem; }
.nn-vis-meter i { display: block; height: 6px; border-radius: 4px; background: rgba(255,255,255,.08); position: relative; margin-top: 10px; overflow: hidden; }
.nn-vis-meter i::after { content: ""; position: absolute; inset: 0; width: var(--w, 80%); background: var(--nn-grad); border-radius: 4px; }
.nn-vis-chip { position: absolute; display: flex; gap: 9px; align-items: center; background: rgba(10,36,64,.88); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid var(--nn-line-dark); border-radius: 14px; padding: 12px 16px; font: 600 .84rem var(--nn-font-body); color: #fff; box-shadow: 0 18px 40px -18px rgba(0,0,0,.6); white-space: nowrap; }
.nn-vis-chip svg { width: 18px; height: 18px; color: var(--nn-success); flex: 0 0 auto; }
.nn-vis-chip--1 { top: -24px; right: -12px; animation: nn-float 7s ease-in-out infinite; }
.nn-vis-chip--2 { bottom: -20px; left: -16px; animation: nn-float 9s ease-in-out infinite reverse; }
@media (prefers-reduced-motion: reduce) { .nn-vis-chip--1, .nn-vis-chip--2, .nn-vis-dot { animation: none; } }
.nn-hero-ticks { display: flex; gap: 22px; flex-wrap: wrap; padding: 0; margin: 8px 0 0; list-style: none; }
.nn-hero-ticks li { display: flex; align-items: center; gap: 9px; font-weight: 500; color: var(--nn-on-dark); font-size: .95rem; }
.nn-hero-ticks li::before { content: "✓"; display: grid; place-items: center; flex: 0 0 auto; width: 21px; height: 21px; border-radius: 50%; background: rgba(53, 249, 160, .18); background: color-mix(in srgb, var(--nn-success) 18%, transparent); color: var(--nn-success); font-size: .72rem; font-weight: 800; }
.nn-orb { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .5; pointer-events: none; }
.nn-orb--1 { width: 420px; height: 420px; right: -80px; top: -120px; background: var(--nn-primary); animation: nn-float 9s ease-in-out infinite; }
.nn-orb--2 { width: 300px; height: 300px; left: -100px; bottom: -140px; background: var(--nn-accent); opacity: .28; animation: nn-float 11s ease-in-out infinite reverse; }
@keyframes nn-float { 0%,100% { transform: translateY(0) } 50% { transform: translateY(26px) } }

/* ==========================================================================
   6. TRUST MARQUEE
   ========================================================================== */
.nn-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.nn-marquee-track { display: flex; gap: 56px; width: max-content; animation: nn-scroll 30s linear infinite; align-items: center; }
.nn-marquee:hover .nn-marquee-track { animation-play-state: paused; }
@keyframes nn-scroll { to { transform: translateX(-50%); } }
.nn-marquee-item { display: flex; align-items: center; gap: 10px; white-space: nowrap; font: 600 .95rem/1 var(--nn-font-body); letter-spacing: .04em; color: var(--nn-ink-soft); opacity: .85; }
.nn-sec--dark .nn-marquee-item { color: var(--nn-on-dark-soft); }
.nn-marquee-item::before { content: "◆"; font-size: .55rem; color: var(--nn-primary); }

/* ==========================================================================
   7. CARDS & GRIDS
   ========================================================================== */
.nn-grid { display: grid; gap: 22px; }
.nn-grid-2 { grid-template-columns: repeat(2, 1fr); }
.nn-grid-3 { grid-template-columns: repeat(3, 1fr); }
.nn-grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .nn-grid-3, .nn-grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .nn-grid-2, .nn-grid-3, .nn-grid-4 { grid-template-columns: 1fr; } }

.nn-card { background: var(--nn-light); border: 1px solid var(--nn-line); border-radius: var(--nn-radius); padding: 30px 28px; position: relative; transition: transform .25s ease, box-shadow .25s ease; overflow: hidden; }
.nn-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--nn-grad); opacity: 0; transition: opacity .25s ease; }
.nn-card:hover { transform: translateY(-5px); box-shadow: 0 24px 44px -18px rgba(13, 34, 51, .18); }
.nn-card:hover::before { opacity: 1; }
.nn-card h3 { margin: 14px 0 8px; color: var(--nn-ink); }
.nn-card p { margin: 0; color: var(--nn-ink-soft); font-size: .98rem; }
.nn-sec--dark .nn-card, .nn-card--glass { background: rgba(255,255,255,.045); border-color: var(--nn-line-dark); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.nn-sec--dark .nn-card h3 { color: #fff; }
.nn-sec--dark .nn-card p { color: var(--nn-on-dark-soft); }
.nn-card--link { display: block; text-decoration: none; }
.nn-ico { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: rgba(23, 168, 227, .11); background: color-mix(in srgb, var(--nn-primary) 11%, transparent); border: 1px solid var(--nn-line); font-size: 1.35rem; color: var(--nn-primary); }
.nn-sec--dark .nn-ico { background: rgba(255,255,255,.05); border-color: var(--nn-line-dark); }
.nn-card-bullets { list-style: none; margin: 16px 0 0; padding: 14px 0 0; border-top: 1px dashed var(--nn-line); display: grid; gap: 9px; }
.nn-card-bullets li { display: flex; gap: 9px; font-size: .93rem; color: var(--nn-ink-soft); }
.nn-sec--dark .nn-card-bullets li { color: var(--nn-on-dark-soft); }
.nn-card-bullets li::before { content: "✓"; color: var(--nn-success); font-weight: 800; }
.nn-card-cta { display: inline-flex; align-items: center; gap: 7px; margin-top: 18px; font-weight: 700; color: var(--nn-link); }
/* Body links on light surfaces — branded and AA. */
.nn-sec p a:not(.nn-btn):not(.nn-phone-inline), .nn-sec li a:not(.nn-btn):not(.nn-phone-inline) { color: var(--nn-link); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.nn-sec--dark p a, .nn-hero p a { color: var(--nn-accent); }
.nn-card--link:hover .nn-card-cta gap { gap: 11px; }

/* ==========================================================================
   8. COMPARISON  (us vs typical provider)
   ========================================================================== */
.nn-compare { display: grid; grid-template-columns: 1.2fr 1fr 1fr; border: 1px solid var(--nn-line-dark); border-radius: var(--nn-radius); overflow: hidden; background: rgba(255,255,255,.03); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.nn-compare > div { padding: 18px 22px; border-bottom: 1px solid var(--nn-line-dark); display: flex; align-items: center; font-size: .97rem; }
.nn-compare > div:nth-last-child(-n+3) { border-bottom: 0; }
.nn-compare .c-head { font: 700 1.02rem var(--nn-font-display); color: #fff; background: rgba(255,255,255,.04); }
.nn-compare .c-us { background: rgba(23, 168, 227, .13); background: color-mix(in srgb, var(--nn-primary) 13%, transparent); color: #fff; font-weight: 600; gap: 10px; }
.nn-compare .c-us::before { content: "✓"; color: var(--nn-success); font-weight: 800; flex: 0 0 auto; }
.nn-compare .c-them { color: var(--nn-on-dark-soft); gap: 10px; }
.nn-compare .c-them::before { content: "✕"; color: #E36A6A; font-weight: 800; flex: 0 0 auto; }
.nn-compare .c-feat { color: #fff; font-weight: 600; }
@media (max-width: 760px) {
  .nn-compare { grid-template-columns: 1fr; }
  .nn-compare .c-feat { background: rgba(255,255,255,.05); border-top: 2px solid var(--nn-line-dark); }
  .nn-compare .c-head { display: none; }
}

/* ==========================================================================
   9. STATS
   ========================================================================== */
.nn-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 860px) { .nn-stats { grid-template-columns: repeat(2, 1fr); } }
.nn-stat { text-align: center; padding: 30px 16px; border-radius: var(--nn-radius); background: rgba(255,255,255,.035); border: 1px solid var(--nn-line-dark); }
.nn-sec--light .nn-stat, .nn-sec--tint .nn-stat { background: var(--nn-light); border-color: var(--nn-line); }
.nn-stat b { display: block; font: 800 clamp(2.1rem, 1.6rem + 2vw, 3.1rem)/1 var(--nn-font-display); background: var(--nn-grad); -webkit-background-clip: text; background-clip: text; color: transparent; letter-spacing: -0.02em; }
.nn-stat span { display: block; margin-top: 9px; font-size: .92rem; font-weight: 500; }

/* ==========================================================================
   10. PROCESS TIMELINE
   ========================================================================== */
.nn-steps { display: grid; grid-template-columns: repeat(var(--steps, 4), 1fr); gap: 22px; counter-reset: step; }
@media (max-width: 900px) { .nn-steps { grid-template-columns: 1fr; } }
.nn-step { position: relative; padding: 26px 24px 24px; border-radius: var(--nn-radius); background: var(--nn-light); border: 1px solid var(--nn-line); counter-increment: step; }
.nn-sec--dark .nn-step { background: rgba(255,255,255,.045); border-color: var(--nn-line-dark); }
.nn-step::before { content: "0" counter(step); font: 800 .95rem var(--nn-font-display); display: inline-grid; place-items: center; padding: 8px 13px; border-radius: 10px; background: var(--nn-grad); color: #04121F; margin-bottom: 16px; }
.nn-step h3 { margin: 0 0 8px; }
.nn-step p { margin: 0; font-size: .95rem; }

/* ==========================================================================
   11. TESTIMONIALS
   ========================================================================== */
.nn-quote { display: flex; flex-direction: column; gap: 18px; padding: 30px 28px; border-radius: var(--nn-radius); background: var(--nn-light); border: 1px solid var(--nn-line); position: relative; }
.nn-sec--dark .nn-quote { background: rgba(255,255,255,.045); border-color: var(--nn-line-dark); }
.nn-quote::before { content: "\201C"; font: 700 4.4rem/0.55 Georgia, "Times New Roman", serif; background: var(--nn-grad); -webkit-background-clip: text; background-clip: text; color: transparent; height: 28px; }
.nn-quote p { margin: 0; font-size: 1.02rem; line-height: 1.6; }
.nn-quote-stars { color: #FFB84A; letter-spacing: 3px; font-size: .95rem; }
.nn-quote-who { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.nn-quote-who i { font-style: normal; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--nn-grad); color: #04121F; font-weight: 800; font-family: var(--nn-font-display); }
.nn-quote-who b { display: block; font-size: .95rem; color: var(--nn-ink); }
.nn-sec--dark .nn-quote-who b { color: #fff; }
.nn-quote-who span { font-size: .85rem; color: var(--nn-ink-soft); }
.nn-sec--dark .nn-quote-who span { color: var(--nn-on-dark-soft); }

/* ==========================================================================
   12. FAQ (details/summary)
   ========================================================================== */
.nn-faq { max-width: 860px; margin: 0 auto; display: grid; gap: 14px; }
.nn-faq details { background: var(--nn-light); border: 1px solid var(--nn-line); border-radius: var(--nn-radius-sm); overflow: hidden; transition: box-shadow .2s ease; }
.nn-sec--dark .nn-faq details { background: rgba(255,255,255,.045); border-color: var(--nn-line-dark); }
.nn-faq details[open] { box-shadow: 0 14px 30px -18px rgba(13,34,51,.25); }
.nn-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 24px; font: 700 1.05rem var(--nn-font-display); color: var(--nn-ink); }
.nn-sec--dark .nn-faq summary { color: #fff; }
.nn-faq summary::-webkit-details-marker { display: none; }
.nn-faq summary::after { content: "+"; font: 400 1.6rem/1 var(--nn-font-display); color: var(--nn-primary); transition: transform .25s ease; flex: 0 0 auto; }
.nn-faq details[open] summary::after { transform: rotate(45deg); }
.nn-faq details > div { padding: 0 24px 22px; color: var(--nn-ink-soft); line-height: 1.65; }
.nn-sec--dark .nn-faq details > div { color: var(--nn-on-dark-soft); }

/* ==========================================================================
   13. CTA BAND
   ========================================================================== */
.nn-cta-band { border-radius: 24px; padding: clamp(44px, 4vw + 24px, 72px) clamp(24px, 4vw, 64px); position: relative; overflow: hidden; text-align: center; background: linear-gradient(120deg, var(--nn-dark) 0%, var(--nn-dark-2) 60%, #10557E 100%); background: linear-gradient(120deg, var(--nn-dark) 0%, var(--nn-dark-2) 60%, color-mix(in srgb, var(--nn-primary) 45%, var(--nn-dark-2)) 100%); border: 1px solid var(--nn-line-dark); }
.nn-cta-band::before { content: ""; position: absolute; inset: 0; background: radial-gradient(600px 300px at 85% 20%, rgba(59, 218, 255, .3), transparent 65%); background: radial-gradient(600px 300px at 85% 20%, color-mix(in srgb, var(--nn-accent) 30%, transparent), transparent 65%); pointer-events: none; }
.nn-cta-band h2 { color: #fff; margin: 0 0 12px; font-size: clamp(1.8rem, 1.3rem + 2vw, 2.8rem); }
.nn-cta-band p { color: var(--nn-on-dark-soft); max-width: 640px; margin: 0 auto 28px; }
.nn-cta-band .nn-btn-row { justify-content: center; }

/* ==========================================================================
   14. HEADER
   ========================================================================== */
.nn-header { position: fixed; inset: 0 0 auto 0; z-index: 999; transition: background .25s ease, box-shadow .25s ease; }
.nn-header-in { max-width: var(--nn-container); margin: 0 auto; display: flex; align-items: center; gap: 28px; padding: 16px 24px; }
.nn-header.nn-scrolled { background: rgba(7, 27, 46, .88); background: color-mix(in srgb, var(--nn-dark) 88%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 8px 30px -12px rgba(0,0,0,.4); }
.nn-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; margin-right: auto; }
.nn-logo svg { width: 34px; height: 34px; }
.nn-logo b { font: 800 1.3rem var(--nn-font-display); color: #fff; letter-spacing: -0.02em; }
.nn-logo b em { font-style: normal; background: var(--nn-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nn-nav { display: flex; gap: 4px; align-items: center; }
.nn-nav a { color: rgba(255,255,255,.82); text-decoration: none; font: 500 .95rem var(--nn-font-body); padding: 10px 14px; border-radius: 10px; transition: background .2s ease, color .2s ease; }
.nn-nav a:hover { color: #fff; background: rgba(255,255,255,.08); }
.nn-head-phone { display: flex; flex-direction: column; text-align: right; text-decoration: none; line-height: 1.15; }
.nn-head-phone span { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--nn-on-dark-soft); }
.nn-head-phone b { color: #fff; font-family: var(--nn-font-display); font-size: 1.02rem; }
.nn-header .nn-btn { padding: 13px 22px; font-size: .93rem; }
.nn-burger { display: none; background: none; border: 0; cursor: pointer; width: 42px; height: 42px; border-radius: 10px; background: rgba(255,255,255,.07); color: #fff; font-size: 1.2rem; }
@media (max-width: 1020px) {
  .nn-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; background: var(--nn-dark-2); padding: 18px 24px 26px; gap: 6px; box-shadow: 0 30px 40px -20px rgba(0,0,0,.5); }
  .nn-nav a { padding: 14px 16px; font-size: 1.05rem; }
  .nn-header.nn-open .nn-nav { display: flex; }
  .nn-burger { display: grid; place-items: center; }
  .nn-head-phone { display: none; }
}

/* ==========================================================================
   15. FOOTER
   ========================================================================== */
.nn-footer { background: var(--nn-dark); color: var(--nn-on-dark-soft); padding: 72px 24px 0; position: relative; overflow: hidden; }
.nn-footer::before { content: ""; position: absolute; inset: 0; background: radial-gradient(700px 320px at 12% 0%, rgba(23, 168, 227, .12), transparent 60%); background: radial-gradient(700px 320px at 12% 0%, color-mix(in srgb, var(--nn-primary) 12%, transparent), transparent 60%); pointer-events: none; }
.nn-footer-in { max-width: var(--nn-container); margin: 0 auto; position: relative; }
.nn-footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 40px; padding-bottom: 48px; }
@media (max-width: 900px) { .nn-footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .nn-footer-grid { grid-template-columns: 1fr; } }
.nn-footer h4 { color: #fff; font: 700 .95rem var(--nn-font-display); letter-spacing: .05em; text-transform: uppercase; margin: 0 0 18px; }
.nn-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.nn-footer a { color: var(--nn-on-dark-soft); text-decoration: none; font-size: .95rem; transition: color .2s ease; }
.nn-footer a:hover { color: var(--nn-accent); }
.nn-footer-blurb { font-size: .95rem; line-height: 1.65; max-width: 320px; }
.nn-footer-bottom { border-top: 1px solid var(--nn-line-dark); padding: 22px 0 26px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: .85rem; }

/* ==========================================================================
   16. FORMS (Elementor Pro form widget)
   ========================================================================== */
.nn-form input[type=text], .nn-form input[type=email], .nn-form input[type=tel], .nn-form textarea, .nn-form select {
  background: rgba(255,255,255,.06); border: 1px solid var(--nn-line-dark); border-radius: 12px; color: #fff; padding: 15px 16px; font-family: var(--nn-font-body); font-size: .98rem; transition: border-color .2s ease, box-shadow .2s ease;
}
.nn-form input:focus, .nn-form textarea:focus { border-color: var(--nn-primary); box-shadow: 0 0 0 3px rgba(23, 168, 227, .25); outline: none; }
.nn-form input::placeholder, .nn-form textarea::placeholder { color: rgba(255,255,255,.58); }
.nn-form .elementor-field-label { color: var(--nn-on-dark) !important; font-weight: 600; font-size: .88rem; }
.nn-form--light input[type=text], .nn-form--light input[type=email], .nn-form--light input[type=tel], .nn-form--light textarea { background: #fff; color: var(--nn-ink); border-color: var(--nn-line); }
.nn-form--light input::placeholder, .nn-form--light textarea::placeholder { color: var(--nn-ink-soft); }
.nn-form--light .elementor-field-label { color: var(--nn-ink) !important; }
.nn-form .elementor-button { width: 100%; justify-content: center; }
.nn-form-card { background: rgba(255,255,255,.05); border: 1px solid var(--nn-line-dark); border-radius: 20px; padding: 34px 30px; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 30px 70px -30px rgba(0,0,0,.55); }
.nn-form-card > h3 { color: #fff; margin: 0 0 6px; }
.nn-form-card > p { color: var(--nn-on-dark-soft); font-size: .92rem; margin: 0 0 20px; }

/* ==========================================================================
   17. LANDING PAGE EXTRAS
   ========================================================================== */
.nn-lp-hero { min-height: 92vh; min-height: 92svh; display: flex; align-items: center; }
.nn-guarantee { display: flex; gap: 18px; align-items: center; max-width: 760px; margin: 0 auto; padding: 24px 28px; border-radius: var(--nn-radius); border: 1px dashed rgba(53, 249, 160, .55); border-color: color-mix(in srgb, var(--nn-success) 55%, transparent); background: rgba(53, 249, 160, .07); background-color: color-mix(in srgb, var(--nn-success) 7%, transparent); }
.nn-guarantee::before { content: "🛡"; font-size: 1.8rem; }
.nn-sticky-cta { position: fixed; bottom: 16px; left: 16px; right: 16px; z-index: 998; display: none; }
@media (max-width: 720px) { .nn-sticky-cta { display: block; } .nn-sticky-cta .nn-btn { width: 100%; } }

/* ==========================================================================
   18. REVEAL ANIMATIONS
   ========================================================================== */
/* Reveal styles only apply once JS has confirmed itself (html.nn-js) — fail-open without JS. */
html.nn-js .nn-r { opacity: 0; transform: translateY(26px); transition: opacity .6s ease, transform .6s ease; }
html.nn-js .nn-r.nn-in { opacity: 1; transform: none; }
html.nn-js .nn-r2 { transition-delay: .1s; } html.nn-js .nn-r3 { transition-delay: .2s; } html.nn-js .nn-r4 { transition-delay: .3s; }
@media (prefers-reduced-motion: reduce) {
  html.nn-js .nn-r { opacity: 1; transform: none; transition: none; }
  .nn-marquee-track { animation: none; }
  .nn-orb--1, .nn-orb--2 { animation: none; }
}
:focus-visible { outline: 3px solid var(--nn-accent); outline-offset: 2px; }

/* Hello Biz / Elementor tidy-ups */
.nn-sec .elementor-widget:not(:last-child) { margin-bottom: 0; }
html { scroll-behavior: smooth; }

/* ==========================================================================
   19. ELEMENTOR CONTAINER OVERRIDES
   Elementor emits element-specific CSS (padding/width vars) that outranks
   single-class selectors, so container-based sections need !important.
   ========================================================================== */
.e-con.nn-sec { padding: clamp(56px, 3.5vw + 32px, 96px) 24px !important; }
.e-con.nn-sec--tight { padding: clamp(40px, 3vw + 24px, 64px) 24px !important; }
.e-con.nn-hero { padding-top: clamp(108px, 6vw + 52px, 156px) !important; padding-bottom: clamp(56px, 4vw, 84px) !important; }
.e-con.nn-lp-hero { padding-top: clamp(80px, 8vw, 120px) !important; padding-bottom: clamp(56px, 6vw, 90px) !important; }
.e-con.nn-wrap { max-width: var(--nn-container) !important; margin-left: auto !important; margin-right: auto !important; width: 100% !important; }
.e-con.nn-grid { display: grid !important; gap: 24px !important; }
.e-con.nn-grid-2 { grid-template-columns: repeat(2, 1fr) !important; }
.e-con.nn-lp-grid { gap: 44px !important; align-items: center !important; }
.e-con.nn-contact-grid { gap: 32px !important; align-items: stretch !important; }
.e-con.nn-card { padding: 34px 30px !important; }
.e-con.nn-form-card { padding: 34px 30px !important; display: block !important; }
@media (max-width: 900px) {
  .e-con.nn-grid-2 { grid-template-columns: 1fr !important; }
}

/* Asymmetric two-column prose layouts (heading | copy). Stacks on mobile. */
.nn-grid-2--offset { display: grid; grid-template-columns: 0.85fr 1.3fr; gap: clamp(28px, 4vw, 56px); align-items: start; }
@media (max-width: 860px) { .nn-grid-2--offset { grid-template-columns: 1fr; } }

/* ==========================================================================
   20. SMALL-SCREEN POLISH
   ========================================================================== */
@media (max-width: 640px) {
  .nn-sec, .e-con.nn-sec { padding-left: 18px !important; padding-right: 18px !important; }
  .nn-hero h1, .nn-hero .elementor-heading-title { font-size: clamp(2.1rem, 9vw, 2.6rem); }
  .nn-hero-ticks { gap: 12px; flex-direction: column; align-items: flex-start; }
  .nn-btn-row { width: 100%; }
  .nn-btn-row .nn-btn { width: 100%; justify-content: center; }
  .nn-btn--xl { padding: 17px 26px; font-size: 1rem; }
  .nn-cta-band { border-radius: 18px; }
  .nn-form-card, .e-con.nn-form-card { padding: 24px 20px !important; }
  .nn-faq summary { padding: 17px 18px; font-size: .98rem; }
  .nn-faq details > div { padding: 0 18px 18px; }
  .nn-stat b { font-size: 2rem; }
  .nn-compare > div { padding: 14px 16px; }
  .nn-footer { padding-top: 56px; }
}
@media (max-width: 560px) {
  .nn-header-in { gap: 10px; padding: 10px 14px; }
  .nn-header .nn-btn { padding: 11px 14px; font-size: .82rem; }
  .nn-logo b { font-size: 1.15rem; }
  .nn-logo svg { width: 28px; height: 28px; }
}
@media (max-width: 400px) {
  .nn-header .nn-btn { display: none; }
  .nn-stats { grid-template-columns: 1fr 1fr; gap: 12px; }
}

/* Guard against accidental horizontal scroll from decorative orbs */
.nn-sec, .nn-hero, .nn-footer { max-width: 100vw; }
body { overflow-x: hidden; }

/* Elementor Pro form button — outrank the kit/widget CSS */
.nn-form .elementor-button {
  background: var(--nn-primary) !important; color: var(--nn-on-primary) !important;
  border-radius: 14px !important; padding: 17px 30px !important;
  font-family: var(--nn-font-body) !important; font-size: 1.02rem !important; font-weight: 600 !important;
  box-shadow: 0 10px 26px -10px var(--nn-glow) !important; border: none !important;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease !important;
}
.nn-form .elementor-button:hover {
  background: var(--nn-primary-hover) !important; transform: translateY(-2px);
  box-shadow: 0 16px 34px -10px var(--nn-glow) !important;
}
.nn-form .elementor-field-group { margin-bottom: 14px; }