:root {
   --blue-50: #E6F1FB;
   --blue-100: #B5D4F4;
   --blue-500: #185FA5;
   --blue-700: #0C447C;
   --blue-900: #042C53;
   --green-50: #EAF3DE;
   --green-200: #C0DD97;
   --green-600: #3B6D11;
   --green-800: #27500A;
   --amber-50: #FAEEDA;
   --amber-200: #EF9F27;
   --amber-700: #633806;
   --amber-900: #412402;
   --red-50: #FCEBEB;
   --red-200: #F09595;
   --red-700: #791F1F;
   --gray-50: #F8F7F4;
   --gray-100: #F0EEE9;
   --gray-200: #E0DDD6;
   --gray-400: #9A9790;
   --gray-600: #5F5E5A;
   --gray-900: #1C1C1A;
   --text: #1C1C1A;
   --text-muted: #5F5E5A;
   --text-light: #9A9790;
   --border: #E0DDD6;
   --surface: #F8F7F4;
   --white: #FFFFFF;
   --font-display: 'Fraunces', Georgia, serif;
   --font-body: 'Epilogue', sans-serif;
   --radius-sm: 6px;
   --radius-md: 10px;
   --radius-lg: 16px;
   --radius-xl: 24px;

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

 }

 /* html {
     scroll-behavior: smooth;
 } */

 body {
   font-family: var(--font-body);
   font-size: 15px;
   color: var(--text);
   background: var(--white);
   line-height: 1.6;
   -webkit-font-smoothing: antialiased;
 }

 .form-control:focus {
   background: none !important;
 }



 /* LAYOUT */
 .container {
   max-width: 1080px;
   margin: 0 auto;
   padding: 0 2rem;
 }

 section {
   padding: 5rem 0;
 }

 .section-label {
   display: inline-block;
   font-size: 11px;
   font-weight: 600;
   letter-spacing: 0.1em;
   text-transform: uppercase;
   color: var(--blue-500);
   background: var(--blue-50);
   padding: 4px 12px;
   border-radius: 20px;
   margin-bottom: 1rem;
 }

 h2 {
   font-family: var(--font-display);
   font-size: clamp(25px, 4vw, 34px) !important;
   font-weight: 400;
   color: var(--text);
   line-height: 1.2;
   letter-spacing: -0.02em;
   margin-bottom: 0.5rem;
   text-align: center;
 }

 .section-sub {
   font-size: 18px;
   color: var(--text-muted);
   margin-bottom: 3rem;
   /* max-width: 540px; */
   text-align: center;
   padding: 16px 0;
 }

 /* HERO */
 .hero {
   padding: 6rem 0 5rem;
   position: relative;
   overflow: hidden;
   text-align: center;
 }

 .hero-content {
   display: flex;
   flex-direction: column;
   align-items: center;
 }

 .hero-bg {
   position: absolute;
   inset: 0;
   background: linear-gradient(135deg, var(--blue-50) 0%, var(--white) 60%);
   z-index: 0;
 }

 /* .hero-grid-pattern {
     position: absolute;
     inset: 0;
     background-image: radial-gradient(circle, var(--gray-200) 1px, transparent 1px);
     background-size: 28px 28px;
     opacity: 0.5;
     z-index: 0;
 } */

 .hero-grid-pattern {
   position: absolute;
   inset: 0;
   background-image:
     radial-gradient(circle, var(--gray-200) 1px, transparent 1px),
     url('../img/vara-license/bg-banner.png');
   background-size:
     28px 28px,
     cover;
   background-position:
     center,
     center;
 }

 .hero .container {
   position: relative;
   z-index: 1;
 }

 .hero-badge {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   background: var(--white);
   border: 1px solid var(--border);
   border-radius: 20px;
   padding: 5px 14px 5px 10px;
   font-size: 16px;
   font-weight: 500;
   color: var(--text-muted);
   margin-bottom: 2rem;
 }

 .hero-badge-dot {
   width: 7px;
   height: 7px;
   border-radius: 50%;
   background: #22c55e;
   flex-shrink: 0;
 }

 .hero h1 {
   font-family: var(--font-display) !important;
   font-size: clamp(36px, 5vw, 60px);
   font-weight: 400;
   line-height: 1.1;
   letter-spacing: -0.03em;
   color: var(--blue-900);
   /* max-width: 680px; */
   margin-bottom: 1.5rem;
 }

 .hero h1 em {
   font-style: italic;
   color: var(--blue-500);
 }

 .hero-desc {
   font-size: 18px;
   color: var(--text-muted);
   font-family: var(--font-body) !important;
   /* max-width: 500px; */
   margin-bottom: 2.5rem;
   line-height: 1.7;
 }

 .hero-cta {
   /* display: flex; */
   gap: 12px;
   flex-wrap: wrap;
   margin-bottom: 3.5rem;
 }

 .banner-icon a img {
   width: 4%;
 }

 .btn-primarye {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   background: var(--blue-500);
   color: #fff;
   padding: 14px 26px;
   border-radius: var(--radius-md);
   font-size: 15px;
   font-weight: 500;
   text-decoration: none;
   border: none;
   cursor: pointer;
   transition: background 0.2s, transform 0.15s;
   font-family: var(--font-body);
 }

 .btn-primarye:hover {
   background: var(--blue-700);
   transform: translateY(-1px);
   color: #fff !important;
 }

 .btn-outline {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   background: transparent;
   color: var(--text);
   padding: 12px 26px;
   border-radius: var(--radius-md);
   font-size: 14px;
   font-weight: 500;
   text-decoration: none;
   border: 1px solid var(--text);
   cursor: pointer;
   transition: border-color 0.2s, background 0.2s;
   font-family: var(--font-body);
 }

 .btn-outline:hover {
   border-color: var(--gray-400);
   background: var(--surface);
 }

 .hero-statse {
   display: inline-flex;
   gap: 2.5rem;
   flex-wrap: wrap;
   padding: 2rem 6rem 0 6rem;
   border-top: 1px solid #c7c7c7;
 }

 .hero-stat-num {
   font-family: var(--font-display);
   font-size: 34px;
   color: var(--blue-900);
   letter-spacing: -0.02em;
   line-height: 1;
   margin-bottom: 2px;
 }

 .hero-stat-label {
   font-size: 18px;
   color: var(--text-muted);
   font-weight: 500;
 }

 /* FOR WHOM */

 .most-vara {
   text-align: center;
 }

 .for-grid {
   flex: 1;
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
   gap: 12px;
   /* margin-bottom: 1.5rem; */
   max-width: 700px;
 }

 .for-section {
   display: flex;
   align-items: center;
   gap: 20px;
 }

 .for-img {
   flex: 0 0 400px;
 }

 .for-img {
   width: 100%;
   height: 395px;
   display: block;
   border: 1px solid var(--border);
   border-radius: var(--radius-lg);
   transition: border-color 0.2s, box-shadow 0.2s;
   background: url(../img/vara-license/for-img.jpg) no-repeat center;
   background-size: cover;
 }

 .for-card {
   display: flex;
   gap: 14px;
   align-items: flex-start;
   padding: 1.125rem 1.25rem;
   background: var(--white);
   border: 1px solid var(--border);
   border-radius: var(--radius-lg);
   transition: border-color 0.2s, box-shadow 0.2s;
 }

 .for-card:hover {
   border-color: var(--blue-100);
   box-shadow: 0 2px 12px rgba(24, 95, 165, 0.07);
 }

 .for-icon {
   width: 36px;
   height: 36px;
   border-radius: var(--radius-sm);
   background: var(--blue-50);
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   font-size: 18px;
   color: var(--blue-500);
 }

 .for-card h3 {
   font-size: 16px;
   font-weight: 600;
   color: var(--text);
   margin-bottom: 3px;
 }

 .for-card p {
   font-size: 14px;
   color: var(--text-muted);
   line-height: 1.5;
 }

 .not-for {
   padding: 1rem 1.25rem;
   background: var(--red-50);
   border: 1px solid var(--border);
   border-radius: var(--radius-md);
   font-size: 16px;
   color: var(--text-muted);
   line-height: 1.6;
   margin-top: 4%;
 }

 .not-for strong {
   color: var(--text);
   font-weight: 600;
 }

 /* PAIN */
 .pain-section {
   background: var(--surface);
 }

 .pain-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
   gap: 12px;
 }

 .pain-card {
   background: var(--white);
   border: 1px solid var(--border);
   border-radius: var(--radius-lg);
   padding: 1.25rem;
 }

 .pain-badge {
   display: inline-block;
   font-size: 11px;
   font-weight: 600;
   color: var(--red-700);
   background: var(--red-50);
   padding: 3px 10px;
   border-radius: 20px;
   margin-bottom: 0.75rem;
 }

 .pain-card h3 {
   font-size: 16px;
   font-weight: 600;
   color: var(--text);
   margin-bottom: 6px;
 }

 .pain-card p {
   font-size: 14px;
   color: var(--text-muted);
   line-height: 1.55;
 }

 /* COMPARE */
 .compare-wrap {
   overflow-x: auto;
 }

 .compare-table {
   width: 100%;
   border-collapse: collapse;
   font-size: 14px;
 }

 .compare-table th {
   padding: 12px 16px;
   text-align: left;
   font-size: 16px;
   font-weight: 600;
   color: var(--text-muted);
   border-bottom: 1px solid var(--border);
   background: var(--surface);
 }

 .compare-table th.col-us {
   background: var(--blue-50);
   color: var(--blue-700);
   text-align: center;
 }

 .compare-table th:first-child {
   border-radius: var(--radius-sm) 0 0 0;
 }

 .compare-table td {
   padding: 13px 16px;
   border-bottom: 1px solid var(--border);
   color: var(--text-muted);
   vertical-align: middle;
 }

 .compare-table td.col-us {
   background: var(--blue-50);
   text-align: center;
   font-weight: 600;
   color: var(--green-600);
 }

 .compare-table td:first-child {
   font-weight: 500;
   color: var(--text);
 }

 .compare-table tr:last-child td {
   border-bottom: none;
 }

 .tick {
   color: var(--green-600);
   font-size: 16px;
 }

 .cross {
   color: var(--red-700);
   font-size: 16px;
 }

 /* PROCESS */
 .steps {
   display: flex;
   flex-direction: column;
 }

 .step {
   display: flex;
   gap: 20px;
   padding: 1.5rem 0;
   border-bottom: 1px solid var(--border);
   align-items: flex-start;
 }

 .process-wrapper {
   display: flex;
   gap: 50px;
   align-items: flex-start;
 }

 .process-image {
   width: 75%;
   height: 780px;
   border: 1px solid var(--border);
   /* position: sticky; */
   top: 100px;
   background: url(../img/vara-license/setps-img.jpg) center no-repeat;
   background-size: cover;
   border-radius: var(--radius-lg);
 }

 .process-image img {
   width: 100%;
   display: block;
   border-radius: 20px;
   box-shadow: 0 10px 30px rgba(0, 0, 0, .1);
 }

 .step:last-child {
   border-bottom: none;
 }

 .step-left {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 4px;
   min-width: 32px;
 }

 .step-num {
   width: 32px;
   height: 32px;
   border-radius: 50%;
   background: var(--blue-50);
   color: var(--blue-500);
   font-size: 13px;
   font-weight: 600;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   border: 1px solid var(--blue-100);
 }

 .step-content h3 {
   font-size: 16px;
   font-weight: 600;
   color: var(--text);
   margin-bottom: 5px;
 }

 .step-content p {
   font-size: 14px;
   color: var(--text-muted);
   line-height: 1.55;
   margin-bottom: 6px;
 }

 .timeline-pill {
   display: inline-block;
   font-size: 11px;
   font-weight: 600;
   background: var(--green-50);
   color: var(--green-600);
   padding: 3px 10px;
   border-radius: 20px;
 }

 /* INCLUSIONS */
 .incl-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
   gap: 12px;
 }

 .incl-item {
   display: flex;
   gap: 14px;
   align-items: flex-start;
   padding: 1.125rem 1.25rem;
   background: var(--white);
   border: 1px solid var(--border);
   border-radius: var(--radius-lg);
 }

 .incl-icon {
   width: 34px;
   height: 34px;
   border-radius: var(--radius-sm);
   background: var(--green-50);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 17px;
   color: var(--green-600);
   flex-shrink: 0;
 }

 .incl-item h3 {
   font-size: 16px;
   font-weight: 600;
   color: var(--text);
   margin-bottom: 3px;
 }

 .incl-item p {
   font-size: 14px;
   color: var(--text-muted);
   line-height: 1.5;
   margin-bottom: 0 !important;
 }

 /* GUARANTEE */
 .guarantee-section {
   /* background: var(--surface); */
   background-image: radial-gradient(var(--surface) 1px, transparent 1px), url(../img/vara-license/tab-bg.png);
   background-size: cover;
 }

 .guarantee-box {
   background: var(--white);
   border: 1px solid #ffd4d4;
   border-radius: var(--radius-xl);
   padding: 2.5rem;
   display: flex;
   gap: 2rem;
   align-items: flex-start;
   /* max-width: 800px; */
 }

 .guarantee-icon-wrap {
   width: 56px;
   height: 56px;
   border-radius: var(--radius-md);
   background: var(--green-50);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 26px;
   flex-shrink: 0;
 }

 .guarantee-box h3 {
   font-family: var(--font-display);
   font-size: 22px;
   font-weight: 400;
   color: var(--green-800);
   margin-bottom: 0.75rem;
   letter-spacing: -0.01em;
 }

 .guarantee-box p {
   font-size: 14px;
   color: var(--green-600);
   line-height: 1.7;
   margin-bottom: 1rem;
 }

 .gtags {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
 }

 .gtag {
   background: var(--green-50);
   color: var(--green-600);
   border: 1px solid var(--green-200);
   font-size: 12px;
   font-weight: 500;
   padding: 4px 12px;
   border-radius: 20px;
 }

 /* CREDENTIALS */
 .cred-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
   gap: 12px;
   margin-bottom: 2rem;
 }

 .cred-card {
   background: var(--white);
   border: 1px solid var(--border);
   border-radius: var(--radius-lg);
   padding: 1.25rem;
   text-align: center;
 }

 .cred-num {
   /* font-family: var(--font-display); */
   font-size: 26px;
   color: var(--blue-500);
   margin-bottom: 5px;
   letter-spacing: -0.02em;
 }

 .cred-label {
   font-size: 16px;
   color: var(--text-muted);
   line-height: 1.4;
 }

 .team-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
   gap: 12px;
 }

 .team-card {
   background: var(--white);
   border: 1px solid var(--border);
   border-radius: var(--radius-lg);
   padding: 1.25rem;
   display: flex;
   gap: 12px;
   align-items: flex-start;
   transition: border-color 0.2s;
 }

 .team-card:hover {
   border-color: var(--blue-100);
 }

 .team-avatar {
   width: 40px;
   height: 40px;
   border-radius: 50%;
   background: var(--blue-50);
   color: var(--blue-500);
   font-size: 13px;
   font-weight: 600;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   border: 1px solid var(--blue-100);
 }

 .team-card h3 {
   font-size: 16px;
   font-weight: 600;
   color: var(--text);
   margin-bottom: 3px;
 }

 .team-card p {
   font-size: 13px;
   color: var(--text-muted);
   line-height: 1.5;
 }

 /* TESTIMONIALS */
 .testimonial-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
   gap: 16px;
 }

 .testimonial {
   background: var(--surface);
   border: 1px solid var(--border);
   border-radius: var(--radius-lg);
   padding: 1.5rem;
   display: flex;
   flex-direction: column;
   gap: 1rem;
 }

 .t-stars {
   color: #f59e0b;
   font-size: 18px;
   letter-spacing: 2px;
 }

 .t-text {
   font-size: 14px;
   color: var(--text);
   line-height: 1.7;
   font-style: italic;
   flex: 1;
 }

 .t-author {
   display: flex;
   align-items: center;
   gap: 10px;
 }

 .t-avatar {
   width: 36px;
   height: 36px;
   border-radius: 50%;
   background: var(--blue-50);
   color: var(--blue-500);
   font-size: 12px;
   font-weight: 600;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
 }

 .t-name {
   font-size: 13px;
   font-weight: 600;
   color: var(--text);
 }

 .t-role {
   font-size: 12px;
   color: var(--text-muted);
 }

 /* URGENCY + MAGNET */
 .urgency-section {
   /* background: var(--surface); */
   background-image: radial-gradient(var(--surface) 1px, transparent 1px), url(../img/vara-license/vara-q3.png);
 }

 .urgency-box {
   background: var(--amber-50);
   border: 1px solid #EF9F27;
   border-radius: var(--radius-lg);
   padding: 1.5rem;
   display: flex;
   gap: 16px;
   align-items: flex-start;
   margin-bottom: 1.5rem;
 }

 .urgency-icon {
   font-size: 22px;
   margin-top: 2px;
 }

 .urgency-box h3 {
   font-size: 18px;
   font-weight: 600;
   color: var(--amber-900);
   margin-bottom: 5px;
 }

 .urgency-box p {
   font-size: 14px;
   color: var(--amber-700);
   line-height: 1.6;
 }

 .magnet-box {
   background: var(--white);
   border: 1px solid var(--border);
   border-radius: var(--radius-lg);
   padding: 1.5rem;
   display: flex;
   gap: 16px;
   align-items: flex-start;
 }

 .magnet-icon {
   width: 44px;
   height: 44px;
   border-radius: var(--radius-md);
   background: var(--blue-50);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 22px;
   flex-shrink: 0;
 }

 .magnet-box h3 {
   font-size: 18px;
   font-weight: 600;
   color: var(--text);
   margin-bottom: 5px;
 }

 .magnet-box p {
   font-size: 16px;
   color: var(--text-muted);
   line-height: 1.6;
   margin-bottom: 0.875rem;
 }

 /* FAQ */
 .faq-list {
   border-top: 1px solid var(--border);
 }

 .faq-iteme {
   border-bottom: 1px solid var(--border);
 }

 .faq-qe {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 1.125rem 0;
   font-size: 16px;
   font-weight: 500;
   color: var(--text);
   cursor: pointer;
   gap: 1rem;
   user-select: none;
 }

 .faq-qe:hover {
   color: var(--blue-500);
 }

 .faq-chevron {
   font-size: 16px;
   color: var(--text-muted);
   transition: transform 0.25s;
   flex-shrink: 0;
 }

 .faq-ae {
   font-size: 16px;
   color: var(--text-muted);
   line-height: 1.7;
   padding-bottom: 1.125rem;
   display: none;
 }

 .faq-iteme.open .faq-ae {
   display: block;
 }

 .faq-iteme.open .faq-chevron {
   transform: rotate(180deg);
 }

 /* FINAL CTA */
 .final-cta {
   background: var(--blue-900);
   padding: 6rem 0;
   text-align: center;
   position: relative;
   overflow: hidden;
 }

 .final-cta-bg {
   position: absolute;
   inset: 0;
   background-image: radial-gradient(circle, var(--blue-900) 1px, transparent 1px), url(../img/vara-license/ready-to-get.png);
   background-size: 28px 28px, cover;
   background-position: center, center;
 }

 .final-cta .container {
   position: relative;
   z-index: 1;
 }

 .slots-pill {
   display: inline-block;
   background: rgba(255, 255, 255, 0.12);
   border: 1px solid rgba(255, 255, 255, 0.2);
   color: #fff;
   font-size: 12px;
   font-weight: 500;
   padding: 5px 14px;
   border-radius: 20px;
   margin-bottom: 1.5rem;
 }

 .final-cta h2 {
   font-family: var(--font-display);
   font-size: clamp(30px, 5vw, 48px);
   font-weight: 400;
   color: #fff;
   letter-spacing: -0.02em;
   margin-bottom: 1rem;
   max-width: 600px;
   margin-left: auto;
   margin-right: auto;
 }

 .final-cta p {
   font-size: 16px;
   color: rgba(255, 255, 255, 0.65);
   margin-bottom: 2.5rem;
   max-width: 460px;
   margin-left: auto;
   margin-right: auto;
 }

 .btn-white {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   background: #fff;
   color: var(--blue-900);
   padding: 13px 26px;
   border-radius: var(--radius-md);
   font-size: 14px;
   font-weight: 600;
   text-decoration: none;
   border: none;
   cursor: pointer;
   font-family: var(--font-body);
   transition: opacity 0.2s;
 }

 .btn-white:hover {
   opacity: 0.92;
 }

 .btn-white-outline {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   background: transparent;
   color: #fff;
   padding: 13px 26px;
   border-radius: var(--radius-md);
   font-size: 14px;
   font-weight: 500;
   text-decoration: none;
   border: 1px solid rgba(255, 255, 255, 0.3);
   cursor: pointer;
   font-family: var(--font-body);
   transition: border-color 0.2s, background 0.2s;
 }

 .btn-white-outline:hover {
   border-color: rgba(255, 255, 255, 0.6);
   background: rgba(255, 255, 255, 0.06);
 }

 .final-cta-btns {
   display: flex;
   gap: 12px;
   justify-content: center;
   flex-wrap: wrap;
 }

 /* marquee */

 /* .logo-slider {
    padding: 80px 0;
    background: #f8f8f8;
    overflow: hidden;
    text-align: center;
} */

 .logo-slider h2 {
   font-size: 40px;
   margin-bottom: 15px;
   font-weight: 700;
 }

 .logo-track {
   width: 100%;
   overflow: hidden;
   position: relative;
 }

 .logo-slide {
   display: flex;
   align-items: center;
   gap: 80px;
   width: max-content;
   animation: marquee 25s linear infinite;
 }

 .logo-slide img {
   height: 80px;
   width: 150px;
   opacity: 0.8;
   transition: 0.3s;
   object-fit: contain;
 }

 .logo-slide img:hover {
   opacity: 1;
   transform: scale(1.05);
 }

 @keyframes marquee {
   from {
     transform: translateX(0);
   }

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

 .logo-track::before,
 .logo-track::after {
   content: '';
   position: absolute;
   top: 0;
   width: 120px;
   height: 100%;
   z-index: 2;
 }

 .logo-track::before {
   left: 0;
   background: linear-gradient(to right, #ffffff, transparent);
 }

 .logo-track::after {
   right: 0;
   background: linear-gradient(to left, #ffffff, transparent);
 }

 .logo-slide:hover {
   animation-play-state: paused;
 }

 .cr-logo-track::before {
   background: linear-gradient(to right, #f8f7f4, transparent);
 }

 .cr-logo-track::after {
   background: linear-gradient(to left, #f8f7f4, transparent);
 }


 /* tab-content */

 .sat-tabs-section {
   display: flex;
   gap: 40px;
   align-items: flex-start;
 }

 .sat-tabs-nav {
   width: 350px;
   border-right: 1px solid #9f1f1f;
   padding-right: 2%;
 }

 /* .advisory-services::before{
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    background: url('../img/vara-license/advisory-services.png') no-repeat center;
    background-size: contain;
    margin-right: 8px;
} */
 .content-img {
   width: 100%;
   max-width: 400px;
   display: block;
   margin: 15px 0;
   border-radius: 10px;
 }

 .tab-btn {
   width: 100%;
   background: none !important;
   color: #000000;
   border: none;
   padding: 18px 25px;
   margin-bottom: 3px;
   text-align: left;
   font-size: 18px;
   font-weight: 600;
   /* border-radius:6px; */
   cursor: pointer;
   position: relative;
   transition: .3s;
   opacity: 0.5;
 }

 /* #tabText img,
 .tab-image {
     width: 150px;
     height: auto;
     display: block;
     position: absolute;
     right: 23%;
     top: 52%;
     opacity: 0.8;
 } */

 #tabText img,
 .tab-image {
   width: 90px;
   height: auto;
   display: block;
   margin-bottom: 4%;
   opacity: 0.8;
 }

 .sat-tab-content ul li {
   list-style: lower-alpha;
 }

 .tab-btn:hover {
   /* background:#c9a062; */
   opacity: 1;
 }

 .tab-btn.active {
   /* background:#c9a062; */
   border-bottom: 2px solid red;
   opacity: 1;
 }

 .tab-btn:focus,
 .tab-btn:focus-visible {
   outline: none;
   box-shadow: none;
 }

 .tab-btn.active::after {
   /* content:""; */
   position: absolute;
   top: 0;
   right: -25px;
   width: 0;
   height: 0;
   border-top: 31px solid transparent;
   border-bottom: 31px solid transparent;
   border-left: 25px solid #c9a062;
 }


 .sat-tab-content {
   flex: 1;
   /* background:#c9a062; */
   padding: 0px 25px 0px 0px;
   /* min-height:400px; */
   border-radius: 4px;
   display: flex;
   flex-direction: column;
   justify-content: center;
 }

 .sat-tab-content h2 {
   color: var(--green-600);
   font-size: 42px;
   margin-bottom: 20px;
 }

 .sat-tab-content p {
   color: #5f5e5a;
   font-size: 16px;
   line-height: 1.8;
   max-width: 800px;
 }

 /* FOOTER */


 /* SVG ICONS inline */
 .icon {
   display: inline-block;
   width: 20px;
   height: 20px;
   vertical-align: middle;
 }

 /* DIVIDER */
 .divider {
   height: 1px;
   background: var(--border);
 }

 /* ANIMATIONS */
 @keyframes fadeUp {
   from {
     opacity: 0;
     transform: translateY(18px);
   }

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

 .hero h1,
 .hero-desc,
 .hero-cta,
 .hero-badge {
   animation: fadeUp 0.6s ease both;
 }

 .hero-badge {
   animation-delay: 0s;
 }

 .hero h1 {
   animation-delay: 0.1s;
 }

 .hero-desc {
   animation-delay: 0.2s;
 }

 .hero-cta {
   animation-delay: 0.3s;
 }


 /*----------------------- Get free readiness checklist -----------------------*/

 /* General Font */
body { font-family: 'Segoe UI', sans-serif; }

/* The Download Button Style */
.btn-main {
    padding: 12px 25px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
}

/* Modal Overlay */
.modal {
    display: none; /* Hidden by default */
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.7);
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

/* Modal Box */
.modal-contente {
    background: white;
    padding: 50px;
    width: 90%;
    max-width: 500px;
    border-radius: 10px;
    text-align: center;
    position: relative;
}

.close-btn {
    position: absolute;
    right: 15px; top: 10px;
    font-size: 24px;
    cursor: pointer;
}

input[type="email"] {
    width: 100%;
    padding: 12px;
    margin: 20px 0;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box;
}

#submitBtn {
    width: 100%;
    padding: 12px;
    background: #28a745;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.hidden { display: none; }

 /*----------------------- Get free readiness checklist -----------------------*/


 /*-------------------------------------- <launch-your-crypto-exchange page-css class-add-cr> -------------------------------------------------------------*/












 body.drawer-open {
   overflow: hidden;
 }

 .cr-container-inner {
   max-width: 1500px;
   margin: 0 auto;
   padding: 0 2rem;
 }

 .cr-container-inner {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 16%;
 }

 .cr-content {
   flex: 1.8;
   max-width: 1500px;
 }

 /* cr-banner-form-------------------------------------------------------- */

 .cr-banner-form{
    width: 475px;
    margin: 0 auto 0 45px;
    max-width: 100%;
    border-radius: 24px;
  padding: 10% 5%;
  backdrop-filter: blur(9px);
    background: rgb(201 201 201 / 36%);
    border: 1px solid rgba(255, 255, 255, 0.4);
 }
 
.cr-form-head-section h4{
      font-size: 25px;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
    position: relative;
    color: #ffffff !important;
 }
 

 .cr-banner-right-form input{
  background: #ffffffc7 !important;
  color: #000 !important;
 }

 .cr-banner-right-form input::placeholder,.cr-banner-right-form textarea::placeholder{
    color: #000 !important;
    opacity: 1; /* Firefox support */
}

.cr-banner-right-form textarea{
  color: #000 !important;
}

 .form-row input[type="email"]{
  margin: 0;
 }

 .nice-select{
  background: #ffffffc7 !important;
  color: #000 !important;
 }

 .cr-banner-right-form textarea{
  background: #ffffffc7 !important;
 }

 .cr-banner-button button{
  color: #fff !important;
  background: var(--red) !important;
  font-size: 16px !important;
 }

 .cr-image {
   flex: 1;
   /* background: #000; */
 }

 /* cr-banner-form-------------------------------------------------------- */


 .cr-logo-slide img {
   width: 90px;
 }

 .cr-sub {
   padding-bottom: 1.3rem;
   padding-top: 0.4rem;
   font-size: 16px;
   color: #484848;
 }


 .cr-container {
   max-width: 1080px;
   margin: 0 auto;
   padding: 0 2rem;
 }

 .cr-text-align {
   text-align: center;
 }

 .chip,
 .cr-chip {
   display: inline-block;
   font-size: 11px;
   font-weight: 600;
   letter-spacing: 0.09em;
   text-transform: uppercase;
   color: var(--accent);
   padding-bottom: 6px;
   border-bottom: 2px solid var(--accent);
   margin-bottom: 1.1rem;
 }

 h2 {
   font-family: var(--font-display);
   font-size: clamp(28px, 4vw, 42px);
   font-weight: 400;
   color: var(--ink);
   line-height: 1.12;
   letter-spacing: -0.025em;
   margin-bottom: 0.6rem;
 }

 .sub {
   font-size: 15px;
   color: var(--ink-60);
   max-width: 560px;
   margin-bottom: 3rem;
 }

 /* ══ HERO ══ */
 .cr-hero {
   padding: 0;
   min-height: 88vh;
   display: grid;
   grid-template-columns: 1fr;
   align-items: stretch;
   position: relative;
   overflow: hidden;
 }

 .cr-hero-left {
   /* background: #0f0f14; */
   background: url(../img/vara-license/launch-banner-legal-bg.png) center no-repeat;
   background-size: cover;
   padding: 4rem 3rem 5rem;
   display: flex;
   flex-direction: column;
   justify-content: center;
   position: relative;
   overflow: hidden;
 }

 .cr-hero-texture {
   position: absolute;
   inset: 0;
   opacity: 0.035;
   background-image:
     radial-gradient(circle, rgba(255, 255, 255, 0.8) 1px, transparent 1px);
   background-size: 22px 22px;
 }

 .cr-hero-glow {
   position: absolute;
   bottom: -160px;
   left: -160px;
   width: 500px;
   height: 500px;
   border-radius: 50%;
   background: radial-gradient(circle, rgba(27, 79, 216, 0.3) 0%, transparent 70%);
 }

 .cr-hero-left .cr-container-inner {
   position: relative;
   z-index: 1;
   /* max-width: 540px; */
 }

 .cr-eyebrow {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   border: 1px solid rgba(255, 255, 255, 0.15);
   background: rgba(255, 255, 255, 0.06);
   border-radius: 20px;
   padding: 5px 14px;
   font-size: 12px;
   font-weight: 500;
   color: rgba(255, 255, 255, 0.65);
   margin-bottom: 2rem;
 }

 .cr-eyebrow-dot {
   width: 7px;
   height: 7px;
   border-radius: 50%;
   background: #4ADE80;
   flex-shrink: 0;
 }

 .cr-hero h1 {
   font-family: var(--font-display) !important;
   font-size: clamp(34px, 4.5vw, 56px);
   font-weight: 400;
   color: var(--white);
   line-height: 1.08;
   letter-spacing: -0.03em;
   margin-bottom: 1.5rem;
 }

 .cr-hero h1 em {
   font-style: italic;
   color: #93C5FD;
 }

 .cr-hero-sub {
   font-size: 16px;
   color: rgba(255, 255, 255, 0.6);
   line-height: 1.7;
   max-width: 460px;
   margin-bottom: 2.5rem;
 }

 .cr-hero-btns {
   display: flex;
   gap: 12px;
   flex-wrap: wrap;
   margin-bottom: 3.5rem;
 }

 .cr-btn-primary {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   /* background: var(--accent); */
   background: var(--red);
   color: #fff;
   padding: 13px 24px;
   border-radius: var(--r-md);
   font-size: 14px;
   font-weight: 600;
   text-decoration: none;
   border: none;
   cursor: pointer;
   font-family: var(--font-body);
   transition: background 0.2s, transform 0.15s;
 }

 .cr-btn-primary:hover {
   background: var(--accent);
   transform: translateY(-1px);
 }

 .cr-hero-btns a:hover {
   color: #fff;
 }

 .cr-btn-ghost {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   background: transparent;
   color: rgba(255, 255, 255, 0.75);
   padding: 13px 24px;
   border-radius: var(--r-md);
   font-size: 14px;
   font-weight: 500;
   text-decoration: none;
   border: 1px solid rgba(255, 255, 255, 0.2);
   cursor: pointer;
   font-family: var(--font-body);
   transition: border-color 0.2s;
 }

 .cr-btn-ghost:hover {
   border-color: rgba(255, 255, 255, 0.5);
 }

 .cr-hero-proof {
   display: flex;
   gap: 1.8rem;
   flex-wrap: wrap;
 }

 .cr-proof-item {}

 .cr-proof-num {
   font-family: var(--font-display);
   font-size: 26px;
   color: #fff;
   letter-spacing: -0.02em;
   line-height: 1;
 }

 .cr-proof-label {
   font-size: 13px;
   color: rgba(255 255 255 / 56%);
   margin-top: 2px;
 }

 .cr-proof-sep {
   width: 1px;
   background: rgba(255, 255, 255, 0.12);
   align-self: stretch;
 }

 /* RIGHT PANEL */
 .cr-hero-right {
   background: var(--ink-05);
   border-left: 1px solid var(--border);
   padding: 4rem 2.5rem;
   display: flex;
   flex-direction: column;
   justify-content: center;
 }

 .cr-consult-card {}

 .cr-consult-card h3 {
   font-family: var(--font-display);
   font-size: 22px;
   font-weight: 400;
   color: var(--ink);
   margin-bottom: 4px;
   letter-spacing: -0.01em;
 }

 .cr-consult-card .cr-card-sub {
   font-size: 13px;
   color: var(--ink-60);
   margin-bottom: 1.5rem;
   line-height: 1.5;
 }

 .cr-check-list {
   display: flex;
   flex-direction: column;
   gap: 7px;
   margin-bottom: 1.75rem;
 }

 .cr-check-item {
   display: flex;
   align-items: flex-start;
   gap: 9px;
   font-size: 13px;
   color: var(--ink-60);
 }

 .cr-check-icon {
   color: var(--green);
   font-size: 15px;
   flex-shrink: 0;
   margin-top: 1px;
 }

 .cr-form-row {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 10px;
 }

 .cr-field {
   margin-bottom: 10px;
 }

 .cr-field label {
   display: block;
   font-size: 11px;
   font-weight: 600;
   color: var(--ink-60);
   margin-bottom: 4px;
   letter-spacing: 0.03em;
   text-transform: uppercase;
 }

 .cr-field input,
 .cr-field select,
 .cr-field textarea {
   width: 100%;
   padding: 10px 12px;
   border: 1px solid var(--border);
   border-radius: var(--r-md);
   font-size: 13px;
   font-family: var(--font-body);
   color: var(--ink);
   background: var(--white);
   outline: none;
   transition: border-color 0.2s;
 }

 .cr-field input:focus,
 .cr-field select:focus,
 .cr-field textarea:focus {
   border-color: var(--accent);
 }

 .cr-field textarea {
   resize: none;
 }

 .submit-btn {
   width: 100%;
   background: var(--ink);
   color: #fff;
   padding: 13px;
   border-radius: var(--r-md);
   border: none;
   cursor: pointer;
   font-size: 14px;
   font-weight: 600;
   font-family: var(--font-body);
   transition: background 0.2s;
   margin-top: 4px;
 }

 .submit-btn:hover {
   background: var(--ink-80);
 }

 .cr-form-note {
   font-size: 11px;
   color: var(--ink-40);
   text-align: center;
   margin-top: 9px;
 }

 /* ══ TICKER ══ */
 .cr-ticker {
   background: var(--ink);
   padding: 1rem 0;
   overflow: hidden;
   border-top: 1px solid rgba(255, 255, 255, 0.07);
 }

 .cr-ticker-inner {
   display: flex;
   gap: 4rem;
   white-space: nowrap;
   animation: ticker 30s linear infinite;
   width: max-content;
 }

 @keyframes ticker {
   from {
     transform: translateX(0);
   }

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

 .cr-ticker-item {
   font-size: 12px;
   font-weight: 500;
   color: rgba(255, 255, 255, 0.45);
   letter-spacing: 0.05em;
   text-transform: uppercase;
   display: flex;
   align-items: center;
   gap: 0.75rem;
 }

 .cr-ticker-dot {
   width: 4px;
   height: 4px;
   border-radius: 50%;
   background: var(--accent);
   flex-shrink: 0;
 }

 /* ══ COST OF DELAY ══ */
 .cr-cost-section {
   background: var(--surface);
   border-top: 1px solid #FFE4E6;
   border-bottom: 1px solid #FFE4E6;
 }

 .cr-cost-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 3rem;
   align-items: center;
 }

 .cr-cost-list {
   display: flex;
   flex-direction: column;
   gap: 10px;
 }

 .cr-cost-item {
   display: flex;
   align-items: flex-start;
   gap: 12px;
   background: var(--white);
   border: 1px solid #FECDD3;
   border-radius: var(--r-lg);
   padding: 1rem 1.25rem;
 }

 .cr-cost-x {
   font-size: 18px;
   color: var(--red);
   flex-shrink: 0;
   margin-top: 1px;
 }

 .cr-cost-item h3 {
   font-size: 16px;
   font-weight: 600;
   color: var(--ink);
   margin-bottom: 8px;
 }

 .cr-cost-item p {
   font-size: 14px;
   color: var(--ink-60);
   line-height: 1.5;
 }

 .cr-stat-card {
   margin-top: 35%;
 }

 .cr-cost-stat-card {
   background: var(--white);
   border: 1px solid #FECDD3;
   border-radius: var(--r-xl);
   padding: 2rem;
   text-align: center;
   margin-bottom: 1rem;
 }

 .cr-cost-img {
   padding: 0.4rem;
 }

 .cr-cost-img img {
   border-radius: 15px;
 }

 .cr-cost-big {
   font-family: var(--font-display);
   font-size: 52px;
   font-weight: 300;
   color: var(--red);
   letter-spacing: -0.04em;
   line-height: 1;
   margin-bottom: 6px;
 }

 .cr-cost-big-label img {
   width: 100%;
 }

 .cr-cost-big-label {
   font-size: 14px;
   color: var(--ink-60);
   line-height: 1.5;
 }

 .cr-cost-sub-stats {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 10px;
 }

 .cr-cost-sub {
   background: var(--white);
   border: 1px solid #FECDD3;
   border-radius: var(--r-lg);
   padding: 1rem;
   text-align: center;
 }

 .cr-cost-sub-num {
   font-family: var(--font-display);
   font-size: 24px;
   color: var(--red);
   letter-spacing: -0.02em;
 }

 .cr-cost-sub-label {
   font-size: 13px;
   color: var(--ink-60);
   margin-top: 8px;
   line-height: 1.4;
 }

 /* ══ FOR WHOM ══ */
 .cr-for-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
   gap: 10px;
 }

 .cr-for-card {
   border: 1px solid var(--border);
   border-radius: var(--r-lg);
   padding: 1.25rem;
   background: var(--white);
   transition: border-color 0.2s, box-shadow 0.2s;
   display: flex;
   flex-direction: column;
   gap: 10px;
 }

 .cr-for-card:hover {
   border-color: var(--accent-100);
   box-shadow: 0 1px 5px rgba(0, 0, 0, 1.06), 0 4px 10px rgba(0, 0, 0, 0.05);
 }

 .cr-for-icon {
   width: 40px;
   height: 40px;
   border-radius: var(--r-sm);
   background: var(--accent-50);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 20px;
   flex-shrink: 0;
 }

 .cr-for-card h3 {
   font-size: 16px;
   font-weight: 600;
   color: var(--ink);
 }

 .cr-for-card p {
   font-size: 14px;
   color: var(--ink-60);
   line-height: 1.5;
 }

 .cr-not-for {
   margin-top: 1.25rem;
   padding: 1rem 1.25rem;
   background: var(--red-50);
   border: 1px solid var(--border);
   border-radius: var(--r-md);
   font-size: 16px;
   color: var(--ink-60);
   line-height: 1.6;
 }

 .cr-not-for strong {
   color: var(--ink);
   font-weight: 600;
 }

 /* ══ COMPARE ══ */
 .cr-compare-section {
   background-image: radial-gradient(var(--ink-05) 1px, transparent 1px), url(../img/vara-license/table-bg.png);
   background-size: cover;
   /* background: var(--ink-05), url(../img/vara-license/table-bg.png) center no-repeat; */
   position: relative;
 }

 .cr-compare-section::before {
   position: absolute;
   content: '*T&c apply';
   right: 3%;
   bottom: 3%;
   color: #fff;
   font-size: 10px;
 }

 .cr-compare-wrap {
   overflow-x: auto;
   border-radius: var(--r-xl);
   border: 1px solid var(--border);
   box-shadow: var(--shadow-card);
 }

 .cr-compare-table {
   width: 100%;
   border-collapse: collapse;
   font-size: 13.5px;
 }

 .cr-compare-table th {
   padding: 13px 18px;
   text-align: left;
   font-size: 11px;
   font-weight: 600;
   letter-spacing: 0.05em;
   text-transform: uppercase;
   color: var(--ink-60);
   background: var(--ink-05);
   border-bottom: 1px solid var(--border);
 }

 .cr-compare-table th.cr-col-us {
   background: var(--ink);
   color: #fff;
   text-align: center;
 }

 .cr-compare-table td {
   padding: 13px 18px;
   border-bottom: 1px solid var(--border);
   color: var(--ink-60);
   background: var(--white);
   vertical-align: middle;
 }

 .cr-compare-table td.cr-col-us {
   background: var(--accent-50);
   text-align: center;
   font-weight: 600;
   color: var(--green);
 }

 .cr-compare-table td:first-child {
   font-weight: 500;
   color: var(--ink);
 }

 .cr-compare-table tr:last-child td {
   border-bottom: none;
 }

 .cr-tick {
   color: var(--green);
 }

 .cr-cross {
   color: var(--red);
 }

 /* ══ PROCESS ══ */
 .cr-steps {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
   gap: 1px;
   background: var(--border);
   border-radius: var(--r-xl);
   overflow: hidden;
   border: 1px solid var(--border);
 }

 .cr-step-card {
   background: var(--white);
   padding: 2rem 1.75rem;
 }

 .cr-step-num {
   font-family: var(--font-display);
   font-size: 13px;
   font-weight: 500;
   color: var(--accent);
   letter-spacing: 0.05em;
   margin-bottom: 1rem;
 }

 .cr-step-line {
   width: 32px;
   height: 2px;
   background: var(--accent);
   margin-bottom: 1rem;
 }

 .cr-step-card h3 {
   font-size: 16px;
   font-weight: 600;
   color: var(--ink);
   margin-bottom: 0.5rem;
 }

 .cr-step-card p {
   font-size: 13px;
   color: var(--ink-60);
   line-height: 1.6;
 }

 .cr-step-detail {
   margin-top: 1rem;
   display: flex;
   flex-direction: column;
   gap: 5px;
 }

 .cr-step-detail-item {
   font-size: 12px;
   color: var(--ink-60);
   display: flex;
   gap: 7px;
   align-items: flex-start;
 }

 .cr-step-detail-item::before {
   content: "→";
   color: var(--accent);
   flex-shrink: 0;
   font-size: 11px;
   margin-top: 2px;
 }

 .cr-step-pill {
   display: inline-block;
   font-size: 10px;
   font-weight: 600;
   background: var(--green-50);
   color: var(--green);
   border: 1px solid var(--green-border);
   padding: 3px 9px;
   border-radius: 20px;
   margin-top: 0.875rem;
 }

 /* ══ CASE STUDIES ══ */
 .cases-section {
   background-image: radial-gradient(var(--ink) 1px, transparent 1px), url(../img/vara-license/case-study-bg.png);
   background-size: cover;
   /* background: var(--ink); */
 }

 .cases-section .chip {
   color: #93C5FD;
   border-color: rgba(147, 197, 253, 0.4);
 }

 .cases-section h2 {
   color: #fff;
 }

 .cases-section .sub {
   color: rgba(255, 255, 255, 0.5);
 }

 .cases-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
   gap: 16px;
 }

 .case-card {
   /* background: rgba(255, 255, 255, 0.04); */
   background: #0e0e19;
   border: 1px solid rgba(255, 255, 255, 0.09);
   border-radius: var(--r-xl);
   padding: 2rem;
   display: flex;
   flex-direction: column;
   gap: 1.25rem;
   transition: border-color 0.2s, background 0.2s;
 }

 .case-card:hover {
   border-color: rgba(255, 255, 255, 0.18);
   background: rgba(255, 255, 255, 0.06);
 }

 .case-tag {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   background: rgba(27, 79, 216, 0.2);
   border: 1px solid rgba(147, 197, 253, 0.25);
   border-radius: 20px;
   padding: 4px 12px;
   font-size: 11px;
   font-weight: 600;
   color: #93C5FD;
 }

 .case-card h3 {
   font-family: var(--font-display);
   font-size: 16px;
   font-weight: 600;
   color: #fff;
   line-height: 1.4;
   letter-spacing: -0.01em;
 }

 .case-situation {
   font-size: 13px;
   color: rgba(255, 255, 255, 0.5);
   line-height: 1.6;
 }

 .case-divider {
   height: 1px;
   background: rgba(255, 255, 255, 0.08);
 }

 .cr-case-steps {
   display: flex;
   flex-direction: column;
   gap: 7px;
 }

 .cr-case-step {
   display: flex;
   gap: 9px;
   align-items: flex-start;
   font-size: 12px;
   color: rgba(255, 255, 255, 0.6);
 }

 .cr-case-step::before {
   content: "→";
   color: #93C5FD;
   flex-shrink: 0;
   font-size: 11px;
   margin-top: 2px;
 }

 .case-results {
   display: flex;
   gap: 10px;
   flex-wrap: wrap;
   margin-top: 0.25rem;
 }

 .result-pill {
   background: rgba(74, 222, 128, 0.1);
   border: 1px solid rgba(74, 222, 128, 0.25);
   border-radius: 20px;
   padding: 4px 12px;
   font-size: 12px;
   font-weight: 600;
   color: #4ADE80;
 }

 .cr-our-end{
      background-image: radial-gradient(var(--white) 1px, transparent 1px), url(../img/vara-license/our-end-to-end.jpg);
    background-size: cover;
    position: relative;
 }

  .cr-our-core{
    /* padding: 2rem; */
      display: flex;
    flex-wrap: wrap;
      gap: 0.5rem;
      justify-content: center;
    }

  .cr-result-pill {
   background: rgb(16 27 63);
    border: 1px solid rgb(49 69 110);
    border-radius: 32px;
    padding: 10px 29px;
    font-size: 18px;
    /* font-weight: 600; */
    color: #93c5de;
    /* margin: 0 8px; */
 }

 .cr-case-label {
   font-size: 10px;
   font-weight: 600;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   color: rgba(255, 255, 255, 0.3);
   margin-bottom: 5px;
 }

 /* ══ TESTIMONIALS ══ */
 .cr-t-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
   gap: 16px;
 }

 .cr-t-card {
   background: var(--white);
   border: 1px solid var(--border);
   border-radius: var(--r-xl);
   padding: 1.75rem;
   display: flex;
   flex-direction: column;
   gap: 1.25rem;
   box-shadow: var(--shadow-card);
   transition: box-shadow 0.2s;
 }

 .cr-t-card:hover {
   box-shadow: var(--shadow-lift);
 }

 .cr-t-stars {
   color: #F59E0B;
   font-size: 16px;
   letter-spacing: 3px;
 }

 .cr-t-quote {
   font-family: var(--font-display);
   font-size: 14px;
   font-weight: 300;
   font-style: italic;
   color: var(--ink);
   line-height: 1.65;
   flex: 1;
 }

 .cr-t-quote::before {
   content: "\201C";
 }

 .cr-t-quote::after {
   content: "\201D";
 }

 .cr-t-divider {
   height: 1px;
   background: var(--border);
 }

 .cr-t-author {
   display: flex;
   align-items: center;
   gap: 12px;
 }

 .cr-t-avatar {
   width: 40px;
   height: 40px;
   border-radius: 50%;
   background: var(--accent-50);
   color: var(--accent);
   font-size: 13px;
   font-weight: 700;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   border: 1px solid var(--accent-100);
 }

 .cr-t-name {
   font-size: 13px;
   font-weight: 600;
   color: var(--ink);
 }

 .cr-t-role {
   font-size: 12px;
   color: var(--ink-60);
 }

 .cr-t-tag {
   display: inline-block;
   font-size: 10px;
   font-weight: 600;
   background: var(--green-50);
   color: var(--green);
   border: 1px solid var(--green-border);
   padding: 2px 8px;
   border-radius: 20px;
   margin-top: 3px;
 }

 .cr-featured-t {
   grid-column: 1 / -1;
   background: var(--accent-50);
   border-color: var(--accent-100);
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 2rem;
   align-items: center;
 }

 .cr-featured-t .cr-t-quote {
   font-size: 19px;
 }

 .cr-featured-i {
   grid-column: 2 / -1;
   background: url(../img/vara-license/client-testimonials.jpg) center no-repeat;
   background-size: cover;
   border-color: var(--accent-100);
   grid-template-columns: 1fr 1fr;
   align-items: center;
   border-radius: var(--r-xl);
   border: 1px solid var(--border);

 }

 /* .cr-featured-i p img{
   border-radius: var(--r-xl);
   border-color: var(--accent-100);
} */

 @media (max-width: 700px) {
   .cr-featured-t {
     grid-template-columns: 1fr;
   }
 }

 /* ══ GUARANTEE ══ */
 .cr-guarantee-box {
   background: var(--white);
   border: 1.5px solid var(--green-border);
   border-radius: var(--r-2xl);
   padding: 2.5rem;
   display: flex;
   gap: 2rem;
   align-items: flex-start;
   box-shadow: 0 0 0 5px var(--green-50);
 }

 .cr-g-icon {
   width: 56px;
   height: 56px;
   border-radius: var(--r-md);
   background: var(--green-50);
   border: 1px solid var(--green-border);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 26px;
   flex-shrink: 0;
 }

 .cr-guarantee-box h3 {
   font-family: var(--font-display);
   font-size: 22px;
   font-weight: 400;
   color: var(--green);
   margin-bottom: 0.625rem;
 }

 .cr-guarantee-box p {
   font-size: 14px;
   color: #166534;
   line-height: 1.7;
   margin-bottom: 1rem;
 }

 .cr-g-tags {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
 }

 .cr-g-tag {
   background: var(--green-50);
   color: var(--green);
   border: 1px solid var(--green-border);
   font-size: 12px;
   font-weight: 500;
   padding: 4px 12px;
   border-radius: 20px;
 }

 /* ══ CONSULT ITEMS ══ */
 .cr-consult-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
   gap: 12px;
 }

 .cr-consult-item {
   display: flex;
   gap: 12px;
   align-items: flex-start;
   padding: 1.125rem 1.25rem;
   background: var(--white);
   border: 1px solid var(--border);
   border-radius: var(--r-lg);
 }

 .cr-consult-num {
   width: 28px;
   height: 28px;
   border-radius: 50%;
   background: var(--accent);
   color: #fff;
   font-size: 12px;
   font-weight: 600;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
 }

 .cr-consult-item h3 {
   font-size: 13px;
   font-weight: 600;
   color: var(--ink);
   margin-bottom: 8px;
 }

 .cr-consult-item p {
   font-size: 13px;
   color: var(--ink-60);
   line-height: 1.5;
 }

 /* cr-documenta-ener------------------------------------------- */

.cr-documenta-ener{
  border: 2px solid #c9a06280;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 9px 11px 13px -5px #0002;
}

.cr-check-point{
  margin-left: 5%;
}


.cr-documente-img img{
    border-radius: var(--r-xl);
    border: 1px solid var(--border);
}

.cr-documenta-ener p {
  font-family: "Montserrat", sans-serif !important;
  font-size: 0.875rem;
  color: #000;
  letter-spacing: 0.5px;
}

.cr-documenta h3 {
  font-size: 1.875rem;
}

.cr-documenta li {
  color: #000;
  font-size: 1.10.875rem;
  margin-bottom: 2%;
  letter-spacing: 0.4px;
}

.cr-documenta li::before {
  content: "";
  display: inline-block;
  background: url(../img/difc/verify2.png)center left no-repeat;
  width: 20px;
  height: 20px;
  background-size: 100%;
  margin-right: 1%;
}

.cr-documenta b{
  font-size: 1rem;
}


 /* ══ URGENCY ══ */
 .cr-urgency-section {
   background-image: radial-gradient(var(--ink-05) 1px, transparent 1px), url(../img/vara-license/dont-wait.jpg);
   background-size: cover;
   /* background: var(--ink-05); */
 }

 .cr-urgency-box {
   background: var(--amber-50);
   border: 1px solid var(--amber-border);
   border-radius: var(--r-lg);
   padding: 1.5rem;
   display: flex;
   gap: 14px;
   align-items: flex-start;
   margin-bottom: 1.5rem;
 }

 .cr-u-icon {
   font-size: 22px;
   flex-shrink: 0;
   margin-top: 2px;
 }

 .cr-urgency-box h3 {
   font-size: 16px;
   font-weight: 600;
   color: var(--amber);
   margin-bottom: 4px;
 }

 .cr-urgency-box p {
   font-size: 14px;
   color: #92400E;
   line-height: 1.6;
 }

 .cr-magnet-box {
   background: var(--white);
   border: 1px solid var(--border);
   border-radius: var(--r-lg);
   padding: 1.5rem;
   display: flex;
   gap: 16px;
   align-items: flex-start;
 }

 .cr-m-icon {
   width: 46px;
   height: 46px;
   border-radius: var(--r-md);
   background: var(--ink);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 22px;
   flex-shrink: 0;
 }

 .cr-magnet-box h3 {
   font-size: 16px;
   font-weight: 600;
   color: var(--ink);
   margin-bottom: 4px;
 }

 .cr-magnet-box p {
   font-size: 14px;
   color: var(--ink-60);
   line-height: 1.6;
   margin-bottom: 0.875rem;
 }

 .cr-btn-outline {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   background: transparent;
   color: var(--ink);
   padding: 9px 20px;
   border-radius: var(--r-md);
   font-size: 13px;
   font-weight: 600;
   text-decoration: none;
   border: 1.5px solid var(--ink);
   cursor: pointer;
   font-family: var(--font-body);
   transition: background 0.2s, color 0.2s;
 }

 .cr-btn-outline:hover {
   background: var(--ink);
   color: #fff;
 }

 /* ══ FAQ ══ */
 .cr-faq-liste {
   border-top: 1px solid var(--border);
 }

 .cr-faq-iteme {
   border-bottom: 1px solid var(--border);
 }



 .cr-faq-qe {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 1.125rem 0;
   font-size: 14px;
   font-weight: 500;
   color: var(--ink);
   cursor: pointer;
   gap: 1rem;
   user-select: none;
 }

 .cr-faq-qe:hover {
   color: var(--accent);
 }

 .cr-faq-ch {
   font-size: 18px;
   color: var(--ink-40);
   transition: transform 0.25s;
   flex-shrink: 0;
 }

 .cr-faq-a {
   font-size: 13px;
   color: var(--ink-60);
   line-height: 1.7;
   padding-bottom: 1.125rem;
   display: none;
 }

 .cr-faq-item.cr-open .cr-faq-a {
   display: block;
 }

 .cr-faq-item.cr-open .cr-faq-ch {
   transform: rotate(180deg);
 }

 .cr-faq-item.cr-open .cr-faq-q {
   color: var(--ink);
 }

 /* ══ FINAL CTA ══ */
 .cr-final-cta {
   background: #000000;
   padding: 7rem 0;
   text-align: center;
   position: relative;
   overflow: hidden;
 }

 .cr-final-cta-texture {
   position: absolute;
   inset: 0;
   /* opacity: 0.03; */
   background-image: radial-gradient(circle, rgba(255, 255, 255, 0.9) 1px, transparent 1px), url(../img/vara-license/launch-ready-to-get.png);
   background-size: cover;
 }

 .cr-final-cta-glow {
   position: absolute;
   top: -200px;
   right: -200px;
   width: 600px;
   height: 600px;
   border-radius: 50%;
   background: radial-gradient(circle, rgba(27, 79, 216, 0.3) 0%, transparent 70%);
 }

 .cr-final-cta .cr-container {
   position: relative;
   z-index: 1;
 }

 .cr-final-chip {
   display: inline-block;
   background: rgba(147, 197, 253, 0.15);
   border: 1px solid rgba(147, 197, 253, 0.3);
   color: #93C5FD;
   font-size: 12px;
   font-weight: 500;
   padding: 5px 14px;
   border-radius: 20px;
   margin-bottom: 1.5rem;
 }

 .cr-final-cta h2 {
   color: #fff;
   max-width: 660px;
   margin: 0 auto 1rem;
 }

 .cr-final-cta p {
   font-size: 15px;
   color: rgba(255, 255, 255, 0.55);
   margin-bottom: 2.5rem;
   max-width: 500px;
   margin-left: auto;
   margin-right: auto;
 }

 .cr-final-btns {
   display: flex;
   gap: 12px;
   justify-content: center;
   flex-wrap: wrap;
   margin-bottom: 3rem;
 }

 .cr-btn-white {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   background: #fff;
   color: var(--ink);
   padding: 14px 28px;
   border-radius: var(--r-md);
   font-size: 14px;
   font-weight: 700;
   text-decoration: none;
   border: none;
   cursor: pointer;
   font-family: var(--font-body);
   transition: opacity 0.2s;
 }

 .cr-btn-white:hover {
   opacity: 0.92;
 }

 .cr-btn-white-outline {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   background: transparent;
   color: #fff;
   padding: 14px 28px;
   border-radius: var(--r-md);
   font-size: 14px;
   font-weight: 500;
   text-decoration: none;
   border: 1px solid rgba(255, 255, 255, 0.25);
   cursor: pointer;
   font-family: var(--font-body);
   transition: border-color 0.2s;
 }

 .cr-btn-white-outline:hover {
   border-color: rgba(255, 255, 255, 0.6);
 }

 .cr-final-consult {
   display: flex;
   justify-content: center;
   gap: 3rem;
   flex-wrap: wrap;
 }

 .cr-fc-item {
   text-align: center;
 }

 .cr-fc-label {
   font-size: 12px;
   color: rgba(255 255 255 / 66%);
   text-transform: uppercase;
   letter-spacing: 0.06em;
   margin-bottom: 4px;
 }

 .cr-fc-val {
   font-size: 15px;
   font-weight: 500;
   color: rgba(255, 255, 255, 0.75);
 }

 /* ══ FOOTER ══ */


 /* ══ DIVIDER ══ */
 .cr-divider {
   height: 1px;
   background: var(--border);
 }

 /* ══ ANIMATIONS ══ */
 @keyframes fadeUp {
   from {
     opacity: 0;
     transform: translateY(18px);
   }

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

 .cr-eyebrow {
   animation: fadeUp 0.5s ease both;
 }

 .cr-hero h1 {
   animation: fadeUp 0.55s 0.1s ease both;
 }

 .cr-hero-sub {
   animation: fadeUp 0.55s 0.2s ease both;
 }

 .cr-hero-btns {
   animation: fadeUp 0.55s 0.3s ease both;
 }

 .cr-hero-proof {
   animation: fadeUp 0.55s 0.4s ease both;
 }

 .cr-consult-card {
   animation: fadeUp 0.6s 0.2s ease both;
 }

 /* ══ DRAWER ══ */
 .cr-drawer-overlay {
   position: fixed;
   inset: 0;
   z-index: 999;
   background: rgba(14, 15, 17, 0.55);
   backdrop-filter: blur(4px);
   opacity: 0;
   pointer-events: none;
   transition: opacity 0.35s ease;
 }

 .cr-drawer-overlay.cr-open {
   opacity: 1;
   pointer-events: all;
 }

 .cr-drawer {
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   z-index: 1000;
   width: 100%;
   max-width: 480px;
   background: var(--white);
   box-shadow: -12px 0 60px rgba(0, 0, 0, 0.18);
   transform: translateX(100%);
   transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1);
   display: flex;
   flex-direction: column;
   overflow: hidden;
 }

 .cr-drawer.cr-open {
   transform: translateX(0);
 }

 .cr-drawer-header {
   padding: 1.5rem 1.75rem 1.25rem;
   border-bottom: 1px solid var(--border);
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
   flex-shrink: 0;
   background: var(--ink);
 }

 .cr-drawer-header-text h3 {
   font-family: var(--font-display);
   font-size: 20px;
   font-weight: 400;
   color: #fff;
   letter-spacing: -0.01em;
   margin-bottom: 3px;
 }

 .cr-drawer-header-text p {
   font-size: 13px;
   color: rgba(255, 255, 255, 0.55);
 }

 .cr-drawer-close {
   width: 32px;
   height: 32px;
   border-radius: 50%;
   background: rgba(255, 255, 255, 0.1);
   border: 1px solid rgba(255, 255, 255, 0.15);
   color: rgba(255, 255, 255, 0.7);
   font-size: 18px;
   line-height: 1;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   flex-shrink: 0;
   margin-left: 1rem;
   margin-top: 2px;
   transition: background 0.2s;
 }

 .cr-drawer-close:hover {
   background: rgba(255, 255, 255, 0.18);
   color: #fff;
 }

 .cr-drawer-trust {
   display: flex;
   gap: 0;
   flex-shrink: 0;
   border-bottom: 1px solid var(--border);
 }

 .cr-drawer-trust-item {
   flex: 1;
   padding: 0.875rem 1rem;
   text-align: center;
   border-right: 1px solid var(--border);
   background: var(--ink-05);
 }

 .cr-drawer-trust-item:last-child {
   border-right: none;
 }

 .cr-drawer-trust-num {
   font-family: var(--font-display);
   font-size: 18px;
   color: var(--ink);
   letter-spacing: -0.02em;
 }

 .cr-drawer-trust-label {
   font-size: 10px;
   color: var(--ink-60);
   margin-top: 1px;
   line-height: 1.3;
 }

 .cr-drawer-body {
   flex: 1;
   overflow-y: auto;
   padding: 1.75rem;
   scrollbar-width: thin;
   scrollbar-color: var(--border) transparent;
 }

 .cr-drawer-body::-webkit-scrollbar {
   width: 4px;
 }

 .cr-drawer-body::-webkit-scrollbar-thumb {
   background: var(--border);
   border-radius: 4px;
 }

 .cr-drawer-checks {
   display: flex;
   flex-direction: column;
   gap: 8px;
   margin-bottom: 1.5rem;
   padding: 1rem 1.125rem;
   background: var(--accent-50);
   border: 1px solid var(--accent-100);
   border-radius: var(--r-lg);
 }

 .cr-drawer-check {
   display: flex;
   align-items: flex-start;
   gap: 8px;
   font-size: 13px;
   color: var(--ink-60);
 }

 .cr-drawer-check-icon {
   color: var(--accent);
   font-size: 14px;
   flex-shrink: 0;
   margin-top: 1px;
 }

 .cr-drawer-footer {
   padding: 1.25rem 1.75rem;
   border-top: 1px solid var(--border);
   flex-shrink: 0;
   background: var(--ink-05);
 }

 .cr-drawer-submit {
   width: 100%;
   background: var(--accent);
   color: #fff;
   padding: 14px;
   border-radius: var(--r-md);
   border: none;
   cursor: pointer;
   font-size: 14px;
   font-weight: 600;
   font-family: var(--font-body);
   transition: background 0.2s;
   letter-spacing: -0.01em;
 }

 .cr-drawer-submit:hover {
   background: var(--accent-dark);
 }

 .cr-drawer-foot-note {
   font-size: 11px;
   color: var(--ink-40);
   text-align: center;
   margin-top: 8px;
 }

 /* SUCCESS STATE */
 .cr-drawer-success {
   display: none;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   text-align: center;
   padding: 3rem 2rem;
   flex: 1;
 }

 .cr-drawer-success.cr-show {
   display: flex;
 }

 .cr-success-icon {
   width: 64px;
   height: 64px;
   border-radius: 50%;
   background: var(--green-50);
   border: 2px solid var(--green-border);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 28px;
   margin-bottom: 1.25rem;
 }

 .cr-drawer-success h3 {
   font-family: var(--font-display);
   font-size: 22px;
   font-weight: 400;
   color: var(--ink);
   margin-bottom: 0.5rem;
 }

 .cr-drawer-success p {
   font-size: 14px;
   color: var(--ink-60);
   line-height: 1.6;
   max-width: 320px;
 }


 /* Case study------------------------------------------------------------------------------------------------------------------------------------------------- */


 /* ══ CASE CARD INTERACTIVE STATES ══ */
 .case-card {
   cursor: pointer;
   outline: none;
 }

 .case-card:hover {
   border-color: rgb(255 255 255 / 27%) !important;
   background: rgb(0 0 0 / 81%) !important;
 }

 .case-card:focus-visible {
   box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
 }

 .case-card-top {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
   gap: 1rem;
 }

 .case-read-more {
   font-size: 12px;
   font-weight: 600;
   color: rgba(255 255 255 / 71%);
   white-space: nowrap;
   flex-shrink: 0;
   margin-top: 3px;
   transition: color 0.2s;
 }

 .case-card:hover .case-read-more {
   color: #93C5FD;
 }

 /* ══ MODAL OVERLAY ══ */
 #case-overlay {
   position: fixed;
   inset: 0;
   z-index: 300;
   background: rgba(10, 12, 18, 0.72);
   backdrop-filter: blur(6px);
   opacity: 0;
   pointer-events: none;
   transition: opacity 0.3s ease;
 }

 #case-overlay.active {
   opacity: 1;
   pointer-events: all;
 }

 /* ══ MODAL PANEL ══ */
 #case-modal {
   position: fixed;
   z-index: 99999999;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -48%) scale(0.97);
   opacity: 0;
   pointer-events: none;
   transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.3s ease;
   width: min(720px, calc(100vw - 2rem));
   max-height: calc(100vh - 3rem);
   background: #13151A;
   border: 1px solid rgba(255, 255, 255, 0.1);
   border-radius: 20px;
   overflow: hidden;
   display: flex;
   flex-direction: column;
   box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6);
 }

 #case-modal.open {
   transform: translate(-50%, -50%) scale(1);
   opacity: 1;
   pointer-events: all;
 }

 /* MODAL HEADER */
 .cm-header {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
   padding: 1.75rem 1.75rem 1.25rem;
   gap: 1rem;
   border-bottom: 1px solid rgba(255, 255, 255, 0.08);
   flex-shrink: 0;
 }

 .cm-header-left {
   flex: 1;
 }

 .cm-title {
   font-family: var(--font-display) !important;
   font-size: clamp(17px, 2.5vw, 22px) !important;
   font-weight: 400;
   color: #fff;
   line-height: 1.25;
   letter-spacing: -0.01em;
   margin-top: 10px;
 }

 .cm-close {
   background: rgba(255, 255, 255, 0.08);
   border: none;
   cursor: pointer;
   color: rgba(255, 255, 255, 0.6);
   border-radius: 50%;
   width: 38px;
   height: 38px;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   transition: background 0.2s, color 0.2s;
 }

 .cm-close:hover {
   background: rgba(255, 255, 255, 0.15);
   color: #fff;
 }

 /* TABS */
 .cm-tabs button:focus {
   outline: none !important;
 }

 .cm-tabs {
   display: flex;
   border-bottom: 1px solid rgba(255, 255, 255, 0.08);
   flex-shrink: 0;
   overflow-x: auto;
   scrollbar-width: none;
 }

 .cm-tabs::-webkit-scrollbar {
   display: none;
 }

 .cm-tab {
   flex: 1;
   min-width: 120px;
   padding: 0.875rem 1rem;
   background: transparent;
   border: none;
   cursor: pointer;
   font-family: var(--font-body);
   font-size: 13px;
   font-weight: 500;
   color: rgba(255, 255, 255, 0.4);
   border-bottom: 2px solid transparent;
   margin-bottom: -1px;
   transition: color 0.2s, border-color 0.2s;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 3px;
   white-space: nowrap;
 }

 .cm-tab:hover {
   color: rgba(255, 255, 255, 0.75);
 }

 .cm-tab.active {
   color: #fff;
   border-bottom-color: var(--accent);
 }

 .cm-tab-num {
   font-size: 10px;
   font-weight: 600;
   letter-spacing: 0.1em;
   color: var(--accent);
   opacity: 0;
   transition: opacity 0.2s;
 }

 .cm-tab.active .cm-tab-num {
   opacity: 1;
 }

 /* TAB PANELS */
 .cm-body {
   flex: 1;
   overflow-y: auto;
   padding: 2rem 1.75rem;
   scrollbar-width: thin;
   scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
 }

 .cm-panel {
   display: none;
   animation: panelIn 0.25s ease both;
 }

 .cm-panel.active {
   display: block;
 }

 @keyframes panelIn {
   from {
     opacity: 0;
     transform: translateY(10px);
   }

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

 /* PANEL CONTENT STYLES */
 .cm-panel-label {
   font-size: 11px;
   font-weight: 600;
   letter-spacing: 0.1em;
   text-transform: uppercase;
   color: var(--accent);
   margin-bottom: 0.875rem;
   opacity: 0.8;
 }

 .cm-panel p {
   font-size: 14px;
   color: rgba(255, 255, 255, 0.65);
   line-height: 1.75;
   margin-bottom: 1rem;
 }

 .cm-panel p:last-child {
   margin-bottom: 0;
 }

 .cm-step-list {
   display: flex;
   flex-direction: column;
   gap: 10px;
   margin-top: 0.5rem;
 }

 .cm-step-item {
   display: flex;
   gap: 12px;
   align-items: flex-start;
   background: rgba(255, 255, 255, 0.04);
   border: 1px solid rgba(255, 255, 255, 0.07);
   border-radius: 10px;
   padding: 0.875rem 1rem;
 }

 .cm-step-icon {
   width: 26px;
   height: 26px;
   border-radius: 50%;
   background: rgba(27, 79, 216, 0.25);
   border: 1px solid rgba(147, 197, 253, 0.2);
   color: #93C5FD;
   font-size: 11px;
   font-weight: 700;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   margin-top: 1px;
 }

 .cm-step-text {
   font-size: 13px;
   color: rgba(255, 255, 255, 0.7);
   line-height: 1.55;
 }

 .cm-step-text strong {
   color: #fff;
   font-weight: 600;
 }

 .cm-outcome-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
   gap: 10px;
   margin: 1.25rem 0;
 }

 .cm-outcome-stat {
   background: rgba(74, 222, 128, 0.07);
   border: 1px solid rgba(74, 222, 128, 0.2);
   border-radius: 12px;
   padding: 1rem;
   text-align: center;
 }

 .cm-outcome-num {
   font-family: var(--font-display);
   font-size: 24px;
   color: #4ADE80;
   letter-spacing: -0.02em;
   margin-bottom: 3px;
 }

 .cm-outcome-lbl {
   font-size: 11px;
   color: rgba(255, 255, 255, 0.5);
   line-height: 1.4;
 }

 .cm-quote-block {
   background: rgba(255, 255, 255, 0.04);
   border-left: 3px solid var(--accent);
   border-radius: 0 12px 12px 0;
   padding: 1.5rem 1.5rem 1.5rem 1.25rem;
   margin: 1rem 0;
 }

 .cm-quote-text {
   font-family: var(--font-display);
   font-size: 17px;
   font-weight: 300;
   font-style: italic;
   color: #fff;
   line-height: 1.7;
   margin-bottom: 1rem;
 }

 .cm-quote-text::before {
   content: "\201C";
 }

 .cm-quote-text::after {
   content: "\201D";
 }

 .cm-quote-author {
   display: flex;
   align-items: center;
   gap: 10px;
 }

 .cm-quote-avatar {
   width: 38px;
   height: 38px;
   border-radius: 50%;
   background: rgba(27, 79, 216, 0.3);
   color: #93C5FD;
   font-size: 12px;
   font-weight: 700;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   border: 1px solid rgba(147, 197, 253, 0.25);
 }

 .cm-quote-name {
   font-size: 13px;
   font-weight: 600;
   color: #fff;
 }

 .cm-quote-role {
   font-size: 12px;
   color: rgba(255, 255, 255, 0.45);
   margin-top: 1px;
 }

 /* MODAL FOOTER */
 .cm-footer {
   padding: 1.25rem 1.75rem;
   border-top: 1px solid rgba(255, 255, 255, 0.08);
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 1rem;
   flex-shrink: 0;
   background: rgba(0, 0, 0, 0.2);
   flex-wrap: wrap;
 }

 .cm-footer-pills {
   display: flex;
   flex-wrap: wrap;
   gap: 7px;
 }

 .cm-cta {
   background: var(--accent);
   color: #fff;
   border: none;
   cursor: pointer;
   padding: 10px 20px;
   border-radius: var(--r-md);
   font-size: 13px;
   font-weight: 600;
   font-family: var(--font-body);
   transition: background 0.2s;
   white-space: nowrap;
   flex-shrink: 0;
 }

 .cm-cta:hover {
   background: var(--accent-dark);
 }

 @media (max-width: 540px) {
   #case-modal {
     border-radius: 16px 16px 0 0;
     top: auto;
     bottom: 0;
     left: 0;
     right: 0;
     width: 100%;
     transform: translateY(30px);
     max-height: 92vh;
   }

   #case-modal.open {
     transform: translateY(0);
   }

   .cm-header {
     padding: 1.25rem 1.25rem 1rem;
   }

   .cm-body {
     padding: 1.25rem;
   }

   .cm-footer {
     padding: 1rem 1.25rem;
   }
 }



 /* Case study------------------------------------------------------------------------------------------------------------------------------------------------- */


 /* slide-in-drewer-------------------------------------------------------------------------------------------------------- */

 /* ══ DRAWER OVERLAY ══ */
 #drawer-overlay {
   position: fixed;
   inset: 0;
   z-index: 200;
   background: rgba(14, 15, 17, 0.55);
   backdrop-filter: blur(4px);
   opacity: 0;
   pointer-events: none;
   transition: opacity 0.35s ease;
 }

 #drawer-overlay.cr-active {
   opacity: 1;
   pointer-events: all;
 }

 /* ══ DRAWER PANEL ══ */
 #drawer {
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   z-index: 201;
   width: min(480px, 100vw);
   background: var(--white);
   box-shadow: -8px 0 48px rgba(0, 0, 0, 0.18);
   display: flex;
   flex-direction: column;
   transform: translateX(100%);
   transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1);
   will-change: transform;
 }

 #drawer.cr-open {
   transform: translateX(0);
 }

 /* DRAWER HEADER */
 .cr-drawer-header {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
   padding: 1.75rem 1.75rem 1.25rem;
   border-bottom: 1px solid var(--border);
   flex-shrink: 0;
   background: var(--ink);
 }

 .cr-drawer-eyebrow {
   font-size: 11px;
   font-weight: 600;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   color: rgba(255, 255, 255, 0.45);
   margin-bottom: 5px;
 }

 .cr-drawer-title {
   font-family: var(--font-display);
   font-size: 20px;
   font-weight: 400;
   color: var(--white);
   line-height: 1.2;
   letter-spacing: -0.01em;
 }

 .cr-drawer-close {
   background: rgba(255, 255, 255, 0.1);
   border: none;
   cursor: pointer;
   color: rgba(255, 255, 255, 0.7);
   border-radius: 50%;
   width: 36px;
   height: 36px;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   margin-left: 1rem;
   transition: background 0.2s, color 0.2s;
 }

 .cr-drawer-close:hover {
   background: rgba(255, 255, 255, 0.18);
   color: #fff;
 }

 /* DRAWER BODY */
 .cr-drawer-body {
   overflow-y: auto;
   flex: 1;
   padding: 1.5rem 1.75rem 2rem;
   scrollbar-width: thin;
 }

 /* CHECKS */
 .cr-drawer-checks {
   display: flex;
   flex-direction: column;
   gap: 8px;
   margin-bottom: 1.5rem;
   padding: 1.25rem;
   background: var(--accent-50);
   border: 1px solid var(--accent-100);
   border-radius: var(--r-lg);
 }

 .cr-drawer-check {
   display: flex;
   align-items: flex-start;
   gap: 9px;
   font-size: 13px;
   color: var(--ink-60);
   line-height: 1.45;
 }

 .cr-dck {
   color: var(--green);
   font-size: 14px;
   flex-shrink: 0;
   margin-top: 1px;
 }

 /* FORM FIELDS */
 .cr-drawer-form-row {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 10px;
 }

 #drawer .cr-field {
   margin-bottom: 12px;
 }

 #drawer .cr-field label {
   display: block;
   font-size: 11px;
   font-weight: 600;
   color: var(--ink-60);
   margin-bottom: 4px;
   letter-spacing: 0.04em;
   text-transform: uppercase;
 }

 #drawer .cr-field input,
 #drawer .cr-field select,
 #drawer .cr-field textarea {
   width: 100%;
   padding: 10px 13px;
   border: 1px solid var(--border);
   border-radius: var(--r-md);
   font-size: 13px;
   font-family: var(--font-body);
   color: var(--ink);
   background: var(--white);
   outline: none;
   transition: border-color 0.2s, box-shadow 0.2s;
 }

 #drawer .cr-field input:focus,
 #drawer .cr-field select:focus,
 #drawer .cr-field textarea:focus {
   border-color: var(--accent);
   box-shadow: 0 0 0 3px rgba(27, 79, 216, 0.1);
 }

 #drawer .cr-field textarea {
   resize: vertical;
   min-height: 76px;
 }

 /* SUBMIT */
 .cr-drawer-submit {
   width: 100%;
   background: var(--ink);
   color: #fff;
   padding: 13px;
   border-radius: var(--r-md);
   border: none;
   cursor: pointer;
   font-size: 14px;
   font-weight: 600;
   font-family: var(--font-body);
   margin-top: 4px;
   transition: background 0.2s, transform 0.15s;
   letter-spacing: 0.01em;
 }

 .cr-drawer-submit:hover {
   background: var(--ink-80);
   transform: translateY(-1px);
 }

 .cr-drawer-submit:active {
   transform: translateY(0);
 }

 .cr-drawer-note {
   font-size: 11px;
   color: var(--ink-40);
   text-align: center;
   margin-top: 10px;
   line-height: 1.5;
 }

 /* SUCCESS STATE */
 .cr-drawer-success-inner {
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
   padding: 2rem 1rem;
   gap: 1rem;
 }

 .cr-drawer-success-icon {
   width: 60px;
   height: 60px;
   border-radius: 50%;
   background: var(--green-50);
   color: var(--green);
   border: 2px solid var(--green-border);
   font-size: 24px;
   display: flex;
   align-items: center;
   justify-content: center;
 }

 .cr-drawer-success-title {
   font-family: var(--font-display);
   font-size: 22px;
   font-weight: 400;
   color: var(--ink);
 }

 .cr-drawer-success-msg {
   font-size: 14px;
   color: var(--ink-60);
   line-height: 1.7;
 }

 .cr-drawer-close-btn {
   background: var(--ink);
   color: #fff;
   border: none;
   cursor: pointer;
   padding: 11px 28px;
   border-radius: var(--r-md);
   font-size: 14px;
   font-weight: 600;
   font-family: var(--font-body);
   margin-top: 0.5rem;
   transition: background 0.2s;
 }

 .cr-drawer-close-btn:hover {
   background: var(--ink-80);
 }

 /* PREVENT BODY SCROLL WHEN OPEN */
 body.cr-drawer-open {
   overflow: hidden;
 }

 @media (max-width: 480px) {
   .cr-drawer-form-row {
     grid-template-columns: 1fr;
   }

   .cr-drawer-header {
     padding: 1.25rem 1.25rem 1rem;
   }

   .cr-drawer-body {
     padding: 1.25rem 1.25rem 1.5rem;
   }
 }

 /* slide-in-drewer-------------------------------------------------------------------------------------------------------- */



 /* QZ model------------------------------------------------------------- */


 #quiz-overlay {
   position: fixed;
   inset: 0;
   z-index: 400;
   background: rgba(8, 10, 16, 0.72);
   backdrop-filter: blur(8px);
   opacity: 0;
   pointer-events: none;
   transition: opacity 0.3s ease;
 }

 #quiz-overlay.active {
   opacity: 1;
   pointer-events: all;
 }

 #quiz-modal {
   position: fixed;
   z-index: 99999999;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -46%) scale(0.96);
   opacity: 0;
   pointer-events: none;
   transition: transform 0.38s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.3s ease;
   width: min(640px, calc(100vw - 1.5rem));
   max-height: calc(100vh - 2rem);
   background: #111318;
   border: 1px solid rgba(255, 255, 255, 0.1);
   border-radius: 22px;
   display: flex;
   flex-direction: column;
   box-shadow: 0 40px 100px rgba(0, 0, 0, 0.7);
   overflow: hidden;
 }

 #quiz-modal.open {
   transform: translate(-50%, -50%) scale(1);
   opacity: 1;
   pointer-events: all;
 }

 .qm-header {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
   gap: 1rem;
   padding: 1.5rem 1.75rem 1.25rem;
   border-bottom: 1px solid rgba(255, 255, 255, 0.07);
   flex-shrink: 0;
   background: rgba(255, 255, 255, 0.02);
 }

 .qm-eyebrow {
   font-size: 10px;
   font-weight: 600;
   letter-spacing: 0.1em;
   text-transform: uppercase;
   color: rgba(255, 255, 255, 0.35);
   margin-bottom: 6px;
   display: block;
 }

 .qm-title {
   font-family: var(--font-display) !important;
   font-size: clamp(15px, 2.5vw, 18px);
   font-weight: 400;
   color: #fff;
   line-height: 1.25;
   letter-spacing: -0.01em;
 }

 .qm-close {
   background: rgba(255, 255, 255, 0.07);
   border: none;
   cursor: pointer;
   color: rgba(255, 255, 255, 0.55);
   border-radius: 50%;
   width: 34px;
   height: 34px;
   min-width: 34px;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: background 0.2s, color 0.2s;
 }

 .qm-close:hover {
   background: rgba(255, 255, 255, 0.14);
   color: #fff;
 }

 .qm-progress-wrap {
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 0.75rem 1.75rem;
   border-bottom: 1px solid rgba(255, 255, 255, 0.06);
   flex-shrink: 0;
 }

 .qm-progress-track {
   flex: 1;
   height: 4px;
   background: rgba(255, 255, 255, 0.08);
   border-radius: 4px;
   overflow: hidden;
 }

 .qm-progress-bar {
   height: 100%;
   background: var(--accent);
   border-radius: 4px;
   width: 0%;
   transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
 }

 .qm-progress-label {
   font-size: 11px;
   font-weight: 600;
   color: rgba(255, 255, 255, 0.35);
   white-space: nowrap;
   letter-spacing: 0.04em;
 }

 .qm-body {
   flex: 1;
   overflow-y: auto;
   scrollbar-width: thin;
   scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
 }

 .qm-screen {
   display: none;
 }

 .qm-screen.active {
   display: block;
   animation: qmIn 0.28s ease both;
 }

 .qm-screen.active.going-back {
   animation: qmBack 0.28s ease both;
 }

 @keyframes qmIn {
   from {
     opacity: 0;
     transform: translateX(18px)
   }

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

 @keyframes qmBack {
   from {
     opacity: 0;
     transform: translateX(-18px)
   }

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

 .qm-intro-inner {
   padding: 2.25rem 1.75rem;
   text-align: center;
 }

 .qm-intro-icon {
   font-size: 40px;
   margin-bottom: 1.25rem;
 }

 .qm-intro-desc {
   font-size: 14px;
   color: rgba(255, 255, 255, 0.6);
   line-height: 1.7;
   margin-bottom: 1.5rem;
   max-width: 420px;
   margin-left: auto;
   margin-right: auto;
 }

 .qm-intro-desc strong {
   color: rgba(255, 255, 255, 0.9);
 }

 .qm-intro-bullets {
   display: flex;
   flex-direction: column;
   gap: 8px;
   margin: 0 auto 2rem;
   max-width: 320px;
   text-align: left;
 }

 .qm-ib {
   display: flex;
   align-items: center;
   gap: 10px;
   font-size: 13px;
   color: rgba(255, 255, 255, 0.55);
 }

 .qm-ib-icon {
   font-size: 15px;
   width: 24px;
   text-align: center;
   flex-shrink: 0;
 }

 .qm-btn-primary {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 6px;
   background: var(--accent);
   color: #fff;
   padding: 12px 26px;
   border-radius: var(--r-md);
   border: none;
   cursor: pointer;
   font-size: 14px;
   font-weight: 600;
   font-family: var(--font-body);
   transition: background 0.2s, transform 0.15s;
   letter-spacing: 0.01em;
 }

 .qm-btn-primary:hover {
   background: var(--accent-dark);
   transform: translateY(-1px);
 }

 .qm-btn-secondary {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 6px;
   background: transparent;
   color: rgba(255, 255, 255, 0.55);
   padding: 11px 22px;
   border-radius: var(--r-md);
   border: 1px solid rgba(255, 255, 255, 0.15);
   cursor: pointer;
   font-size: 13px;
   font-weight: 500;
   font-family: var(--font-body);
   transition: border-color 0.2s, color 0.2s;
 }

 .qm-btn-secondary:hover {
   border-color: rgba(255, 255, 255, 0.35);
   color: rgba(255, 255, 255, 0.8);
 }

 .qm-q-label {
   font-size: 10px;
   font-weight: 600;
   letter-spacing: 0.1em;
   text-transform: uppercase;
   color: var(--accent);
   margin-bottom: 0.625rem;
   opacity: 0.85;
 }

 .qm-q-text {
   font-family: var(--font-display);
   font-size: clamp(16px, 2.5vw, 20px);
   font-weight: 400;
   color: #fff;
   line-height: 1.3;
   letter-spacing: -0.01em;
   margin-bottom: 1.5rem;
 }

 .qm-multi-hint {
   font-size: 11px;
   color: rgba(255, 255, 255, 0.35);
   margin-bottom: 1rem;
   display: flex;
   align-items: center;
   gap: 6px;
 }

 .qm-multi-hint::before {
   content: "☑";
   font-size: 13px;
 }

 .qm-options {
   display: flex;
   flex-direction: column;
   gap: 8px;
   margin-bottom: 1.5rem;
 }

 .qm-option {
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 0.875rem 1rem;
   background: rgba(255, 255, 255, 0.03);
   border: 1px solid rgba(255, 255, 255, 0.08);
   border-radius: var(--r-md);
   cursor: pointer;
   transition: background 0.2s, border-color 0.2s;
   font-size: 14px;
   color: rgba(255, 255, 255, 0.7);
   user-select: none;
 }

 .qm-option:hover {
   background: rgba(255, 255, 255, 0.06);
   border-color: rgba(255, 255, 255, 0.18);
   color: #fff;
 }

 .qm-option.selected {
   background: rgba(27, 79, 216, 0.18);
   border-color: rgba(27, 79, 216, 0.6);
   color: #fff;
 }

 .qm-option-indicator {
   width: 18px;
   height: 18px;
   border-radius: 50%;
   border: 1.5px solid rgba(255, 255, 255, 0.2);
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   transition: background 0.2s, border-color 0.2s;
   font-size: 10px;
 }

 .qm-option.selected .qm-option-indicator {
   background: var(--accent);
   border-color: var(--accent);
   color: #fff;
 }

 .qm-option.multi .qm-option-indicator {
   border-radius: 4px;
 }

 .qm-nav {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding-top: 0.25rem;
 }

 .qm-btn-back {
   background: transparent;
   border: 1px solid rgba(255, 255, 255, 0.12);
   color: rgba(255, 255, 255, 0.45);
   padding: 9px 18px;
   border-radius: var(--r-md);
   cursor: pointer;
   font-size: 13px;
   font-weight: 500;
   font-family: var(--font-body);
   transition: border-color 0.2s, color 0.2s;
 }

 .qm-btn-back:hover {
   border-color: rgba(255, 255, 255, 0.3);
   color: rgba(255, 255, 255, 0.75);
 }

 .qm-btn-next {
   background: var(--accent);
   color: #fff;
   border: none;
   padding: 10px 22px;
   border-radius: var(--r-md);
   cursor: pointer;
   font-size: 13px;
   font-weight: 600;
   font-family: var(--font-body);
   transition: background 0.2s, opacity 0.2s;
 }

 .qm-btn-next:disabled {
   opacity: 0.32;
   cursor: not-allowed;
 }

 .qm-btn-next:not(:disabled):hover {
   background: var(--accent-dark);
 }

 .qm-lead-header {
   text-align: center;
   margin-bottom: 1.5rem;
 }

 .qm-lead-icon {
   font-size: 36px;
   margin-bottom: 0.875rem;
 }

 .qm-lead-title {
   font-family: var(--font-display);
   font-size: 20px;
   font-weight: 400;
   color: #fff;
   margin-bottom: 0.5rem;
 }

 .qm-lead-sub {
   font-size: 13px;
   color: rgba(255, 255, 255, 0.5);
   line-height: 1.6;
   max-width: 420px;
   margin: 0 auto;
 }

 .qm-form-row {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 10px;
 }

 .qm-field {
   margin-bottom: 10px;
 }

 .qm-field label {
   display: block;
   font-size: 11px;
   font-weight: 600;
   color: rgba(255, 255, 255, 0.45);
   margin-bottom: 4px;
   letter-spacing: 0.04em;
   text-transform: uppercase;
 }

 .req {
   color: #F87171;
 }

 .qm-field input {
   width: 100%;
   padding: 10px 12px;
   background: rgba(255, 255, 255, 0.05);
   border: 1px solid rgba(255, 255, 255, 0.1);
   border-radius: var(--r-md);
   font-size: 13px;
   font-family: var(--font-body);
   color: #fff;
   outline: none;
   transition: border-color 0.2s, box-shadow 0.2s;
 }

 .qm-field input::placeholder {
   color: rgba(255, 255, 255, 0.25);
 }

 .qm-field input:focus {
   border-color: var(--accent);
   box-shadow: 0 0 0 3px rgba(27, 79, 216, 0.2);
 }

 .qm-form-note {
   font-size: 11px;
   color: rgba(255, 255, 255, 0.3);
   text-align: center;
   margin-top: 10px;
   line-height: 1.5;
 }

 .qm-result-score-row {
   display: flex;
   gap: 1.5rem;
   align-items: center;
   padding: 1.25rem;
   background: rgba(255, 255, 255, 0.03);
   border: 1px solid rgba(255, 255, 255, 0.07);
   border-radius: var(--r-lg);
   margin-bottom: 1.5rem;
 }

 .qm-score-ring {
   position: relative;
   flex-shrink: 0;
 }

 .qm-score-num {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   font-family: var(--font-display);
   font-size: 22px;
   font-weight: 400;
   color: #fff;
   letter-spacing: -0.02em;
 }

 .qm-result-label-col {
   flex: 1;
 }

 .qm-result-badge {
   display: inline-block;
   font-size: 13px;
   font-weight: 600;
   padding: 4px 12px;
   border-radius: 20px;
   margin-bottom: 6px;
 }

 .qm-result-headline {
   font-family: var(--font-display);
   font-size: 18px;
   color: #fff;
   font-weight: 400;
   line-height: 1.25;
   margin-bottom: 6px;
   letter-spacing: -0.01em;
 }

 .qm-result-summary {
   font-size: 13px;
   color: rgba(255, 255, 255, 0.55);
   line-height: 1.55;
 }

 .qm-section-title {
   font-size: 11px;
   font-weight: 600;
   letter-spacing: 0.09em;
   text-transform: uppercase;
   color: rgba(255, 255, 255, 0.35);
   margin-bottom: 10px;
   margin-top: 1.25rem;
 }

 .qm-obs-list {
   list-style: none;
   display: flex;
   flex-direction: column;
   gap: 7px;
   margin-bottom: 0;
 }

 .qm-obs-list li {
   display: flex;
   gap: 9px;
   align-items: flex-start;
   font-size: 13px;
   color: rgba(255, 255, 255, 0.65);
   line-height: 1.5;
 }

 .qm-obs-list li::before {
   content: "→";
   color: var(--accent);
   flex-shrink: 0;
   font-size: 12px;
   margin-top: 2px;
 }

 .qm-dynamic-insights {
   margin-top: 1rem;
   display: flex;
   flex-direction: column;
   gap: 8px;
 }

 .qm-insight {
   display: flex;
   gap: 10px;
   align-items: flex-start;
   background: rgba(27, 79, 216, 0.1);
   border: 1px solid rgba(27, 79, 216, 0.25);
   border-radius: var(--r-md);
   padding: 0.75rem 0.875rem;
   font-size: 12.5px;
   color: rgba(255, 255, 255, 0.65);
   line-height: 1.55;
 }

 .qm-insight::before {
   content: "💡";
   font-size: 14px;
   flex-shrink: 0;
   margin-top: 1px;
 }

 .qm-rec-box {
   margin-top: 1rem;
   border-radius: var(--r-md);
   padding: 1rem 1.125rem;
   font-size: 13px;
   line-height: 1.6;
 }

 .qm-result-actions {
   display: flex;
   gap: 10px;
   flex-wrap: wrap;
   margin-top: 1.5rem;
   padding-top: 1.25rem;
   border-top: 1px solid rgba(255, 255, 255, 0.07);
 }

 @keyframes shake {

   0%,
   100% {
     transform: translateX(0)
   }

   20% {
     transform: translateX(-5px)
   }

   60% {
     transform: translateX(5px)
   }

   80% {
     transform: translateX(-3px)
   }
 }

 @media(max-width:520px) {
   #quiz-modal {
     border-radius: 18px 18px 0 0;
     top: auto;
     bottom: 0;
     left: 0;
     right: 0;
     width: 100%;
     transform: translateY(24px);
     max-height: 93vh;
   }

   #quiz-modal.open {
     transform: translateY(0);
   }

   .qm-form-row {
     grid-template-columns: 1fr;
   }

   .qm-result-score-row {
     flex-direction: column;
     text-align: center;
   }
 }


 /* QZ model------------------------------------------------------------- */







 /* ══ RESPONSIVE ══ */
 @media (max-width: 960px) {
   .cr-hero {
     grid-template-columns: 1fr;
     min-height: auto;
   }

   .cr-hero-left {
     padding: 5rem 2rem 3rem;
   }

   .cr-cost-grid {
     grid-template-columns: 1fr;
   }
 }

 @media (max-width: 768px) {
   .cr-container-inner {
     flex-direction: column;
     text-align: center;
   }

   .cr-image {
     text-align: center;
   }

   .cr-image img {
     margin: auto;
   }

   .cr-container {
     padding: 0 1.25rem;
   }

   section {
     padding: 3.5rem 0;
   }

   .cr-guarantee-box {
     flex-direction: column;
     gap: 1rem;
     padding: 1.5rem;
   }


   .cr-drawer {
     max-width: 100%;
   }

   .cr-form-row {
     grid-template-columns: 1fr;
   }
 }


 /* <launch-your-crypto-exchange page-css class-add-cr> */





 /* RESPONSIVE */
 @media (max-width: 768px) {
   .container {
     padding: 0 1.25rem;
   }

   section {
     padding: 3.5rem 0;
   }

   .hero {
     padding: 3.5rem 0 3rem;
   }

   .guarantee-box {
     flex-direction: column;
     gap: 1rem;
   }

   .hero-cta a {
     margin-bottom: 2%;
   }

   .out {
     margin-right: 15px;
   }

   .hero-statse {
     display: inline-flex;
     gap: 2.5rem;
     flex-wrap: wrap;
     padding: 2rem 2rem 0 6rem;
     border-top: 1px solid #c7c7c7;
   }

   .btn-outline {
     padding: 12px 21px;
   }

   .banner-icon a img {
     width: 8%;
   }

   .sat-tabs-nav {
     width: 100%;
     border-right: none;
   }

   .for-section {
     display: block;
   }

   .for-img {
     margin-top: 5%;
   }

   .process-wrapper {
     display: block;
   }

   .process-image {
     width: 100%;
     height: 400px;
   }

   /* <media-css-launch-your-crypto-exchange page-css class-add-cr> */


   .cr-hero h1 {
     line-height: 1.4;
   }

   .cr-hero-sub {
     max-width: 100%;
     color: rgb(255 255 255);
   }

   .cr-proof-label{
    color: rgb(255 255 255 / 87%);
   }

   .cr-hero-btns {
     display: block;
   }

   .cr-hero-proof {
     display: inline-flex;
     gap: 1rem;
   }

   .cr-stat-card {
     margin-top: 0%;
   }

   .cr-steps {
     grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
   }

   .cr-featured-i {
     grid-column: 1 / -1;
     height: 350px;
   }

   .cr-result-pill{
    font-size: 16px;
   }

   .cr-documenta h3{
    font-size: 1.4rem;
   }

   .cr-documente-img img{
    width: 100%;
    height: 300px;
     object-fit: cover;
    display: block;
   }

   .cr-banner-form{
    width: 100%;
    margin-left: 0;
   }

   .cr-container-inner{
    gap: 2%;
   }

   .cr-form-head-section h4{
    font-size: 18px;
   }

   .get-touch-small{
    font-size: 0.875rem !important;
    line-height: 1.3;
   }

   .cr-banner-button button{
    height: 35px;
    line-height: 35px;
    font-size: 14px !important;
   }

   /* <media-css-launch-your-crypto-exchange page-css class-add-cr> */

 }

 @media (max-width: 360px) {
   .hero {
     padding-top: 3rem !important;
   }

   .hero h1 {
     font-size: 31px;
     line-height: 1.3;
   }

   .hero-desc {
     font-size: 16px;
   }

   .btn-primarye,
   .btn-outline {
     font-size: 12px;
   }

   .hero-badge {
     display: block;
     font-size: 13px;
   }

   .hero-badge span {
     display: none;
   }

   .hero-statse {
     padding: 2rem 0rem 0 0rem;
     gap: 1.8rem;
   }

   .hero-stat-label {
     font-size: 16px;
   }

   .banner-icon a img {
     width: 13%;
   }

   .hero h1 br {
     display: none;
   }

   .section-sub {
     font-size: 16px;
   }

   .compare-table th,
   .compare-table {
     font-size: 12px;
   }

   .tab-btn {
     padding: 8px 5px;
     font-size: 16px;
   }

   .sat-tab-content p {
     font-size: 15px !important;
   }

   .faq-a,
   .faq-q {
     font-size: 14px;
   }

   .btn-white {
     padding: 13px 36px;
   }

   .logo-slide {
     gap: 30px;
   }

   .faq-qe {
     font-size: 13px;
   }

   /* <media-css-launch-your-crypto-exchange page-css class-add-cr> */

   .cr-hero-glow{
    display: none !important;
   }

   .cr-eyebrow {
     display: table;
   }

   .cr-eyebrow{
    color: rgb(255 255 255 / 91%);
   }

   .cr-btn-primary {
     margin-bottom: 5%;
   }

   .cr-hero-proof {
     display: block;
   }

   .cr-proof-item {
     margin-top: 5%;
   }

   .cr-compare-section::before {
     bottom: 2%;
   }


   /* <media-css-launch-your-crypto-exchange page-css class-add-cr> */
 }

 @media (max-width: 1440px){
  .cr-hero-proof{
    gap: 1.4rem;
  }
  .cr-container-inner{
    gap: 9%;
  }
 }