@font-face {
    font-family: Marcellus-Regular;
    src: url("../fonts/Marcellus-Regular.woff2") format("woff2"), url("../fonts/Marcellus-Regular.ttf") format("truetype");
    font-display: swap;
  }
  
  @font-face {
    font-family: Montserrat-Medium;
    src: url("../fonts/monserat/Montserrat-Medium.woff2") format("woff2"), url("../fonts/monserat/Montserrat-Medium.ttf") format("truetype");
    font-display: swap;
  }
  
  @font-face {
    font-family: Montserrat-SemiBold;
    src: url("../fonts/monserat/Montserrat-SemiBold.woff2") format("woff2"), url("../fonts/monserat/Montserrat-SemiBold.ttf") format("truetype");
    font-display: swap;
  }

/* =========================================================
   BASE
   ========================================================= */

   :root{

    --fh: "Merriweather", serif;
   }
   
   *,
   *::before,
   *::after {
     box-sizing: border-box;
   }
   
   html {
     -webkit-text-size-adjust: 100%;
     scroll-behavior: smooth;
   }
   
   body {
     margin: 0;
     font-family: Montserrat-Medium;
     font-weight: 500;
     font-size: 15px;
     line-height: 1.65;
     color: #757575;
     background: #ffffff;
     overflow-x: hidden;
   }

   h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--fh) !important;
	color: var(--t1);
	text-transform: capitalize;

}
   
   img {
     max-width: 100%;
     height: auto;
     display: block;
   }
   a {
   
     text-decoration: none;
   }
   button,
   input,
   select {
    font-family: Montserrat-SemiBold;
   }
   ul {
     margin: 0;
     padding: 0;
     list-style: none;
   }
   h1,
   h2,
   h3,
   h4,
   p {
     margin: 0;
   }
   
   .hq-page {
     overflow-x: hidden;
   }
   
   .container {
     width: 100%;
     max-width: 1240px;
     margin: 0 auto;
     padding: 0 32px;
   }
   
   .section {
     padding: 92px 0;
     position: relative;
   }
   
   .ic {
     width: 24px;
     height: 24px;
     fill: none;
     stroke: currentColor;
     stroke-width: 1.8;
     stroke-linecap: round;
     stroke-linejoin: round;
     flex-shrink: 0;
   }
   
   /* Typography */
   .eyebrow {
     display: inline-block;
     font-family: "Montserrat", sans-serif;
     font-weight: 600;
     font-size: 12px;
     letter-spacing: 0.1em;
     text-transform: uppercase;
     color: #e8673a;
     margin-bottom: 10px;
   }
   
   .eyebrow-pill {
     padding: 4px 12px;
     border: 1px solid rgba(232, 103, 58, 0.35);
     background: rgba(232, 103, 58, 0.06);
     border-radius: 999px;
     font-size: 10.5px;
   }
   
   .h2 {
     font-family: "Merriweather", serif;
     font-weight: 700;
     font-size: clamp(25px, 2.5vw, 34px);
     line-height: 1.28;
     color: #141244;
     letter-spacing: -0.01em;
   }
   
   .lead {
     margin-top: 12px;
     font-size: 15.5px;
     color: #757575;
     max-width: 560px;
   }
   
   .section-head {
     margin-bottom: 40px;
   }
   
   /* Buttons */
   .btn {
     display: inline-flex;
     align-items: center;
     gap: 10px;
     font-family: "Montserrat", sans-serif;
     font-weight: 600;
     font-size: 15px;
     line-height: 1;
     padding: 16px 28px;
     border-radius: 999px;
     border: 0;
     cursor: pointer;
     background: #e8673a;
     color: #ffffff;
     box-shadow: 0 10px 24px rgba(232, 103, 58, 0.28);
     transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
   }
   .btn:hover {
     background: #f9774d;
     transform: translateY(-2px);
     box-shadow: 0 14px 28px rgba(232, 103, 58, 0.34);
   }
   .btn:focus-visible {
     outline: 3px solid rgba(232, 103, 58, 0.4);
     outline-offset: 3px;
   }
   .btn .ic {
     width: 18px;
     height: 18px;
     stroke-width: 2.2;
   }
   
   .btn-sm {
     padding: 13px 22px;
     font-size: 14px;
   }
   
   .link-arrow {
     display: inline-flex;
     align-items: center;
     gap: 6px;
     font-weight: 600;
     font-size: 14.5px;
     color: #0a3d38;
   }
   .link-arrow .ic {
     width: 16px;
     height: 16px;
     stroke-width: 2.2;
     transition: transform 0.2s ease;
   }
   .link-arrow:hover .ic {
     transform: translateX(3px);
   }
   
   /* Decorative leaves */
   .leaves {
     position: absolute;
     pointer-events: none;
     color: #0a3d38;
     z-index: 0;
   }
   
   /* =========================================================
      1. HERO
      ========================================================= */
   .hero {
     background: #f7f3ea;
     padding: 96px 0 150px;
     position: relative;
     overflow: hidden;
   }
   .hero .leaves-left {
     left: -60px;
     top: -30px;
     width: 260px;
     opacity: 0.07;
     transform: rotate(-12deg);
   }
   .hero .leaves-right {
     right: -70px;
     bottom: 40px;
     width: 220px;
     opacity: 0.06;
     transform: rotate(160deg);
   }
   
   .hero-grid {
     position: relative;
     z-index: 1;
     display: grid;
     grid-template-columns: 1.08fr 1fr;
     gap: 56px;
     align-items: center;
   }
   
   .hero-eyebrow {
     display: inline-flex;
     align-items: center;
     gap: 10px;
     font-weight: 600;
     font-size: 12px;
     letter-spacing: 0.1em;
     text-transform: uppercase;
     color: #e8673a;
     margin-bottom: 20px;
   }
   .hero-eyebrow::before {
     content: "";
     width: 22px;
     height: 2px;
     background: #e8673a;
     border-radius: 2px;
   }
   
   .hero h1 {
     font-family: "Merriweather", serif;
     font-weight: 900;
     font-size: clamp(30px, 3.4vw, 48px);
     line-height: 1.2;
     color: #141244;
     letter-spacing: -0.015em;
   }
   
   .hero-copy {
     margin-top: 22px;
     font-size: 16px;
     line-height: 1.75;
     color: #757575;
     max-width: 580px;
   }
   .hero-copy strong {
     color: #141244;
     font-weight: 600;
   }
   
   .hero-cta {
     margin-top: 34px;
     display: flex;
     align-items: center;
     flex-wrap: wrap;
     gap: 18px 22px;
   }
   .hero-micro {
     font-size: 13px;
     color: #757575;
   }
   
   .trust-row {
     margin-top: 30px;
     display: flex;
     flex-wrap: wrap;
     gap: 12px 26px;
   }
   .trust-row li {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     font-size: 13px;
     font-weight: 500;
     color: #141244;
   }
   .trust-row .ic {
     width: 18px;
     height: 18px;
     color: #0a3d38;
   }
   
   /* Hero visual */
   .hero-visual {
     
     display: flex;
     align-items: center;
     gap: 22px;
   }
   
   .sparks {
     position: absolute;
     left: -34px;
     top: -18px;
     width: 44px;
     color: #e8673a;
   }
   
   .chat {
     flex: 1 1 auto;
     max-width: 440px;
     background: #ffffff;
     border-radius: 20px;
     box-shadow: 0 30px 70px rgba(10, 61, 56, 0.14),
       0 4px 14px rgba(20, 18, 68, 0.05);
     overflow: hidden;
   }
   
   .chat-head {
     background: #0a3d38;
     color: #ffffff;
     padding: 16px 20px;
     display: flex;
     align-items: center;
     gap: 12px;
   }
   .chat-avatar {
     width: 38px;
     height: 38px;
     border-radius: 50%;
     background: #ffffff;
     color: #0a3d38;
     display: grid;
     place-items: center;
     font-family: "Merriweather", serif;
     font-weight: 700;
     font-size: 16px;
     position: relative;
     flex-shrink: 0;
   }
   .chat-avatar::after {
     content: "";
     position: absolute;
     right: 0;
     bottom: 1px;
     width: 10px;
     height: 10px;
     border-radius: 50%;
     background: #3fbf7f;
     border: 2px solid #0a3d38;
   }
   .chat-name {
     font-weight: 600;
     font-size: 15px;
     line-height: 1.2;
   }
   .chat-sub {
     font-size: 11.5px;
     opacity: 0.75;
     margin-top: 3px;
     line-height: 1.2;
   }
   .chat-begin {
     margin-left: auto;
     font-size: 11px;
     font-weight: 600;
     padding: 6px 12px;
     border-radius: 999px;
     background: rgba(255, 255, 255, 0.12);
     white-space: nowrap;
   }
   
   .chat-body {
     height: 236px;
     padding: 22px 20px;
     display: flex;
     flex-direction: column;
     gap: 12px;
     overflow-y: auto;
   }
   .bubble {
     max-width: 88%;
     font-size: 13.5px;
     line-height: 1.6;
     padding: 12px 15px;
     color: #141244;
     animation: bubbleIn 0.3s ease;
   }
   .bubble.bot {
     background: #f7f3ea;
     border-radius: 4px 16px 16px 16px;
   }
   .bubble.user {
     align-self: flex-end;
     background: #0a3d38;
     color: #ffffff;
     border-radius: 16px 4px 16px 16px;
   }
   @keyframes bubbleIn {
     from {
       opacity: 0;
       transform: translateY(6px);
     }
     to {
       opacity: 1;
       transform: none;
     }
   }
   
   .chat-form {
     display: flex;
     gap: 10px;
     padding: 14px 16px 16px;
     border-top: 1px solid rgba(20, 18, 68, 0.07);
   }
   .chat-form input {
     flex: 1;
     min-width: 0;
     border: 1px solid rgba(20, 18, 68, 0.12);
     border-radius: 12px;
     padding: 12px 14px;
     font-size: 14px;
     font-weight: 500;
     color: #141244;
     outline: none;
     transition: border-color 0.2s ease;
   }
   .chat-form input:focus {
     border-color: #0a3d38;
   }
   .chat-form button {
     border: 0;
     border-radius: 12px;
     background: #0a3d38;
     color: #ffffff;
     font-weight: 600;
     font-size: 14px;
     padding: 0 22px;
     cursor: pointer;
     transition: background 0.2s ease;
   }
   .chat-form button:hover {
     background: #0e4f48;
   }
   
   .diff-note {
    flex: 0 0 110px;
    transform: rotate(-9deg);
    color: #141244;
    text-align: left;
    margin-top: -60px;
    position: absolute;
    left: -40px;
    bottom: -128px;
   }
   .diff-note .script {
     font-family: "Caveat", cursive;
     font-weight: 600;
     font-size: 25px;
     line-height: 1.05;
     color: #0a3d38;
   }
   .diff-note p {
     font-family: "Caveat", cursive;
     font-size: 17px;
     line-height: 1.15;
     color: #757575;
     margin-top: 10px;
   }
   .diff-note svg {
     width: 70px;
     margin-top: 8px;
     color: #0a3d38;
   }

.dsh-h b{
font-family: var(--fh);
}

.dsh-av{
font-family: var(--fh);
}
.dsh-m {
    font-size: 12.5px !important;
    color: var(--color-3) !important;
}

.dsh-go{
font-family: Montserrat-SemiBold !important;
}

.dsh-row input, .dsh-row textarea{
font-size: 13px !important;
font-weight: 500;
}
   
   /* =========================================================
      2. STATS BAR
      ========================================================= */
   .stats-wrap {
     position: relative;
     z-index: 2;
     margin-top: -66px;
   }
   .stats {
     background: #ffffff;
     border-radius: 18px;
     box-shadow: 0 20px 50px rgba(10, 61, 56, 0.09);
     display: grid;
     grid-template-columns: repeat(5, 1fr);
     padding: 30px 12px;
   }
   .stat {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 14px;
     padding: 4px 18px;
     border-right: 1px solid rgba(20, 18, 68, 0.08);
   }
   .stat:last-child {
     border-right: 0;
   }
   .stat .ic {
     width: 32px;
     height: 32px;
     color: #0a3d38;
     stroke-width: 1.6;
   }
   .stat-num {
     font-family: "Merriweather", serif;
     font-weight: 700;
     font-size: 22px;
     color: #e8673a;
     line-height: 1.15;
   }
   .stat-label {
     font-size: 12.5px;
     color: #757575;
     line-height: 1.3;
     margin-top: 3px;
   }
   
   /* =========================================================
      3. WHY JOIN
      ========================================================= */
   .why {
     padding-top: 96px;
   }
   .why-grid {
     display: grid;
     grid-template-columns: 360px 1fr;
     gap: 48px;
     align-items: center;
   }
   .why-intro .lead {
     font-size: 15px;
   }
   .why-intro .btn {
     margin-top: 28px;
   }
   
   .benefits {
     display: grid;
     grid-template-columns: repeat(5, 1fr);
     gap: 16px;
   }
   .benefit {
     background: #ffffff;
     border: 1px solid rgba(20, 18, 68, 0.08);
     border-radius: 16px;
     padding: 28px 16px 26px;
     text-align: center;
     box-shadow: 0 8px 24px rgba(20, 18, 68, 0.04);
     transition: transform 0.25s ease, box-shadow 0.25s ease;
   }
   .benefit:hover {
     transform: translateY(-4px);
     box-shadow: 0 16px 34px rgba(20, 18, 68, 0.08);
   }
   .benefit .ic {
     width: 32px;
     height: 32px;
     margin: 0 auto 16px;
     stroke-width: 1.6;
   }
   .benefit:nth-child(odd) .ic {
     color: #e8673a;
   }
   .benefit:nth-child(even) .ic {
     color: #0a3d38;
   }
   .benefit h3 {
     font-size: 14px;
     font-weight: 600;
     color: #141244;
     line-height: 1.35;
   }
   .benefit p {
     margin-top: 8px;
     font-size: 13px;
     line-height: 1.55;
     color: #757575;
   }
   
   /* =========================================================
      4. DASHBOARD
      ========================================================= */
   .dash-section {
     background: linear-gradient(
       180deg,
       rgba(10, 61, 56, 0.045) 0%,
       rgba(10, 61, 56, 0.07) 100%
     );
     overflow: hidden;
   }
   .dash-section .leaves-a {
     left: 34%;
     top: -40px;
     width: 240px;
     opacity: 0.09;
     transform: rotate(14deg);
   }
   .dash-section .leaves-b {
     right: -60px;
     bottom: -40px;
     width: 230px;
     opacity: 0.08;
     transform: rotate(200deg);
   }
   
   .dash-grid {
     position: relative;
     z-index: 1;
     display: grid;
     grid-template-columns: 0.78fr 1.22fr;
     gap: 52px;
     align-items: center;
   }
   
   .checklist {
     margin-top: 26px;
     display: grid;
     gap: 14px;
   }
   .checklist li {
     display: flex;
     align-items: center;
     gap: 12px;
     font-size: 14.5px;
     color: #141244;
   }
   .check-dot {
     width: 22px;
     height: 22px;
     border-radius: 50%;
     background: #e8673a;
     color: #ffffff;
     display: grid;
     place-items: center;
     flex-shrink: 0;
   }
   .check-dot .ic {
     width: 13px;
     height: 13px;
     stroke-width: 3;
   }
   .dash-copy .btn {
     margin-top: 32px;
   }
   
   /* Dashboard mockup */
   .dash-visual {
     position: relative;
   }
   .dash {
     background: #ffffff;
     border-radius: 18px;
     box-shadow: 0 34px 80px rgba(10, 61, 56, 0.16),
       0 2px 8px rgba(20, 18, 68, 0.05);
     display: grid;
     grid-template-columns: 158px 1fr;
     overflow: hidden;
     font-size: 12px;
     color: #141244;
   }
   .dash-side {
     border-right: 1px solid rgba(20, 18, 68, 0.06);
     padding: 20px 12px;
   }
   .dash-logo {
     display: flex;
     align-items: center;
     gap: 8px;
     margin-bottom: 22px;
     padding: 0 6px;
   }
   .dash-logo-mark {
     width: 26px;
     height: 26px;
     border-radius: 8px;
     background: #0a3d38;
     color: #ffffff;
     display: grid;
     place-items: center;
   }
   .dash-logo-mark .ic {
     width: 15px;
     height: 15px;
     stroke-width: 2.2;
     color: #fff;
   }
   .dash-logo b {
     display: block;
     font-size: 12.5px;
     color: #0a3d38;
     line-height: 1.1;
   }
   .dash-logo span {
     font-size: 9px;
     color: #757575;
   }
   
   .dash-nav {
     display: grid;
     gap: 3px;
   }
   .dash-nav li {
     display: flex;
     align-items: center;
     gap: 9px;
     padding: 9px 10px;
     border-radius: 9px;
     font-size: 11.5px;
     color: #757575;
   }
   .dash-nav li .ic {
     width: 15px;
     height: 15px;
   }
   .dash-nav li.active {
     background: #0a3d38;
     color: #ffffff;
     font-weight: 600;
   }
   
   .dash-main {
     padding: 20px 18px 22px;
     min-width: 0;
   }
   .dash-top {
     display: flex;
     align-items: flex-start;
     justify-content: space-between;
     gap: 12px;
   }
   .dash-top h4 {
     font-size: 15px;
     font-weight: 700;
     color: #141244;
   }
   .dash-top p {
     font-size: 11px;
     color: #757575;
     margin-top: 2px;
   }
   .dash-tools {
     display: flex;
     align-items: center;
     gap: 12px;
     color: #757575;
   }
   .dash-tools .ic {
     width: 16px;
     height: 16px;
   }
   .dash-me {
     width: 30px;
     height: 30px;
     border-radius: 50%;
     overflow: hidden;
     background: #f7f3ea;
     border: 2px solid rgba(10, 61, 56, 0.12);
   }
   .dash-me img {
     width: 100%;
     height: 100%;
     object-fit: cover;
   }
   
   .dash-stats {
     margin-top: 18px;
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 10px;
   }
   .dstat {
     border: 1px solid rgba(20, 18, 68, 0.07);
     border-radius: 12px;
     padding: 12px 8px;
     display: flex;
     gap: 10px;
     align-items: center;
   }
   .dstat-ic {
     width: 30px;
     height: 30px;
     border-radius: 9px;
     display: grid;
     place-items: center;
     flex-shrink: 0;
     align-items: center;
   }
   .dstat-ic .ic {
     width: 16px;
     height: 16px;
   }
   .dstat-ic.g {
     background: rgba(10, 61, 56, 0.08);
     color: #0a3d38;
   }
   .dstat-ic.o {
     background: rgba(232, 103, 58, 0.1);
     color: #e8673a;
   }
   .dstat b {
     display: block;
     font-size: 15px;
     line-height: 1.2;
     color: #141244;
   }
   .dstat span {
     font-size: 9px;
     color: #757575;
     line-height: 11px;
     display: inline-grid;
   }
   
   .dash-lower {
     margin-top: 14px;
     display: grid;
     grid-template-columns: 1.35fr 1fr;
     gap: 12px;
   }
   .dpanel {
     border: 1px solid rgba(20, 18, 68, 0.07);
     border-radius: 12px;
     padding: 14px;
     min-width: 0;
   }
   .dpanel-h {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 10px;
   }
   .dpanel-h b {
     font-size: 12px;
   }
   .dpanel-h span {
     font-size: 10px;
     color: #757575;
   }
   
   .appt {
     display: grid;
     grid-template-columns: 52px 1fr auto;
     align-items: center;
     gap: 8px;
     padding: 9px 0;
     border-top: 1px solid rgba(20, 18, 68, 0.06);
   }
   .appt:first-of-type {
     border-top: 0;
   }
   .appt-time {
     font-size: 10.5px;
     color: #757575;
     font-weight: 600;
   }
   .appt-who b {
     display: block;
     font-size: 11px;
     font-weight: 600;
     line-height: 1.3;
   }
   .appt-who span {
    font-size: 9.5px;
    color: #757575;
    line-height: 12px;
    display: inline-block;
   }
   .appt-join {
     font-size: 10px;
     font-weight: 600;
     color: #ffffff;
     background: #0a3d38;
     border-radius: 7px;
     padding: 6px 12px;
   }
   
   .earn-total {
     font-family: "Merriweather", serif;
     font-weight: 700;
     font-size: 18px;
     color: #141244;
   }
   .earn-up {
     display: inline-block;
     margin-top: 3px;
     font-size: 9.5px;
     font-weight: 600;
     color: #0a3d38;
     background: rgba(10, 61, 56, 0.08);
     padding: 2px 7px;
     border-radius: 999px;
   }
   .bars {
     margin-top: 14px;
     height: 86px;
     display: flex;
     align-items: flex-end;
     gap: 6px;
   }
   .bars i {
     flex: 1;
     border-radius: 4px 4px 2px 2px;
     background: rgba(10, 61, 56, 0.16);
     display: block;
   }
   .bars i.hi {
     background: #0a3d38;
   }
   .bars i.peak {
     background: #e8673a;
   }
   .bar-labels {
     display: flex;
     justify-content: space-between;
     font-size: 9px;
     color: #757575;
     margin-top: 6px;
   }
   
   .video-card {
     position: absolute;
     left: -36px;
     bottom: -34px;
     width: 168px;
     background: #0a3d38;
     border-radius: 22px;
     padding: 8px;
     box-shadow: 0 24px 50px rgba(10, 61, 56, 0.28);
   }
   .video-card .vc-screen {
     position: relative;
     border-radius: 16px;
     overflow: hidden;
     aspect-ratio: 3 / 4;
     background: #f7f3ea;
   }
   .video-card .vc-screen > img {
     width: 100%;
     height: 100%;
     object-fit: cover;
   }
   .vc-live {
     position: absolute;
     top: 8px;
     left: 8px;
     font-size: 9px;
     font-weight: 600;
     color: #ffffff;
     background: rgba(20, 18, 68, 0.55);
     padding: 3px 8px;
     border-radius: 999px;
   }
   .vc-live::before {
     content: "";
     display: inline-block;
     width: 6px;
     height: 6px;
     border-radius: 50%;
     background: #e8673a;
     margin-right: 5px;
     vertical-align: 1px;
   }
   .vc-ctrl {
     display: flex;
     justify-content: center;
     gap: 8px;
     padding: 8px 0 2px;
   }
   .vc-ctrl span {
     width: 26px;
     height: 26px;
     border-radius: 50%;
     background: rgba(255, 255, 255, 0.14);
     color: #ffffff;
     display: grid;
     place-items: center;
   }
   .vc-ctrl span.end {
     background: #e8673a;
   }
   .vc-ctrl .ic {
     width: 13px;
     height: 13px;
   }
   
   
   
   /* =========================================================
      6. YOU FOCUS ON CARE
      ========================================================= */
   .focus {
     padding-top: 20px;
   }
   .split {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 28px;
   }
   .split-panel {
     border-radius: 20px;
     padding: 34px 36px 36px;
   }
   .split-panel.you {
     background: rgba(10, 61, 56, 0.06);
   }
   .split-panel.hq {
     background: rgba(232, 103, 58, 0.07);
   }
   .split-panel h3 {
     display: flex;
     align-items: center;
     gap: 12px;
     font-size: 18px;
     font-weight: 700;
     margin-bottom: 22px;
   }
   .split-panel.you h3 {
     color: #0a3d38;
   }
   .split-panel.hq h3 {
     color: #e8673a;
   }
   .split-panel h3 .ic {
     width: 28px;
     height: 28px;
   }
   .split-list {
     display: grid;
     gap: 16px;
   }
   .split-list li {
     display: flex;
     align-items: center;
     gap: 14px;
     font-size: 15px;
     color: #141244;
   }
   .ring {
     width: 28px;
     height: 28px;
     border-radius: 50%;
     display: grid;
     place-items: center;
     flex-shrink: 0;
     border: 1.6px solid currentColor;
   }
   .ring .ic {
     width: 14px;
     height: 14px;
     stroke-width: 2.2;
   }
   .you .ring {
     color: #0a3d38;
   }
   .hq .ring {
     color: #e8673a;
   }
   
   /* =========================================================
      7. EARNINGS
      ========================================================= */
   .earn {
     background: #f7f3ea;
   }
   .earn-grid {
     display: grid;
     grid-template-columns: 1.65fr 1fr;
     gap: 24px;
     align-items: stretch;
   }
   .calc {
     background: #ffffff;
     border-radius: 18px;
     border: 1px solid rgba(20, 18, 68, 0.06);
     box-shadow: 0 12px 34px rgba(20, 18, 68, 0.05);
     padding: 32px;
     display: grid;
     grid-template-columns: 1fr 1fr 1.25fr;
     gap: 26px;
     align-items: start;
   }
   .field label,
   .field .label {
     display: block;
     font-weight: 600;
     font-size: 13px;
     color: #141244;
     margin-bottom: 10px;
   }
   .select-wrap {
     position: relative;
   }
   .select-wrap select {
     width: 100%;
     appearance: none;
     -webkit-appearance: none;
     background: #ffffff;
     border: 1px solid rgba(20, 18, 68, 0.14);
     border-radius: 10px;
     padding: 13px 40px 13px 14px;
     font-size: 14px;
     font-weight: 500;
     color: #141244;
     cursor: pointer;
     outline: none;
     transition: border-color 0.2s ease;
   }
   .select-wrap select:focus {
     border-color: #0a3d38;
   }
   .select-wrap .ic {
     position: absolute;
     right: 14px;
     top: 50%;
     width: 16px;
     height: 16px;
     transform: translateY(-50%);
     pointer-events: none;
     color: #757575;
   }
   .slider-field + .slider-field {
     margin-top: 24px;
   }
   .slider-row {
     display: flex;
     align-items: center;
     gap: 14px;
   }
   .num-box {
     display: flex;
     align-items: center;
     gap: 4px;
     border: 1px solid rgba(20, 18, 68, 0.14);
     border-radius: 8px;
     padding: 6px 10px;
     flex: 0 0 auto;
     font-size: 13px;
     color: #141244;
   }
   .num-box input {
     width: 52px;
     border: 0;
     outline: none;
     font-size: 13px;
     font-weight: 600;
     color: #141244;
     background: transparent;
     padding: 0;
     -moz-appearance: textfield;
   }
   .num-box input::-webkit-outer-spin-button,
   .num-box input::-webkit-inner-spin-button {
     -webkit-appearance: none;
     margin: 0;
   }
   .num-box.short input {
     width: 30px;
   }
   
   input[type="range"] {
     -webkit-appearance: none;
     appearance: none;
     flex: 1;
     min-width: 0;
     height: 5px;
     border-radius: 999px;
     background: #ede7da;
     outline: none;
     cursor: pointer;
   }
   input[type="range"]::-webkit-slider-thumb {
     -webkit-appearance: none;
     width: 18px;
     height: 18px;
     border-radius: 50%;
     background: #e8673a;
     border: 3px solid #ffffff;
     box-shadow: 0 2px 8px rgba(232, 103, 58, 0.45);
   }
   input[type="range"]::-moz-range-thumb {
     width: 14px;
     height: 14px;
     border-radius: 50%;
     background: #e8673a;
     border: 3px solid #ffffff;
     box-shadow: 0 2px 8px rgba(232, 103, 58, 0.45);
   }
   input[type="range"]:focus-visible::-webkit-slider-thumb {
     outline: 3px solid rgba(232, 103, 58, 0.35);
   }
   .range-meta {
     display: flex;
     justify-content: space-between;
     font-size: 11px;
     color: #757575;
     margin-top: 8px;
   }
   
   .result {
     background: rgba(10, 61, 56, 0.07);
     border: 1px solid rgba(10, 61, 56, 0.1);
     border-radius: 18px;
     padding: 34px 30px;
     text-align: center;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
   }
   .coin {
     width: 46px;
     height: 46px;
     border-radius: 50%;
     background: #e8673a;
     color: #ffffff;
     display: grid;
     place-items: center;
     box-shadow: 0 8px 18px rgba(232, 103, 58, 0.3);
     font-family: "Merriweather", serif;
     font-weight: 700;
     font-size: 20px;
   }
   .result-label {
     margin-top: 16px;
     font-weight: 600;
     font-size: 14px;
     color: #141244;
   }
   .result-amount {
     margin-top: 6px;
     font-family: "Merriweather", serif;
     font-weight: 900;
     font-size: clamp(32px, 3.4vw, 44px);
     color: #0a3d38;
     line-height: 1.2;
   }
   .result-note {
     margin-top: 12px;
     font-size: 12.5px;
     line-height: 1.6;
     color: #757575;
     max-width: 280px;
   }
   
   /* =========================================================
      8. TOOLS
      ========================================================= */
   .tools-grid {
     display: grid;
     grid-template-columns: repeat(6, 1fr);
     gap: 18px;
   }
   .tool {
     background: #ffffff;
     border: 1px solid rgba(20, 18, 68, 0.08);
     border-radius: 16px;
     padding: 26px 20px 24px;
     transition: transform 0.25s ease, box-shadow 0.25s ease;
   }
   .tool:hover {
     transform: translateY(-4px);
     box-shadow: 0 16px 34px rgba(20, 18, 68, 0.07);
   }
   .tool-ic {
     width: 42px;
     height: 42px;
     border-radius: 12px;
     display: grid;
     place-items: center;
     margin-bottom: 18px;
   }
   .tool:nth-child(odd) .tool-ic {
     background: rgba(10, 61, 56, 0.08);
     color: #0a3d38;
   }
   .tool:nth-child(even) .tool-ic {
     background: rgba(232, 103, 58, 0.1);
     color: #e8673a;
   }
   .tool-ic .ic {
     width: 22px;
     height: 22px;
   }
   .tool h3 {
     font-size: 14px;
     font-weight: 600;
     color: #141244;
     line-height: 1.35;
   }
   .tool p {
     margin-top: 6px;
     font-size: 12.8px;
     line-height: 1.55;
     color: #757575;
   }
   
   /* =========================================================
      9. JOURNEY
      ========================================================= */
   .journey {
     background: #f7f3ea;
   }
   .steps {
     display: flex;
     align-items: flex-start;
     gap: 8px;
   }
   .step {
     flex: 1 1 0;
     display: flex;
     gap: 10px;
     align-items: flex-start;
     min-width: 0;
     position: relative;
   }
   .step-num {
     width: 54px;
     height: 54px;
     border-radius: 50%;
     border: 2px solid #0a3d38;
     background: #ffffff;
     color: #0a3d38;
     display: grid;
     place-items: center;
     font-family: "Merriweather", serif;
     font-weight: 700;
     font-size: 16px;
     flex-shrink: 0;
     box-shadow: 0 6px 16px rgba(10, 61, 56, 0.1);
     position: relative;
     z-index: 1;
   }
   .step:last-of-type .step-num {
     background: #0a3d38;
     color: #ffffff;
   }
   .step h3 {
     font-size: 14px;
     font-weight: 600;
     color: #141244;
     line-height: 1.35;
     margin-top: 6px;
   }
   .step p {
     margin-top: 5px;
     font-size: 11.5px;
     line-height: 1.55;
     color: #757575;
   }
   .step p small {
     display: block;
     font-size: 12px;
     color: #e8673a;
     font-weight: 600;
     margin-top: 3px;
   }
   .step-arrow {
     flex: 0 0 auto;
     align-self: flex-start;
     margin-top: 18px;
     color: rgba(20, 18, 68, 0.3);
   }
   .step-arrow .ic {
     width: 18px;
     height: 18px;
   }
   
   /* =========================================================
      10. TESTIMONIALS
      ========================================================= */
   .carousel {
     position: relative;
   }
   .carousel-viewport {
     overflow: hidden;
     padding: 6px 4px 14px;
     margin: -6px -4px -14px;
   }
   .carousel-track {
     display: flex;
     gap: 24px;
     transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
     will-change: transform;
   }
   .t-card {
     flex: 0 0 calc((100% - 48px) / 3);
     background: #ffffff;
     border: 1px solid rgba(20, 18, 68, 0.08);
     border-radius: 20px;
     padding: 28px 26px 22px;
     box-shadow: 0 12px 32px rgba(20, 18, 68, 0.05);
     display: flex;
     flex-direction: column;
   }
   .t-top {
     display: grid;
     grid-template-columns: 108px 1fr;
     gap: 18px;
     align-items: start;
   }
   .t-photo {
     width: 108px;
     height: 124px;
     border-radius: 54px 54px 18px 18px;
     overflow: hidden;
     background: rgba(232, 103, 58, 0.16);
     position: relative;
   }
   .t-photo img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     object-position: center 15%;
   }
   .t-quote {
     font-size: 13.5px;
     line-height: 1.65;
     color: #141244;
   }
   .t-quote::before {
     content: "\201C";
     display: block;
     font-family: "Merriweather", serif;
     font-size: 34px;
     line-height: 0.6;
     color: #e8673a;
     margin-bottom: 6px;
   }
   .t-name {
     margin-top: 12px;
     font-weight: 700;
     font-size: 14px;
     color: #141244;
   }
   .t-role {
     font-size: 12px;
     color: #757575;
   }
   .t-stats {
     margin-top: auto;
     padding-top: 18px;
     display: grid;
     grid-template-columns: repeat(3, 1fr);
   }
   .t-stats > div {
     padding-top: 16px;
     border-top: 1px solid rgba(20, 18, 68, 0.08);
     text-align: center;
   }
   .t-stats b {
     display: block;
     font-family: "Merriweather", serif;
     font-size: 17px;
     color: #0a3d38;
   }
   .t-stats span {
     font-size: 11.5px;
     color: #757575;
   }
   
   .c-btn {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     width: 46px;
     height: 46px;
     border-radius: 50%;
     border: 1px solid rgba(20, 18, 68, 0.08);
     background: #ffffff;
     color: #141244;
     display: grid;
     place-items: center;
     cursor: pointer;
     box-shadow: 0 8px 20px rgba(20, 18, 68, 0.1);
     z-index: 2;
     transition: background 0.2s ease, color 0.2s ease, opacity 0.2s ease;
   }
   .c-btn:hover:not(:disabled) {
     background: #0a3d38;
     color: #ffffff;
   }
   .c-btn:disabled {
     opacity: 0.45;
     cursor: default;
   }
   .c-btn .ic {
     width: 18px;
     height: 18px;
     stroke-width: 2.2;
   }
   .c-prev {
     left: -66px;
   }
   .c-next {
     right: -66px;
   }
   .c-dots {
     display: none;
     justify-content: center;
     gap: 8px;
     margin-top: 26px;
   }
   .c-dots button {
     width: 8px;
     height: 8px;
     border-radius: 999px;
     border: 0;
     padding: 0;
     background: rgba(10, 61, 56, 0.2);
     cursor: pointer;
     transition: width 0.25s ease, background 0.25s ease;
   }
   .c-dots button[aria-current="true"] {
     width: 24px;
     background: #0a3d38;
   }
   
   /* =========================================================
      11. REQUIREMENTS + SECURITY
      ========================================================= */
   .reqsec {
     background: #f7f3ea;
   }
   .reqsec-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 40px;
     align-items: center;
   }
   .req {
     display: grid;
     grid-template-columns: 1fr 150px;
     gap: 20px;
     align-items: center;
   }
   .req h2 {
     margin-bottom: 22px;
     font-size: 36px;
     letter-spacing: 0;
     line-height: 42px;
   }
   .req-list {
     display: grid;
     gap: 14px;
   }
   .req-list li {
     display: flex;
     gap: 12px;
     align-items: flex-start;
     font-size: 14.5px;
     color: #141244;
     line-height: 1.5;
   }
   .req-list .check-dot {
     margin-top: 1px;
   }
   .doc-art {
     width: 150px;
   }
   
   .sec-card {
     background: #ffffff;
     border-radius: 20px;
     border: 1px solid rgba(20, 18, 68, 0.06);
     box-shadow: 0 14px 36px rgba(20, 18, 68, 0.05);
     padding: 34px 32px;
   }
   .sec-card .lead {
     font-size: 14.5px;
     margin-top: 10px;
   }
   .sec-badges {
     margin-top: 28px;
     display: grid;
     grid-template-columns: repeat(5, 1fr);
     gap: 6px;
   }
   .sec-badge {
     text-align: center;
   }
   .sec-badge .badge-ic {
     width: 50px;
     height: 50px;
     border-radius: 14px;
     background: rgba(10, 61, 56, 0.07);
     color: #0a3d38;
     display: grid;
     place-items: center;
     margin: 0 auto 12px;
   }
   .sec-badge .badge-ic .ic {
     width: 24px;
     height: 24px;
   }
   .sec-badge b {
     display: block;
     font-size: 13px;
     font-weight: 700;
     color: #141244;
     line-height: 1.3;
   }
   .sec-badge span {
     font-size: 11px;
     color: #757575;
     line-height: 1.3;
     font-weight: 500;
   }
   
   /* =========================================================
      12. FAQ
      ========================================================= */
   .faq-head {
     display: flex;
     justify-content: space-between;
     align-items: flex-end;
     gap: 20px;
     margin-bottom: 32px;
   }
   .faq-list {
     display: grid;
     gap: 12px;
   }
   .faq-item {
     border: 1px solid rgba(20, 18, 68, 0.1);
     border-radius: 12px;
     background: #ffffff;
     transition: border-color 0.2s ease, box-shadow 0.2s ease;
   }
   .faq-item.open {
     border-color: rgba(10, 61, 56, 0.3);
     box-shadow: 0 10px 26px rgba(10, 61, 56, 0.06);
   }
   .faq-q {
     width: 100%;
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 16px;
     padding: 18px 22px;
     background: transparent;
     border: 0;
     text-align: left;
     cursor: pointer;
     font-weight: 600;
     font-size: 15px;
     color: #141244;
     font-family: var(--fh);
   }
   .faq-q:focus-visible {
     outline: 3px solid rgba(10, 61, 56, 0.25);
     outline-offset: -3px;
     border-radius: 12px;
   }
   .faq-q .ic {
     width: 20px;
     height: 20px;
     stroke-width: 2.2;
     color: #0a3d38;
     transition: transform 0.3s ease;
   }
   .faq-item.open .faq-q .ic {
     transform: rotate(45deg);
     color: #e8673a;
   }
   .faq-a {
     display: grid;
     grid-template-rows: 0fr;
     transition: grid-template-rows 0.35s ease;
   }
   .faq-item.open .faq-a {
     grid-template-rows: 1fr;
   }
   .faq-a > div {
     overflow: hidden;
   }
   .faq-a p {
     padding: 0 22px 20px;
     font-size: 14.5px;
     line-height: 1.7;
     color: #757575;
     max-width: 900px;
   }
   
   /* =========================================================
      13. FINAL CTA
      ========================================================= */
   .final {
     padding: 40px 0 92px;
     position: relative;
     overflow: hidden;
   }
   .final .leaves-l {
     left: -40px;
     bottom: -10px;
     width: 210px;
     opacity: 0.22;
     transform: rotate(-20deg);
   }
   .final .leaves-r {
     right: -40px;
     top: -10px;
     width: 210px;
     opacity: 0.22;
     transform: rotate(160deg);
   }
   .cta-band {
     position: relative;
     z-index: 1;
     background: #0a3d38;
     border-radius: 24px;
     padding: 44px 60px;
     display: grid;
     grid-template-columns: 1fr auto;
     align-items: center;
     gap: 30px;
     overflow: hidden;
   }
   .cta-band::after {
     content: "";
     position: absolute;
     right: -80px;
     top: -120px;
     width: 300px;
     height: 300px;
     border-radius: 50%;
     background: rgba(255, 255, 255, 0.04);
   }
   .cta-band h2 {
     font-family: "Merriweather", serif;
     font-weight: 700;
     font-size: clamp(22px, 2.2vw, 29px);
     line-height: 1.3;
     color: #ffffff;
   }
   .cta-band p {
     margin-top: 10px;
     color: rgba(255, 255, 255, 0.78);
     font-size: 15px;
   }
   .cta-action {
     text-align: center;
     position: relative;
     z-index: 1;
   }
   .cta-action small {
     display: block;
     margin-top: 14px;
     font-size: 12.5px;
     color: rgba(255, 255, 255, 0.7);
   }

.dsh-log{
height: 360px !important;
}

.dsh-u{
    color: #fff !important;
}
   
   /* =========================================================
      RESPONSIVE
      ========================================================= */
   @media (max-width: 1360px) {
     .c-prev {
       left: -18px;
     }
     .c-next {
       right: -18px;
     }
   }
   
   @media (max-width: 1200px) {
     .hero-visual {
       flex-direction: column;
       align-items: flex-start;
     }
     .chat {
       width: 100%;
     }
     .diff-note {
       margin-top: 0;
       align-self: flex-end;
       transform: rotate(-6deg);
       flex-basis: auto;
       width: 200px;
     }
     .diff-note svg {
       display: none;
     }
     .why-grid {
       grid-template-columns: 1fr;
       gap: 36px;
     }
     .why-intro .lead {
       max-width: 640px;
     }
     .pro-grid,
     .tools-grid {
       grid-template-columns: repeat(3, 1fr);
     }
     .dash-grid {
       grid-template-columns: 1fr;
       gap: 48px;
     }
     .dash-copy {
       max-width: 640px;
     }
     .video-card {
       left: auto;
       right: -14px;
       bottom: -30px;
       width: 150px;
     }
     .calc {
       grid-template-columns: 1fr 1fr;
     }
     .calc .sliders {
       grid-column: 1 / -1;
     }
     .reqsec-grid {
       grid-template-columns: 1fr;
     }
   }
   
   @media (max-width: 1100px) {
     .steps {
       display: grid;
       grid-template-columns: repeat(3, 1fr);
       gap: 34px 28px;
     }
     .step-arrow {
       display: none;
     }
     .t-card {
       flex-basis: calc((100% - 24px) / 2);
     }
     .c-btn {
       top: auto;
       bottom: -70px;
       transform: none;
     }
     .c-prev {
       left: calc(50% - 56px);
     }
     .c-next {
       right: calc(50% - 56px);
     }
     .testimonials .carousel {
       padding-bottom: 70px;
     }
   }
   
   @media (max-width: 1024px) {
     .section {
       padding: 72px 0;
     }
     .container {
       padding: 0 28px;
     }
     .hero {
       padding: 72px 0 132px;
     }
     .hero-grid {
       grid-template-columns: 1fr;
       gap: 48px;
     }
     .hero-visual {
       max-width: 560px;
     }
     .stats {
       grid-template-columns: repeat(3, 1fr);
       row-gap: 26px;
     }
     .stat {
       justify-content: flex-start;
     }
     .stat:nth-child(3) {
       border-right: 0;
     }
     .benefits {
       grid-template-columns: repeat(3, 1fr);
     }
     .earn-grid {
       grid-template-columns: 1fr;
     }
     .split-panel {
       padding: 30px 28px;
     }
     .cta-band {
       grid-template-columns: 1fr;
       text-align: center;
       padding: 42px 36px;
     }
   }
   
   @media (max-width: 768px) {
     .section {
       padding: 60px 0;
     }
     .final {
       padding: 30px 0 64px;
     }
     .section-head {
       margin-bottom: 30px;
     }
     .split {
       grid-template-columns: 1fr;
       gap: 18px;
     }
     .pro-grid,
     .tools-grid {
       grid-template-columns: repeat(2, 1fr);
       gap: 14px;
     }
   
     .dash {
       grid-template-columns: 1fr;
     }
     .dash-side {
       display: none;
     }
     .dash-stats {
       grid-template-columns: repeat(2, 1fr);
     }
     .dash-lower {
       grid-template-columns: 1fr;
     }
   
     /* vertical timeline */
     .steps {
       display: flex;
       flex-direction: column;
       gap: 0;
     }
     .step {
       padding-bottom: 28px;
     }
     .step:not(:last-of-type)::before {
       content: "";
       position: absolute;
       left: 26px;
       top: 54px;
       bottom: 0;
       width: 2px;
       background: rgba(10, 61, 56, 0.18);
     }
     .step:last-of-type {
       padding-bottom: 0;
     }
   
     .t-card {
       flex-basis: 100%;
     }
     .c-dots {
       display: flex;
     }
     .c-btn {
       display: none;
     }
     .testimonials .carousel {
       padding-bottom: 0;
     }
   
     .req {
       grid-template-columns: 1fr;
     }
     .doc-art {
       display: none;
     }
     .sec-badges {
       grid-template-columns: repeat(3, 1fr);
       row-gap: 24px;
     }
     .faq-head {
       flex-direction: column;
       align-items: flex-start;
     }
   }
   
   @media (max-width: 600px) {
     .container {
       padding: 0 18px;
     }
     .section {
       padding: 48px 0;
     }
     .hero {
       padding: 52px 0 120px;
     }
     .hero-copy {
       font-size: 15px;
     }
     .hero-cta {
       flex-direction: column;
       align-items: flex-start;
     }
     .hero-cta .btn {
       width: 100%;
       justify-content: center;
     }
     .trust-row {
       flex-direction: column;
       gap: 10px;
     }
     .sparks {
       display: none;
     }
     .diff-note {
       align-self: center;
       transform: rotate(-4deg);
       text-align: center;
     }
     .chat-body {
       height: 220px;
     }
     .chat-begin {
       display: none;
     }
   
     .stats {
       grid-template-columns: repeat(2, 1fr);
       padding: 24px 6px;
     }
     .stat {
       border-right: 0;
       padding: 4px 12px;
       gap: 10px;
     }
     .stat:last-child {
       grid-column: 1 / -1;
     }
     .stat .ic {
       width: 26px;
       height: 26px;
     }
     .stat-num {
       font-size: 19px;
     }
   
     .benefits {
       grid-template-columns: repeat(2, 1fr);
       gap: 12px;
     }
     .benefit:last-child {
       grid-column: 1 / -1;
     }
     .why-intro .btn,
     .dash-copy .btn {
       width: 100%;
       justify-content: center;
     }
   
     .dash-main {
       padding: 16px;
     }
     .dash-tools .ic:not(:last-child) {
       display: none;
     }
     .dstat {
       padding: 10px;
       gap: 8px;
     }
     .video-card {
       display: none;
     }
   
     .calc {
       grid-template-columns: 1fr;
       padding: 22px 18px;
       gap: 20px;
     }
     .result {
       padding: 28px 20px;
     }
   
     .tool {
       padding: 20px 16px;
     }
     .split-panel {
       padding: 26px 20px;
     }
     .split-list li {
       font-size: 14px;
     }
   
     .t-card {
       padding: 22px 18px 18px;
     }
     .t-top {
       grid-template-columns: 1fr;
     }
     .t-photo {
       width: 92px;
       height: 104px;
     }
   
     .sec-card {
       padding: 26px 18px;
     }
     .sec-badges {
       grid-template-columns: repeat(2, 1fr);
     }
     .sec-badge:last-child {
       grid-column: 1 / -1;
     }
     .faq-q {
       padding: 16px 16px;
       font-size: 14px;
     }
     .faq-a p {
       padding: 0 16px 18px;
       font-size: 14px;
     }
   
     .cta-band {
       padding: 34px 20px;
       border-radius: 18px;
     }
     .cta-action .btn {
       width: 100%;
       justify-content: center;
     }
   }
   
   @media (max-width: 360px) {
     .pro-grid,
     .tools-grid {
       grid-template-columns: 1fr;
     }
     .dash-stats {
       grid-template-columns: 1fr;
     }
     .stats {
       grid-template-columns: 1fr;
     }
     .stat:last-child {
       grid-column: auto;
     }
     .benefits {
       grid-template-columns: 1fr;
     }
     .benefit:last-child {
       grid-column: auto;
     }
   }
   
   @media (prefers-reduced-motion: reduce) {
     *,
     *::before,
     *::after {
       transition: none !important;
       animation: none !important;
       scroll-behavior: auto !important;
     }
   }
   

   /* Expert Type */
.calc > :nth-child(1) {
    grid-column: 1;
    grid-row: 1;
}

/* Experience - Expert Type ke niche */
.calc > :nth-child(2) {
    grid-column: 1;
    grid-row: 2;
}

/* Consultations + Fee wala section */
.calc > :nth-child(3) {
    grid-column: 3;
    grid-row: 1 / span 2;
}

.field {
    width: 290px;
}

.fve_step_bx {
    background: #fff;
    padding: 5px 9px;
    border-radius: 10px;
    min-height: 104px;
    border-right: 2px solid #e8673a;
}

/* =========================================
   HOPEQURE — WHO CAN JOIN
   ========================================= */

   .hq-expert-types {
    width: 100%;
    background: #F7F3EA;
    padding: 60px 0;
    overflow: hidden;
  }
  
  .hq-expert-types-inner {
    width: min(100% - 120px, 1760px);
    margin: 0 auto;
  }
  
  
  /* ---------- Heading ---------- */
  
  .hq-expert-heading {
    max-width: 900px;
    margin-bottom: 25px;
  }
  
  .hq-eyebrow {
    display: inline-block;
    margin-bottom: 14px;
    font-family: "Montserrat", sans-serif;
    font-size: 13px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: 1px;
    color: #E8673A;
  }
  
  .hq-expert-heading h2 {
    margin: 0;
    font-size: clamp(38px, 3.25vw, 58px);
    line-height: 1.15;
    font-weight: 700;
    color: #141244;
  }
  
  .hq-expert-heading p {
    max-width: 760px;
    margin: 14px 0 0;
    color: #757575;
    line-height: 1.7;
    font-weight: 500;
  }
  
  
  /* ---------- Cards Grid ---------- */
  
  .hq-expert-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 16px;
  }
  
  
  /* ---------- Card ---------- */
  
  .hq-expert-card {
    position: relative;
    padding: 20px 10px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: #FFFFFF;
    border: 1px solid rgba(20, 18, 68, 0.07);
    border-radius: 22px;
    text-decoration: none;
    box-shadow:
      0 8px 28px rgba(20, 18, 68, 0.045);
    transition:
      transform 0.3s ease,
      box-shadow 0.3s ease,
      border-color 0.3s ease;
  }
  
  .hq-expert-card:hover {
    transform: translateY(-7px);
    border-color: rgba(10, 61, 56, 0.15);
  
    box-shadow:
      0 18px 42px rgba(20, 18, 68, 0.10);
  }
  
  
  /* ---------- Icon ---------- */
  
  .hq-icon-wrap {
    width: 78px;
    height: 78px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 27px;
    border-radius: 50%;
    position: relative;
  }
  
  .hq-icon-wrap::after {
    content: "";
    position: absolute;
    width: 22px;
    height: 22px;
  
    right: -5px;
    bottom: 16px;
  
    border-radius: 50% 0 50% 50%;
  
    transform: rotate(-22deg);
    opacity: 0.25;
  }
  
  .hq-icon-wrap svg {
    width: 48px;
    height: 48px;
    display: block;
  }
  
  
  /* Icon backgrounds */
  
  .hq-icon-green {
    background: #E8F5F1;
  }
  
  .hq-icon-green::after {
    background: #16A34A;
  }
  
  .hq-icon-orange {
    background: #FFF0E9;
  }
  
  .hq-icon-orange::after {
    background: #E8673A;
  }
  
  .hq-icon-blue {
    background: #EDF4FF;
  }
  
  .hq-icon-blue::after {
    background: #2F80ED;
  }
  
  .hq-icon-green-light {
    background: #EAF7F0;
  }
  
  .hq-icon-green-light::after {
    background: #16A34A;
  }
  
  .hq-icon-coral {
    background: #FFF0EB;
  }
  
  .hq-icon-coral::after {
    background: #E8673A;
  }
  
  .hq-icon-purple {
    background: #F4EEFF;
  }
  
  .hq-icon-purple::after {
    background: #8B5CF6;
  }
  
  
  /* ---------- Card Content ---------- */
  
  .hq-card-content {
    width: 100%;
    flex: 1;
  }
  
  .hq-card-content h3 {
    margin: 0;
    color: #141244;
    font-size: 16px;
    line-height: 21px;
    font-weight: 700;
  }
  
  .hq-card-content p {
    margin: 5px 0 0;
    color: #757575;
    font-size: 13px;
    font-weight: 500;
  }
  
  
  /* ---------- Arrow ---------- */
  
  .hq-arrow {
    width: 54px;
    height: 54px;
  
    display: flex;
    align-items: center;
    justify-content: center;
  
    margin-top: 22px;
  
    border-radius: 50%;
  
    font-family: Arial, sans-serif;
    font-size: 29px;
    line-height: 1;
  
    transition:
      transform 0.25s ease,
      box-shadow 0.25s ease;
  }
  
  .hq-expert-card:hover .hq-arrow {
    transform: translateX(5px);
  }
  
  
  /* Arrow colors */
  
  .hq-arrow-green {
    color: #0A3D38;
    background: #E8F5F1;
  }
  
  .hq-arrow-orange {
    color: #E8673A;
    background: #FFF0E9;
  }
  
  .hq-arrow-blue {
    color: #2F80ED;
    background: #EDF4FF;
  }
  
  .hq-arrow-green-light {
    color: #16A34A;
    background: #EAF7F0;
  }
  
  .hq-arrow-coral {
    color: #E8673A;
    background: #FFF0EB;
  }
  
  .hq-arrow-purple {
    color: #8B5CF6;
    background: #F4EEFF;
  }
  
  

  
  
  /* =========================================
     TABLET
     ========================================= */
  
  @media (max-width: 1100px) {
  
    .hq-expert-types {
      padding: 70px 0 75px;
    }
  
    .hq-expert-types-inner {
      width: min(100% - 48px, 900px);
    }
  
    .hq-expert-heading {
      margin-bottom: 40px;
    }
  
    .hq-expert-heading h2 {
      font-size: 42px;
    }
  
    .hq-expert-heading p {
      font-size: 17px;
    }
  
    .hq-expert-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 20px;
    }
  
    .hq-expert-card {
      min-height: 350px;
    }
  }
  
  
  /* =========================================
     MOBILE
     ========================================= */
  
  @media (max-width: 680px) {
  
    .hq-expert-types {
      padding: 52px 0 58px;
    }
  
    .hq-expert-types-inner {
      width: calc(100% - 32px);
    }
  
    .hq-expert-heading {
      margin-bottom: 32px;
    }
  
    .hq-eyebrow {
      margin-bottom: 13px;
      font-size: 12px;
      letter-spacing: 1.6px;
    }
  
    .hq-expert-heading h2 {
      font-size: 31px;
      line-height: 1.25;
      letter-spacing: -0.5px;
    }
  
    .hq-expert-heading p {
      margin-top: 16px;
      font-size: 15px;
      line-height: 1.65;
    }
  
    .hq-expert-grid {
      grid-template-columns: 1fr;
      gap: 15px;
    }
  
    .hq-expert-card {
      min-height: auto;
      padding: 25px 22px 22px;
  
      display: grid;
      grid-template-columns: 78px 1fr 46px;
      align-items: center;
      column-gap: 17px;
  
      text-align: left;
      border-radius: 18px;
    }
  
    .hq-icon-wrap {
      width: 78px;
      height: 78px;
      margin: 0;
    }
  
    .hq-icon-wrap svg {
      width: 48px;
      height: 48px;
    }
  
    .hq-icon-wrap::after {
      width: 15px;
      height: 15px;
      right: -3px;
      bottom: 10px;
    }
  
    .hq-card-content h3 {
      font-size: 17px;
      line-height: 1.35;
    }
  
    .hq-card-content p {
      margin-top: 7px;
      font-size: 13px;
      line-height: 1.5;
    }
  
    .hq-arrow {
      width: 46px;
      height: 46px;
      margin: 0;
  
      font-size: 24px;
    }
  }
  
  
  /* =========================================
     SMALL MOBILE
     ========================================= */
  
  @media (max-width: 390px) {
  
    .hq-expert-types-inner {
      width: calc(100% - 24px);
    }
  
    .hq-expert-heading h2 {
      font-size: 28px;
    }
  
    .hq-expert-card {
      grid-template-columns: 68px 1fr 42px;
      column-gap: 13px;
      padding: 21px 16px;
    }
  
    .hq-icon-wrap {
      width: 68px;
      height: 68px;
    }
  
    .hq-icon-wrap svg {
      width: 43px;
      height: 43px;
    }
  
    .hq-card-content h3 {
      font-size: 15.5px;
    }
  
    .hq-card-content p {
      font-size: 12px;
    }
  
    .hq-arrow {
      width: 42px;
      height: 42px;
      font-size: 22px;
    }
  }

  .field label, .field .label{
    font-family: var(--fh);
    font-weight: 700;
    font-size: 15px;
  }
  .fcs_scne{
    padding: 60px 0;
  }
.journey .step {
    display: flex;
}