:root {
     --primary-color: #a24857;
     /* Maroon */
     /* --secondary-color: #F3EAE0; */
     --secondary-color: #111;
     /* Off White */
     --accent-color: #a24857;
     --background-color: #a24857;
     --text-color: #000;
     --text-color-2: #fff;
     --heading-color: #a24857;
     --heading-color-2: #000000;
     --hover-color: #bf5567;
     --stroke-color: #D4D4D4;
     --f-stroke-color: #ffffff80;
     --maroon: #A33A3A;
     --maroon-dark: #f34864;
     --bg: #fff7f8;
     --white: #ffffff;
     --ink: #222;
     --muted: #767676;
     --shadow-soft: 0 10px 28px rgba(0, 0, 0, .14);
     --shadow-strong: 0 18px 46px rgba(160, 22, 42, .35);
     --radius-xl: 22px;
     --font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
     --fast: .22s cubic-bezier(.25, .8, .25, 1);
     --med: .35s cubic-bezier(.23, 1, .32, 1);
     --background-light: #fafafa;
     --text-dark: #333;
     --text-light: #ffffff;
     --accent-blue: #007bff;
     --accent-green: #28a745;
     --text-dark: #1a1a1a;
      --bg-main: #f4f6f9;
      --shadow-light: rgba(0, 0, 0, 0.1);
      --shadow-heavy: rgba(0, 0, 0, 0.3);

      /* --maroon: #f06161; */
      --royal-blue: #1A3FA3;
      --dark-green: #1B6D1B;
      --cream: #fffaf0;
      --saffron: #FFB84D;
      --white-cream: #FFFFFF;
      --dark-green-light: #EAF9EA;


   }

   .hero {
     position: relative;
     background:
       linear-gradient(rgba(0, 60, 120, 0.5),
         rgba(0, 30, 60, 0.7)),
       url("/assets/images/home_3/1.png") center/cover no-repeat;
     color: #fff;
     text-align: center;
     min-height: 100vh;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
   }

   .hero button {
     position: absolute;
     bottom: 30%;
     left: 10%;
   }

   .full-height-section {
     height: 100vh;
     background-image: url('/assets/images/home_3/customer_say.png');
     background-size: cover;
     display: flex;
     color: white;
     font-family: Arial, sans-serif;
   }

   /* what our customer say */
   .review-section {
     /* background: linear-gradient(135deg, #dff1d9 0%, #b8e1d3 40%, #9dc5c3 70%, #a7bcb9 100%); */
     background-image: url(/assets/images/homepage_new_2/background_1.png);

     min-height: 600px;
     /* padding: 80px 0; */
     position: relative;
     overflow: hidden;
   }

   .review-section::before,
   .review-section::after {
     content: '';
     position: absolute;
     border-radius: 50%;
     background: rgba(255, 255, 255, 0.1);
     filter: blur(60px);
   }

   .review-section::before {
     width: 200px;
     height: 200px;
     top: 50px;
     left: 50px;
   }

   .review-section::after {
     width: 250px;
     height: 250px;
     bottom: 50px;
     right: 50px;
   }

   .review-quote {
     font-size: 2.5rem;
     font-weight: 300;
     line-height: 1.5;
     margin-bottom: 60px;
   }

   .review-card {
     background: #FAFAFA;
     border-radius: 24px;
     padding: 40px;
     margin: 15px;
     /* box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); */
     transition: transform 0.3s ease, box-shadow 0.3s ease;
   }

   .review-card:hover {
     transform: translateY(-5px);
     box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
   }

   .review-img {
     width: 100px;
     height: 100px;
     border-radius: 50%;
     object-fit: cover;
     border: 4px solid white;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
     margin-bottom: 24px;
   }

   .review-heading {
     font-size: 1.3rem;
     font-weight: 700;
     color: #2C3E50;
     margin-bottom: 16px;
   }

   .review-text {
     color: #5A6C7D;
     line-height: 1.8;
     font-size: 0.95rem;
   }

   /* what our customer say */

   .our-main-practices {
     /* background: linear-gradient(100deg, #f8f5f2 0%, #e5dfd8 25%, #cfd7d8 60%, #b0c5cb 100%); */
     background: linear-gradient(135deg, #dff1d9 0%, #b8e1d3 40%, #9dc5c3 70%, #a7bcb9 100%);

   }

   .our-main-practices {
     position: relative;
     /* background: linear-gradient(100deg, #f8f5f2, #e5dfd8, #cfd7d8, #b0c5cb); */
     background: linear-gradient(135deg, #dff1d9 0%, #b8e1d3 40%, #9dc5c3 70%, #a7bcb9 100%);

     background-size: 400% 400%;
     animation: softGradient 15s ease infinite;
   }

   @keyframes softGradient {
     0% {
       background-position: 0% 50%;
     }

     50% {
       background-position: 100% 50%;
     }

     100% {
       background-position: 0% 50%;
     }
   }

   /* ----------------------------------------------------- */


   /* ===================================== */




   /* ======================= */


   /* ---------hero section------------------- */
   /* .hero-section {
        position: relative;
        width: 100%;
        height: 100vh;
        overflow: hidden;
      }
    
      .hero-section .video-container {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
      }
    
      .hero-section video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
      } */

   /* Optional fine-tuning for mobile devices */
   @media (max-width: 1024px) {
     .hero-section {
       height: unset !important;
     }
   }

   /* ---------hero section------------------- */



   /* --- Section Gradient Background --- */
   .about-section {
     background: linear-gradient(135deg, #f8f9f8 0%, #d8d4cb 45%, #47596a 100%);
     /* background: linear-gradient(135deg, #f8f9f8, #d8d4cb, #47596a); */
     position: relative;
     overflow: hidden;
     color: #212529;
     /* animation: gradientMove 8s ease-in-out infinite; */
     /* background-size: 300% 300%; */
   }

   /* Keyframes for gradient animation */
   @keyframes gradientMove {
     0% {
       background-position: 0% 50%;
     }

     50% {
       background-position: 100% 50%;
     }

     100% {
       background-position: 0% 50%;
     }
   }


   /* --- Text Colors --- */
   .text-primary-dark {
     color: #8b3f4a;
     /* similar to your maroon heading */
   }

   /* --- Right Side Image --- */
   .about-img {
     aspect-ratio: 1 / 1;
     /* makes it a square*/
     width: 90%;
     /* fill the column width */
     border-radius: 2rem;
     border: solid 1px white;
     object-fit: cover;
     position: relative;
     z-index: 2;
   }

   /* Banner button positioning */
   .banner-btn {
     bottom: 50%;
     left: 50%;
   }

   /* Responsive scaling */
   @media (max-width: 991.98px) {
     .banner-btn {
       font-size: 0.95rem;
       padding: 0.5rem 1.5rem;
       bottom: 50%;
       left: 50%;
     }
   }

   @media (max-width: 575.98px) {
     .banner-btn {
       font-size: 0.4rem;
       padding: 0.2rem 0.2rem;
       bottom: 45%;
       left: 50%;
     }
   }

   /* ===== SUPERCHARGE YOUR OPERATIONS SECTION ===== */
   #startup-journey {
     /* --primary-color: #800000;
  --secondary-color: #111;
  --background-light: #f8f9fa;
  --text-light: #fff;
  --accent-light: #888; */

     padding: 80px 0;
     position: relative;
     overflow: hidden;
     background-image: url('/assets/images/homepage_new_2/background_1.png');

     /* background: linear-gradient(135deg, #f8f9fa 0%, #fff 50%, #fef6f6 100%); */
     font-family: "Inter", system-ui, sans-serif;
   }

   /* Decorative Gradient Blurs */
   #startup-journey::before,
   #startup-journey::after {
     content: "";
     position: absolute;
     border-radius: 50%;
     filter: blur(100px);
     opacity: 0.4;
     z-index: 0;
   }

   #startup-journey::before {
     width: 300px;
     height: 300px;
     background: radial-gradient(circle, #ffebee, transparent 70%);
     top: -100px;
     left: -100px;
   }

   #startup-journey::after {
     width: 400px;
     height: 400px;
     background: radial-gradient(circle, #e8eaf6, transparent 70%);
     bottom: -150px;
     right: -150px;
   }

   /* --- Headings --- */
   #startup-journey .journey-title {
     text-align: center;
     color: var(--primary-color);
     font-size: 2.5em;
     margin-bottom: 10px;
     font-weight: 800;
     letter-spacing: 0.5px;
   }

   #startup-journey .journey-subtitle {
     text-align: center;
     color: #555;
     font-size: 1.1em;
     margin-bottom: 50px;
     font-style: italic;
   }

   /* --- Timeline --- */
   #startup-journey .timeline-wrapper {
     position: relative;
     padding: 20px 0;
   }

   #startup-journey .timeline {
     list-style: none;
     padding: 0;
     margin: 0;
     position: relative;
   }

   #startup-journey .timeline-line {
     position: absolute;
     top: 0;
     left: 50%;
     width: 3px;
     height: 100%;
     background: linear-gradient(to bottom, var(--primary-color), var(--secondary-color));
     transform: translateX(-50%);
     z-index: 0;
     animation: line-draw 2s ease forwards;
   }

   @keyframes line-draw {
     from {
       height: 0;
     }

     to {
       height: 100%;
     }
   }

   /* --- Timeline Items --- */
   #startup-journey .timeline-item {
     position: relative;
     margin-bottom: 50px;
     width: 47%;
     padding: 18px 25px;
     cursor: pointer;
     background-color: var(--text-light);
     border-radius: 10px;
     border-left: 4px solid var(--primary-color);
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
     transition: transform 0.3s ease, box-shadow 0.3s ease;
     z-index: 1;
   }

   #startup-journey .timeline-item:hover {
     transform: translateY(-6px);
     box-shadow: 0 12px 25px rgba(128, 0, 0, 0.2);
     background-color: #fffafa;
   }

   #startup-journey .timeline-item:nth-child(even) {
     left: 53%;
     border-left: none;
     border-right: 4px solid var(--primary-color);
   }

   /* Timeline Dots */
   #startup-journey .timeline-item::after {
     content: '';
     position: absolute;
     width: 18px;
     height: 18px;
     border-radius: 50%;
     background-color: var(--primary-color);
     border: 4px solid var(--background-light);
     top: 35px;
     z-index: 2;
     transform: scale(0);
     animation: pop-in 1s ease forwards;
   }

   #startup-journey .timeline-item:nth-child(odd)::after {
     right: -28px;
   }

   #startup-journey .timeline-item:nth-child(even)::after {
     left: -28px;
   }

   @keyframes pop-in {
     to {
       transform: scale(1);
     }
   }

   /* --- Text --- */
   #startup-journey .stage-title {
     color: var(--secondary-color);
     font-weight: 700;
     font-size: 1.4em;
   }

   #startup-journey .stage-tagline {
     color: var(--accent-light);
     font-size: 0.85em;
     text-transform: uppercase;
   }

   #startup-journey .stage-problem {
     color: var(--primary-color);
     font-weight: 600;
     font-size: 0.95em;
     margin: 10px 0;
   }

   /* --- Buttons --- */
   #startup-journey .cta-button {
     background: var(--secondary-color);
     color: var(--text-light);
     border: none;
     padding: 8px 15px;
     border-radius: 6px;
     font-weight: 600;
     font-size: 0.9em;
     transition: all 0.3s ease;
   }

   #startup-journey .cta-button:hover {
     background: var(--primary-color);
     transform: translateY(-2px);
   }

   /* --- Results Panel --- */
   #startup-journey .results-panel {
     position: relative;
     width: 100%;
     margin-top: -30px;
     margin-bottom: 20px;
     background-color: #fff;
     border: 3px solid var(--secondary-color);
     border-radius: 15px;
     padding: 30px;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
     opacity: 0;
     transform: translateY(10px);
     max-height: 0;
     overflow: hidden;
     pointer-events: none;
     transition: opacity 0.4s ease, transform 0.4s ease, max-height 0.6s ease-in-out;
     z-index: 5;
   }

   #startup-journey .results-panel.visible {
     opacity: 1;
     transform: translateY(0);
     max-height: 1000px;
     pointer-events: all;
   }

   #startup-journey .results-title {
     color: var(--primary-color);
     font-size: 1.8em;
     border-bottom: 2px solid var(--secondary-color);
     padding-bottom: 6px;
     margin-bottom: 15px;
   }

   #startup-journey .service-suggestion-box {
     background-color: #fff0f0;
     border-left: 5px solid var(--primary-color);
     padding: 20px;
     margin: 20px 0;
     font-weight: 600;
     color: var(--secondary-color);
     line-height: 1.5;
     animation: pulse 1.8s infinite alternate;
   }

   @keyframes pulse {
     from {
       box-shadow: 0 0 0 0 rgba(128, 0, 0, 0.2);
     }

     to {
       box-shadow: 0 0 0 10px rgba(128, 0, 0, 0);
     }
   }

   #startup-journey .key-services-list {
     display: flex;
     flex-wrap: wrap;
     gap: 10px;
     margin-top: 15px;
   }

   #startup-journey .key-services-list span {
     background-color: var(--secondary-color);
     color: var(--text-light);
     padding: 7px 15px;
     border-radius: 20px;
     font-size: 0.9em;
     transition: background 0.3s ease;
   }

   #startup-journey .key-services-list span:hover {
     background-color: var(--primary-color);
   }

   /* --- CTA Links --- */
   #startup-journey .primary-cta-link {
     display: inline-block;
     margin-top: 15px;
     color: var(--primary-color);
     font-weight: bold;
     text-decoration: none;
     border-bottom: 2px dashed var(--primary-color);
     transition: color 0.3s, border-bottom 0.3s;
   }

   #startup-journey .primary-cta-link:hover {
     color: var(--secondary-color);
     border-bottom: 2px solid var(--secondary-color);
   }

   /* --- Close Button --- */
   #startup-journey .close-button {
     position: absolute;
     top: 15px;
     right: 20px;
     background: none;
     border: none;
     font-size: 2em;
     color: var(--accent-light);
     cursor: pointer;
     transition: color 0.3s, transform 0.3s;
   }

   #startup-journey .close-button:hover {
     color: var(--primary-color);
     transform: rotate(90deg);
   }

   /* --- Responsive --- */
   @media (max-width: 768px) {
     #startup-journey .journey-title {
       font-size: 2em;
     }

     #startup-journey .timeline-line {
       left: 20px;
       width: 2px;
     }

     #startup-journey .timeline-item,
     #startup-journey .timeline-item:nth-child(even) {
       width: 90%;
       left: 0;
       padding-left: 40px;
       border-right: none;
       border-left: 4px solid var(--primary-color);
       margin-left: auto;
       margin-right: auto;
     }

     #startup-journey .timeline-item::after {
       left: 10px;
       right: auto;
     }

     #startup-journey .results-panel {
       padding: 20px;
     }
   }



   /* steps how it work section */
   /* ========= SCOPED TO THIS SECTION ONLY ========= */
   .nlp-flow-section {
     /* --maroon:#a0162a;
  --maroon-dark:#7a0f20;
  --bg:#fff7f8;
  --white:#ffffff;
  --ink:#222;
  --muted:#767676;
  --shadow-soft:0 10px 28px rgba(0,0,0,.14);
  --shadow-strong:0 18px 46px rgba(160,22,42,.35);
  --radius-xl:22px;
  --font:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --fast:.22s cubic-bezier(.25,.8,.25,1);
  --med:.35s cubic-bezier(.23,1,.32,1); */
     background: var(--bg);
     /* background-image: url('/assets/images/homepage_new_2/background_1.png'); */

     font-family: var(--font);
     color: var(--ink);
     padding: 70px 0;
   }

   /* Header */
   .nlp-flow-section .flow-eyebrow {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     padding: 6px 14px;
     border-radius: 999px;
     border: 1px solid rgba(160, 22, 42, .24);
     background: #ffeef1;
     color: var(--maroon-dark);
     font-size: 11px;
   }

   /* .nlp-flow-section .flow-dot {
  width:8px;height:8px;border-radius:50%;background:var(--maroon);
  box-shadow:0 0 0 6px rgba(160,22,42,.16);
} */

   .nlp-flow-section .flow-dot {
     width: 8px;
     height: 8px;
     border-radius: 50%;
     background: var(--maroon, #a0162a);
     box-shadow: 0 0 0 6px rgba(160, 22, 42, 0.16);
     animation: blinkDot 1.2s infinite ease-in-out;
   }

   /* Blinking / pulsing effect */
   @keyframes blinkDot {

     0%,
     100% {
       opacity: 1;
       box-shadow: 0 0 0 6px rgba(160, 22, 42, 0.16);
     }

     50% {
       opacity: 0.3;
       box-shadow: 0 0 0 10px rgba(160, 22, 42, 0.3);
     }
   }


   .nlp-flow-section .flow-title {
     margin: 10px 0 4px;
     font-weight: 900;
     font-size: clamp(18px, 4vw, 28px);
     color: var(--maroon-dark);
   }

   .nlp-flow-section .flow-sub {
     margin: 0 0 22px;
     font-size: 14px;
     color: var(--muted);
     max-width: 720px;
   }
   .nlp-step-heading{
    max-width: 60%;
   }

   /* Layout */
   .nlp-flow-section .flow-grid {
     display: grid;
     grid-template-columns: minmax(0, 58%) minmax(0, 42%);
     /* gap:22px; */
     align-items: flex-start;
   }

   @media (max-width:991px) {
     .nlp-flow-section .flow-grid {
       grid-template-columns: 1fr;
     }
   }

   /* Stairs box */
   .nlp-flow-section .stairs-box {
     position: relative;
     padding: 18px 14px 22px;
     background: linear-gradient(135deg, #ffffff, #ffe4ea);
     border-radius: var(--radius-xl);
     box-shadow: var(--shadow-soft);
     overflow: hidden;
   }

   .nlp-flow-section .stairs-box::before {
     content: "";
     position: absolute;
     inset: -40%;
     background: radial-gradient(circle at 0 100%, rgba(160, 22, 42, .10), transparent 55%),
       radial-gradient(circle at 100% 0, rgba(160, 22, 42, .10), transparent 55%);
     mix-blend-mode: multiply;
     opacity: .9;
     pointer-events: none;
   }

   .nlp-flow-section .stairs-path {
     position: absolute;
     left: 18px;
     bottom: 16px;
     width: 3px;
     height: 78%;
     background: linear-gradient(to top, var(--maroon), transparent);
     border-radius: 999px;
     opacity: .18;
   }

   /* Stairs steps */
   .nlp-flow-section .stairs {
     list-style: none;
     margin: 0;
     padding: 0;
     position: relative;
     z-index: 2;
   }

   .nlp-flow-section .step {
     position: relative;
     width: 78%;
     margin-bottom: 11px;
     padding: 10px 12px 10px 40px;
     border-radius: 14px;
     background: var(--white);
     box-shadow: 0 6px 14px rgba(0, 0, 0, .06);
     display: flex;
     flex-direction: column;
     gap: 2px;
     cursor: pointer;
     transform-origin: left bottom;
     transition: transform var(--fast), box-shadow var(--fast), background var(--fast), color var(--fast);
   }

   .nlp-flow-section .step:nth-child(1) {
     transform: translate(0, 0);
   }

   .nlp-flow-section .step:nth-child(2) {
     transform: translate(22px, -4px);
   }

   .nlp-flow-section .step:nth-child(3) {
     transform: translate(44px, -8px);
   }

   .nlp-flow-section .step:nth-child(4) {
     transform: translate(66px, -12px);
   }

   .nlp-flow-section .step:nth-child(5) {
     transform: translate(88px, -16px);
   }

   .nlp-flow-section .step:nth-child(6) {
     transform: translate(110px, -20px);
   }

   .nlp-flow-section .step-index {
     position: absolute;
     left: 10px;
     top: 10px;
     width: 20px;
     height: 20px;
     border-radius: 999px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 11px;
     font-weight: 800;
     background: #ffe3ea;
     color: var(--maroon-dark);
   }

   .nlp-flow-section .step-title {
     font-size: 18px;
     font-weight: 800;
     color: var(--maroon-dark);
   }

   .nlp-flow-section .step-text {
     font-size: 16px;
     color: var(--muted);
     line-height: 1.4;
   }

   .nlp-flow-section .step:hover {
     transform: translateY(-4px) translateX(8px) scale(1.02);
     box-shadow: 0 10px 22px rgba(160, 22, 42, .16);
     background: linear-gradient(90deg, #fff7f8, #ffffff);
   }

   .nlp-flow-section .step.active {
     background: linear-gradient(90deg, var(--maroon), var(--maroon-dark));
     color: #fff;
     box-shadow: var(--shadow-strong);
     transform: translateY(-6px) translateX(14px) scale(1.03);
   }

   .nlp-flow-section .step.active .step-title,
   .nlp-flow-section .step.active .step-text {
     color: #fff;
   }

   .nlp-flow-section .step.active .step-index {
     background: #fff;
     color: var(--maroon-dark);
   }

   /* Avatars */
   .nlp-flow-section .avatars {
     position: absolute;
     right: 14px;
     bottom: 18px;
     display: flex;
     flex-direction: column;
     gap: 10px;
     z-index: 1;
     pointer-events: none;
   }

   .nlp-flow-section .avatar {
     width: 22px;
     height: 22px;
     border-radius: 9px;
     background: linear-gradient(145deg, #ffd2dd, var(--maroon));
     box-shadow: 0 3px 7px rgba(0, 0, 0, .16);
     animation: bob 2.1s ease-in-out infinite alternate;
   }

   .nlp-flow-section .avatar:nth-child(2) {
     animation-delay: .25s;
   }

   .nlp-flow-section .avatar:nth-child(3) {
     animation-delay: .5s;
   }

   @keyframes bob {
     to {
       transform: translateY(-4px);
     }
   }

   /* Hint box */
   .nlp-flow-section .right-hint {
     padding: 16px 14px;
     border-radius: var(--radius-xl);
     background: #ffffff;
     box-shadow: var(--shadow-soft);
     font-size: 16px;
     color: var(--muted);
   }

   .nlp-flow-section .right-hint strong {
     color: var(--maroon-dark);
   }

   .nlp-flow-section .right-hint .badge {
     display: inline-block;
     margin-top: 4px;
     padding: 4px 8px;
     border-radius: 999px;
     background: #ffeef1;
     color: var(--maroon-dark);
     font-size: 12px;
     font-weight: 700;
   }

   /* Panel */
   .nlp-flow-section .side-overlay {
     position: fixed;
     inset: 0;
     background: rgba(0, 0, 0, .26);
     opacity: 0;
     pointer-events: none;
     transition: opacity var(--fast);
     z-index: 1040;
   }

   .nlp-flow-section .side-overlay.active {
     opacity: 1;
     pointer-events: auto;
   }

   .nlp-flow-section .side-panel {
     position: fixed;
     top: 0;
     right: 0;
     width: 380px;
     max-width: 90vw;
     height: 100vh;
     background: #fff;
     box-shadow: -12px 0 40px rgba(0, 0, 0, .35);
     transform: translateX(100%);
     transition: transform var(--med);
     z-index: 1050;
     display: flex;
     flex-direction: column;
     border-radius: 18px 0 0 18px;
   }

   .nlp-flow-section .side-panel.open {
     transform: translateX(0);
   }

   .nlp-flow-section .side-panel-header {
     padding: 14px 16px 8px;
     border-bottom: 1px solid #f0d5dc;
     display: flex;
     justify-content: space-between;
     align-items: center;
   }

   .nlp-flow-section .side-label {
     font-size: 12px;
     text-transform: uppercase;
     letter-spacing: .16em;
     color: var(--maroon);
   }

   .nlp-flow-section .side-title {
     font-size: 16px;
     font-weight: 800;
     color: var(--maroon-dark);
   }

   .nlp-flow-section .side-close {
     border: none;
     background: none;
     color: #999;
     font-size: 22px;
     cursor: pointer;
     transition: color var(--fast), transform var(--fast);
   }

   .nlp-flow-section .side-close:hover {
     color: var(--maroon-dark);
     transform: scale(1.1);
   }

   .nlp-flow-section .side-panel-body {
     padding: 12px 16px 16px;
     font-size: 14px;
     color: var(--ink);
     overflow-y: auto;
   }

   .nlp-flow-section .side-pill {
     padding: 4px 9px;
     border-radius: 999px;
     border: 1px solid rgba(160, 22, 42, .16);
     font-size: 14px;
     color: var(--maroon-dark);
     background: #fff7f8;
     margin-right: 5px;
     margin-bottom: 5px;
     display: inline-block;
   }

   .nlp-flow-section .side-cta {
     display: inline-flex;
     align-items: center;
     gap: 6px;
     padding: 8px 12px;
     margin-top: 4px;
     border-radius: 999px;
     background: linear-gradient(90deg, var(--maroon), var(--maroon-dark));
     color: #fff;
     text-decoration: none;
     font-size: 10px;
     font-weight: 800;
     box-shadow: 0 8px 18px rgba(160, 22, 42, .45);
   }

   .nlp-flow-section #spTagline {
     font-size: 0.875rem;
     font-style: italic;
     color: #111;
     margin-bottom: 1.5rem;
     padding: 1rem;
     background: rgba(241, 245, 249, 0.5);
     border-radius: 0.5rem;
     border-left: 4px solid var(--maroon);
   }

   /* @media (max-width:768px){
  .nlp-flow-section .side-panel {
    width:100%;max-width:100%;left:0;right:0;
    height:auto;max-height:78vh;bottom:0;top:auto;
    border-radius:18px 18px 0 0;transform:translateY(100%);
    box-shadow:0 -16px 40px rgba(0,0,0,.46);
  }
  .nlp-flow-section .side-panel.open{transform:translateY(0);}
} */

   /* --- Mobile Optimization: Make steps stacked vertically --- */
   @media (max-width: 768px) {
     .nlp-flow-section .side-panel {
       width: 100%;
       max-width: 100%;
       left: 0;
       right: 0;
       height: auto;
       max-height: 78vh;
       bottom: 0;
       top: auto;
       border-radius: 18px 18px 0 0;
       transform: translateY(100%);
       box-shadow: 0 -16px 40px rgba(0, 0, 0, .46);
     }

     .nlp-flow-section .side-panel.open {
       transform: translateY(0);
     }

     .nlp-flow-section .stairs {
       display: flex;
       flex-direction: column;
       align-items: stretch;
       gap: 12px;
     }

     .nlp-flow-section .step {
       width: 100%;
       transform: none !important;
       margin-bottom: 0;
     }

     /* Remove staircase offset */
     .nlp-flow-section .step:nth-child(n) {
       transform: none;
     }

     /* Optional: soften spacing and shadows for smaller view */
     .nlp-flow-section .step {
       padding: 12px 14px 12px 40px;
       box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
     }

     .nlp-flow-section .stairs-path {
       display: none;
       /* hide the vertical connector line */
     }

     /* Avatar reposition */
     .nlp-flow-section .avatars {
       position: relative;
       flex-direction: row;
       justify-content: center;
       margin-top: 16px;
       bottom: 0;
       right: 0;
     }

     .nlp-flow-section .how-boy {
       display: none !important;
     }
   }


   /* --- How it Works Boy Image --- */
   .nlp-flow-section .how-boy {
     position: relative;
     display: flex;
     align-items: flex-end;
     justify-content: center;
     background: none;
     box-shadow: none;
     padding: 0;
     overflow: visible;
   }

   .nlp-flow-section .how-boy-img {
     max-width: 100%;
     height: auto;
     object-fit: contain;
     /* transform: translateY(20px); */
     /* animation: floatBoy 3s ease-in-out infinite alternate; */
   }

   /* Slight bobbing animation to give life */
   /* @keyframes floatBoy {
  0% { transform: translateY(20px); }
  100% { transform: translateY(10px); }
} */

   /* On large screens, position the boy closer to stairs box */
   @media (min-width: 992px) {
     .nlp-flow-section .how-boy {
       justify-content: flex-start;
       /* margin-left: -60px;  */
     }

     .nlp-flow-section .how-boy-img {
       /* width: 360px; */
       max-width: 100%;
     }
   }

   /* On small screens, center him below steps */
   @media (max-width: 991px) {
     .nlp-flow-section .how-boy {
       justify-content: center;
       margin-top: 30px;
     }

     .nlp-flow-section .how-boy-img {
       width: 280px;
     }
   }

   /* --- NLP Flow Section Decoration --- */
   .nlp-flow-section {
     position: relative;
     overflow: hidden;
     background: #ffffff;
   }

   /* Circular gradient decorations */
   .nlp-flow-section::before,
   .nlp-flow-section::after {
     content: "";
     position: absolute;
     border-radius: 50%;
     filter: blur(90px);
     opacity: 0.5;
     z-index: 0;
     animation: rotateCircle 20s linear infinite;
   }

   /* Top-right rainbow circle */
   .nlp-flow-section::before {
     bottom: -150px;
     right: -150px;
     width: 400px;
     height: 400px;
     /* background: conic-gradient( */
     /* from 0deg, */
     /* #ff005e, */
     /* #ff7b00, */
     /* #ffee00, */
     /* #33ff00, */
     /* #00ffee, */
     /* #007bff, */
     /* #a248ff, */
     /* #ff005e */
     /* ); */
     background: radial-gradient(circle at center, #007fff, transparent 70%);

   }

   /* Bottom-left rainbow circle */
   .nlp-flow-section::after {
     top: -150px;
     left: -150px;
     width: 350px;
     height: 350px;
     /* background: conic-gradient(
    from 90deg,
    #ff005e,
  ); */

     background: radial-gradient(circle at center, #ff0846, transparent 70%);


     /* #007bff, */
     /* #00ffee, */
     /* #33ff00, */
     /* #ffee00, */
     /* #ff7b00, */
     /* #ff005e, */
     /* #a248ff, */
     /* #007bff */
     /* ); */
   }

   /* Rotation animation for glow circles */
   @keyframes rotateCircle {
     0% {
       transform: rotate(0deg);
     }

     100% {
       transform: rotate(360deg);
     }
   }

   /* --- Stairs Box styling (main white box) --- */
   .stairs-box {
     position: relative;
     background: #ffffff;
     border-radius: 20px;
     box-shadow: 0 0 40px rgba(162, 72, 87, 0.2);
     z-index: 1;
     overflow: hidden;
   }

   /* Animated circular glow behind stairs-box */
   .stairs-box::before {
     content: "";
     position: absolute;
     top: 50%;
     left: 50%;
     width: 300px;
     height: 300px;
     background: radial-gradient(circle, rgba(162, 72, 87, 0.25) 0%, rgba(162, 72, 87, 0) 70%);
     border-radius: 50%;
     transform: translate(-50%, -50%) scale(1);
     z-index: -1;
     animation: pulseShadow 6s ease-in-out infinite;
   }

   /* Subtle breathing animation for glow */
   @keyframes pulseShadow {

     0%,
     100% {
       transform: translate(-50%, -50%) scale(1);
       opacity: 0.7;
     }

     50% {
       transform: translate(-50%, -50%) scale(1.4);
       opacity: 0.3;
     }
   }

   /* --- Optional: Make boy image float slightly --- */
   .how-boy-img {
     animation: floatBoy 4s ease-in-out infinite alternate;
   }

   @keyframes floatBoy {
     from {
       transform: translateY(0);
     }

     to {
       transform: translateY(-8px);
     }
   }

   /* Responsive tweak - remove circles on mobile if too bright */
   @media (max-width: 768px) {

     .nlp-flow-section::before,
     .nlp-flow-section::after {
       opacity: 0.2;
       filter: blur(40px);
     }
   }



   /* ========= SCOPED TO THIS SECTION ONLY ========= */






   /* =========================================
   JOIN US SECTION (Responsive + Polished)
   ========================================= */
   /* :root {
  --primary-color: #800000;
  --secondary-color: #111; 
  --background-light: #fafafa;
  --text-dark: #333;
  --text-light: #ffffff;
  --accent-green: #28a745;
  --accent-blue: #007bff;
} */
   /* --- Section Container with Abstract Rainbow + Glass Effect --- */
   .join-us-section {
     position: relative;
     overflow: hidden;
     padding: 80px 0;
     background: linear-gradient(135deg,
         rgba(255, 0, 150, 0.15),
         rgba(255, 140, 0, 0.15),
         rgba(0, 200, 255, 0.15),
         rgba(0, 255, 150, 0.15)),
       radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.5), transparent 50%),
       radial-gradient(circle at 80% 70%, rgba(255, 255, 255, 0.3), transparent 50%),
       #fafafa;
     background-size: 300% 300%;
     animation: rainbowShift 18s ease infinite;
   }

   /* Smoothly shift gradient hues */
   @keyframes rainbowShift {
     0% {
       background-position: 0% 50%;
     }

     50% {
       background-position: 100% 50%;
     }

     100% {
       background-position: 0% 50%;
     }
   }

   /* Glassmorphism overlay for inner content */
   #professional-onboarding {
     position: relative;
     /* background: rgba(255, 255, 255, 0.6); */
     /* backdrop-filter: blur(14px) saturate(140%); */
     /* -webkit-backdrop-filter: blur(14px) saturate(140%); */
     border-radius: 24px;
     /* box-shadow: 0 8px 40px rgba(0, 0, 0, 0.15); */
     /* padding: 50px 30px; */
   }

   /* Keep content aligned and shadow smooth */
   .join-us-section .row {
     z-index: 2;
     position: relative;
   }

   /* Add abstract pattern bubbles */
   .join-us-section::before,
   .join-us-section::after {
     content: "";
     position: absolute;
     width: 300px;
     height: 300px;
     border-radius: 50%;
     filter: blur(80px);
     z-index: 0;
     opacity: 0.5;
     transition: all 0.5s ease;
   }

   .join-us-section::before {
     top: -60px;
     left: -80px;
     /* background: radial-gradient(circle at center, #ffb3c6, transparent 70%); */
     background: radial-gradient(circle at center, #ff0846, transparent 70%);
   }

   .join-us-section::after {
     bottom: -60px;
     right: -80px;
     background: radial-gradient(circle at center, #007fff, transparent 70%);
   }


   /* --- Section Container --- */
   .join-us-section {
     background: var(--background-light);
     padding: 80px 0;
   }

   /* Left Image */
   .join-us-section .image-rect {
     width: 100%;
     width: 400px;
     height: 100%;
     height: 600px;
     object-fit: cover;
     border-radius: 1.5rem;
     box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
     background-position: center;
     background-size: cover;
   }

   #professional-onboarding {
     /* background: var(--background-light); */
   }

   /* --- Onboarding Header --- */
   .onboarding-header {
     text-align: center;
     margin-bottom: 40px;
   }

   .onboarding-header h2 {
     font-size: 2.25rem;
     color: var(--primary-color);
     font-weight: 700;
     margin-bottom: 10px;
   }

   .onboarding-header p {
     color: var(--secondary-color);
     font-size: 1.1rem;
   }

   /* --- Tabs Navigation --- */
   .tab-nav {
     display: flex;
     justify-content: center;
     border-bottom: 2px solid #ddd;
     margin-bottom: 25px;
     flex-wrap: wrap;
     gap: 8px;
   }

   .tab-button {
     background: none;
     border: none;
     padding: 12px 22px;
     font-size: 1.05rem;
     font-weight: 600;
     color: var(--text-dark);
     cursor: pointer;
     transition: all 0.3s ease;
     border-bottom: 3px solid transparent;
     border-radius: 6px 6px 0 0;
   }

   .tab-button:hover {
     color: var(--primary-color);
     /* background-color: #fff8f8; */
     border-bottom: 3px solid var(--primary-color);

   }

   .tab-button.active {
     color: var(--primary-color);
     background-color: #fffafa;
     border-bottom: 3px solid var(--primary-color);
   }

   /* --- Tab Content Area --- */
   /* .tab-content {
  background: #ffffff;
  padding: 35px;
  border-radius: 10px;
  box-shadow: 0 6px 25px rgba(255, 1, 1, 0.1);
  min-height: 320px;
} */

   .tab-content {
     background: #ffffff;
     padding: 35px;
     border-radius: 10px;
     position: relative;
     overflow: hidden;
     min-height: 320px;
     z-index: 1;
     /* subtle zoom animation */
     /* animation: zoomPulse 4s ease-in-out infinite; */
     /* box-shadow: 0 6px 25px rgba(255, 1, 1, 0.1); */
   }

   /* create animated circular shadow */
   .tab-content::before {
     content: "";
     position: absolute;
     inset: 0;
     border-radius: inherit;
     /* box-shadow: 0 0 30px 10px rgba(255, 1, 1, 0.25); */
     /* box-shadow: 0 0 30px 10px rgb(162, 72, 87, 63%); */
     box-shadow: 0 0 30px 10px rgb(255, 0, 43, 63%);

     /* rgba(162, 72, 87, 1) */

     /* animation: rotateGlow 6s linear infinite; */
     transform-origin: center;
     z-index: -1;
     filter: blur(12px);
     animation: zoomPulse 4s ease-in-out infinite;


   }

   /* rotate the glowing shadow */
   @keyframes rotateGlow {
     0% {
       box-shadow: 30px 0 40px rgba(255, 1, 1, 0.25);
     }

     25% {
       box-shadow: 0 30px 40px rgba(255, 1, 1, 0.25);
     }

     50% {
       box-shadow: -30px 0 40px rgba(255, 1, 1, 0.25);
     }

     75% {
       box-shadow: 0 -30px 40px rgba(255, 1, 1, 0.25);
     }

     100% {
       box-shadow: 30px 0 40px rgba(255, 1, 1, 0.25);
     }
   }

   /* zoom-in / zoom-out breathing effect */
   @keyframes zoomPulse {

     0%,
     100% {
       transform: scale(1);
     }

     50% {
       transform: scale(1.03);
     }
   }

   .tab-pane {
     display: none;
     animation: fadeIn 0.4s ease-out;
   }

   .tab-pane.active {
     display: block;
   }

   @keyframes fadeIn {
     from {
       opacity: 0;
       transform: translateY(8px);
     }

     to {
       opacity: 1;
       transform: translateY(0);
     }
   }

   /* --- Benefits Grid --- */
   .benefit-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
     gap: 20px;
     margin-top: 20px;
   }

   .benefit-item {
     padding: 20px;
     border: 1px solid #eee;
     border-radius: 10px;
     background: #fcfcfc;
     transition: all 0.3s ease;
   }

   .benefit-item:hover {
     background: #fff6f6;
     border-color: var(--primary-color);
     transform: translateY(-3px);
   }

   .benefit-item h4 {
     color: var(--primary-color);
     margin-bottom: 6px;
     font-size: 1.1rem;
     font-weight: 600;
   }

   .benefit-item h4::before {
     content: '♦';
     margin-right: 8px;
     color: var(--secondary-color);
   }

   /* --- Process Steps --- */
   .process-step {
     display: flex;
     align-items: flex-start;
     margin-bottom: 25px;
     position: relative;
   }

   .process-step:not(:last-child)::before {
     content: '';
     position: absolute;
     left: 20px;
     top: 45px;
     bottom: -5px;
     width: 2px;
     background: #ddd;
   }

   .step-icon {
     background-color: var(--primary-color);
     color: var(--text-light);
     width: 40px;
     height: 40px;
     border-radius: 50%;
     display: flex;
     justify-content: center;
     align-items: center;
     font-weight: 700;
     font-size: 1.1rem;
     margin-right: 18px;
     flex-shrink: 0;
     z-index: 1;
     box-shadow: 0 3px 8px rgba(128, 0, 0, 0.3);
   }

   .process-step h4 {
     color: var(--secondary-color);
     margin: 0 0 5px;
     font-size: 1.1rem;
     font-weight: 600;
   }

   .process-step p {
     margin: 0;
     color: #555;
     font-size: 0.95rem;
   }

   /* --- Signup CTA Section --- */
   .signup-form-container {
     max-width: 550px;
     margin: 25px auto;
     text-align: center;
   }

   .signup-form-container h3 {
     color: var(--primary-color);
     font-weight: 700;
     margin-bottom: 10px;
   }

   .cta-icon-group {
     display: flex;
     flex-direction: column;
     gap: 15px;
     margin-top: 25px;
   }

   /* Primary CTA Button */
   .cta-link {
     display: flex;
     align-items: center;
     justify-content: center;
     background-color: var(--accent-green);
     color: var(--text-light);
     padding: 14px 18px;
     font-size: 1.1rem;
     font-weight: 600;
     border-radius: 8px;
     text-decoration: none;
     transition: all 0.3s ease;
   }

   .cta-link:hover {
     background-color: #1e7e34;
     transform: translateY(-2px);
   }

   /* Secondary Query Button */
   .query-link {
     display: flex;
     align-items: center;
     justify-content: center;
     background-color: var(--text-light);
     color: var(--accent-blue);
     border: 2px solid var(--accent-blue);
     padding: 13px 18px;
     font-size: 1rem;
     font-weight: 600;
     border-radius: 8px;
     text-decoration: none;
     transition: all 0.3s ease;
   }

   .query-link:hover {
     background-color: var(--accent-blue);
     color: var(--text-light);
   }

   /* --- Responsive Tweaks --- */
   @media (min-width: 768px) {
     .cta-icon-group {
       flex-direction: row;
     }

     .cta-link,
     .query-link {
       flex: 1;
     }
   }

   @media (max-width: 767px) {
     .onboarding-header h2 {
       font-size: 1.8rem;
     }

     .tab-content {
       padding: 25px 20px;
     }

     .tab-button {
       font-size: 0.95rem;
       padding: 10px 15px;
     }

     .process-step {
       margin-bottom: 20px;
     }

     .benefit-grid {
       gap: 15px;
     }
   }

   /* 9 step roadmap section */
    /* Scoped to this section only */
    .legal-lifecycle-section {

      font-family: 'Poppins', sans-serif;
      background-color: var(--bg-main);
      color: var(--text-dark);
      line-height: 1.6;
      padding: 20px 0;
    }

    /* .legal-lifecycle-section .container {
      max-width: 1200px;
      margin: auto;
      padding: 20px;
    } */

    /* --- Header Styles --- */
    .legal-lifecycle-section h1 {
      color: var(--royal-blue);
      text-align: center;
      margin-bottom: 5px;
      font-size: 2.5em;
      font-weight: 700;
      text-shadow: 1px 1px 3px var(--shadow-light);
    }

    .legal-lifecycle-section h2 {
      text-align: center;
      color: #444;
      font-size: 1.3em;
      margin-bottom: 40px;
      font-weight: 400;
    }

    /* --- Category Selector --- */
    .legal-lifecycle-section .category-selector {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
      gap: 15px;
      margin-bottom: 40px;
    }

    .legal-lifecycle-section .category-selector button {
      background-color: #ffffff;
      border: 2px solid #dee2e6;
      border-radius: 10px;
      padding: 15px 10px;
      cursor: pointer;
      font-size: 0.95em;
      font-weight: 600;
      transition: all 0.3s ease;
      box-shadow: 0 4px 10px var(--shadow-light);
      text-align: center;
      color: var(--text-dark);
    }

    .legal-lifecycle-section .category-selector button:hover {
      transform: translateY(-5px) scale(1.03);
      box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15);
    }

    .legal-lifecycle-section .category-selector button.active {
      border-width: 4px;
      font-weight: 800;
    }

    /* Category button colors */
    .legal-lifecycle-section #btn-startup {
      /* background-color: var(--maroon); */
      background-color: white;
      color: var(--maroon);
      border-color: var(--maroon);
    }
    .legal-lifecycle-section #btn-msme {
      /* background-color: var(--royal-blue); */
      background-color: white;
      color: var(--royal-blue);
      border-color: var(--royal-blue);
    }
    .legal-lifecycle-section #btn-individual {
      /* background-color: var(--cream); */
      background-color: white;
      color: var(--dark-green);
      border-color: var(--dark-green);
    }
    .legal-lifecycle-section #btn-salaried {
      /* background-color: var(--dark-green); */
      background-color: white;

      color: var(--dark-green);
      border-color: var(--dark-green);
    }
    .legal-lifecycle-section #btn-woman {
      /* background-color: var(--maroon); */
      background-color: white;

      color: var(--maroon);
      border-color: var(--maroon);
    }
    .legal-lifecycle-section #btn-nri {
      /* background-color: var(--saffron); */
      background-color: white;

      color: var(--saffron);
      border-color: var(--saffron);
    }

    /* --- Dynamic Content Area --- */
    .legal-lifecycle-section #content-area {
      /* min-height: 400px;
      padding: 30px;
      border-radius: 15px;
      box-shadow: 0 10px 30px var(--shadow-heavy);
      background: linear-gradient(145deg, #ffffff, #f0f2f5); */
      display: none;
    }

    #close-content-area {
      font-size: 14px;
      padding: 4px 10px;
    }




    .legal-lifecycle-section .section-header {
      text-align: center;
      margin-bottom: 40px;
      padding-bottom: 15px;
      border-bottom: 4px solid;
    }

    .legal-lifecycle-section .section-header h3 {
      margin: 0;
      font-size: 2.2em;
      font-weight: 800;
      color: var(--text-dark);
    }

    .legal-lifecycle-section .section-header p {
      margin: 5px 0 0;
      color: #7f8c8d;
      font-style: italic;
      font-weight: 300;
    }

    /* --- 9-Point Grid --- */
    .legal-lifecycle-section .life-cycle-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 30px;
    }

    .legal-lifecycle-section .life-cycle-card {
      --card-color: var(--primary-color);
      /* --card-bg: var(--secondary-color); */
      --card-bg: var(--white)


      border-radius: 12px;
      box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
      transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.4s ease;
      cursor: pointer;
      overflow: hidden;
      background-color: var(--card-bg);
      border: 1px solid var(--card-color);
      position: relative;
    }

    .legal-lifecycle-section .life-cycle-card:hover {
      transform: translateY(-8px) scale(1.02);
      box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
      animation: pulse-border 1.5s infinite alternate;
    }

    @keyframes pulse-border {
      from {
        box-shadow: 0 0 0 0px var(--card-color);
      }
      to {
        box-shadow: 0 0 0 5px rgba(255, 255, 255, 0),
          0 0 0 10px rgba(255, 255, 255, 0),
          0 0 0 15px rgba(255, 255, 255, 0);
      }
    }

    .legal-lifecycle-section .life-cycle-card.active {
      transform: translateY(0) scale(0.98);
      box-shadow: 0 0 0 5px var(--card-color);
    }

    .legal-lifecycle-section .card-header {
      padding: 15px 20px;
      font-weight: 700;
      color: var(--header-text-color);
      background-color: var(--card-color);
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 1.1em;
      border-bottom: 2px solid rgba(255, 255, 255, 0.2);
    }

    .legal-lifecycle-section .card-body {
      padding: 20px;
      /* background-color: var(--card-bg); */
      background-color: white;

      color: var(--text-dark);
    }

    .legal-lifecycle-section .card-body strong {
      display: block;
      margin-bottom: 10px;
      font-size: 1em;
      font-weight: 600;
      color: var(--text-dark);
    }

           /* New: Styling for the Challenge and Advice */
        .card-body .challenge-text {
            display: block;

            font-size: 0.9em;

            font-weight: 600;

            color: var(--text-dark); /* Dark text for readability */

            margin-bottom: 10px;
        }

         .card-body .solution-prompt {

            display: block;

            font-size: 0.8em;

            font-weight: 700;

            color: var(--maroon);

            text-decoration: underline;

            cursor: pointer;

        }
       
        /* .card-body .short-advice {
            display: block; 
            font-size: 0.9em;
            font-style: italic;
            color: var(--text-dark);
            opacity: 0.8;
            margin-bottom: 15px;
        }
       
        .card-body .opinion-text {
            display: block;
            font-size: 0.9em;
            font-style: normal;
            font-weight: 400;
            opacity: 0.9;
            border-top: 1px dashed #adb5bd;
            padding-top: 10px;
        }

    .legal-lifecycle-section .card-body em {
      display: block;
      font-size: 0.9em;
      color: var(--text-dark);
      opacity: 0.8;
      font-style: normal;
    } */

    /* --- Pop-up Panel Styles (The Modal) --- */

        .modal-backdrop {

            position: fixed;

            top: 0;

            left: 0;

            width: 100%;

            height: 100%;

            background-color: rgba(0, 0, 0, 0.8); /* Dark semi-transparent background */

            display: flex;

            justify-content: center;

            align-items: center;

            z-index: 2000; /* Ensure it's above everything */

            opacity: 0;

            transition: opacity 0.3s ease-out;

        }

        .modal-backdrop.visible {

            opacity: 1;

        }

 

        .modal-content {

            background-color: var(--text-light);

            border-radius: 10px;

            box-shadow: 0 4px 20px var(--shadow-heavy);

            width: 90%;

            max-width: 700px;

            max-height: 90vh;

            overflow-y: auto;

            animation: fadeInScale 0.3s ease-out;

            border: 5px solid var(--panel-border-color, var(--royal-blue)); /* Dynamic border */

            padding: 25px;

        }

 

        @keyframes fadeInScale {

            from { opacity: 0; transform: scale(0.9); }

            to { opacity: 1; transform: scale(1); }

        }

 

        .modal-header {

            display: flex;

            justify-content: space-between;

            align-items: center;

            border-bottom: 1px solid #ddd;

            padding-bottom: 15px;

            margin-bottom: 20px;

        }

 

        .modal-header h3 {

            margin: 0;

            font-size: 1.5em;

            color: var(--royal-blue);

        }

 

        .modal-close {

            font-size: 2em;

            font-weight: 300;

            cursor: pointer;

            line-height: 1;

            padding: 0 5px;

        }

       

        .modal-body strong {

            font-size: 1.1em;

            margin-top: 15px;

            margin-bottom: 8px;

            display: block;

        }

 

        .modal-body .lawyer-advice-box {

            background-color: var(--panel-secondary-color);

            border-left: 6px solid var(--panel-border-color);

            padding: 25px;

            margin: 25px 0;

            font-size: 1em;

            color: var(--text-dark);

            line-height: 1.5;

            border-radius: 5px;

        }

       

        /* The Quick Fix text */

        .modal-body .quick-fix-text {

            font-style: italic;

            color: var(--dark-green);

            font-weight: 600;

            margin-bottom: 15px;

        }

 

        .lawyer-advice-box strong {

            font-size: 1.2em;

            color: var(--panel-border-color);

        }

        /* End Modal Styles */



     .key-services-list {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 20px;
    }

     .key-services-list span {
      background-color: var(--panel-border-color);
      color: var(--service-text-color);
      padding: 8px 18px;
      border-radius: 25px;
      font-size: 0.9em;
      font-weight: 600;
      transition: transform 0.2s;
    }

     .key-services-list span:hover {
      transform: scale(1.05);
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    }

    /* --- CTA Buttons --- */
     #dynamic-cta-container {
      margin-top: 30px;
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
    }

     .panel-cta-button {
      display: inline-block;
      border: none;
      padding: 15px 30px;
      border-radius: 8px;
      cursor: pointer;
      font-weight: bold;
      font-size: 1.2em;
      text-decoration: none;
      transition: background 0.3s ease, transform 0.2s;
      text-align: center;
    }

     .primary-cta {
      background: var(--panel-border-color);
      color: var(--service-text-color);
    }

     .primary-cta:hover {
      background: var(--text-dark);
      transform: translateY(-3px);
      box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
      color: var(--text-light) !important;
    }

     .secondary-cta {
      background: #ced4da;
      color: var(--text-dark);
      border: 1px solid #adb5bd;
    }

     .secondary-cta:hover {
      background: #adb5bd;
      transform: translateY(-3px);
      box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
      color: var(--text-dark) !important;
    }

     .close-button {
      position: absolute;
      top: 15px;
      right: 20px;
      background: none;
      border: none;
      font-size: 2.5em;
      color: #bdc3c7;
      cursor: pointer;
      transition: color 0.3s, transform 0.3s;
      z-index: 11;
    }

     .close-button:hover {
      color: var(--panel-border-color);
      transform: rotate(180deg) scale(1.1);
    }




    /* --- Mobile --- */

    @media (min-width: 992px) {
  .click-category {
    display: none !important;
  }
}

    @media (max-width: 768px) {
      .legal-lifecycle-section h1 {
        font-size: 2em;
      }
      .legal-lifecycle-section h2 {
        font-size: 1em;
        margin-bottom: 30px;
      }
      .legal-lifecycle-section .category-selector {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
      }
      .legal-lifecycle-section .life-cycle-grid {
        grid-template-columns: 1fr;
      }
      .legal-lifecycle-section .results-panel {
        padding: 20px;
      }
      .legal-lifecycle-section .results-title {
        font-size: 1.5em;
      }
      .legal-lifecycle-section #dynamic-cta-container {
        flex-direction: column;
        gap: 10px;
      }
      .legal-lifecycle-section .panel-cta-button {
        width: 100%;
        padding: 10px 20px;
        font-size: 1em;
      }
      /* Hide girl image on small screens */
      .girl-col {
        display: none !important;
      }
    }
    /* --- Responsive Support: Small Screens --- */
@media (max-width: 480px) {
  .legal-lifecycle-section .results-panel {
    padding: 18px;
    border-width: 3px;
    border-radius: 10px;
  }

  .legal-lifecycle-section .results-title {
    font-size: 1.4em;
    line-height: 1.3;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
  }

  .legal-lifecycle-section .results-problem-text {
    font-size: 1em;
    line-height: 1.4;
  }

  .legal-lifecycle-section .lawyer-advice-box {
    padding: 15px;
    font-size: 0.95em;
  }

  .legal-lifecycle-section .lawyer-advice-box strong {
    font-size: 1.05em;
  }

  .legal-lifecycle-section .key-services-list {
    flex-direction: column;
    gap: 8px;
  }

  .legal-lifecycle-section .key-services-list span {
    display: inline-block;
    width: 100%;
    text-align: center;
    padding: 10px;
    border-radius: 8px;
  }

  .legal-lifecycle-section #dynamic-cta-container {
    flex-direction: column;
    gap: 12px;
    margin-top: 25px;
  }

  .legal-lifecycle-section .panel-cta-button {
    width: 100%;
    font-size: 1em;
    padding: 12px 16px;
    border-radius: 6px;
  }

  .legal-lifecycle-section .close-button {
    top: -2px;
    right: 2px;
    font-size: 2em;
  }
}

/* --- Extra Small Devices (320px and below) --- */
@media (max-width: 360px) {
  .legal-lifecycle-section .results-panel {
    padding: 14px;
  }

  .legal-lifecycle-section .results-title {
    font-size: 1.2em;
  }

  .legal-lifecycle-section .results-problem-text {
    font-size: 0.9em;
  }

  .legal-lifecycle-section .lawyer-advice-box {
    font-size: 0.9em;
  }

  .legal-lifecycle-section .key-services-list span {
    font-size: 0.85em;
    padding: 8px;
  }

  .legal-lifecycle-section .panel-cta-button {
    font-size: 0.95em;
    padding: 10px 14px;
  }

  .legal-lifecycle-section .close-button {
    font-size: 1.8em;
  }
  .legal-lifecycle-section .results-panel.visible {
    max-height: unset;
  }

  .legal-lifecycle-section .section-header h3{
    font-size: 1.5rem;
  }
}

/* youtube video style section  */
  /* Section base */
  .video-section {
    background: #f7f7f7;
    padding: 40px 20px;
    text-align: center;
  }

  .video-section h2 {
    color: #111;
    font-weight: 700;
  }

  /* --- TV Frame --- */
  .tv-frame {
    position: relative;
    display: inline-block;
    background: #111;
    border: 10px solid #222;
    border-radius: 20px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
    overflow: hidden;
    max-width: 700px;
    aspect-ratio: 16 / 9;
    margin: 40px auto;
  }

  /* Inner screen (video thumbnail) */
  .tv-screen img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
    display: block;
  }

  /* TV base stand */
  .tv-stand {
    width: 120px;
    height: 10px;
    background: #222;
    border-radius: 2px;
    margin: 10px auto 0;
  }

  .tv-stand::after {
    content: "";
    display: block;
    width: 60px;
    height: 6px;
    background: #333;
    border-radius: 1px;
    margin: 4px auto 0;
  }

  /* Play button */
  .play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, 0.9);
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .play-btn:hover {
    background: #fff;
    transform: translate(-50%, -50%) scale(1.05);
  }

  .play-btn i {
    font-size: 2.5rem;
    color: #000;
  }

  /* Modal video (Bootstrap still used) */
  .modal-content.bg-dark {
    background: #000 !important;
    border: none;
  }

  @media (max-width: 768px) {
    .tv-frame {
      max-width: 90%;
    }

    .play-btn {
      width: 60px;
      height: 60px;
    }
  }
/* youtube video style section  */

/* Why risk-averse users choose us */
  :root {
    --nl-tw-bg: #ffffff;
    --nl-tw-border: #e5e7eb;
    --nl-tw-text: #000000;
    --nl-tw-soft: #111827;
    --nl-tw-muted: #4b5563;
    --nl-tw-accent: #7b1f2f;
    --nl-tw-accent-soft: #fdf2f4;
    --nl-tw-accent-soft-border: #f4c2cf;
    --nl-tw-radius-xl: 24px;
    --nl-tw-radius-md: 14px;
    --nl-tw-shadow-soft: 0 14px 40px rgba(15,23,42,0.10);
    --nl-tw-shadow-pill: 0 8px 22px rgba(15,23,42,0.10);
    --nl-tw-font: system-ui, -apple-system, BlinkMacSystemFont, -system-ui, sans-serif;
    --nl-tw-transition: 0.22s cubic-bezier(.3,.13,.23,.95);
  }

  .nl-trust-wall {
    padding: 40px 16px 56px;
    background: radial-gradient(circle at top, #fdf2f4 0%, #ffffff 42%, #f9fafb 100%);
    font-family: var(--nl-tw-font);
    color: var(--nl-tw-text);
  }

  .nl-tw-inner {
    max-width: 1240px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1.8fr) minmax(0, 1.6fr);
    gap: 28px;
    align-items: stretch;
  }

  @media (max-width: 900px) {
    .nl-tw-inner {
      grid-template-columns: 1fr;
      gap: 22px;
    }
  }

  /* LEFT */

  .nl-tw-left {
    background: var(--nl-tw-bg);
    border-radius: var(--nl-tw-radius-xl);
    border: 1px solid var(--nl-tw-border);
    box-shadow: var(--nl-tw-shadow-soft);
    padding: 18px 18px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .nl-tw-kicker {
    font-size: 1rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--nl-tw-accent);
    font-weight: 600;
  }

  .nl-tw-title-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: flex-end;
  }

  .nl-tw-title {
    font-size: clamp(1.6rem, 2.4vw, 2rem);
    font-weight: 700;
    margin: 0;
  }

  .nl-tw-tagline {
    font-size: 1rem;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--nl-tw-accent-soft);
    color: var(--nl-tw-accent);
    border: 1px solid var(--nl-tw-accent-soft-border);
    box-shadow: var(--nl-tw-shadow-pill);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
  }

  .nl-tw-sub {
    font-size: 1rem;
    color: var(--nl-tw-text);
    max-width: 40rem;
    margin: 0;
  }

  /* Skeptic toggle */

  .nl-tw-skeptic-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
    font-size: 1rem;
    color: var(--nl-tw-text);
    padding: 4px 8px;
    border-radius: 999px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    cursor: pointer;
    transition: all var(--nl-tw-transition);
  }

  .nl-tw-skeptic-toggle-switch {
    width: 22px;
    height: 12px;
    border-radius: 999px;
    background: #e5e7eb;
    position: relative;
    flex-shrink: 0;
  }

  .nl-tw-skeptic-toggle-switch span {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #9ca3af;
    transition: all var(--nl-tw-transition);
  }

  .nl-tw-left.skeptic-mode .nl-tw-skeptic-toggle {
    background: var(--nl-tw-accent-soft);
    color: var(--nl-tw-accent);
    border-color: var(--nl-tw-accent-soft-border);
  }

  .nl-tw-left.skeptic-mode .nl-tw-skeptic-toggle-switch {
    background: var(--nl-tw-accent);
  }

  .nl-tw-left.skeptic-mode .nl-tw-skeptic-toggle-switch span {
    left: 12px;
    background: #ffffff;
  }

  .nl-tw-skeptic-q,
  .nl-tw-skeptic-a {
    font-size: 1rem;
    color: var(--nl-tw-text);
    display: none;
    margin: 0;
  }

  .nl-tw-left.skeptic-mode .nl-tw-skeptic-q,
  .nl-tw-left.skeptic-mode .nl-tw-skeptic-a {
    display: block;
  }

  .nl-tw-skeptic-q {
    margin-top: 2px;
    font-weight: 600;
    color: var(--nl-tw-accent);
  }

  /* Stats */

  .nl-tw-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-top: 6px;
  }

  @media (max-width: 600px) {
    .nl-tw-stats {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }
  }

  .nl-tw-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .nl-tw-stat-num {
    font-size: 1rem;
    font-weight: 700;
    color: var(--nl-tw-accent);
  }

  .nl-tw-stat-label {
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--nl-tw-text);
  }

  /* Reg box */

  .nl-tw-reg {
    margin-top: 6px;
    padding: 7px 9px;
    border-radius: var(--nl-tw-radius-md);
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    font-size: 0.55rem;
    color: var(--nl-tw-text);
    display: flex;
    gap: 6px;
    align-items: flex-start;
  }

  .nl-tw-reg .icon {
    font-size: 1rem;
    color: var(--nl-tw-accent);
    margin-top: -1px;
  }

  /* Logos */

  .nl-tw-logos {
    margin-top: 4px;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .nl-tw-logos-label {
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--nl-tw-muted);
  }

  .nl-tw-logos-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }

  .nl-tw-logo-pill {
    padding: 4px 8px;
    border-radius: 999px;
    border: 1px solid #e5e7eb;
    font-size: 1rem;
    color: var(--nl-tw-text);
    background: #ffffff;
    box-shadow: var(--nl-tw-shadow-pill);
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }

  .nl-tw-logo-pill .dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--nl-tw-accent);
  }

  /* RIGHT: SLIDER */

  .nl-tw-right {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .nl-tw-right-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    padding: 2px 2px 0;
  }

  .nl-tw-right-label {
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--nl-tw-muted);
  }

  .nl-tw-right-rating {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
  }

  .nl-tw-stars {
    font-size: 1rem;
    color: var(--nl-tw-accent);
  }

  .nl-tw-rating-label {
    font-size: 1rem;
    color: var(--nl-tw-muted);
  }

  .nl-tw-slider {
    position: relative;
    margin-top: 4px;
    min-height: 170px;
  }

  @media (max-width: 600px) {
    .nl-tw-slider {
      min-height: 190px;
    }
  }

  .nl-tw-slider-layer {
    position: absolute;
    inset: 18px 16px 0 10px;
    border-radius: var(--nl-tw-radius-xl);
    background: #ffffff;
    border: 1px solid #f3f4f6;
    box-shadow: 0 8px 24px rgba(148,163,253,0.12);
    opacity: 0.4;
    pointer-events: none;
  }

  .nl-tw-slider-layer.layer-back {
    transform: translateY(16px) scale(0.96);
    opacity: 0.12;
  }

  .nl-tw-slider-layer.layer-mid {
    transform: translateY(8px) scale(0.98);
    opacity: 0.22;
  }

  .nl-tw-card {
    position: relative;
    padding: 12px 12px 10px;
    border-radius: var(--nl-tw-radius-xl);
    background: #ffffff;
    border: 1px solid var(--nl-tw-border);
    box-shadow: var(--nl-tw-shadow-soft);
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: all var(--nl-tw-transition);
  }

  .nl-tw-card.changing {
    opacity: 0;
    transform: translateY(6px);
  }

  .nl-tw-quote {
    font-size: 1rem;
    color: var(--nl-tw-text);
    margin: 0;
  }

  .nl-tw-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 1rem;
    color: var(--nl-tw-text);
  }

  .nl-tw-name {
    font-weight: 600;
    color: var(--nl-tw-accent);
  }

  .nl-tw-tag,
  .nl-tw-outcome {
    font-size: 0.95rem;
  }

  .nl-tw-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 8px;
  }

  .nl-tw-arrows {
    display: flex;
    gap: 4px;
  }

  .nl-tw-arrow {
    width: 20px;
    height: 20px;
    border-radius: 999px;
    border: 1px solid #e5e7eb;
    background: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: var(--nl-tw-text);
    cursor: pointer;
    transition: all var(--nl-tw-transition);
  }

  .nl-tw-arrow:hover {
    background: var(--nl-tw-accent);
    color: #ffffff;
    border-color: var(--nl-tw-accent);
    box-shadow: var(--nl-tw-shadow-pill);
  }

  .nl-tw-dots {
    flex: 1;
    display: flex;
    justify-content: center;
    gap: 4px;
  }

  .nl-tw-dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    border: none;
    background: #e5e7eb;
    cursor: pointer;
    transition: all var(--nl-tw-transition);
  }

  .nl-tw-dot.active {
    width: 16px;
    background: var(--nl-tw-accent);
  }

  .nl-tw-note {
    font-size: 1rem;
    color: var(--nl-tw-muted);
    margin-top: 4px;
    text-align: right;
  }

  @media (max-width: 600px) {
    .nl-trust-wall {
      padding-inline: 12px;
    }
    .nl-tw-left,
    .nl-tw-card {
      border-radius: 18px;
    }
  }

  /* first user gouid section */

/* ====== GLOBAL HOOK STYLES (ADJUST TO YOUR THEME) ====== */
:root {
  --nlp-bg: #ffffff;
  --nlp-border: #e6d5cf;
  --nlp-shadow: 0 18px 45px rgba(15, 23, 42, 0.12);
  --nlp-maroon: #7b0f26;
  --nlp-maroon-soft: #f9f0f2;
  --nlp-text-main: #111827;
  --nlp-text-muted: #6b7280;
  --nlp-pill-bg: #f97373;
  --nlp-step-border: #e5e7eb;
  --nlp-step-active: #7b0f26;
  --nlp-step-bg-active: #f9f0f2;
  --nlp-option-bg: #f9fafb;
  --nlp-option-bg-active: #fff6f7;
  --nlp-option-border-active: #f97373;
}

.nlp-assess-wrapper {
  max-width: 1100px;
  margin: 2.5rem auto;
  padding: 0 1rem;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Collapsed bar */
.nlp-assess-bar {
  width: 100%;
  background: linear-gradient(90deg, #111827, #1f2937);
  border-radius: 999px;
  border: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem 1.3rem 0.9rem 1.1rem;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.35);
  color: #f9fafb;
  text-align: left;
  position: relative;
  overflow: hidden;
}

.nlp-assess-bar-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.nlp-assess-pill {
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  background: var(--nlp-pill-bg);
  color: #111827;
  font-weight: 600;
  white-space: nowrap;
}

.nlp-assess-title {
  font-weight: 600;
  font-size: 0.95rem;
  white-space: nowrap;
}

.nlp-assess-subtitle {
  font-size: 0.8rem;
  color: #e5e7eb;
  opacity: 0.9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nlp-assess-bar-right {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
}

.nlp-assess-cta-text {
  font-size: 0.85rem;
  font-weight: 600;
}

.nlp-assess-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 999px;
  background: #f9fafb;
  color: #111827;
  font-size: 0.9rem;
}

/* Panel */
.nlp-assess-panel {
  margin-top: 1.1rem;
  background: var(--nlp-bg);
  border-radius: 1.5rem;
  border: 1px solid var(--nlp-border);
  box-shadow: var(--nlp-shadow);
  padding: 1.5rem 1.5rem 1.25rem;
  display: none;
}

.nlp-assess-panel.open {
  display: block;
}

/* Header */
.nlp-assess-header {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
  margin-bottom: 1.25rem;
}

.nlp-assess-header h3 {
  margin: 0 0 0.25rem;
  font-size: 1.1rem;
  color: var(--nlp-text-main);
}

.nlp-assess-header p {
  margin: 0;
  font-size: 0.85rem;
  color: var(--nlp-text-muted);
}

.nlp-assess-close {
  border: none;
  background: #f3f4f6;
  border-radius: 999px;
  width: 1.9rem;
  height: 1.9rem;
  cursor: pointer;
  font-size: 0.9rem;
  color: #4b5563;
}

/* Step indicators */
.nlp-assess-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.nlp-assess-step-indicator {
  border-radius: 999px;
  border: 1px dashed var(--nlp-step-border);
  padding: 0.45rem 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.80rem;
  color: var(--nlp-text-muted);
}

.nlp-assess-step-indicator .step-number {
  width: 1.3rem;
  height: 1.3rem;
  border-radius: 999px;
  background: #f3f4f6;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 600;
}

.nlp-assess-step-indicator.active {
  border-style: solid;
  border-color: var(--nlp-step-active);
  background: var(--nlp-step-bg-active);
  color: var(--nlp-step-active);
}

.nlp-assess-step-indicator.active .step-number {
  background: var(--nlp-step-active);
  color: #f9fafb;
}

/* Step content */
.nlp-assess-steps-container {
  margin-bottom: 1.25rem;
}

.nlp-assess-step-content {
  display: none;
}

.nlp-assess-step-content.active {
  display: block;
}

.nlp-assess-step-content h4 {
  margin: 0 0 0.35rem;
  font-size: 1rem;
  color: var(--nlp-text-main);
}

.nlp-assess-step-content p {
  margin: 0 0 0.9rem;
  font-size: 0.85rem;
  color: var(--nlp-text-muted);
}

.nlp-assess-subheading {
  margin: 1.1rem 0 0.45rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--nlp-text-main);
}

/* Options */
.nlp-assess-options-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}

.nlp-assess-options-grid.small {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 900px) {
  .nlp-assess-options-grid,
  .nlp-assess-options-grid.small {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .nlp-assess-options-grid,
  .nlp-assess-options-grid.small {
    grid-template-columns: 1fr;
  }
  .nlp-assess-steps {
    grid-template-columns: 1fr;
  }
}

.nlp-assess-option {
  text-align: left;
  border-radius: 1rem;
  padding: 0.75rem 0.8rem;
  border: 1px solid transparent;
  background: var(--nlp-option-bg);
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.nlp-assess-option .option-title {
  font-size: 1rem;
  font-weight: 600;
  color: #111827;
}

.nlp-assess-option .option-sub {
  font-size: 0.85rem;
  color: var(--nlp-text-muted);
}

.nlp-assess-option:hover {
  background: #f3f4f6;
}

.nlp-assess-option.selected {
  background: var(--nlp-option-bg-active);
  border-color: var(--nlp-option-border-active);
  box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.4);
}

/* Recommendations */
.nlp-assess-summary {
  font-size: 0.88rem;
  color: var(--nlp-text-muted);
  margin-bottom: 0.9rem;
}

.nlp-assess-recos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.8rem;
}

@media (max-width: 900px) {
  .nlp-assess-recos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .nlp-assess-recos {
    grid-template-columns: 1fr;
  }
}

.nlp-assess-reco-card {
  border-radius: 1rem;
  border: 1px solid var(--nlp-border);
  padding: 0.75rem 0.85rem;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.nlp-assess-reco-badge {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--nlp-maroon);
  background: var(--nlp-maroon-soft);
  border-radius: 999px;
  padding: 0.18rem 0.6rem;
  display: inline-block;
}

.nlp-assess-reco-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--nlp-text-main);
}

.nlp-assess-reco-desc {
  font-size: 0.8rem;
  color: var(--nlp-text-muted);
}

.nlp-assess-reco-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.25rem;
}

.nlp-assess-chip-link {
  font-size: 0.75rem;
  border-radius: 999px;
  padding: 0.25rem 0.6rem;
  border: 1px solid #e5e7eb;
  color: #111827;
  text-decoration: none;
  background: #f9fafb;
}

.nlp-assess-chip-link:hover {
  background: #111827;
  color: #f9fafb;
}

/* Footer actions */
.nlp-assess-footer-actions {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: 1rem;
}

.nlp-assess-reset {
  align-self: flex-start;
  border-radius: 999px;
  border: 1px solid #d1d5db;
  background: #ffffff;
  padding: 0.35rem 0.9rem;
  font-size: 0.78rem;
  cursor: pointer;
  color: #374151;
}

.nlp-assess-primary-link {
  font-size: 0.83rem;
  color: var(--nlp-maroon);
  text-decoration: none;
  font-weight: 600;
}

/* Nav buttons */
.nlp-assess-nav {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
  border-top: 1px dashed #e5e7eb;
  padding-top: 0.9rem;
  margin-top: 0.5rem;
}

.nlp-assess-nav-btn {
  border-radius: 999px;
  padding: 0.45rem 1.2rem;
  font-size: 0.82rem;
  cursor: pointer;
  border: 1px solid transparent;
}

.nlp-assess-nav-btn.secondary {
  background: #ffffff;
  border-color: #d1d5db;
  color: #374151;
}

.nlp-assess-nav-btn.primary {
  background: var(--nlp-maroon);
  color: #f9fafb;
  border-color: var(--nlp-maroon);
}

.nlp-assess-nav-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Responsive tweaks */
@media (max-width: 640px) {
  .nlp-assess-panel {
    padding: 1.1rem 1rem 1rem;
  }
  .nlp-assess-header {
    flex-direction: column;
  }
  .nlp-assess-wrapper {
    margin-top: 1.5rem;
  }
  .nlp-assess-bar {
    border-radius: 1rem;
  }
  .nlp-assess-bar-left {
    flex-direction: column;
    align-items: flex-start;
  }
  .nlp-assess-title,
  .nlp-assess-subtitle {
    white-space: normal;
  }
}

@media (max-width: 575px) {
  .nlp-assess-bar{
 display: flex;
    justify-content: center;
    flex-direction: column;
    gap: 20px;
  }
     
}


/* <!-- ========================= CSS ========================= --> */
  /* Scope: ONLY inside #nlp-command-center */
  #nlp-command-center{
    background:#fff;color:#0b1220;
    font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    --a:#a0162a; --a2:#7b1f2f;
    --mut:#5b6472; --line:#e7e9ee; --soft:#f6f7fb;
    --shadow:0 22px 66px rgba(15,23,42,.12);
    --shadow2:0 34px 110px rgba(15,23,42,.14);
    --r-xl:28px; --r-lg:22px;
    --fast:.18s cubic-bezier(.25,.8,.25,1);
    --med:.38s cubic-bezier(.23,1,.32,1);
  }
  #nlp-command-center *{box-sizing:border-box}
  #nlp-command-center img{max-width:100%;display:block}
  #nlp-command-center a{text-decoration:none;color:inherit}
  #nlp-command-center button{font:inherit}

  .nlpCC-wrap{max-width:1280px;margin:0 auto;padding:54px 14px 110px;position:relative;}
  /* .nlpCC-wrap:before{content:"";position:absolute;inset:-260px -240px auto auto;width:620px;height:620px;background:radial-gradient(circle at 40% 35%, rgba(160,22,42,.14), transparent 62%);pointer-events:none} */
  .nlpCC-wrap:after{content:"";position:absolute;inset:auto auto -280px -240px;width:560px;height:560px;background:radial-gradient(circle at 55% 45%, rgba(59,130,246,.10), transparent 62%);pointer-events:none}

  /* Hero */
  .nlpCC-hero{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:18px;align-items:stretch}
  @media (max-width:980px){.nlpCC-hero{grid-template-columns:1fr}}
  .nlpCC-heroLeft{padding:8px 6px;display:flex;flex-direction:column;gap:14px}
  .nlpCC-pill{display:inline-flex;align-items:center;gap:10px;width:fit-content;padding:8px 12px;border-radius:999px;border:1px solid rgba(160,22,42,.22);background:linear-gradient(180deg,#fff6f8,#fff);color:var(--a2);font-size:12px;font-weight:950}
  .nlpCC-dot{width:9px;height:9px;border-radius:999px;background:var(--a);box-shadow:0 0 0 6px rgba(160,22,42,.12)}
  .nlpCC-h1{margin:0;font-size:clamp(28px,4.2vw,48px);line-height:1.5;letter-spacing:-.03em;font-weight:950;max-width:860px; color: black;}
  .nlpCC-h1 span{color:black}
  .nlpCC-sub{margin:0;color:var(--mut);font-size:14px;line-height:1.7;max-width:760px}
  .nlpCC-ctas{display:flex;flex-wrap:wrap;gap:10px;margin-top:2px}

  .nlpCC-btn{border:1px solid var(--line);background:#fff;color:#0b1220;padding:12px 14px;border-radius:999px;font-weight:950;font-size:13px;cursor:pointer;transition:transform var(--fast), box-shadow var(--fast), border-color var(--fast)}
  .nlpCC-btn:hover{transform:translateY(-1px);box-shadow:0 16px 40px rgba(15,23,42,.10)}
  .nlpCC-btn.primary{border:none;color:#fff !important;background:linear-gradient(90deg,var(--a),var(--a2));box-shadow:0 18px 55px rgba(160,22,42,.28)}
  .nlpCC-btn.primary:hover{box-shadow:0 26px 80px rgba(160,22,42,.40)}

  .nlpCC-micro{display:flex;gap:10px;flex-wrap:wrap}
  .nlpCC-mp{background:var(--soft);border:1px solid var(--line);border-radius:999px;padding:8px 12px;font-size:12px;color:#334155}
  .nlpCC-mp b{color:#0b1220}

  .nlpCC-heroRight{display:flex;align-items:stretch}
  .nlpCC-heroScreen{width:100%;border-radius:var(--r-xl);overflow:hidden;position:relative;box-shadow:var(--shadow2);background:#0b1220;min-height:360px}
  @media (min-width:1100px){.nlpCC-heroScreen{min-height:520px}}
  .nlpCC-heroImg{width:100%;height:100%;object-fit:cover;transform:scale(1.02)}
  .nlpCC-heroScreen:before{content:"";position:absolute;inset:-40% -60%;background:linear-gradient(120deg, transparent 36%, rgba(255,255,255,.16) 46%, transparent 56%);transform:translateX(-35%) rotate(10deg);animation:nlpCCSheen 6.2s ease-in-out infinite;opacity:.35;pointer-events:none;mix-blend-mode:screen}
  @keyframes nlpCCSheen{0%{transform:translateX(-35%) rotate(10deg)}50%{transform:translateX(35%) rotate(10deg)}100%{transform:translateX(-35%) rotate(10deg)}}
  .nlpCC-glass{position:absolute;left:14px;right:14px;bottom:14px;padding:12px;border-radius:18px;background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06));border:1px solid rgba(255,255,255,.18);backdrop-filter: blur(10px);color:#fff;box-shadow:0 18px 44px rgba(0,0,0,.30);display:flex;flex-direction:column;gap:8px}
  .nlpCC-row{display:flex;gap:8px;flex-wrap:wrap}
  .nlpCC-chip{font-size:12px;font-weight:950;padding:7px 10px;border-radius:999px;background:rgba(0,0,0,.18);border:1px solid rgba(255,255,255,.16);white-space:nowrap}

  /* section head */
  .nlpCC-secHead{position:relative;z-index:1;margin:34px 0 12px;display:flex;flex-direction:column;gap:6px}
  .nlpCC-secHead h2{margin:0;font-size:clamp(18px,2.2vw,24px);font-weight:950;letter-spacing:-.02em}
  .nlpCC-secHead p{margin:0;color:var(--mut);font-size:12px;line-height:1.6}

  /* champions shelf */
  .nlpCC-shelfWrap{position:relative;z-index:1;}
  .nlpCC-shelf{display:flex;gap:12px;overflow:auto;scroll-snap-type:x mandatory;padding:8px 2px 14px;scroll-behavior:smooth}
  .nlpCC-shelf::-webkit-scrollbar{height:0}

  .nlpCC-shelfNav{
    position:absolute;top:50%;transform:translateY(-52%);
    width:44px;height:44px;border-radius:999px;
    border:1px solid var(--line);
    background:rgba(255,255,255,.92);
    backdrop-filter: blur(8px);
    box-shadow:0 18px 55px rgba(15,23,42,.16);
    cursor:pointer;font-size:22px;font-weight:900;line-height:1;
    display:flex;align-items:center;justify-content:center;
    transition:transform var(--fast), box-shadow var(--fast), opacity var(--fast);
    z-index:3;
  }
  .nlpCC-shelfNav.left{left:-4px}
  .nlpCC-shelfNav.right{right:-4px}
  .nlpCC-shelfNav:hover{transform:translateY(-52%) scale(1.03);box-shadow:0 26px 80px rgba(15,23,42,.22)}
  .nlpCC-shelfNav[disabled]{opacity:.35;cursor:not-allowed;box-shadow:none}
  @media (max-width:820px){
    .nlpCC-shelfNav{display:none;}
  }

  .nlpCC-card{flex:0 0 min(520px, 86vw);scroll-snap-align:start;border:1px solid var(--line);border-radius:var(--r-xl);overflow:hidden;background:#fff;box-shadow:var(--shadow);transition:transform var(--fast), box-shadow var(--fast), border-color var(--fast);cursor:pointer}
  .nlpCC-card:hover{transform:translateY(-2px);box-shadow:0 28px 86px rgba(15,23,42,.14);border-color:rgba(160,22,42,.20)}
  .nlpCC-card.active{border-color:rgba(160,22,42,.32);box-shadow:0 28px 86px rgba(160,22,42,.18)}
  .nlpCC-media{height:270px;background:#0b1220}
  @media (min-width:1100px){.nlpCC-media{height:320px}}
  .nlpCC-media img{width:100%;height:100%;object-fit:cover}
  .nlpCC-body{padding:14px 14px 16px;display:flex;flex-direction:column;gap:10px}
  .nlpCC-title{font-size:16px;font-weight:950;letter-spacing:-.02em}
  .nlpCC-desc{font-size:12px;color:var(--mut);line-height:1.55;max-width:44ch}
  .nlpCC-actions{display:flex;gap:8px;flex-wrap:wrap}
  .nlpCC-mini{display:inline-flex;align-items:center;justify-content:center;padding:10px 12px;border-radius:999px;border:1px solid var(--line);background:#fff;color:#0b1220;font-size:12px;font-weight:950;cursor:pointer;transition:transform var(--fast), box-shadow var(--fast);min-width:120px}
  .nlpCC-mini:hover{transform:translateY(-1px);box-shadow:0 14px 34px rgba(15,23,42,.10)}
  .nlpCC-mini.primary{border:none;color:#fff !important;background:linear-gradient(90deg,var(--a),var(--a2));box-shadow:0 16px 44px rgba(160,22,42,.28)}
  .nlpCC-mini.primary:hover{box-shadow:0 24px 70px rgba(160,22,42,.40)}

  /* categories */
  .nlpCC-catGrid{position:relative;z-index:1;display:grid;grid-template-columns:1fr;gap:12px}
  .nlpCC-catBar{display:flex;gap:8px;flex-wrap:wrap}
  .nlpCC-cat{border:1px solid var(--line);background:#fff;padding:10px 12px;border-radius:999px;font-size:12px;font-weight:950;cursor:pointer;transition:transform var(--fast), box-shadow var(--fast), border-color var(--fast), background var(--fast);white-space:nowrap}
  .nlpCC-cat:hover{transform:translateY(-1px);box-shadow:0 14px 34px rgba(15,23,42,.10);border-color:rgba(160,22,42,.18)}
  .nlpCC-cat.active{border-color:rgba(160,22,42,.35);background:linear-gradient(90deg,#fff1f2,#fff);color:var(--a2);box-shadow:0 18px 50px rgba(160,22,42,.14)}
  .nlpCC-stage{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:12px;align-items:stretch}
  @media (max-width:980px){.nlpCC-stage{grid-template-columns:1fr}}
  .nlpCC-screen{border:1px solid var(--line);border-radius:var(--r-xl);overflow:hidden;background:#0b1220;box-shadow:var(--shadow2);min-height:320px;position:relative}
  .nlpCC-screen img{width:100%;height:100%;object-fit:cover;opacity:.98}
  .nlpCC-screen:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(11,18,32,.18), rgba(11,18,32,.72));pointer-events:none}
  .nlpCC-overlay{position:absolute;left:14px;right:14px;bottom:14px;padding:12px;border-radius:18px;background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06));border:1px solid rgba(255,255,255,.18);backdrop-filter: blur(10px);color:#fff;box-shadow:0 18px 44px rgba(0,0,0,.28);display:flex;flex-direction:column;gap:10px}
  .nlpCC-ovTitle{font-size:16px;font-weight:950;letter-spacing:-.02em}
  .nlpCC-ovMini{font-size:12px;opacity:.92;line-height:1.45}
  .nlpCC-ovBtns{display:flex;gap:8px;flex-wrap:wrap}
  .nlpCC-btnSm{padding:10px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.10);color:#fff;font-size:12px;font-weight:950;cursor:pointer;transition:transform var(--fast), box-shadow var(--fast)}
  .nlpCC-btnSm:hover{transform:translateY(-1px);box-shadow:0 14px 34px rgba(0,0,0,.22)}
  .nlpCC-btnSm.primary{border:none;background:linear-gradient(90deg,var(--a),var(--a2));box-shadow:0 18px 55px rgba(160,22,42,.32)}
  .nlpCC-btnSm.primary:hover{box-shadow:0 26px 80px rgba(160,22,42,.42)}

  .nlpCC-chipBox{border:1px solid var(--line);border-radius:var(--r-xl);background:linear-gradient(180deg,#fff,#fbfbfe);box-shadow:var(--shadow);padding:14px;display:flex;flex-direction:column;gap:10px;min-height:320px}
  .nlpCC-chipHead{display:flex;align-items:center;justify-content:space-between;gap:10px}
  .nlpCC-chipCount{font-size:11px;color:var(--mut)}
  .nlpCC-chipGrid{display:flex;flex-wrap:wrap;gap:8px;align-content:flex-start}
  .nlpCC-chipGrid a{font-size:12px;font-weight:950;padding:9px 10px;border-radius:999px;border:1px solid var(--line);background:#fff;cursor:pointer;transition:transform var(--fast), box-shadow var(--fast), border-color var(--fast), background var(--fast);white-space:nowrap}
  .nlpCC-chipGrid a:hover{transform:translateY(-1px);box-shadow:0 14px 34px rgba(15,23,42,.10);border-color:rgba(160,22,42,.18);background:linear-gradient(180deg,#fff,#fff7f8)}

  /* process + proof */
  .nlpCC-proGrid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:12px;align-items:stretch}
  @media (max-width:980px){.nlpCC-proGrid{grid-template-columns:1fr}}
  .nlpCC-steps{margin:0;padding:12px;list-style:none;border:1px solid var(--line);border-radius:var(--r-xl);background:linear-gradient(180deg,#fff,#fbfbfe);box-shadow:var(--shadow);display:flex;flex-direction:column;gap:10px}
  .nlpCC-step{border:1px solid var(--line);border-radius:18px;padding:12px;background:#fff;display:flex;align-items:center;gap:10px;cursor:pointer;transition:transform var(--fast), box-shadow var(--fast), border-color var(--fast), background var(--fast)}
  .nlpCC-step:hover{transform:translateY(-1px);box-shadow:0 14px 34px rgba(15,23,42,.10);border-color:rgba(160,22,42,.18);background:linear-gradient(180deg,#fff,#fff9fb)}
  .nlpCC-step.active{border-color:rgba(160,22,42,.35);box-shadow:0 22px 66px rgba(160,22,42,.14);background:linear-gradient(90deg,#fff1f2,#fff)}
  .nlpCC-step .no{width:28px;height:28px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;background:#fff1f2;border:1px solid rgba(160,22,42,.20);color:var(--a2);font-weight:950;font-size:12px;flex-shrink:0}
  .nlpCC-step b{font-size:13px}
  .nlpCC-step small{display:block;font-size:12px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

  .nlpCC-proof{border:1px solid var(--line);border-radius:var(--r-xl);background:#fff;box-shadow:var(--shadow2);padding:14px;display:flex;flex-direction:column;gap:12px;overflow:hidden}
  .nlpCC-proofTop{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
  .nlpCC-proofTop .k{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--a2);font-weight:950}
  .nlpCC-proofTop .t{font-size:16px;font-weight:950;letter-spacing:-.02em;margin-top:4px}
  .nlpCC-proof .lead{margin:0;color:var(--mut);font-size:12px;line-height:1.65}
  .nlpCC-toggle{border:1px solid var(--line);background:var(--soft);border-radius:999px;padding:8px 10px;font-size:12px;font-weight:950;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:transform var(--fast), box-shadow var(--fast), border-color var(--fast);white-space:nowrap}
  .nlpCC-toggle:hover{transform:translateY(-1px);box-shadow:0 14px 34px rgba(15,23,42,.10)}
  .nlpCC-toggle .sw{width:30px;height:16px;border-radius:999px;background:#e5e7eb;position:relative;flex-shrink:0}
  .nlpCC-toggle .sw i{position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:999px;background:#9ca3af;transition:all var(--fast)}
  .nlpCC-toggle.on{border-color:rgba(160,22,42,.22);background:#fff1f2;color:var(--a2)}
  .nlpCC-toggle.on .sw{background:var(--a)}
  .nlpCC-toggle.on .sw i{left:16px;background:#fff}

  .nlpCC-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
  @media (max-width:720px){.nlpCC-stats{grid-template-columns:1fr}}
  .nlpCC-stats .box{border:1px solid var(--line);border-radius:18px;background:linear-gradient(180deg,#fff,#fbfbfe);padding:12px;box-shadow:0 14px 40px rgba(15,23,42,.06)}
  .nlpCC-stats .n{font-size:18px;font-weight:950;color:var(--a2)}
  .nlpCC-stats .l{margin-top:2px;font-size:11px;color:#475569;letter-spacing:.08em;text-transform:uppercase}

  .nlpCC-quote{border:1px solid var(--line);border-radius:18px;padding:12px;background:linear-gradient(180deg,#fff,#fff7f8);box-shadow:0 14px 40px rgba(160,22,42,.08)}
  .nlpCC-quote .q{font-size:13px;font-weight:950;line-height:1.45}
  .nlpCC-quote .m{margin-top:6px;font-size:11px;color:var(--mut)}
  .nlpCC-proofCtas{display:flex;gap:10px;flex-wrap:wrap}

  /* bottom stack */
  .nlpCC-bottomStack{position:relative;z-index:1;display:flex;flex-direction:column;gap:14px;margin-top:12px}
  .nlpCC-showShell{border:1px solid var(--line);border-radius:var(--r-xl);background:linear-gradient(180deg,#fff,#fbfbfe);box-shadow:var(--shadow2);overflow:hidden;display:flex;flex-direction:column}
  .nlpCC-showTop{padding:14px 14px 12px;display:flex;align-items:flex-end;justify-content:space-between;gap:12px;border-bottom:1px solid rgba(231,233,238,.9);background:linear-gradient(180deg,#fff,#fbfbfe)}
  .nlpCC-showTitle{display:flex;align-items:center;gap:10px;font-weight:950;font-size:13px}
  .nlpCC-showTitle .dot{width:9px;height:9px;border-radius:999px;background:var(--a);box-shadow:0 0 0 6px rgba(160,22,42,.12)}
  .nlpCC-showBtns{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
  .nlpCC-showBtns .b{padding:10px 12px;border-radius:999px;border:1px solid var(--line);background:#fff;font-size:12px;font-weight:950;cursor:pointer;transition:transform var(--fast), box-shadow var(--fast);white-space:nowrap}
  .nlpCC-showBtns .b:hover{transform:translateY(-1px);box-shadow:0 14px 34px rgba(15,23,42,.10)}
  .nlpCC-showBtns .b.primary{border:none;color:#fff;background:linear-gradient(90deg,var(--a),var(--a2));box-shadow:0 18px 55px rgba(160,22,42,.28)}
  .nlpCC-showBtns .b.primary:hover{box-shadow:0 26px 80px rgba(160,22,42,.40)}

  .nlpCC-show{margin:0;position:relative;background:#0b1220;overflow:hidden}
  .nlpCC-show.big img{width:100%;height:auto;object-fit:cover;aspect-ratio:16/9;transform:scale(1.01);}
  @media (min-width:1000px){.nlpCC-show.big img{max-height:720px}}
  .nlpCC-show:before{content:"";position:absolute;inset:-30% -40%;background:linear-gradient(120deg, transparent 35%, rgba(255,255,255,.15) 46%, transparent 57%);transform: translateX(-38%) rotate(10deg);animation: nlpCCSheen2 6.2s ease-in-out infinite;opacity:.35;pointer-events:none;mix-blend-mode:screen}
  @keyframes nlpCCSheen2{0%{transform: translateX(-38%) rotate(10deg)}50%{transform: translateX(38%) rotate(10deg)}100%{transform: translateX(-38%) rotate(10deg)}}
  .nlpCC-show .cap{position:absolute;left:12px;right:12px;bottom:12px;padding:10px 12px;border-radius:18px;background:linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.06));border:1px solid rgba(255,255,255,.18);backdrop-filter: blur(10px);color:#fff;font-size:12px;box-shadow:0 18px 44px rgba(0,0,0,.28)}

  .nlpCC-revShell{border:1px solid var(--line);border-radius:var(--r-xl);background:#fff;box-shadow:var(--shadow);padding:14px;display:flex;flex-direction:column;gap:12px;overflow:hidden}
  .nlpCC-revHead{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
  .nlpCC-revHead .k{letter-spacing:.14em;text-transform:uppercase;color:var(--a2);font-weight:950;font-size:11px}
  .nlpCC-revHead .t{margin-top:6px;font-size:18px;font-weight:950;letter-spacing:-.02em}
  .nlpCC-revHead .s{margin-top:6px;color:var(--mut);font-size:12px}
  .nlpCC-revHead .nav{display:flex;gap:6px}
  .nlpCC-revHead .ar{width:34px;height:34px;border-radius:999px;border:1px solid var(--line);background:#fff;font-size:18px;cursor:pointer;transition:transform var(--fast), box-shadow var(--fast), background var(--fast), border-color var(--fast)}
  .nlpCC-revHead .ar:hover{transform:translateY(-1px);box-shadow:0 14px 34px rgba(15,23,42,.10);background:linear-gradient(90deg,#fff1f2,#fff);border-color:rgba(160,22,42,.22);color:var(--a2)}
  .nlpCC-revStage{position:relative;min-height:290px;margin-top:4px}
  .nlpCC-revStage .layer{position:absolute;inset:18px 16px 0 10px;border-radius:var(--r-xl);background:#fff;border:1px solid #f3f4f6;box-shadow:0 8px 24px rgba(148,163,253,0.10);opacity:0.28;pointer-events:none}
  .nlpCC-revStage .layer.back{transform:translateY(16px) scale(0.96);opacity:0.10}
  .nlpCC-revStage .layer.mid{transform:translateY(8px) scale(0.98);opacity:0.18}
  .nlpCC-revCard{position:relative;border:1px solid var(--line);border-radius:var(--r-xl);background:linear-gradient(180deg,#fff,#fbfbfe);box-shadow:var(--shadow2);padding:14px;height:100%;display:flex;flex-direction:column;justify-content:space-between;gap:12px;transition:opacity var(--fast), transform var(--fast)}
  .nlpCC-revCard.changing{opacity:0;transform:translateY(8px)}
  .nlpCC-revCard .quote{font-size:14px;font-weight:950;line-height:1.55;letter-spacing:-.01em}
  .nlpCC-revCard .meta{display:flex;flex-direction:column;gap:4px;font-size:12px}
  .nlpCC-revCard .name{color:var(--a2);font-weight:950}
  .nlpCC-revCard .rev-tag{color:var(--mut)}
  .nlpCC-revCard .ctas{display:flex;gap:8px;flex-wrap:wrap}
  .nlpCC-revCard .c{padding:10px 12px;border-radius:999px;border:1px solid var(--line);background:#fff;font-size:12px;font-weight:950;cursor:pointer;transition:transform var(--fast), box-shadow var(--fast);white-space:nowrap}
  .nlpCC-revCard .c:hover{transform:translateY(-1px);box-shadow:0 14px 34px rgba(15,23,42,.10)}
  .nlpCC-revCard .c.primary{border:none;color:#fff;background:linear-gradient(90deg,var(--a),var(--a2));box-shadow:0 18px 55px rgba(160,22,42,.28)}
  .nlpCC-revCard .c.primary:hover{box-shadow:0 26px 80px rgba(160,22,42,.40)}
  .nlpCC-dots{display:flex;justify-content:center;gap:6px;flex-wrap:wrap}
  .nlpCC-dots button{width:8px;height:8px;border-radius:999px;border:none;background:#e5e7eb;cursor:pointer;transition:width var(--fast), background var(--fast)}
  .nlpCC-dots button.active{width:22px;background:var(--a)}
  .nlpCC-note{font-size:11px;color:var(--mut);text-align:right;line-height:1.45}

  /* Dynamic reveal */
  .nlpCC-reveal{opacity:0;transform:translateY(10px);transition:opacity var(--med), transform var(--med)}
  .nlpCC-reveal.in{opacity:1;transform:translateY(0)}

  /* modal */
  .nlpCC-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.28);opacity:0;pointer-events:none;transition:opacity var(--fast);z-index:9998}
  .nlpCC-backdrop.on{opacity:1;pointer-events:auto}
  .nlpCC-modal{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%) scale(.98);width:min(720px, calc(100vw - 24px));background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:0 40px 120px rgba(15,23,42,.30);opacity:0;pointer-events:none;transition:opacity var(--med), transform var(--med);z-index:9999;overflow:hidden}
  .nlpCC-modal.on{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1)}
  .nlpCC-modalHead{padding:14px 14px 12px;background:linear-gradient(180deg,#fff,#fbfbfe);border-bottom:1px solid rgba(231,233,238,.9);display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
  .nlpCC-modalHead .k{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--a2);font-weight:950}
  .nlpCC-modalHead .t{font-size:16px;font-weight:950;letter-spacing:-.02em;margin-top:4px}
  .nlpCC-modalHead .x{border:none;background:transparent;color:#94a3b8;font-size:26px;line-height:1;cursor:pointer;transition:transform var(--fast), color var(--fast)}
  .nlpCC-modalHead .x:hover{transform:scale(1.05);color:#0b1220}
  .nlpCC-modalBody{padding:14px;display:flex;flex-direction:column;gap:12px}
  .nlpCC-progress{display:flex;align-items:center;justify-content:space-between;gap:10px}
  .nlpCC-progress .bar{flex:1;height:10px;border-radius:999px;background:var(--soft);border:1px solid var(--line);overflow:hidden}
  .nlpCC-progress .bar span{display:block;height:100%;width:33%;background:linear-gradient(90deg,var(--a),var(--a2));border-radius:999px;transition:width var(--med)}
  .nlpCC-progress .txt{font-size:12px;color:var(--mut);font-weight:950;white-space:nowrap}
  .nlpCC-q{display:none}
  .nlpCC-q.active{display:block}
  .nlpCC-q h3{margin:0 0 10px;font-size:14px;font-weight:950}
  .nlpCC-optGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  @media (max-width:560px){.nlpCC-optGrid{grid-template-columns:1fr}}
  .nlpCC-optGrid .opt{border:1px solid var(--line);background:#fff;border-radius:18px;padding:12px;font-size:13px;font-weight:950;cursor:pointer;transition:transform var(--fast), box-shadow var(--fast), border-color var(--fast), background var(--fast);text-align:left}
  .nlpCC-optGrid .opt:hover{transform:translateY(-1px);box-shadow:0 14px 34px rgba(15,23,42,.10);border-color:rgba(160,22,42,.18);background:linear-gradient(180deg,#fff,#fff9fb)}
  .nlpCC-optGrid .opt.selected{border-color:rgba(160,22,42,.35);background:linear-gradient(90deg,#fff1f2,#fff);color:var(--a2)}
  .nlpCC-modalFoot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:8px;border-top:1px solid rgba(231,233,238,.9)}
  .nlpCC-result{border:1px solid var(--line);border-radius:22px;background:linear-gradient(180deg,#fff,#fbfbfe);box-shadow:0 14px 40px rgba(15,23,42,.06);padding:12px}
  .nlpCC-result .badge{width:fit-content;padding:6px 10px;border-radius:999px;background:#fff1f2;border:1px solid rgba(160,22,42,.22);color:var(--a2);font-size:11px;font-weight:950;letter-spacing:.12em;text-transform:uppercase}
  .nlpCC-result .rt{margin-top:8px;font-size:16px;font-weight:950;letter-spacing:-.02em}
  .nlpCC-result .rd{margin-top:6px;color:var(--mut);font-size:12px;line-height:1.65}
  .nlpCC-result .ra{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
  .nlpCC-result .rn{margin-top:10px;font-size:11px;color:#6b7280;line-height:1.45}

  /* sticky */
  .nlpCC-sticky{position:fixed;left:12px;right:12px;bottom:12px;background:#fff;border:1px solid var(--line);border-radius:999px;box-shadow:0 26px 90px rgba(15,23,42,.18);padding:10px 12px;display:flex;align-items:center;justify-content:space-between;gap:10px;z-index:9997;transform:translateY(120%);transition:transform var(--med)}
  .nlpCC-sticky.show{transform:translateY(0)}
  .nlpCC-sticky .l{display:flex;align-items:center;gap:10px;font-size:12px;font-weight:950}
  .nlpCC-sticky .d{width:8px;height:8px;border-radius:999px;background:var(--a);box-shadow:0 0 0 6px rgba(160,22,42,.12)}
  .nlpCC-sticky .r{display:flex;gap:8px;align-items:center}
  .nlpCC-sticky .s{padding:10px 12px;border-radius:999px;border:1px solid var(--line);background:#fff;font-size:12px;font-weight:950;cursor:pointer;transition:transform var(--fast), box-shadow var(--fast);white-space:nowrap}
  .nlpCC-sticky .s:hover{transform:translateY(-1px);box-shadow:0 14px 34px rgba(15,23,42,.10)}
  .nlpCC-sticky .s.primary{border:none;color:#fff;background:linear-gradient(90deg,var(--a),var(--a2));box-shadow:0 18px 55px rgba(160,22,42,.28)}
  .nlpCC-sticky .s.primary:hover{box-shadow:0 26px 80px rgba(160,22,42,.40)}

  /* ====== Royal Club Circle (NEW) ====== */
  .nlpRCC-space{height:26px}
  .nlpRCC{margin-top:12px}
  .nlpRCC-inner{
    border:1px solid var(--line);
    border-radius:var(--r-xl);
    box-shadow:var(--shadow2);
    background:linear-gradient(180deg,#fff,#fbfbfe);
    overflow:hidden;
    display:grid;
    grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
    gap:14px;
    padding:18px;
    align-items:stretch;
  }
  @media (max-width:980px){
    .nlpRCC-inner{grid-template-columns:1fr}
  }
  .nlpRCC-kicker{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--a2);font-weight:950}
  .nlpRCC-title{margin:8px 0 8px;font-size:clamp(26px,3.2vw,40px);line-height:1.05;font-weight:950;letter-spacing:-.03em}
  .nlpRCC-sub{margin:0;color:var(--mut);font-size:14px;line-height:1.7;max-width:64ch}
  .nlpRCC-ctaRow{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
  .nlpRCC-btn{
    border:1px solid var(--line);
    background:#fff;
    padding:12px 14px;border-radius:999px;
    font-weight:950;font-size:13px;
    transition:transform var(--fast), box-shadow var(--fast);
  }
  .nlpRCC-btn:hover{transform:translateY(-1px);box-shadow:0 16px 40px rgba(15,23,42,.10)}
  .nlpRCC-btn.primary{border:none;color:#fff !important;background:linear-gradient(90deg,var(--a),var(--a2));box-shadow:0 18px 55px rgba(160,22,42,.28)}
  .nlpRCC-btn.primary:hover{box-shadow:0 26px 80px rgba(160,22,42,.40)}
  .nlpRCC-bullets{margin:14px 0 0;padding-left:18px;color:#0b1220}
  .nlpRCC-bullets li{margin:6px 0;color:#0b1220;font-size:13px}
  .nlpRCC-bullets b{color:#0b1220}
  .nlpRCC-previewCard{
    border:1px solid var(--line);
    border-radius:22px;
    background:#fff;
    box-shadow:0 22px 66px rgba(15,23,42,.10);
    overflow:hidden;
    display:flex;
    flex-direction:column;
    min-height:360px;
  }
  .nlpRCC-previewTop{
    padding:14px 14px 10px;
    border-bottom:1px solid rgba(231,233,238,.9);
    display:flex;
    justify-content:space-between;
    gap:10px;
    align-items:flex-start;
  }
  .nlpRCC-previewTitle{font-weight:950;font-size:16px;letter-spacing:-.02em}
  .nlpRCC-previewHint{color:var(--mut);font-size:12px;line-height:1.35;text-align:right}
  .nlpRCC-banner{
    position:relative;
    background:#0b1220;
    aspect-ratio:16/9;
    overflow:hidden;
  }
  .nlpRCC-banner img{
    width:100%;
    height:100%;
    /* object-fit:cover; */
    /* transform:scale(1.02); */
    filter:saturate(1.04);
  }
  .nlpRCC-banner:before{
    content:"";
    position:absolute;inset:0;
    background:linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.55));
    pointer-events:none;
  }
  .nlpRCC-bannerOverlay{
    position:absolute;left:14px;right:14px;bottom:14px;
    padding:12px;
    border-radius:18px;
    background:linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.06));
    border:1px solid rgba(255,255,255,.18);
    color:#fff;
    backdrop-filter: blur(10px);
    box-shadow:0 18px 44px rgba(0,0,0,.26);
  }
  .nlpRCC-bannerH{font-weight:950;font-size:18px;letter-spacing:-.02em; }
  .nlpRCC-bannerS{margin-top:6px;font-size:12px;opacity:.92;line-height:1.4; }
  .nlpRCC-previewFooter{
    padding:12px 14px;
    display:flex;
    justify-content:space-between;
    gap:10px;
    align-items:center;
    border-top:1px solid rgba(231,233,238,.9);
    background:linear-gradient(180deg,#fff,#fbfbfe);
  }
  .nlpRCC-fileName{font-weight:900;font-size:13px}
  .nlpRCC-sizeTag{
    padding:6px 10px;border-radius:999px;
    background:#fff1f2;
    border:1px solid rgba(160,22,42,.22);
    color:var(--a2);
    font-size:12px;
    font-weight:950;
    white-space:nowrap;
  }
  .nlpRCC-tip{padding:10px 14px 14px;color:var(--mut);font-size:12px;line-height:1.45}

  @media (prefers-reduced-motion:reduce){
    .nlpCC-btn,.nlpCC-mini,.nlpCC-cat,.nlpCC-chipGrid a,.nlpCC-step,.nlpCC-toggle,.nlpCC-optGrid .opt,
    .nlpCC-showBtns .b,.nlpCC-revHead .ar,.nlpCC-revCard,.nlpCC-sticky .s,.nlpCC-reveal,
    .nlpRCC-btn{transition:none!important}
    .nlpCC-heroScreen:before,.nlpCC-show:before{animation:none!important}
  }