/* ==========================================================================
   Codexa — Base Styles (BEM with cdx- prefix)
   ========================================================================== */
   @import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

   :root {
     --cdx-red: #D90A2C;
     --cdx-dark: #141414;
     --cdx-secondary: #151517;
     --cdx-black: #111111;
     --cdx-white: #ffffff;
     --cdx-gray-100: #f5f5f5;
     --cdx-gray-200: #e8e8e8;
     --cdx-gray-300: #d1d1d1;
     --cdx-gray-400: #9a9a9a;
     --cdx-gray-500: #6b6b6b;
     --cdx-gray-600: #4a4a4a;
     --cdx-font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
     --cdx-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
     --cdx-transition: 0.3s ease;
     --cdx-radius: 8px;
     --cdx-radius-lg: 16px;
     --cdx-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
     --cdx-shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.12);
   }
   
   *,
   *::before,
   *::after {
     box-sizing: border-box;
   }
   
   html {
     scroll-behavior: smooth;
   }
   
   body {
     margin: 0;
     font-family: var(--cdx-font-body);
     font-size: 16px;
     line-height: 1.6;
     color: var(--cdx-black);
     background-color: var(--cdx-white);
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   }
   
   body.cdx-nav-open {
     overflow: hidden;
   }
   
   a {
     text-decoration: none;
     color: inherit;
     transition: color var(--cdx-transition);
   }
   
   ul {
     list-style: none;
     margin: 0;
     padding: 0;
   }
   
   img {
     max-width: 100%;
     height: auto;
     display: block;
   }
   
   h1, h2, h3, h4, h5, h6 {
     margin: 0;
     font-weight: 700;
     line-height: 1.2;
   }
   
   p {
     margin: 0;
   }
   
   /* ==========================================================================
      Header — cdx-header
      ========================================================================== */
   
   .cdx-header {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     z-index: 1000;
     background-color: var(--cdx-white);
     border-bottom: 1px solid var(--cdx-gray-200);
     transition: box-shadow var(--cdx-transition);
   }
   
   .cdx-header--scrolled {
     box-shadow: var(--cdx-shadow);
   }
   
   .cdx-header__inner {
     display: flex;
     align-items: center;
     justify-content: space-between;
     height: 90px;
     gap: 24px;
   }
   
   .cdx-header__logo {
     flex-shrink: 0;
   }
   
   .cdx-header__nav {
     flex: 1;
     display: flex;
     justify-content: center;
   }
   
   .cdx-header__nav-list {
     display: flex;
     align-items: center;
     gap: 36px;
   }
   
   .cdx-header__nav-link {
     font-size: 16px;
     font-weight: 400;
     color: var(--cdx-black);
     position: relative;
   }
   
   .cdx-header__nav-link::after {
     content: '';
     position: absolute;
     bottom: 0;
     left: 0;
     width: 0;
     height: 2px;
     background-color: var(--cdx-red);
     transition: width var(--cdx-transition);
   }
   
   .cdx-header__nav-link:hover {
     font-weight: 500;
     color: var(--cdx-red);
   }
   
   .cdx-header__nav-link:hover::after {
     width: 100%;
   }
   
   .cdx-header__nav-link--active {
     font-weight: 500;
     color: var(--cdx-red);
   }
   
   .cdx-header__nav-link--active::after {
     width: 100%;
   }
   
   /* Nav dropdown — base styles (responsive rules in responsive.css) */
   .cdx-header__nav-item--has-dropdown {
     position: relative;
   }
   
   .cdx-header__nav-row {
     display: flex;
     align-items: center;
     gap: 8px;
   }
   
   .cdx-header__nav-item--has-dropdown > .cdx-header__nav-row > .cdx-header__nav-link {
     display: inline-flex;
     align-items: center;
     gap: 6px;
   }
   
   .cdx-header__nav-chevron {
     display: inline-flex;
     font-size: 11px;
     line-height: 1;
     transition: transform var(--cdx-transition);
   }
   
   .cdx-header__nav-toggle {
     display: none;
     align-items: center;
     justify-content: center;
     width: 36px;
     height: 36px;
     padding: 0;
     border: none;
     border-radius: 8px;
     background: transparent;
     color: var(--cdx-black);
     cursor: pointer;
     flex-shrink: 0;
     transition: background-color var(--cdx-transition), transform var(--cdx-transition);
   }
   
   .cdx-header__nav-toggle:hover {
     background-color: var(--cdx-gray-100);
   }
   
   .cdx-header__subnav {
     list-style: none;
     margin: 0;
     padding: 12px 0;
     min-width: 220px;
     background-color: var(--cdx-white);
     border: 1px solid var(--cdx-gray-200);
     border-radius: 12px;
     box-shadow: var(--cdx-shadow);
   }
   
   .cdx-header__subnav-link {
     display: block;
     padding: 10px 20px;
     font-size: 15px;
     font-weight: 400;
     color: var(--cdx-black);
     transition: color var(--cdx-transition), background-color var(--cdx-transition);
   }
   
   .cdx-header__subnav-link:hover {
     color: var(--cdx-red);
     background-color: var(--cdx-gray-100);
   }
   
   .cdx-header__actions {
     display: flex;
     align-items: center;
     gap: 16px;
     flex-shrink: 0;
   }
   
   .cdx-header__btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     padding: 12px 24px;
     background-color: var(--cdx-black);
     color: var(--cdx-white);
     font-size: 14px;
     font-weight: 600;
     border-radius: 8px;
     transition: background-color var(--cdx-transition), transform var(--cdx-transition);
   }
   
   .cdx-header__btn:hover {
     background-color: var(--cdx-red);
     color: var(--cdx-white);
     transform: translateY(-1px);
   }
   
   .cdx-header__burger {
     display: none;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     gap: 5px;
     width: 40px;
     height: 40px;
     padding: 0;
     border: none;
     background: transparent;
     cursor: pointer;
   }
   
   .cdx-header__burger-line {
     display: block;
     width: 24px;
     height: 2px;
     background-color: var(--cdx-black);
     border-radius: 2px;
     transition: transform var(--cdx-transition), opacity var(--cdx-transition);
   }
   
   .cdx-header__burger--active .cdx-header__burger-line:nth-child(1) {
     transform: translateY(7px) rotate(45deg);
   }
   
   .cdx-header__burger--active .cdx-header__burger-line:nth-child(2) {
     opacity: 0;
   }
   
   .cdx-header__burger--active .cdx-header__burger-line:nth-child(3) {
     transform: translateY(-7px) rotate(-45deg);
   }
   
   /* ==========================================================================
      Hero — cdx-hero
      ========================================================================== */
   
   .cdx-hero {
     position: relative;
     min-height: 520px;
     display: flex;
     align-items: center;
     margin-top: 80px;
     overflow: hidden;
   }
   
   .cdx-hero__bg {
     position: absolute;
     inset: 0;
     z-index: 0;
   }
   
   .cdx-hero__bg-img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     object-position: top;
   }
   
   .cdx-hero__overlay {
     position: absolute;
     inset: 0;
     background: linear-gradient(135deg, var(--cdx-red), color-mix(in srgb, var(--cdx-red) 10%, transparent));
   }
   
   .cdx-hero .container {
     position: relative;
     z-index: 1;
   }
   
   .cdx-hero__content {
     max-width: 720px;
     padding: 80px 0;
   }
   
   .cdx-hero__eyebrow {
     display: inline-block;
     font-size: 14px;
     font-weight: 500;
     letter-spacing: 2px;
     color: var(--cdx-white);
     margin-bottom: 10px;
   }
   
   .cdx-hero__title {
     font-size: 72px;
     font-weight: 700;
     color: var(--cdx-white);
     line-height: 1.15;
   }
   
   /* ==========================================================================
      Pricing — cdx-pricing
      ========================================================================== */
   
   .cdx-pricing {
     padding: 100px 0;
   }
   
   .cdx-pricing .row {
     align-items: stretch;
   }
   
   /* ==========================================================================
      Pricing Card — cdx-pricing-card
      ========================================================================== */
   
    .cdx-pricing-card {
      position: relative;
      display: flex;
      flex-direction: column;
      height: 100%;
      background-color: var(--cdx-white);
      border-radius: var(--cdx-radius-lg);
      padding: 60px 32px 40px;
      box-shadow: var(--cdx-shadow);
      transition: transform var(--cdx-transition), box-shadow var(--cdx-transition);
    }
   
   .cdx-pricing-card:hover {
     transform: translateY(-6px);
     box-shadow: var(--cdx-shadow-lg);
   }
   
   .cdx-pricing-card__badge {
    display: inline-block;
    padding: 4px 12px;
    background-color: var(--cdx-white);
    color: var(--cdx-red);
    font-size: 12px;
    font-weight: 400;
    border-radius: 50px;
    white-space: nowrap;
    width: max-content;
    text-transform: uppercase;
    margin-bottom: 20px;
    position: absolute;
    top: 30px;
    left: 32px;
  }
   
   .cdx-pricing-card__header {
     margin-bottom: 0;
   }
   
   .cdx-pricing-card__name {
     font-size: 20px;
     font-weight: 700;
     color: #283742;
     margin-bottom: 8px;
   }
   
   .cdx-pricing-card__desc {
     font-size: 14px;
     color: #646466;
     line-height: 1.5;
   }
   
   .cdx-pricing-card__price-wrap {
     display: flex;
     flex-wrap: wrap;
     align-items: baseline;
     gap: 2px 4px;
     margin-bottom: 20px;
   }
   
   .cdx-pricing-card__currency {
     font-size: 72px;
     font-weight: 700;
     color: #2b3742;
   }
   
   .cdx-pricing-card__price {
     font-size: 70px;
     font-weight: 800;
     color: #2b3742;
     line-height: 1;
     letter-spacing: -1px;
   }
   
   .cdx-pricing-card__period {
     display: inline-block;
     font-size: 13px;
     background:#88888925;
     padding: 4px 16px;
     border-radius: 8px;
     margin-top: 4px;
     color: #2b3742;
   }
   
   .cdx-pricing-card--featured .cdx-pricing-card__period {
     background:#88888960;
   }
   
   .cdx-pricing-card__features-title {
     font-size: 16px;
     font-weight: 400;
     color: #2b3742;
     margin-top: 24px;
     flex-basis: 100%;
   }
   
   .cdx-pricing-card--featured .cdx-pricing-card__features-title {
     color: var(--cdx-white);
   }
   
   .cdx-pricing-card__features {
     flex: 1;
     margin-bottom: 32px;
   }
   
   .cdx-pricing-card__feature {
     display: flex;
     align-items: center;
     gap: 12px;
     padding: 10px 0;
     font-size: 16px;
     color: var(--cdx-black);
   }
   
   .cdx-pricing-card__icon {
     flex-shrink: 0;
     width: 20px;
     text-align: center;
     font-size: 16px;
   }
   
   .cdx-pricing-card__feature--included .cdx-pricing-card__icon {
     color: var(--cdx-red);
   }
   
   .cdx-pricing-card__feature--excluded {
     color: #60606B;
   }
   
   .cdx-pricing-card__feature--excluded .cdx-pricing-card__icon {
     color: #60606B;
   }
   
   .cdx-pricing-card__btn {
     display: inline-block;
     padding: 12px 24px;
     text-align: center;
     font-size: 16px;
     font-weight: 700;
     color: var(--cdx-white);
     background-color: var(--cdx-red);
     border-radius: 8px;
     transition: background-color var(--cdx-transition), color var(--cdx-transition), border-color var(--cdx-transition);
     max-width: max-content;
   }
   
   .cdx-pricing-card__btn:hover {
     background-color: var(--cdx-black);
     color: var(--cdx-white);
   }
   
   .cdx-pricing-card__btn i {
     margin-left: 4px;
   }
   
   /* Featured modifier — cdx-pricing-card--featured */
   
   .cdx-pricing-card--featured {
     background-color: var(--cdx-red);
     border: none;
     padding-top: 70px;
     transform: scale(1.03);
     z-index: 1;
   }
   
   .cdx-pricing-card--featured:hover {
     transform: scale(1.03) translateY(-6px);
   }
   
   .cdx-pricing-card--featured .cdx-pricing-card__name,
   .cdx-pricing-card--featured .cdx-pricing-card__currency,
   .cdx-pricing-card--featured .cdx-pricing-card__price {
     color: var(--cdx-white);
   }
   
   .cdx-pricing-card--featured .cdx-pricing-card__desc,
   .cdx-pricing-card--featured .cdx-pricing-card__period {
     color: rgba(255, 255, 255, 0.8);
   }
   
   .cdx-pricing-card--featured .cdx-pricing-card__price-wrap {
     border-bottom-color: rgba(255, 255, 255, 0.2);
   }
   
   .cdx-pricing-card--featured .cdx-pricing-card__feature {
     color: var(--cdx-white);
   }
   
   .cdx-pricing-card--featured .cdx-pricing-card__feature--included .cdx-pricing-card__icon {
     color: var(--cdx-white);
   }
   
   .cdx-pricing-card--featured .cdx-pricing-card__feature--excluded {
     color: rgba(255, 255, 255, 0.90);
   }
   
   .cdx-pricing-card--featured .cdx-pricing-card__feature--excluded .cdx-pricing-card__icon {
     color: rgba(255, 255, 255, 0.90);
   }
   
   .cdx-pricing-card--featured .cdx-pricing-card__btn {
     color: var(--cdx-red);
     background-color: var(--cdx-white);
     border-color: var(--cdx-white);
   }
   
   .cdx-pricing-card--featured .cdx-pricing-card__btn:hover {
     background-color: var(--cdx-black);
     border-color: var(--cdx-black);
     color: var(--cdx-white);
   }
   
   /* ==========================================================================
      CTA — cdx-cta
      ========================================================================== */
   
   .cdx-cta {
     padding: 100px 0;
     background-color: #101014;
   }
   
   .cdx-cta--page-start {
     margin-top: 90px;
   }
   
   .cdx-cta__inner {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 24px;
     border-bottom: 1px solid #888889;
     padding-bottom: 40px;
     margin-bottom: 40px;
   }
   
   .cdx-cta__content {
     max-width: 640px;
   }
   
   .cdx-cta__eyebrow {
     display: inline-block;
     font-size: 14px;
     font-weight: 600;
     letter-spacing: 3px;
     text-transform: uppercase;
     color: #888889;
     margin-bottom: 20px;
   }
   
   .cdx-cta__title {
     font-size: clamp(24px, 3.2vw, 40px);
     font-weight: 700;
     color: var(--cdx-white);
     line-height: 1.2;
   }
   
   .cdx-cta__btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 6px;
     padding: 12px 30px;
     background-color: var(--cdx-red);
     color: var(--cdx-white);
     font-size: 16px;
     font-weight: 600;
     border-radius: 8px;
     transition: background-color var(--cdx-transition), transform var(--cdx-transition);
   }
   
   .cdx-cta__btn:hover {
     background-color: var(--cdx-secondary);
     color: var(--cdx-white);
     transform: translateY(-2px);
   }
   
   .cdx-cta__bottom p {
     font-size: 14px;
     font-weight: 400;
     color: #ffffff85;
     line-height: 1.5;
     max-width: 640px;
   }
   
   /* ==========================================================================
      Footer — cdx-footer
      ========================================================================== */
   
   .cdx-footer {
     background-color: #151517;
     color: var(--cdx-white);
   }
   
   .cdx-footer__top {
     padding: 80px 0 60px;
   }
   
   .cdx-footer__logo {
     display: inline-block;
     margin-bottom: 20px;
   }
   
   .cdx-footer__about {
     font-size: 14px;
     color: var(--cdx-white);
     line-height: 1.7;
     margin-bottom: 24px;
     max-width: 320px;
   }
   
   .cdx-footer__social {
     display: flex;
     align-items: center;
     gap: 24px;
   }
   
   .cdx-footer__social-link {
     color: var(--cdx-white);
     font-size: 24px;
     transition: background-color var(--cdx-transition), color var(--cdx-transition);
   }
   
   .cdx-footer__social-link:hover {
     background-color: var(--cdx-red);
     color: var(--cdx-white);
   }
   
   .cdx-footer__col-title {
     font-size: 16px;
     font-weight: 700;
     color: var(--cdx-white);
     margin-bottom: 24px;
   }
   
   .cdx-footer__links {
     display: flex;
     flex-direction: column;
     gap: 4px;
   }
   
   .cdx-footer__link {
     font-size: 14px;
     color: #ffffff85;
     transition: color var(--cdx-transition);
   }
   
   .cdx-footer__link:hover {
     color: var(--cdx-red);
   }
   
   .cdx-footer__newsletter-label {
     display: block;
     font-size: 16px;
     font-weight: 500;
     color: #ffffff85;
     margin-bottom: 20px;
   }
   
   .cdx-footer__newsletter-wrap {
     display: flex;
     align-items: stretch;
     gap: 0;
     border-radius: 8px;
     overflow: hidden;
   }
   
   .cdx-footer__newsletter-input {
     flex: 1;
     padding: 14px 20px;
     font-family: var(--cdx-font);
     font-size: 14px;
     color: var(--cdx-white);
     background-color: #88888916;
     border: none;
     outline: none;
   }
   
   .cdx-footer__newsletter-input::placeholder {
     color: var(--cdx-gray-500);
   }
   
   .cdx-footer__newsletter-input:focus {
     background-color: rgba(255, 255, 255, 0.1);
   }
   
   .cdx-footer__newsletter-btn {
     display: flex;
     align-items: center;
     justify-content: center;
     width: fit-content;
     padding: 0 20px 0 10px;
     border: none;
     background-color: #88888916;
     color: var(--cdx-white);
     font-size: 14px;
     cursor: pointer;
     transition: background-color var(--cdx-transition);
     min-width: max-content;
   }
   
   .cdx-footer__newsletter-btn:hover {
     background-color: #c41e10;
   }
   
   .cdx-footer__newsletter-consent {
     display: flex;
     align-items: flex-start;
     gap: 10px;
     margin-top: 14px;
     font-size: 14px;
     line-height: 1.5;
     color: #ffffff85;
     cursor: pointer;
   }
   
   .cdx-footer__newsletter-checkbox {
     flex-shrink: 0;
     width: 16px;
     height: 16px;
     margin-top: 2px;
     accent-color: var(--cdx-red);
     cursor: pointer;
   }
   
   .cdx-footer__bottom {
     padding: 24px 0;
     border-top: 1px solid rgba(255, 255, 255, 0.1);
     display: flex;
     justify-content: space-between;
     align-items: center;
     flex-wrap: wrap;
     gap: 20px;
   }
   
   .cdx-footer__copyright {
     font-size: 14px;
     color: #ffffff85;
   }
   
   .cdx-footer__bottom ul {
     display: flex;
     align-items: center;
     gap: 20px;
   }
   
   .cdx-footer__bottom ul li {
     font-size: 14px;
     color: #ffffff85;
   }
   
   .cdx-footer__bottom ul li:not(:last-child) {
     border-right: 1px solid #ffffff1a;
     padding-right: 20px;
   }
   
   .cdx-footer__bottom ul li:hover {
     color: #ffffff;
   }
   
   /* ==========================================================================
      Dashboard — cdx-dashboard
      ========================================================================== */
   
   .cdx-header__btn--outline {
     background-color: var(--cdx-white);
     color: var(--cdx-red);
     border: 1px solid var(--cdx-red);
   }
   
   .cdx-header__btn--outline:hover {
     background-color: var(--cdx-red);
     color: var(--cdx-white);
     border-color: var(--cdx-red);
   }
   
   .cdx-hero--dashboard .cdx-hero__title {
     font-size: 72px;
     max-width: 800px;
   }
   
   .cdx-dashboard__layout {
     display: flex;
     gap: 30px;
   }
   
   .cdx-dashboard__sidebar {
     flex: 0 0 320px;
     background-color: var(--cdx-white);
     box-shadow: var(--cdx-shadow);
     overflow: hidden;
     padding: 40px 0;
   }
   
   .cdx-dashboard__nav {
     display: flex;
     flex-direction: column;
   }
   
   .cdx-dashboard__nav-link {
     display: flex;
     align-items: center;
     gap: 14px;
     padding: 24px;
     font-size: 18px;
     font-weight: 500;
     color: #646466;
     border-bottom: 1px solid var(--cdx-gray-200);
     border-left: 3px solid transparent;
     transition: color var(--cdx-transition), background-color var(--cdx-transition), border-color var(--cdx-transition);
   }
   
   .cdx-dashboard__nav-link i {
     width: 20px;
     font-size: 18px;
     text-align: center;
   }
   
   .cdx-dashboard__nav-link:hover {
     color: var(--cdx-red);
     background-color: color-mix(in srgb, var(--cdx-red) 4%, transparent);
   }
   
   .cdx-dashboard__nav-link--active {
     font-weight: 700;
     color: var(--cdx-red);
     background-color: color-mix(in srgb, var(--cdx-red) 8%, transparent);
     border-left-color: var(--cdx-red);
   }
   
   .cdx-dashboard__main {
     flex: 1;
     min-width: 0;
     padding: 60px 0;
   }
   
   .cdx-account-card {
     background-color: var(--cdx-white);
     border-radius: var(--cdx-radius-lg);
     padding: 32px 36px;
     box-shadow: var(--cdx-shadow);
     margin-bottom: 50px;
   }
   
   .cdx-account-card__title {
     display: flex;
     align-items: center;
     gap: 14px;
     font-size: 22px;
     font-weight: 700;
     color: var(--cdx-black);
     margin-bottom: 28px;
     border-bottom: 1px solid #0000001a;
     padding-bottom: 28px;
   }
   
   .cdx-account-card__title::before {
     content: '';
     width: 4px;
     height: 28px;
     background-color: var(--cdx-red);
     border-radius: 2px;
     flex-shrink: 0;
   }
   
   .cdx-account-card__grid {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 20px 40px;
   }
   
   .cdx-account-card__field {
     display: flex;
     flex-direction: column;
     gap: 4px;
   }
   
   .cdx-account-card__label {
     font-size: 14px;
     font-weight: 500;
     color: #646466;
   }
   
   .cdx-account-card__value {
     font-size: 16px;
     font-weight: 500;
     color: var(--cdx-black);
   }
   
   .cdx-account-card__value--empty {
     color: #70707060;
     font-style: italic;
     font-weight: 400;
   }
   
   .cdx-stat-card {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 16px;
     padding: 28px 32px;
     border-radius: 8px;
     color: var(--cdx-white);
     min-height: 160px;
     transition: transform var(--cdx-transition), box-shadow var(--cdx-transition);
   }
   
   .cdx-stat-card:hover {
     transform: translateY(-4px);
     box-shadow: var(--cdx-shadow-lg);
     color: var(--cdx-white);
   }
   
   .cdx-stat-card--red {
     background-color: var(--cdx-red);
   }
   
   .cdx-stat-card--dark {
     background-color: var(--cdx-black);
   }
   
   .cdx-stat-card__title {
     font-size: 18px;
     font-weight: 700;
     margin-bottom: 12px;
   }
   
   .cdx-stat-card__number {
     display: block;
     font-size: 70px;
     font-weight: 700;
     line-height: 1;
     margin-bottom: 8px;
   }
   
   .cdx-stat-card__desc {
     font-size: 14px;
     font-weight: 600;
   }
   
   .cdx-stat-card__arrow {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 58px;
     height: 58px;
     border-radius: 50%;
     background-color: var(--cdx-white);
     flex-shrink: 0;
     font-size: 24px;
     transition: transform var(--cdx-transition);
   }
   
   .cdx-stat-card--red .cdx-stat-card__arrow {
     color: var(--cdx-red);
   }
   
   .cdx-stat-card--dark .cdx-stat-card__arrow {
     color: var(--cdx-black);
   }
   
   .cdx-stat-card__arrow i {
     transform: rotate(45deg);
   }
   
   .cdx-stat-card:hover .cdx-stat-card__arrow {
     transform: translate(2px, -2px);
   }
   
   .cdx-platform-card {
     background-color: var(--cdx-white);
     border-radius: 24px;
     padding: 18px 30px 22px;
     box-shadow: 0 10.35px 103.45px 0 #43434317;
     width: 100%;
     display: block;
     transition: transform var(--cdx-transition), box-shadow var(--cdx-transition);
   }
   
   .cdx-platform-card:hover {
     transform: translateY(-4px);
     box-shadow: var(--cdx-shadow-lg);
   }
   
   .cdx-platform-card__icon {
     min-width: 80px;
     width: 80px;
     height: 80px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
   }
   
   .cdx-platform-card__icon svg {
     max-width: 40px;
   }
   
   .cdx-platform-card__icon--orange {
     background-color: #F0A84B22;
   }
   
   .cdx-platform-card__icon--red {
     background-color: #FB585E22;
   }
   
   .cdx-platform-card__title {
     font-size: 26px;
     line-height: 32px;
     font-weight: 700;
     color: var(--cdx-black);
     margin: 20px 0 0;
   }
   
   .cdx-platform-card__bottom {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 10px;
     padding-top: 20px;
     margin-top: 20px;
     border-top: 1px solid #00000020;
   }
   
   .cdx-platform-card__status {
     display: flex;
     align-items: center;
     gap: 6px;
     font-size: 18px;
     font-weight: 500;
     color: var(--cdx-black);
   }
   
   .cdx-platform-card__status-dot {
     width: 12px;
     height: 12px;
     border-radius: 50%;
     background: #118D57;
   }
   
   .cdx-platform-card__btn {
     display: inline-block;
     border-radius: 10px;
     padding: 8px 45px;
     color: var(--cdx-white);
     font-size: 16px;
     font-weight: 600;
     line-height: 22px;
     border: 1px solid transparent;
     transition: .3s all ease-in-out;
   }
   
   .cdx-platform-card__btn--orange {
     background-color: #F0A84B;
   }
   
   .cdx-platform-card__btn--red {
     background-color: #FB585E;
   }
   
   .cdx-platform-card:hover .cdx-platform-card__btn--orange {
     border-color: #F0A84B;
     color: #F0A84B;
     background: transparent;
   }
   
   .cdx-platform-card:hover .cdx-platform-card__btn--red {
     border-color: #FB585E;
     color: #FB585E;
     background: transparent;
   }
   
   /* ==========================================================================
      Profile — cdx-profile
      ========================================================================== */
   
   .cdx-profile-summary {
     display: flex;
     align-items: center;
     gap: 24px;
     background-color: var(--cdx-white);
     border-radius: var(--cdx-radius-lg);
     padding: 28px 36px;
     box-shadow: var(--cdx-shadow);
     margin-bottom: 24px;
   }
   
   .cdx-profile-summary__avatar-wrap {
     position: relative;
     flex-shrink: 0;
   }
   
   .cdx-profile-summary__avatar {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 90px;
     height: 90px;
     border-radius: 50%;
     background-color: var(--cdx-red);
     color: var(--cdx-white);
     font-size: 30px;
     font-weight: 600;
     letter-spacing: 1px;
   }
   
   .cdx-profile-summary__edit {
     position: absolute;
     right: 0;
     bottom: 0;
     display: flex;
     align-items: center;
     justify-content: center;
     width: 30px;
     height: 30px;
     border-radius: 50%;
     background-color: var(--cdx-black);
     color: var(--cdx-white);
     font-size: 12px;
     cursor: pointer;
     transition: background-color var(--cdx-transition);
   }
   
   .cdx-profile-summary__edit:hover {
     background-color: var(--cdx-red);
   }
   
   .cdx-profile-summary__info {
     flex: 1;
     min-width: 0;
   }
   
   .cdx-profile-summary__name {
     font-size: 20px;
     font-weight: 600;
     color: var(--cdx-black);
     margin-bottom: 4px;
   }
   
   .cdx-profile-summary__email {
     font-size: 16px;
     color: #151517;
   }
   
   .cdx-profile-summary__badge {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     padding: 10px 16px;
     border-radius: 12px;
     background-color: color-mix(in srgb, var(--cdx-red) 22%, transparent);
     font-size: 14px;
     font-weight: 500;
     color: var(--cdx-red);
     flex-shrink: 0;
     border: 1px solid var(--cdx-red);
   }
   
   .cdx-profile-summary__badge-dot {
     width: 10px;
     height: 10px;
     border-radius: 50%;
     background-color: #2DC071;
   }
   
   .cdx-profile-form {
     background-color: var(--cdx-white);
     border-radius: var(--cdx-radius-lg);
     padding: 32px 36px;
     box-shadow: var(--cdx-shadow);
   }
   
   .cdx-profile-form__title {
     display: flex;
     align-items: center;
     gap: 14px;
     font-size: 22px;
     font-weight: 700;
     color: var(--cdx-black);
     margin-bottom: 32px;
     border-bottom: 1px solid #0000001a;
     padding-bottom: 28px;
   }
   
   .cdx-profile-form__title::before {
     content: '';
     width: 4px;
     height: 28px;
     background-color: var(--cdx-red);
     border-radius: 2px;
     flex-shrink: 0;
   }
   
   .cdx-profile-form__section {
     margin-bottom: 32px;
   }
   
   .cdx-profile-form__section:last-of-type {
     margin-bottom: 0;
   }
   
   .cdx-profile-form__section-title {
     font-size: 16px;
     font-weight: 600;
     color: var(--cdx-red);
     padding-bottom: 10px;
     margin-bottom: 24px;
     border-bottom: 2px solid var(--cdx-red);
   }
   
   .cdx-profile-form__group {
     margin-bottom: 20px;
   }
   
   .cdx-profile-form__label {
     display: block;
     font-size: 14px;
     font-weight: 600;
     color: #151517;
     margin-bottom: 8px;
   }
   
   .cdx-profile-form__label span {
     color: var(--cdx-red);
   }
   
   .cdx-profile-form__input,
   .cdx-profile-form__select {
     width: 100%;
     padding: 14px 18px;
     font-family: var(--cdx-font);
     font-size: 15px;
     color: var(--cdx-black);
     background-color: #88888911;
     border: 1px solid transparent;
     border-radius: 8px;
     outline: none;
     transition: border-color var(--cdx-transition), background-color var(--cdx-transition);
   }
   
   .cdx-profile-form__input::placeholder {
     color: #64646658;
   }
   
   .cdx-profile-form__input:focus,
   .cdx-profile-form__select:focus {
     border-color: var(--cdx-red);
     background-color: var(--cdx-white);
   }
   
   .cdx-profile-form__select {
     appearance: none;
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236b6b6b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
     background-repeat: no-repeat;
     background-position: right 18px center;
     padding-right: 44px;
     cursor: pointer;
   }
   
   .cdx-profile-form__actions {
     display: flex;
     align-items: center;
     justify-content: flex-end;
     gap: 12px;
     margin-top: 32px;
     padding-top: 24px;
     border-top: 1px solid var(--cdx-gray-200);
   }
   
   .cdx-profile-form__btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     padding: 12px 28px;
     font-family: var(--cdx-font);
     font-size: 15px;
     font-weight: 600;
     border-radius: var(--cdx-radius);
     border: none;
     cursor: pointer;
     transition: background-color var(--cdx-transition), color var(--cdx-transition), transform var(--cdx-transition);
   }
   
   .cdx-profile-form__btn--cancel {
     background-color: var(--cdx-black);
     color: var(--cdx-white);
   }
   
   .cdx-profile-form__btn--cancel:hover {
     background-color: var(--cdx-gray-600);
   }
   
   .cdx-profile-form__btn--save {
     background-color: var(--cdx-red);
     color: var(--cdx-white);
   }
   
   .cdx-profile-form__btn--save:hover {
    background-color: var(--cdx-secondary);
   }

   .cdx-profile-summary__avatar-img {
    max-width: 90px;
   }
   
   /* ==========================================================================
      Packages — cdx-packages
      ========================================================================== */
   
   .cdx-packages {
     background-color: var(--cdx-white);
     border-radius: var(--cdx-radius-lg);
     padding: 32px 36px;
     box-shadow: var(--cdx-shadow);
   }
   
   .cdx-packages__title {
     display: flex;
     align-items: center;
     gap: 14px;
     font-size: 22px;
     font-weight: 700;
     color: var(--cdx-black);
     padding-bottom: 28px;
   }
   
   .cdx-packages__title::before {
     content: '';
     width: 4px;
     height: 28px;
     background-color: var(--cdx-red);
     border-radius: 2px;
     flex-shrink: 0;
   }
   
   .cdx-packages__desc {
     font-size: 16px;
     color: #707070;
     margin-bottom: 28px;
     font-weight: 500;
   }
   
   .cdx-packages__tabs {
     display: flex;
     align-items: center;
     gap: 32px;
     border-bottom: 1px solid var(--cdx-gray-200);
     margin-bottom: 28px;
   }
   
   .cdx-packages__tab {
     position: relative;
     padding: 0 0 14px;
     font-family: var(--cdx-font);
     font-size: 16px;
     font-weight: 500;
     color: #707070;
     background: none;
     border: none;
     cursor: pointer;
     transition: color var(--cdx-transition);
   }
   
   .cdx-packages__tab::after {
     content: '';
     position: absolute;
     left: 0;
     bottom: -1px;
     width: 100%;
     height: 2px;
     background-color: var(--cdx-red);
     transform: scaleX(0);
     transition: transform var(--cdx-transition);
   }
   
   .cdx-packages__tab:hover {
     color: var(--cdx-red);
   }
   
   .cdx-packages__tab--active {
     color: var(--cdx-red);
     font-weight: 600;
   }
   
   .cdx-packages__tab--active::after {
     transform: scaleX(1);
   }
   
   .cdx-packages__panel {
     display: none;
   }
   
   .cdx-packages__panel--active {
     display: block;
   }
   
   .cdx-packages__empty {
     text-align: center;
     padding: 48px 24px;
     color: var(--cdx-gray-500);
   }
   
   .cdx-packages__empty i {
     font-size: 40px;
     color: var(--cdx-gray-300);
     margin-bottom: 16px;
   }
   
   .cdx-packages__empty p {
     font-size: 16px;
     margin-bottom: 4px;
   }
   
   .cdx-packages__empty span {
     font-size: 14px;
     color: var(--cdx-gray-400);
   }
   
   .cdx-package-card {
     border: 1px solid var(--cdx-gray-200);
     border-radius: var(--cdx-radius-lg);
     padding: 28px 32px;
   }
   
   .cdx-package-card__header {
     display: flex;
     align-items: flex-start;
     justify-content: space-between;
     gap: 16px;
     padding-bottom: 24px;
     margin-bottom: 24px;
     border-bottom: 1px solid var(--cdx-gray-200);
   }
   
   .cdx-package-card__name {
     font-size: 20px;
     font-weight: 600;
     color: var(--cdx-black);
     margin-bottom: 6px;
   }
   
   .cdx-package-card__subtitle {
     font-size: 14px;
     color: #707070;
     font-weight: 500;
   }
   
   .cdx-package-card__badge {
     display: inline-flex;
     align-items: center;
     padding: 6px 26px;
     border-radius: 50px;
     font-size: 16px;
     font-weight: 600;
     flex-shrink: 0;
   }
   
   .cdx-package-card__badge--active {
     background-color: #2DC071;
     color: var(--cdx-white);
   }
   
   .cdx-package-card__badge--expired {
     background-color: rgba(107, 107, 107, 0.12);
     color: var(--cdx-gray-500);
   }
   
   .cdx-package-card__meta {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px 24px;
      margin-bottom: 40px;
    }

    .cdx-package-card__meta-third {
      grid-template-columns: repeat(2, 1fr);
      justify-content: center;
      max-width: 300px;
      margin: 0 auto;
      text-align: center;
    }

    .cdx-package-card__meta-second {
      grid-template-columns: 1fr;
      justify-content: center;
      max-width: 300px;
      margin: 0 auto;
      text-align: center;
    }
   
   .cdx-package-card__meta-item {
     display: flex;
     flex-direction: column;
   }
   
   .cdx-package-card__meta-label {
     font-size: 14px;
     font-weight: 400;
     color: #646466;
   }
   
   .cdx-package-card__meta-value {
     font-size: 16px;
     font-weight: 600;
     color: var(--cdx-black);
   }
   
   .cdx-package-card__meta-value--highlight {
     color: var(--cdx-red);
   }
   
   .cdx-package-card__usage {
     margin: 28px 0;
     padding: 16px 0 24px;
     border-top: 1px solid #64646630;
     border-bottom: 1px solid #64646630;
   }
   
   .cdx-package-card__usage-top {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 12px;
     margin-bottom: 10px;
   }
   
   .cdx-package-card__usage-label {
     font-size: 15px;
     font-weight: 600;
     color: var(--cdx-black);
   }
   
   .cdx-package-card__usage-count {
     font-size: 15px;
     font-weight: 500;
     color: #70707070;
   }
   
   .cdx-package-card__progress {
     width: 100%;
     height: 8px;
     background-color: #D9D9D9;
     border-radius: 50px;
     overflow: hidden;
   }
   
   .cdx-package-card__progress-bar {
     height: 100%;
     background-color: var(--cdx-red);
     border-radius: 50px;
     transition: width var(--cdx-transition);
   }
   
   .cdx-package-card__features-title {
     font-size: 16px;
     font-weight: 600;
     color: var(--cdx-black);
     margin-bottom: 30px;
   }
   
   .cdx-package-card__features {
     display: grid;
     grid-template-columns: 1fr;
     gap: 12px;
     margin-bottom: 28px;
   }
   
   .cdx-package-card__feature {
     display: flex;
     align-items: center;
     gap: 10px;
     font-size: 14px;
     font-weight: 500;
     color: var(--cdx-black);
   }
   
   .cdx-package-card__feature i {
     flex-shrink: 0;
     font-size: 14px;
     color: #118D57;
   }
   
   .cdx-package-card__feature--excluded {
     color: var(--cdx-gray-400);
   }
   
   .cdx-package-card__feature--excluded i {
     color: var(--cdx-gray-400);
   }
   
   .cdx-package-card__feature--more {
     color: var(--cdx-red);
   }
   
   .cdx-package-card__footer {
     display: flex;
     justify-content: flex-end;
     padding-top: 24px;
     border-top: 1px solid #64646630;
   }
   
   .cdx-package-card__btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     padding: 12px 28px;
     font-family: var(--cdx-font);
     font-size: 15px;
     font-weight: 600;
     color: var(--cdx-white);
     background-color: var(--cdx-red);
     border: none;
     border-radius: var(--cdx-radius);
     cursor: pointer;
     transition: background-color var(--cdx-transition);
   }
   
   .cdx-package-card__btn:hover {
    background-color: var(--cdx-secondary);
   }

   .cdx-package-detail__back {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     font-size: 14px;
     font-weight: 600;
     color: var(--cdx-black);
     text-decoration: none;
     margin-bottom: 24px;
     transition: color var(--cdx-transition);
   }

   .cdx-package-detail__back:hover {
     color: var(--cdx-red);
   }

   .cdx-package-detail__card {
     margin-bottom: 24px;
   }

   .cdx-package-detail__title {
     margin-bottom: 8px;
   }

   .cdx-package-detail__title::before {
     display: none;
   }

   .cdx-package-detail__price {
     display: flex;
     flex-direction: column;
     gap: 4px;
     padding: 20px 24px;
     margin-bottom: 28px;
     border-radius: var(--cdx-radius-md);
     background-color: var(--cdx-gray-100);
   }

   .cdx-package-detail__price-label {
     font-size: 14px;
     font-weight: 500;
     color: #646466;
   }

   .cdx-package-detail__price-value {
     font-size: 28px;
     font-weight: 700;
     color: var(--cdx-black);
     line-height: 1.2;
   }

   .cdx-package-detail__price-note {
     font-size: 14px;
     color: var(--cdx-gray-500);
   }

   .cdx-package-detail__meta {
     margin-bottom: 0;
   }

   .cdx-package-detail__section {
     margin-top: 24px;
   }

   .cdx-package-detail__features {
     margin-bottom: 0;
   }

   .cdx-package-detail__actions {
     display: flex;
     flex-wrap: wrap;
     gap: 12px;
     margin-top: 32px;
   }

   .cdx-package-detail__btn {
     min-width: 180px;
     text-align: center;
     justify-content: center;
   }

   .cdx-package-detail__btn--outline {
     background-color: transparent;
     color: var(--cdx-black);
     border: 1px solid var(--cdx-gray-300);
   }

   .cdx-package-detail__btn--outline:hover {
     background-color: var(--cdx-gray-100);
     color: var(--cdx-black);
   }
   
   /* ==========================================================================
      Quotes — cdx-quotes
      ========================================================================== */
   
   .cdx-quotes-stats {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     background-color: var(--cdx-white);
     border-radius: 10px;
     box-shadow: var(--cdx-shadow);
     margin-bottom: 24px;
     overflow: hidden;
   }
   
   .cdx-quotes-stats__item {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     gap: 0x;
     padding: 40px 20px;
     text-align: center;
   }
   
   .cdx-quotes-stats__item:not(:last-child) {
     border-right: 1px solid var(--cdx-gray-200);
   }
   
   .cdx-quotes-stats__label {
     font-size: 16px;
     font-weight: 500;
     color: #646466;
   }
   
   .cdx-quotes-stats__value {
     font-size: 32px;
     font-weight: 7 00;
     color: var(--cdx-black);
     line-height: 1;
   }
   
   .cdx-quotes-stats__value--pending {
     color: var(--cdx-red);
   }
   
   .cdx-quotes {
     background-color: var(--cdx-white);
     border-radius: var(--cdx-radius-lg);
     padding: 32px 36px;
     box-shadow: var(--cdx-shadow);
   }
   
   .cdx-quotes__title {
     display: flex;
     align-items: center;
     gap: 14px;
     font-size: 20px;
     font-weight: 700;
     color: var(--cdx-black);
     margin-bottom: 28px;
     border-bottom: 1px solid #64646630;
     padding-bottom: 20px;
   }
   
   .cdx-quotes__title::before {
     content: '';
     width: 4px;
     height: 28px;
     background-color: var(--cdx-red);
     border-radius: 2px;
     flex-shrink: 0;
   }
   
   .cdx-quotes__tabs {
     display: flex;
     align-items: center;
     gap: 32px;
     border-bottom: 1px solid var(--cdx-gray-200);
     margin-bottom: 28px;
   }
   
   .cdx-quotes__tab {
     position: relative;
     padding: 0 0 14px;
     font-family: var(--cdx-font);
     font-size: 16px;
     font-weight: 500;
     color: #707070;
     background: none;
     border: none;
     cursor: pointer;
     transition: color var(--cdx-transition);
   }
   
   .cdx-quotes__tab::after {
     content: '';
     position: absolute;
     left: 0;
     bottom: -1px;
     width: 100%;
     height: 2px;
     background-color: var(--cdx-red);
     transform: scaleX(0);
     transition: transform var(--cdx-transition);
   }
   
   .cdx-quotes__tab:hover {
     color: var(--cdx-red);
   }
   
   .cdx-quotes__tab--active {
     color: var(--cdx-red);
     font-weight: 600;
   }
   
   .cdx-quotes__tab--active::after {
     transform: scaleX(1);
   }
   
   .cdx-quotes-table-wrap {
     width: 100%;
     overflow-x: auto;
     margin-bottom: 40px;
   }
   
   .cdx-quotes-table {
     width: 100%;
     min-width: 100%;
     table-layout: fixed;
     border-collapse: collapse;
     margin-bottom: 0;
   }
   
   .cdx-quotes-table thead th {
     padding: 14px 16px;
     font-size: 14px;
     font-weight: 600;
     color: var(--cdx-gray-500);
     text-align: left;
     border-bottom: 1px solid var(--cdx-gray-200);
     white-space: nowrap;
   }
   
   .cdx-quotes-table tbody td {
     padding: 18px 16px;
     font-size: 15px;
     font-weight: 600;
     color: var(--cdx-black);
     border-bottom: 1px solid var(--cdx-gray-200);
     vertical-align: middle;
   }
   
   .cdx-quotes-table tbody tr:last-child td {
     border-bottom: none;
   }
   
   .cdx-quote-badge {
     display: inline-flex;
     align-items: center;
     padding: 6px 16px;
     border-radius: 50px;
     font-size: 13px;
     font-weight: 600;
   }
   
   .cdx-quote-badge--pending {
     background-color: color-mix(in srgb, var(--cdx-red) 10%, transparent);
     color: var(--cdx-red);
     border: 1px solid var(--cdx-red);
     border-radius: 8px;
     padding: 5px 24px;
   }
   
   .cdx-quote-badge--approved {
     background-color: rgba(17, 141, 87, 0.12);
     color: #118D57;
   }
   
   .cdx-quote-badge--rejected {
     background-color: rgba(107, 107, 107, 0.12);
     color: var(--cdx-gray-500);
   }
   
   .cdx-quote-item--hidden {
     display: none !important;
   }
   
   .cdx-quotes-table tbody .cdx-quote-item {
     display: table-row;
   }
   
   .cdx-quote-detail {
     padding: 28px 32px;
     background-color: #D9D9D924;
   }
   
   .cdx-quote-detail__title {
     font-size: 18px;
     font-weight: 600;
     color: var(--cdx-red);
     padding-bottom: 12px;
     margin-bottom: 24px;
     border-bottom: 2px solid var(--cdx-red);
   }
   
   .cdx-quote-detail__grid {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 30px 40px;
     margin-bottom: 40px;
   }
   
   .cdx-quote-detail__field {
     display: flex;
     flex-direction: column;
     gap: 4px;
   }
   
   .cdx-quote-detail__label {
     font-size: 16px;
     font-weight: 500;
     color: #646466;
   }
   
   .cdx-quote-detail__value {
     font-size: 18px;
     font-weight: 600;
     color: var(--cdx-black);
   }
   
   .cdx-quote-detail__value--highlight {
     color: var(--cdx-red);
   }
   
   .cdx-quote-detail__message-title {
     font-size: 15px;
     font-weight: 500;
     color: #646466;
     margin-bottom: 12px;
   }
   
   .cdx-quote-detail__message {
     font-size: 18px;
     font-weight: 500;
     line-height: 1.7;
     color: #000000;
   }
   
   .cdx-quotes__empty {
     display: none;
     text-align: center;
     padding: 48px 24px;
     color: var(--cdx-gray-500);
   }
   
   .cdx-quotes__empty--visible {
     display: block;
   }
   
   .cdx-quotes__empty i {
     font-size: 40px;
     color: var(--cdx-gray-300);
     margin-bottom: 16px;
   }
   
   .cdx-quotes__empty p {
     font-size: 16px;
     margin-bottom: 4px;
   }
   
   .cdx-quotes__empty span {
     font-size: 14px;
     color: var(--cdx-gray-400);
   }
   
   /* ==========================================================================
      Change Password — cdx-password-form
      ========================================================================== */
   
   .cdx-password-form {
     background-color: var(--cdx-white);
     border-radius: var(--cdx-radius-lg);
     padding: 32px 36px;
     box-shadow: var(--cdx-shadow);
   }
   
   .cdx-password-form__title {
     display: flex;
     align-items: center;
     gap: 14px;
     font-size: 22px;
     font-weight: 700;
     color: var(--cdx-black);
     margin-bottom: 24px;
     border-bottom: 1px solid #64646630;
     padding-bottom: 20px;
   }
   
   .cdx-password-form__title::before {
     content: '';
     width: 4px;
     height: 28px;
     background-color: var(--cdx-red);
     border-radius: 2px;
     flex-shrink: 0;
   }
   
   .cdx-password-form__alert {
     display: flex;
     align-items: flex-start;
     gap: 10px;
     padding: 18px 20px;
     margin-bottom: 28px;
     background-color: color-mix(in srgb, var(--cdx-red) 12%, transparent);
     border: 1px solid var(--cdx-red);
     border-radius: var(--cdx-radius);
   }
   
   .cdx-password-form__alert i {
     flex-shrink: 0;
     font-size: 18px;
     color: var(--cdx-red);
     margin-top: 2px;
   }
   
   .cdx-password-form__alert--content span {
     font-size: 16px;
     font-weight: 600;
     color: var(--cdx-red);
   }
   
   .cdx-password-form__alert--content p {
     font-size: 16px;
     line-height: 1.6;
     color: var(--cdx-red);
     margin: 0;
   }
   
   .cdx-password-form__divider {
     border-top: 1px solid #64646670;
     margin: 25px 0;
   }
   
   .cdx-password-form__group {
     margin-bottom: 30px;
   }
   
   .cdx-password-form__label {
     display: block;
     font-size: 16px;
     font-weight: 500;
     color: #151517;
     margin-bottom: 8px;
   }
   
   .cdx-password-form__input-wrap {
     position: relative;
   }
   
   .cdx-password-form__input {
     width: 100%;
     padding: 15px 48px 15px 18px;
     font-family: var(--cdx-font);
     font-size: 15px;
     color: var(--cdx-black);
     background-color: #88888912;
     border: 1px solid transparent;
     border-radius: var(--cdx-radius);
     outline: none;
     transition: border-color var(--cdx-transition), background-color var(--cdx-transition);
   }
   
   .cdx-password-form__input::placeholder {
     color: #646466;
   }
   
   .cdx-password-form__input:focus {
     border-color: var(--cdx-red);
     background-color: var(--cdx-white);
   }
   
   .cdx-password-form__toggle {
     position: absolute;
     top: 50%;
     right: 14px;
     transform: translateY(-50%);
     display: flex;
     align-items: center;
     justify-content: center;
     width: 32px;
     height: 32px;
     padding: 0;
     border: none;
     background: transparent;
     color: var(--cdx-gray-500);
     cursor: pointer;
     transition: color var(--cdx-transition);
   }
   
   .cdx-password-form__toggle:hover {
     color: var(--cdx-red);
   }
   
   .cdx-password-form__requirements {
     background-color: #D9D9D925;
     border-radius: var(--cdx-radius);
     padding: 22px;
     margin-bottom: 30px;
     border: 1px solid #D9D9D9;
   }
   
   .cdx-password-form__requirements-title {
     font-size: 16px;
     font-weight: 600;
     color: var(--cdx-black);
     margin-bottom: 20px;
   }
   
   .cdx-password-form__requirements-list {
     display: grid;
     grid-template-columns: 1fr;
     gap: 15px 24px;
     list-style: none;
     margin: 0;
     padding: 0;
   }
   
   .cdx-password-form__requirement {
     display: flex;
     align-items: center;
     gap: 8px;
     font-size: 14px;
     color: #000000;
   }
   
   .cdx-password-form__requirement i {
     flex-shrink: 0;
     font-size: 10px;
     color: #707070;
     width: 20px;
     height: 20px;
     background-color: #70707022;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
   }
   
   .cdx-password-form__requirement--valid {
     color: var(--cdx-black);
   }
   
   .cdx-password-form__requirement--valid i {
     color: #118D57;
     background-color: #118D5722;
   }
   
   .cdx-password-form__actions {
     display: flex;
     align-items: center;
     justify-content: flex-end;
     gap: 12px;
     margin-top: 32px;
     padding-top: 24px;
     border-top: 1px solid var(--cdx-gray-200);
   }
   
   .cdx-password-form__btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     padding: 12px 28px;
     font-family: var(--cdx-font);
     font-size: 15px;
     font-weight: 600;
     border-radius: var(--cdx-radius);
     border: none;
     cursor: pointer;
     transition: background-color var(--cdx-transition), color var(--cdx-transition);
   }
   
   .cdx-password-form__btn--cancel {
     background-color: var(--cdx-black);
     color: var(--cdx-white);
   }
   
   .cdx-password-form__btn--cancel:hover {
     background-color: var(--cdx-gray-600);
   }
   
   .cdx-password-form__btn--save {
     background-color: var(--cdx-red);
     color: var(--cdx-white);
   }
   
   .cdx-password-form__btn--save:hover {
     background-color: var(--cdx-secondary);
   }
   
   /* ==========================================================================
      Request Quote Modal — cdx-quote-modal
      ========================================================================== */
   
   body.cdx-modal-open {
     overflow: hidden;
   }
   
   .cdx-quote-modal {
     position: fixed;
     inset: 0;
     z-index: 1100;
     display: none;
     align-items: center;
     justify-content: center;
     padding: 24px;
   }
   
   .cdx-quote-modal--open {
     display: flex;
   }
   
   .cdx-quote-modal__overlay {
     position: absolute;
     inset: 0;
     background-color: rgba(17, 17, 17, 0.65);
   }
   
   .cdx-quote-modal__dialog {
     position: relative;
     z-index: 1;
     width: 100%;
     max-width: 680px;
     max-height: calc(100vh - 48px);
     overflow: hidden;
     display: flex;
     flex-direction: column;
     background-color: var(--cdx-white);
     border-radius: 10px;
     box-shadow: var(--cdx-shadow-lg);
   }
   
   .cdx-quote-modal__header {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 16px;
     padding: 18px 24px;
     background-color: var(--cdx-red);
     color: var(--cdx-white);
   }
   
   .cdx-quote-modal__header-left {
     display: flex;
     align-items: center;
     gap: 12px;
   }
   
   .cdx-quote-modal__header-left i {
     font-size: 20px;
   }
   
   .cdx-quote-modal__title {
     font-size: 20px;
     font-weight: 700;
     color: var(--cdx-white);
   }
   
   .cdx-quote-modal__close {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 36px;
     height: 36px;
     padding: 0;
     border: none;
     border-radius: 50%;
     background: transparent;
     color: var(--cdx-white);
     font-size: 20px;
     cursor: pointer;
     transition: background-color var(--cdx-transition);
   }
   
   .cdx-quote-modal__close:hover {
     background-color: rgba(255, 255, 255, 0.15);
   }
   
   .cdx-quote-modal__body {
     padding: 28px 28px 24px;
     overflow-y: auto;
   }
   
   .cdx-quote-modal__group {
     margin-bottom: 18px;
   }
   
   .cdx-quote-modal__label {
     display: block;
     font-size: 15px;
     font-weight: 500;
     color: #151517;
     margin-bottom: 5px;
   }
   
   .cdx-quote-modal__input,
   .cdx-quote-modal__select,
   .cdx-quote-modal__textarea {
     width: 100%;
     padding: 15px 18px;
     font-family: var(--cdx-font);
     font-size: 15px;
     color: #646466;
     background-color: #88888910;
     border: 1px solid transparent;
     border-radius: 10px;
     outline: none;
     transition: border-color var(--cdx-transition), background-color var(--cdx-transition);
   }
   
   .cdx-quote-modal__textarea {
     min-height: 120px;
     resize: vertical;
   }
   
   .cdx-quote-modal__input::placeholder,
   .cdx-quote-modal__textarea::placeholder {
     color: #64646655;
   }
   
   .cdx-quote-modal__input:focus,
   .cdx-quote-modal__select:focus,
   .cdx-quote-modal__textarea:focus {
     border-color: var(--cdx-red);
     background-color: var(--cdx-white);
   }
   
   .cdx-quote-modal__select {
     appearance: none;
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236b6b6b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
     background-repeat: no-repeat;
     background-position: right 18px center;
     padding-right: 44px;
     cursor: pointer;
   }
   
   .cdx-quote-modal__footer {
     display: flex;
     align-items: center;
     justify-content: flex-end;
     gap: 12px;
     padding-top: 8px;
   }
   
   .cdx-quote-modal__btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     padding: 12px 24px;
     font-family: var(--cdx-font);
     font-size: 15px;
     font-weight: 600;
     border-radius: var(--cdx-radius);
     border: none;
     cursor: pointer;
     transition: background-color var(--cdx-transition), color var(--cdx-transition);
   }
   
   .cdx-quote-modal__btn--cancel {
     background-color: var(--cdx-black);
     color: var(--cdx-white);
   }
   
   .cdx-quote-modal__btn--cancel:hover {
     background-color: var(--cdx-gray-600);
   }
   
   .cdx-quote-modal__btn--submit {
     background-color: var(--cdx-red);
     color: var(--cdx-white);
   }
   
   .cdx-quote-modal__btn--submit:hover {
     background-color: var(--cdx-secondary);
   }

   /* ==========================================================================
      Video Modal — cdx-video-modal
      ========================================================================== */

   .cdx-video-modal {
     position: fixed;
     inset: 0;
     z-index: 1100;
     display: none;
     align-items: center;
     justify-content: center;
     padding: 24px;
   }

   .cdx-video-modal--open {
     display: flex;
   }

   .cdx-video-modal__overlay {
     position: absolute;
     inset: 0;
     background: rgba(21, 21, 23, 0.82);
   }

   .cdx-video-modal__dialog {
     position: relative;
     z-index: 1;
     width: min(960px, 100%);
     background: var(--cdx-black);
     border-radius: var(--cdx-radius);
     overflow: hidden;
     box-shadow: 0 24px 80px rgba(0, 0, 0, 0.35);
   }

   .cdx-video-modal__close {
     position: absolute;
     top: 12px;
     right: 12px;
     z-index: 2;
     width: 40px;
     height: 40px;
     border: none;
     border-radius: 50%;
     background: rgba(255, 255, 255, 0.12);
     color: var(--cdx-white);
     cursor: pointer;
   }

   .cdx-video-modal__close:hover {
     background: rgba(255, 255, 255, 0.2);
   }

   .cdx-video-modal__frame-wrap {
     position: relative;
     width: 100%;
     padding-top: 56.25%;
     background: #000;
   }

   .cdx-video-modal__frame-wrap iframe {
     position: absolute;
     inset: 0;
     width: 100%;
     height: 100%;
     border: 0;
   }
   
   /* ==========================================================================
      Login — cdx-login
      ========================================================================== */
   
   .cdx-login-page {
     font-family: var(--cdx-font-body);
     background-color: var(--cdx-white);
   }
   
   .cdx-login {
     display: flex;
     min-height: 100vh;
   }
   
   .cdx-login__visual {
     position: relative;
     flex: 0 0 44%;
     max-width: 44%;
     min-height: 100vh;
     overflow: hidden;
   }
   
   .cdx-login__bg {
     position: absolute;
     inset: 0;
     width: 100%;
     height: 100%;
     object-fit: cover;
     object-position: center top;
   }
   
   .cdx-login__tint {
     position: absolute;
     inset: 0;
     background-color: var(--cdx-red);
     mix-blend-mode: multiply;
     z-index: 1;
   }
   
   .cdx-login__shapes {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     right: -1px;
     bottom: 0;
     max-width: 614px;
     max-height: 614px;
     height: 100%;
     z-index: 2;
     pointer-events: none;
   }
   
   .cdx-login__shapes img {
     width: 100%;
     height: 100%;
     object-fit: fill;
     display: block;
   }
   
   .cdx-login__panel {
     flex: 1;
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 48px 40px;
     background-color: var(--cdx-white);
   }
   
   .cdx-login__form-wrap {
     width: 100%;
     max-width: 570px;
   }
   
   .cdx-login__logo {
     display: flex;
     justify-content: center;
     margin-bottom: 36px;
   }
   
   .cdx-login__logo img {
     width: 160px;
     height: auto;
   }
   
   .cdx-login__title {
     font-family: var(--cdx-font-body);
     font-size: 40px;
     font-weight: 700;
     color: #333333;
     text-align: center;
     line-height: 1.3;
   }
   
   .cdx-login__subtitle {
     font-family: var(--cdx-font-body);
     font-size: 18px;
     font-weight: 500;
     color: #151517;
     text-align: center;
     line-height: 1.6;
     max-width: 380px;
     margin: 10px auto 0;
   }

   .cdx-login__alerts {
     display: flex;
     flex-direction: column;
     gap: 12px;
     margin-top: 24px;
   }

   .cdx-login__alert {
     display: flex;
     align-items: flex-start;
     gap: 12px;
     padding: 14px 16px;
     border-radius: var(--cdx-radius);
     border: 1px solid transparent;
     text-align: left;
   }

   .cdx-login__alert-icon {
     flex-shrink: 0;
     font-size: 18px;
     line-height: 1;
     margin-top: 1px;
   }

   .cdx-login__alert-text {
     margin: 0;
     font-size: 14px;
     font-weight: 500;
     line-height: 1.5;
   }

   .cdx-login__alert--error {
     background-color: color-mix(in srgb, var(--cdx-red) 10%, #fff);
     border-color: color-mix(in srgb, var(--cdx-red) 35%, #fff);
     color: var(--cdx-red);
   }

   .cdx-login__alert--error .cdx-login__alert-icon {
     color: var(--cdx-red);
   }

   .cdx-login__alert--success {
     background-color: color-mix(in srgb, #15803d 10%, #fff);
     border-color: color-mix(in srgb, #15803d 30%, #fff);
     color: #166534;
   }

   .cdx-login__alert--success .cdx-login__alert-icon {
     color: #15803d;
   }
   
   .cdx-login__form {
     margin-top: 50px;
   }
   
   .cdx-login__group {
     margin-bottom: 30px;
   }
   
   .cdx-login__label {
     display: block;
     font-size: 15px;
     font-weight: 500;
     color: #000000;
     margin-bottom: 10px;
   }
   
   .cdx-login__label span {
     color: var(--cdx-red);
     margin-left: 2px;
   }
   
   .cdx-login__input {
     width: 100%;
     padding: 16px 16px;
     font-family: var(--cdx-font-body);
     font-size: 15px;
     color: var(--cdx-black);
     background-color: var(--cdx-white);
     border: 1px solid #D9EBFF;
     border-radius: 6px;
     outline: none;
     transition: border-color var(--cdx-transition), box-shadow var(--cdx-transition);
   }
   
   .cdx-login__input::placeholder {
     color: #b0b0b0;
   }
   
   .cdx-login__input:focus {
     border-color: var(--cdx-red);
     box-shadow: 0 0 0 3px rgba(217, 10, 44, 0.08);
   }
   
   .cdx-login__submit {
     display: block;
     width: 100%;
     margin-top: 50px;
     padding: 15px 24px;
     font-family: var(--cdx-font-body);
     font-size: 18px;
     font-weight: 500;
     color: var(--cdx-white);
     background-color: var(--cdx-red);
     border: none;
     border-radius: 8px;
     cursor: pointer;
     transition: background-color var(--cdx-transition);
   }
   
   .cdx-login__submit:hover {
     background-color: var(--cdx-secondary);
   }
   
   .cdx-login__forgot {
     display: block;
     margin-top: 26px;
     font-size: 16px;
     font-weight: 500;
     color: #6B7280;
     text-align: center;
     transition: color var(--cdx-transition);
   }
   
   .cdx-login__forgot:hover {
     color: var(--cdx-red);
   }
   
   /* ==========================================================================
      FAQ — cdx-faq
      ========================================================================== */
   
   .cdx-faq-hero {
     position: relative;
     margin-top: 90px;
     padding: 80px 0 0;
     background-color: #101014;
     overflow: hidden;
   }
   
   .cdx-faq-hero::before {
     content: '';
     position: absolute;
     top: 20px;
     left: 24px;
     width: 528px;
     height: 120px;
     background-image: radial-gradient(circle, rgba(255, 255, 255, 0.35) 1.5px, transparent 1.5px);
     background-size: 14px 14px;
     opacity: 0.6;
   }
   
   .cdx-faq-hero__watermark {
     position: absolute;
     left: 0;
     bottom: 0;
     font-size: clamp(50px, 20vw, 300px);
     font-weight: 700;
     line-height: 1;
     color: rgba(255, 255, 255, 0.04);
     white-space: nowrap;
     pointer-events: none;
     user-select: none;
   }
   
   .cdx-faq-hero .container {
     position: relative;
     z-index: 1;
   }
   
   .cdx-faq-hero__content {
     max-width: 620px;
     margin-top: 30px;
   }
   
   .cdx-faq-hero__eyebrow {
     display: inline-block;
     font-size: 14px;
     font-weight: 600;
     letter-spacing: 2px;
     color: var(--cdx-white);
     margin-bottom: 16px;
   }
   
   .cdx-faq-hero__title {
     font-size: 72px;
     font-weight: 700;
     line-height: 1.15;
     color: var(--cdx-white);
   }
   
   .cdx-faq-hero__visual {
     position: relative;
     min-height: 420px;
     display: flex;
     align-items: flex-end;
     justify-content: center;
   }
   
   .cdx-faq-hero__person {
     position: relative;
     z-index: 2;
     max-height: 560px;
     width: auto;
     object-fit: contain;
     object-position: bottom left;
   }
   
   .cdx-faq-hero__qmarks {
     position: absolute;
     right: -10%;
     top: -10%;
     width: min(100%, 380px);
     z-index: 1;
     pointer-events: none;
   }
   
   .cdx-faq {
     position: relative;
     padding: 70px 0 90px;
     background-color: var(--cdx-red);
     overflow: hidden;
   }
   
   .cdx-faq__decor {
     position: absolute;
     font-size: 280px;
     font-weight: 800;
     line-height: 1;
     color: rgba(255, 255, 255, 0.06);
     pointer-events: none;
     user-select: none;
   }
   
   .cdx-faq__decor--1 {
     top: 10%;
     right: 8%;
   }
   
   .cdx-faq__decor--2 {
     bottom: 8%;
     left: 5%;
     font-size: 220px;
   }
   
   .cdx-faq .container {
     position: relative;
     z-index: 1;
   }
   
   .cdx-faq__list {
     display: flex;
     flex-direction: column;
   }
   
   .cdx-faq-item__trigger {
     display: flex;
     align-items: flex-start;
     gap: 16px;
     width: 100%;
     padding: 22px 0;
     border: none;
     background: transparent;
     text-align: left;
     cursor: pointer;
     font-family: var(--cdx-font);
     color: var(--cdx-white);
   }
   
   .cdx-faq-item__icon {
     flex-shrink: 0;
     width: 24px;
     font-size: 22px;
     font-weight: 400;
     line-height: 1.4;
     color: var(--cdx-white);
   }
   
   .cdx-faq-item__question {
     font-size: 26px;
     font-weight: 600;
     line-height: 1.4;
   }
   
   .cdx-faq-item__answer {
     display: none;
     padding: 0 0 22px 40px;
   }
   
   .cdx-faq-item--open .cdx-faq-item__answer {
     display: block;
   }
   
   .cdx-faq-item__answer p {
     font-size: 18px;
     line-height: 1.7;
     color: var(--cdx-white);
     max-width: 920px;
   }
   
   /* ==========================================================================
      Team — cdx-team
      ========================================================================== */
   
   .cdx-team-hero {
     margin-top: 90px;
     padding: 60px 0 50px;
     background-color: #101014;
     overflow: hidden;
     position: relative;
   }
   
   .cdx-team-hero__media {
     position: relative;
     border-radius: var(--cdx-radius-lg);
     overflow: hidden;
     min-height: 380px;
     z-index: 2;
   }
   
   .cdx-team-hero__bredcrumbs {
     position: absolute;
     top: 0;
     left: 0;
     width: 60%;
     max-height: 100%;
     object-fit: cover;
     display: block;
     z-index: 1;
   }
   
   .cdx-team-hero__play {
     position: absolute;
     inset: 0;
     display: flex;
     align-items: center;
     justify-content: center;
     border: none;
     cursor: pointer;
     background: transparent;
   }
   
   .cdx-team-hero__play span {
     position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
     width: 72px;
     height: 72px;
     border-radius: 50%;
     background-color: #4d4c4e;
     color: var(--cdx-white);
     font-size: 22px;
     padding-left: 4px;
     box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
   }
   .cdx-team-hero__play span::before {
     content: '';
     width: 100px;
     height: 100px;
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     background-color: #4d4c4e70;
     border-radius: 50%;
     z-index: -1;
     opacity: 0.5;
   }
   
   .cdx-team-hero__content {
     position: relative;
     z-index: 2;
     padding: 20px 0 20px 20px;
   }
   
   .cdx-team-hero__eyebrow {
     display: inline-block;
     font-size: 16px;
     font-weight: 500;
     letter-spacing: 1px;
     color: var(--cdx-white);
     margin-bottom: 10px;
   }
   
   .cdx-team-hero__title {
     font-size: 72px;
     font-weight: 700;
     line-height: 1.15;
     color: var(--cdx-white);
     margin-bottom: 24px;
   }
   
   .cdx-team-hero__desc {
     font-size: 18px;
     line-height: 1.7;
     color: var(--cdx-white);
     margin-bottom: 28px;
   }
   
   .cdx-team-hero__link {
     display: inline-flex;
     align-items: center;
     gap: 10px;
     font-size: 16px;
     font-weight: 600;
     color: var(--cdx-white);
     transition: color var(--cdx-transition), gap var(--cdx-transition);
   }
   
   .cdx-team-hero__link:hover {
     color: var(--cdx-red);
     gap: 14px;
   }
   
   .cdx-team-hero__dots {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 10px;
     margin-top: 36px;
   }
   
   .cdx-team-hero__dot {
     width: 10px;
     height: 10px;
     border-radius: 50%;
     background-color: rgba(255, 255, 255, 0.35);
   }
   
   .cdx-team-hero__dot--active {
     background-color: var(--cdx-white);
   }
   
   .cdx-team {
     padding: 0 0 90px;
     background-color: #101014;
   }
   
   .cdx-team .container {
    width: 100%;
    max-width: 100%;
   }
   
   .cdx-team-intro {
     padding: 60px 0 40px;
     background-color: #151517;
   }
   
   .cdx-team__intro {
     display: flex;
     align-items: flex-start;
     justify-content: space-between;
     gap: 40px;
   }
   
   .cdx-team__intro-title {
     flex: 1;
     font-size: 40px;
     font-weight: 700;
     line-height: 1.2;
     color: var(--cdx-white);
     max-width: 400px;
   }
   
   .cdx-team__intro-desc {
     flex: 1;
     font-size: 17px;
     line-height: 1.7;
     color: var(--cdx-white);
     max-width: 560px;
     padding-top: 8px;
     font-weight: 400;
   }
   
   .cdx-team__grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
   }
   
   .cdx-team-card {
     position: relative;
     display: block;
     overflow: hidden;
     aspect-ratio: 3 / 4;
     color: var(--cdx-white);
     transition: transform var(--cdx-transition);
   }
   
   .cdx-team-card:hover {
     transform: translateY(-6px);
   }
   
   .cdx-team-card__img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
   }
   
   .cdx-team-card__overlay {
     position: absolute;
     inset: 0;
     background: linear-gradient(180deg, color-mix(in srgb, var(--cdx-red) 0%, transparent) 45%, color-mix(in srgb, var(--cdx-red) 55%, transparent) 72%, color-mix(in srgb, var(--cdx-red) 95%, transparent) 100%);
     pointer-events: none;
   }
   
   .cdx-team-card__content {
     position: absolute;
     left: 30px;
     right: 64px;
     bottom: 30px;
     z-index: 1;
   }
   
   .cdx-team-card__role {
     display: block;
     font-size: 14px;
     font-weight: 600;
     letter-spacing: 1.2px;
     text-transform: uppercase;
     color: var(--cdx-white);
     margin-bottom: 6px;
   }
   
   .cdx-team-card__name {
     font-size: 28px;
     font-weight: 700;
     line-height: 1.25;
     color: var(--cdx-white);
   }
   
   .cdx-team-card__btn {
     position: relative;
     right: auto;
     bottom: auto;
     z-index: 2;
     display: flex;
     align-items: center;
     justify-content: center;
     width: 56px;
     height: 56px;
     border-radius: 50%;
     background-color: #88888925;
     color: var(--cdx-white);
     font-size: 14px;
     transition: background-color var(--cdx-transition), transform var(--cdx-transition);
     flex-shrink: 0;
   }
   
   .cdx-team-card:hover .cdx-team-card__btn {
     background-color: var(--cdx-black);
     transform: none;
   }

   .cdx-team-card__link {
     position: absolute;
     inset: 0;
     z-index: 1;
     display: block;
     color: inherit;
     text-decoration: none;
   }

   .cdx-team-card__link .cdx-team-card__img,
   .cdx-team-card__link .cdx-team-card__overlay,
   .cdx-team-card__link .cdx-team-card__content {
     pointer-events: none;
   }

   .cdx-team-card__socials {
     position: absolute;
     right: 18px;
     bottom: 18px;
     z-index: 3;
     display: flex;
     align-items: center;
     flex-direction: column-reverse;
     gap: 10px;
   }

   .cdx-team-card__social-list {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 8px;
     opacity: 0;
     visibility: hidden;
     transform: translateY(10px);
     pointer-events: none;
     transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
   }

   .cdx-team-card__socials:hover .cdx-team-card__social-list,
   .cdx-team-card__socials:focus-within .cdx-team-card__social-list {
     opacity: 1;
     visibility: visible;
     transform: translateY(0);
     pointer-events: auto;
   }

   .cdx-team-card__social-link {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     width: 40px;
     height: 40px;
     border-radius: 50%;
     background-color: #ffffff;
     color: var(--cdx-red);
     font-size: 14px;
     text-decoration: none;
     transition: color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
     box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
   }

   .cdx-team-card__social-link:hover,
   .cdx-team-card__social-link:focus-visible {
     color: var(--cdx-secondary);
     transform: translateY(-2px);
   }
   
   /* ==========================================================================
      Blog Detail — cdx-blog-detail
      ========================================================================== */
   
   .cdx-blog-hero {
     position: relative;
     margin-top: 90px;
     min-height: 460px;
     display: flex;
     align-items: flex-end;
     overflow: hidden;
   }
   
   .cdx-blog-hero__bg {
     position: absolute;
     inset: 0;
     z-index: 0;
   }
   
   .cdx-blog-hero__bg img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     object-position: center;
   }
   
   .cdx-blog-hero__overlay {
     position: absolute;
     inset: 0;
     background: linear-gradient(90deg, color-mix(in srgb, var(--cdx-red) 92%, transparent) 0%, color-mix(in srgb, var(--cdx-red) 55%, transparent) 45%, color-mix(in srgb, var(  --cdx-red) 10%, transparent) 100%);
     z-index: 1;
   }
   
   .cdx-blog-hero .container {
     position: relative;
     z-index: 2;
     padding-top: 80px;
     padding-bottom: 70px;
   }
   
   .cdx-blog-hero__meta {
     display: inline-block;
     font-size: 14px;
     font-weight: 500;
     color: rgba(255, 255, 255, 0.9);
     margin-bottom: 16px;
   }
   
   .cdx-blog-hero__title {
     max-width: 760px;
     font-size: 72px;
     font-weight: 700;
     line-height: 1.15;
     color: var(--cdx-white);
   }
   
   .cdx-blog-detail {
     background-color: var(--cdx-white);
   }
   
   .cdx-blog-article {
     padding: 70px 0 90px;
   }
   
   .cdx-blog-article__heading {
     font-size: 32px;
     font-weight: 700;
     color: #151517;
     margin: 36px 0 25px;
     line-height: 1.3;
   }
   
   .cdx-blog-article__heading:first-child {
     margin-top: 0;
   }
   
   .cdx-blog-article p {
     font-size: 18px;
     line-height: 1.8;
     color: #000000;
     margin-bottom: 18px;
   }

   .cdx-job-apply {
     margin-top: 40px;
     padding-top: 28px;
     border-top: 1px solid var(--cdx-gray-200);
   }

   .cdx-job-apply__btn {
     display: inline-flex;
     align-items: center;
     gap: 16px;
     max-width: 100%;
     padding: 14px 22px 14px 14px;
     background-color: var(--cdx-red);
     color: var(--cdx-white);
     border-radius: var(--cdx-radius);
     text-decoration: none;
     transition: background-color var(--cdx-transition), transform var(--cdx-transition);
   }

   .cdx-job-apply__btn:hover {
     background-color: var(--cdx-secondary);
     color: var(--cdx-white);
     transform: translateY(-2px);
   }

   .cdx-job-apply__icon {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     width: 44px;
     height: 44px;
     flex-shrink: 0;
     border-radius: 8px;
     background-color: rgba(255, 255, 255, 0.16);
     font-size: 16px;
   }

   .cdx-job-apply__text {
     display: flex;
     flex-direction: column;
     gap: 2px;
     min-width: 0;
   }

   .cdx-job-apply__label {
     font-size: 16px;
     font-weight: 700;
     line-height: 1.2;
   }

   .cdx-job-apply__email {
     font-size: 13px;
     font-weight: 400;
     line-height: 1.3;
     opacity: 0.85;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
   }

   .cdx-job-apply__arrow {
     margin-left: 8px;
     font-size: 14px;
     flex-shrink: 0;
     transition: transform var(--cdx-transition);
   }

   .cdx-job-apply__btn:hover .cdx-job-apply__arrow {
     transform: translateX(3px);
   }

   .cdx-blog-share {
     display: flex;
     align-items: center;
     justify-content: space-between;
     flex-wrap: wrap;
     gap: 16px;
     margin-top: 40px;
     padding-top: 28px;
     border-top: 1px solid var(--cdx-gray-200);
   }

   .cdx-blog-share__label {
     font-size: 18px;
     font-weight: 700;
     color: var(--cdx-black);
   }

   .cdx-blog-share__links {
     display: flex;
     align-items: center;
     flex-wrap: wrap;
     gap: 10px;
   }

   .cdx-blog-share__link,
   .cdx-blog-share__btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     width: 42px;
     height: 42px;
     border: none;
     border-radius: 50%;
     background: #88888915;
     color: var(--cdx-secondary);
     font-size: 16px;
     line-height: 1;
     text-decoration: none;
     cursor: pointer;
     transition: background var(--cdx-transition), color var(--cdx-transition), transform var(--cdx-transition);
   }

   .cdx-blog-share__link:hover,
   .cdx-blog-share__btn:hover,
   .cdx-blog-share__btn.is-copied {
     background: var(--cdx-red);
     color: var(--cdx-white);
   }

   .cdx-blog-share__link:hover {
     transform: translateY(-2px);
   }
   
   .cdx-blog-sidebar {
     display: flex;
     flex-direction: column;
   }
   
   .cdx-blog-tags {
     background-color: #88888910;
     padding: 36px 24px;
   }
   
   .cdx-blog-tags__title {
     font-size: 20px;
     font-weight: 700;
     color: var(--cdx-black);
     margin-bottom: 30px;
   }
   
   .cdx-blog-tags__list {
     display: flex;
     flex-wrap: wrap;
     gap: 10px;
   }
   
   .cdx-blog-tags__item {
     display: inline-flex;
     align-items: center;
     padding: 6px 12px;
     font-size: 14px;
     font-weight: 500;
     color: #0c1c28;
     background-color: #88888925;
     border-radius: 8px;
     transition: border-color var(--cdx-transition), color var(--cdx-transition);
   }
   
   .cdx-blog-tags__item:hover {
     border-color: var(--cdx-red);
     color: var(--cdx-red);
   }
   
   .cdx-blog-popular {
     background-color: var(--cdx-red);
     padding: 50px 30px;
     flex: 1;
   }
   
   .cdx-blog-popular__title {
     font-size: 20px;
     font-weight: 700;
     color: var(--cdx-white);
     margin-bottom: 24px;
   }
   
   .cdx-blog-popular__list {
     display: flex;
     flex-direction: column;
     gap: 22px;
   }
   
   .cdx-blog-popular__item {
     position: relative;
     display: block;
     padding-left: 20px;
     padding-bottom: 22px;
     border-bottom: 1px solid rgba(255, 255, 255, 0.2);
     color: var(--cdx-white);
     transition: opacity var(--cdx-transition);
   }
   
   .cdx-blog-popular__item::before {
     content: '';
     position: absolute;
     left: 0;
     top: 10px;
     width: 6px;
     height: 6px;
     border-radius: 50%;
     background-color: var(--cdx-white);
   }
   
   .cdx-blog-popular__item:last-child {
     padding-bottom: 0;
     border-bottom: none;
   }
   
   .cdx-blog-popular__item:hover {
     opacity: 0.85;
     color: var(--cdx-white);
   }
   
   .cdx-blog-popular__meta {
     display: block;
     font-size: 14px;
     color: #ffffff86;
     margin-bottom: 8px;
   }
   
   .cdx-blog-popular__name {
     display: block;
     font-size: 20px;
     font-weight: 700;
     line-height: 1.45;
     color: var(--cdx-white);
     margin-bottom: 10px;
   }
   
   .cdx-blog-popular__tags {
     display: flex;
     flex-wrap: wrap;
     gap: 8px;
   }
   
   .cdx-blog-popular__tag {
     display: inline-flex;
     align-items: center;
     padding: 4px 12px;
     font-size: 12px;
     font-weight: 500;
     color: var(--cdx-white);
     background-color: #ffffff23;
     border-radius: 8px;
   }
   
   /* ==========================================================================
      Portfolio Detail — cdx-portfolio-detail
      ========================================================================== */
   
   .cdx-portfolio-hero {
     position: relative;
     margin-top: 90px;
     min-height: 460px;
     display: flex;
     align-items: flex-end;
     overflow: hidden;
   }
   
   .cdx-portfolio-hero__bg {
     position: absolute;
     inset: 0;
     z-index: 0;
   }
   
   .cdx-portfolio-hero__bg img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     object-position: center;
   }
   
   .cdx-portfolio-hero__overlay {
     position: absolute;
     inset: 0;
     background: linear-gradient(0deg, color-mix(in srgb, var(--cdx-red) 95%, transparent) 0%, color-mix(in srgb, var(--cdx-red) 60%, transparent) 35%, color-mix(in srgb, var(--cdx-red) 15%, transparent) 100%);
     z-index: 1;
   }
   
   .cdx-portfolio-hero .container {
     position: relative;
     z-index: 2;
     padding-top: 80px;
     padding-bottom: 70px;
   }
   
   .cdx-portfolio-hero__inner {
     display: flex;
     align-items: flex-end;
     justify-content: space-between;
     gap: 24px;
   }
   
   .cdx-portfolio-hero__content {
     flex: 1;
     min-width: 0;
   }
   
   .cdx-portfolio-hero__meta {
     display: inline-block;
     font-size: 14px;
     font-weight: 500;
     color: rgba(255, 255, 255, 0.9);
     margin-bottom: 10px;
   }
   
   .cdx-portfolio-hero__title {
     max-width: 760px;
     font-size: 72px;
     font-weight: 700;
     line-height: 1.15;
     color: var(--cdx-white);
   }
   
   .cdx-portfolio-hero__play {
     flex-shrink: 0;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 8px;
     align-self: start;
   }
   
   .cdx-portfolio-hero__play span {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 64px;
     height: 64px;
     border-radius: 50%;
     background-color: color-mix(in srgb, var(--cdx-red) 60%, transparent);
     color: var(--cdx-white);
     font-size: 18px;
     padding-left: 4px;
     transition: transform var(--cdx-transition), background-color var(--cdx-transition);
   }
   
   .cdx-portfolio-hero__play:hover span {
     transform: scale(1.05);
     background-color: #b80824;
   }
   
   .cdx-portfolio-detail {
     background-color: var(--cdx-white);
   }
   
   .cdx-portfolio-content {
     padding: 70px 0 90px;
   }
   
   .cdx-portfolio-content__heading {
     font-size: 32px;
     font-weight: 700;
     color: #151517;
     margin: 36px 0px 25px;
     line-height: 1.3;
   }
   
   .cdx-portfolio-content__heading:first-child {
     margin-top: 0;
   }
   
   .cdx-portfolio-content p {
     font-size: 18px;
     line-height: 1.8;
     color: #000000;
     margin-bottom: 18px;
   }
   
   .cdx-portfolio-content__list {
     margin: 0 0 18px;
     padding: 0;
     list-style: none;
   }
   
   .cdx-portfolio-content__list li {
     position: relative;
     padding-left: 20px;
     font-size: 18px;
     line-height: 1.8;
     color: #000000;
     margin-bottom: 8px;
   }
   
   .cdx-portfolio-content__list li::before {
     content: '';
     position: absolute;
     left: 0;
     top: 12px;
     width: 6px;
     height: 6px;
     border-radius: 50%;
     background-color: var(--cdx-red);
   }
   
   .cdx-portfolio-sidebar {
     display: flex;
     flex-direction: column;
     height: 100%;
   }
   
   .cdx-portfolio-info {
       background-color: #151517;
       padding: 50px 30px;
   }
   
   .cdx-portfolio-info__title {
     font-size: 20px;
     font-weight: 700;
     color: var(--cdx-white);
     margin-bottom: 40px;
   }
   
   .cdx-portfolio-info__list {
     display: flex;
     flex-direction: column;
     gap: 22px;
   }
   
   .cdx-portfolio-info__item {
     display: flex;
     align-items: flex-start;
     gap: 12px;
   }
   
   .cdx-portfolio-info__item i {
     flex-shrink: 0;
     width: 20px;
     margin-top: 4px;
     font-size: 16px;
     color: var(--cdx-white);
     text-align: center;
   }
   
   .cdx-portfolio-info__value {
     display: block;
     font-size: 16px;
     font-weight: 700;
     line-height: 1.4;
     color: var(--cdx-white);
   }
   
   .cdx-portfolio-other {
     background-color: var(--cdx-red);
     padding: 50px 30px;
   }
   
   .cdx-portfolio-other__title {
     font-size: 20px;
     font-weight: 700;
     color: var(--cdx-white);
     margin-bottom:40px;
   }
   
   .cdx-portfolio-other__list {
     display: flex;
     flex-direction: column;
     gap: 22px;
   }
   
   .cdx-portfolio-other__item {
     position: relative;
     display: block;
     padding-left: 20px;
     color: var(--cdx-white);
     transition: opacity var(--cdx-transition);
   }
   
   .cdx-portfolio-other__item::before {
     content: '';
     position: absolute;
     left: 0;
     top: 10px;
     width: 6px;
     height: 6px;
     border-radius: 50%;
     background-color: var(--cdx-white);
   }
   
   .cdx-portfolio-other__item:last-child {
     padding-bottom: 0;
     border-bottom: none;
   }
   
   .cdx-portfolio-other__item:hover {
     opacity: 0.85;
     color: var(--cdx-white);
   }
   
   .cdx-portfolio-other__category {
     display: block;
     font-size: 14px;
     font-weight: 500;
     color: #ffffff95;
     margin-bottom: 6px;
   }
   
   .cdx-portfolio-other__name {
     display: block;
     font-size: 20px;
     font-weight: 600;
     line-height: 1.45;
     color: var(--cdx-white);
   }
   
   /* ==========================================================================
      Contact — cdx-contact
      ========================================================================== */
   
   .cdx-contact-hero {
     position: relative;
     margin-top: 90px;
     min-height: 520px;
     display: flex;
     align-items: flex-end;
     overflow: hidden;
   }
   
   .cdx-contact-hero__bg {
     position: absolute;
     inset: 0;
     z-index: 0;
   }
   
   .cdx-contact-hero__bg img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     object-position: center;
   }
   
   .cdx-contact-hero__overlay {
     position: absolute;
     inset: 0;
     background: linear-gradient(180deg, rgba(17, 17, 17, 0.35) 0%, rgba(17, 17, 17, 0.65) 100%);
     z-index: 1;
   }
   
   .cdx-contact-hero__wave {
     position: absolute;
     left: 0;
     right: 0;
     top: 50%;
     transform: translateY(-50%);
     z-index: 2;
     opacity: 0.9;
     pointer-events: none;
   }
   
   .cdx-contact-hero__wave img {
     width: 100%;
     height: 60px;
     object-fit: cover;
   }
   
   .cdx-contact-hero .container {
     position: relative;
     z-index: 3;
     padding-top: 80px;
     padding-bottom: 70px;
   }
   
   .cdx-contact-hero__content {
     max-width: 560px;
   }
   
   .cdx-contact-hero__title {
     font-size: 72px;
     font-weight: 700;
     line-height: 1.1;
     color: var(--cdx-white);
     margin-bottom: 10px;
   }
   
   .cdx-contact-hero__desc {
     font-size: 18px;
     line-height: 1.6;
     color: rgba(255, 255, 255, 0.9);
     margin-bottom: 20px;
   }
   
   .cdx-contact-hero__btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     padding: 10px 30px;
     font-size: 15px;
     font-weight: 600;
     color: var(--cdx-white);
     background-color: var(--cdx-red);
     border-radius: 8px;
     transition: background-color var(--cdx-transition), transform var(--cdx-transition);
   }
   
   .cdx-contact-hero__btn:hover {
     background-color: var(--cdx-secondary);
     color: var(--cdx-white);
     transform: translateY(-2px);
   }
   
   .cdx-contact-info {
     padding: 70px 0 50px;
     background-color: var(--cdx-white);
   }
   
   .cdx-contact-info__title {
     font-size: 28px;
     font-weight: 700;
     color: var(--cdx-black);
     margin-bottom: 20px;
   }
   
   .cdx-contact-info__text {
     font-size: 15px;
     line-height: 1.8;
     font-weight: 400;
     color: #000000;
     margin-bottom: 16px;
   }
   
   .cdx-contact-info__text:last-child {
     margin-bottom: 0;
   }
   
   .cdx-contact-info__text strong {
     font-weight: 500;
     color: #000000;
   }
   
   .cdx-contact-info__social {
     display: flex;
     flex-direction: column;
     gap: 2px;
   }
   
   .cdx-contact-info__social a {
     font-size: 15px;
     font-weight: 600;
     color: #000000;
     transition: color var(--cdx-transition);
   }
   
   .cdx-contact-info__social a:hover {
     color: var(--cdx-red);
   }
   
   .cdx-contact-cookie--hidden {
     display: none;
   }
   
   .cdx-contact-cookie__inner {
     display: flex;
     align-items: center;
     gap: 12px;
     padding: 14px 20px;
     max-width: 540px;
     margin: 0 auto;
     box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
     border-radius: 8px;
     margin-bottom: 30px;
   }
   
   .cdx-contact-cookie__icon {
     flex-shrink: 0;
     font-size: 16px;
     color: #151517;
   }
   
   .cdx-contact-cookie__text {
     flex: 1;
     font-size: 14px;
     line-height: 1.5;
     color: #151517;
     margin: 0;
   }
   
   .cdx-contact-cookie__text a {
     color: #151517;
     font-weight: 600;
   }
   
   .cdx-contact-cookie__text a:hover {
     color: var(--cdx-red);
   }
   
   .cdx-contact-cookie__close {
     flex-shrink: 0;
     display: flex;
     align-items: center;
     justify-content: center;
     width: 28px;
     height: 28px;
     padding: 0;
     border: none;
     background: transparent;
     color: var(--cdx-gray-500);
     font-size: 14px;
     cursor: pointer;
     transition: color var(--cdx-transition);
   }
   
   .cdx-contact-cookie__close:hover {
     color: var(--cdx-black);
   }
   
   .cdx-contact-form {
     padding: 50px 0 70px;
     background-color: var(--cdx-white);
     border-top: 1px solid #e0e0e0;
   }
   
   .cdx-contact-form__group {
     margin-bottom: 0;
   }
   
   .cdx-contact-form__label {
     display: block;
     font-size: 14px;
     font-weight: 600;
     color: #151517;
     margin-bottom: 10px;
   }
   
   .cdx-contact-form__label span {
     font-weight: 500;
     color: #151517;
   }
   
   .cdx-contact-form__input, .cdx-contact-form__select, .cdx-contact-form__textarea {
     width: 100%;
     padding: 14px 18px;
     font-family: var(--cdx-font);
     font-size: 15px;
     color: var(--cdx-black);
     background-color: #88888916;
     border: 1px solid transparent;
     border-radius: 8px;
     outline: none;
     transition: border-color var(--cdx-transition), background-color var(--cdx-transition);
   }
   
   .cdx-contact-form__input::placeholder,
   .cdx-contact-form__textarea::placeholder {
     font-weight: 500;
     color: #646466;
   }
   
   .cdx-contact-form__input:focus,
   .cdx-contact-form__select:focus,
   .cdx-contact-form__textarea:focus {
     border-color: var(--cdx-red);
     background-color: var(--cdx-white);
   }
   
   .cdx-contact-form__select {
     appearance: none;
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236b6b6b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
     background-repeat: no-repeat;
     background-position: right 18px center;
     padding-right: 44px;
     cursor: pointer;
   }
   
   .cdx-contact-form__textarea {
     min-height: 160px;
     resize: vertical;
   }
   
   .cdx-contact-form__consent {
     display: flex;
     align-items: flex-start;
     gap: 10px;
     margin-top: 28px;
     font-size: 14px;
     line-height: 1.5;
     color: var(--cdx-gray-600);
     cursor: pointer;
   }
   
   .cdx-contact-form__checkbox {
     flex-shrink: 0;
     width: 16px;
     height: 16px;
     margin-top: 3px;
     accent-color: var(--cdx-red);
     cursor: pointer;
   }
   
   .cdx-contact-form__btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     margin-top: 24px;
     padding: 12px 28px;
     font-family: var(--cdx-font);
     font-size: 15px;
     font-weight: 600;
     color: var(--cdx-white);
     background-color: var(--cdx-black);
     border: none;
     border-radius: 8px;
     cursor: pointer;
     transition: background-color var(--cdx-transition), transform var(--cdx-transition);
   }
   
   .cdx-contact-form__btn:hover {
     background-color: var(--cdx-gray-600);
     transform: translateY(-2px);
   }
   
   .cdx-contact-map {
     width: 100%;
     height: 420px;
     background-color: var(--cdx-gray-100);
   }
   
   .cdx-contact-map iframe {
     width: 100%;
     height: 100%;
     border: 0;
     display: block;
   }
   
   /* ==========================================================================
      Blog Listing — cdx-blog-list
      ========================================================================== */
   
   .cdx-blog-list-hero {
     position: relative;
     margin-top: 90px;
     padding: 120px 0;
     background-color: var(--cdx-red);
     overflow: hidden;
   }
   
   .cdx-blog-list-hero__watermark {
     position: absolute;
     inset: 0;
     z-index: 0;
     opacity: 1;
     pointer-events: none;
   }
   
   .cdx-blog-list-hero__watermark img {
     width: 100%;
     height: 100%;
     object-fit: cover;
   }
   
   .cdx-blog-list-hero .container {
     position: relative;
     z-index: 1;
   }
   
   .cdx-blog-list-hero__inner {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 32px;
   }
   
   .cdx-blog-list-hero__content {
     flex: 1;
     min-width: 0;
     max-width: 640px;
   }
   
   .cdx-blog-list-hero__eyebrow {
     display: inline-block;
     font-size: 14px;
     font-weight: 600;
     letter-spacing: 2px;
     text-transform: uppercase;
     color: var(--cdx-white);
     margin-bottom: 10px;
   }
   
   .cdx-blog-list-hero__title {
     font-size: 80px;
     font-weight: 700;
     line-height: 1.15;
     color: var(--cdx-white);
     margin-bottom: 24px;
   }
   
   .cdx-blog-list-hero__link {
     display: inline-flex;
     align-items: center;
     gap: 10px;
     font-size: 16px;
     font-weight: 600;
     color: var(--cdx-white);
     transition: gap var(--cdx-transition), opacity var(--cdx-transition);
   }
   
   .cdx-blog-list-hero__link:hover {
     color: var(--cdx-white);
     gap: 14px;
     opacity: 0.9;
   }
   
   .cdx-blog-list-hero__play {
     position: relative;
     z-index: 1;
     flex-shrink: 0;
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 0;
     border: none;
     background: transparent;
     cursor: pointer;
   }
   
   .cdx-blog-list-hero__play::before {
     content: '';
     position: absolute;
     inset: 0;
     z-index: -1;
     background-color: var(--cdx-black);
     border-radius: 50%;
     width: 120px;
     height: 120px;
     opacity: 0.1;
     transform: translate(-50%, -50%);
     top: 50%;
     left: 50%;
   }
   
   .cdx-blog-list-hero__play span {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 88px;
     height: 88px;
     border-radius: 50%;
     background-color: var(--cdx-black);
     color: var(--cdx-white);
     font-size: 22px;
     padding-left: 4px;
     transition: transform var(--cdx-transition), background-color var(--cdx-transition);
   }
   
   .cdx-blog-list-hero__play:hover span {
     transform: scale(1.05);
     background-color: #2a2a2a;
   }
   
   .cdx-blog-listing {
     padding: 50px 0 80px;
     background-color: var(--cdx-white);
   }

   .cdx-blog-listing-results {
     transition: opacity .2s ease;
   }

   .cdx-blog-listing-results.is-loading {
     opacity: .45;
     pointer-events: none;
   }
   
   .cdx-blog-toolbar {
     margin-bottom: 12px;
   }
   
   .cdx-blog-breadcrumb {
     display: flex;
     align-items: center;
     gap: 8px;
     font-size: 14px;
     color: #646466;
     margin-bottom: 15px;
   }
   
   .cdx-blog-breadcrumb a {
     color: #151517;
     font-weight: 600;
     transition: color var(--cdx-transition);
   }
   
   .cdx-blog-breadcrumb a:hover {
     color: var(--cdx-red);
   }
   
   .cdx-blog-breadcrumb span:last-child {
     color: var(--cdx-gray-600);
   }
   
   .cdx-blog-filters {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 20px;
   }
   
   .cdx-blog-filters__select {
     padding: 15px 40px 15px 16px;
     font-family: var(--cdx-font);
     font-size: 15px;
     font-weight: 700;
     color: var(--cdx-red);
     background-color: var(--cdx-white);
     border: 0;
     box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
     border-radius: 8px;
     appearance: none;
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23D90A2C' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
     background-repeat: no-repeat;
     background-position: right 14px center;
     cursor: pointer;
     outline: none;
     transition: border-color var(--cdx-transition);
   }
   
   .cdx-blog-filters__select:focus {
     border-color: var(--cdx-red);
   }
   
   .cdx-blog-results {
     font-size: 15px;
     color: #151517;
     margin: 50px 0 20px 0;
     font-weight: 500;
   }
   
   .cdx-blog-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 28px;
     margin-bottom: 80px;
   }
   
   .cdx-blog-grid__col {
     display: flex;
     flex-direction: column;
     gap: 40px;
   }
   
   .cdx-blog-card__link {
     display: block;
     color: inherit;
   }
   
   .cdx-blog-card__link:hover .cdx-blog-card__title {
     color: var(--cdx-red);
   }
   
   .cdx-blog-card__media {
     border-radius: 6px;
     overflow: hidden;
     margin-bottom: 25px;
     background-color: var(--cdx-gray-100);
   }
   
   .cdx-blog-card__media img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     object-position: center;
     display: block;
     transition: transform 0.4s ease;
   }
   
   .cdx-blog-card__link:hover .cdx-blog-card__media img {
     transform: scale(1.03);
   }
   
   .cdx-blog-card__media--tall {
     height: 500px;
   }
   
   .cdx-blog-card__media--medium {
     height: 500px;
   }
   
   .cdx-blog-card__media--short {
     height: 360px;
   }
   
   .cdx-blog-card__meta {
     display: block;
     font-size: 14px;
     font-weight: 500;
     color: #151517;
     margin-bottom: 10px;
   }
   
   .cdx-blog-card__title {
     font-size: 24px;
     font-weight: 700;
     line-height: 1.4;
     color: #0c1c28;
     margin-bottom: 10px;
     transition: color var(--cdx-transition);
   }
   
   .cdx-blog-card__tags {
     display: flex;
     flex-wrap: wrap;
     gap: 8px;
   }
   
   .cdx-blog-card__tag {
     display: inline-flex;
     align-items: center;
     padding: 4px 14px;
     font-size: 14px;
     font-weight: 600;
     color: var(--cdx-black);
     background-color: #88888925;
     border-radius: 8px;
   }
   
   .cdx-blog-pagination {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 8px;
   }
   
   .cdx-blog-pagination__item,
   .cdx-blog-pagination__arrow,
   .cdx-blog-pagination__dots {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     min-width: 40px;
     height: 40px;
     font-size: 15px;
     font-weight: 500;
     color: #151517;
     border-radius: 6px;
     transition: background-color var(--cdx-transition), color var(--cdx-transition);
   }
   
   .cdx-blog-pagination__item:hover,
   .cdx-blog-pagination__arrow:hover {
     background-color: var(--cdx-gray-100);
     color: var(--cdx-black);
   }
   
   .cdx-blog-pagination__item--active {
     background-color: #88888929;
     color: var(--cdx-black);
     font-weight: 600;
   }
   
   .cdx-blog-pagination__dots {
     min-width: auto;
     padding: 0 4px;
     color: var(--cdx-gray-500);
   }
   
   .cdx-blog-pagination__arrow {
     font-size: 14px;
   }
   
   /* ==========================================================================
      About — cdx-about
      ========================================================================== */
   
   .cdx-about-hero {
     position: relative;
     margin-top: 90px;
     min-height: 520px;
     display: flex;
     align-items: flex-end;
     overflow: hidden;
   }
   
   .cdx-about-hero__bg {
     position: absolute;
     inset: 0;
     z-index: 0;
   }
   
   .cdx-about-hero__bg img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     object-position: center;
   }
   
   .cdx-about-hero__overlay {
     position: absolute;
     inset: 0;
     background: linear-gradient(180deg, rgba(17, 17, 17, 0.4) 0%, rgba(17, 17, 17, 0.75) 100%);
     z-index: 1;
   }
   
   .cdx-about-hero .container {
     position: relative;
     z-index: 2;
     padding-top: 80px;
     padding-bottom: 80px;
   }
   
   .cdx-about-hero__content {
     max-width: 1020px;
   }
   
   .cdx-about-hero__title {
     font-size: 72px;
     font-weight: 700;
     line-height: 1.15;
     color: var(--cdx-white);
     margin-bottom: 20px;
   }
   
   .cdx-about-hero__desc {
     font-size: 18px;
     line-height: 1.7;
     color: rgba(255, 255, 255, 0.88);
     margin-bottom: 28px;
   }
   
   .cdx-about-hero__btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     padding: 10px 28px;
     font-size: 15px;
     font-weight: 600;
     color: var(--cdx-white);
     background-color: var(--cdx-red);
     border-radius: 8px;
     transition: background-color var(--cdx-transition), transform var(--cdx-transition);
   }
   
   .cdx-about-hero__btn:hover {
     background-color: #b80824;
     color: var(--cdx-white);
     transform: translateY(-2px);
   }
   
   .cdx-about-intro {
     padding: 90px 0;
     background-color: var(--cdx-white);
   }
   
   .cdx-about-intro__eyebrow {
     display: inline-block;
     font-size: 14px;
     font-weight: 600;
     text-transform: uppercase;
     color: #151517;
     margin-bottom: 10px;
   }
   
   .cdx-about-intro__title {
     font-size: 40px;
     font-weight: 700;
     line-height: 1.25;
     color: #151517;
   }
   
   .cdx-about-intro__text {
     font-size: 17px;
     line-height: 1.8;
     color: #151517;
     margin-bottom: 28px;
   }
   
   .cdx-about-intro__list {
     display: flex;
     flex-direction: column;
     gap: 14px;
   }
   
   .cdx-about-intro__list li {
     display: flex;
     align-items: center;
     gap: 12px;
     font-size: 16px;
     font-weight: 600;
     color: #151517;
   }
   
   .cdx-about-intro__list li i {
     flex-shrink: 0;
     width: 20px;
     height: 20px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 10px;
     color: var(--cdx-white);
     background-color: var(--cdx-red);
     border-radius: 50%;
   }
   
   .cdx-about-stats {
     padding: 80px 0;
     background-color: var(--cdx-black);
   }
   
   .cdx-about-stats__grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 32px;
   }
   
   .cdx-about-stats__item {
     text-align: center;
   }
   
   .cdx-about-stats__number {
     display: block;
     font-size: 64px;
     font-weight: 700;
     line-height: 1.1;
     color: var(--cdx-white);
     margin-bottom: 10px;
   }
   
   .cdx-about-stats__label {
     display: block;
     font-size: 17px;
     font-weight: 500;
     color: var(--cdx-white);
   }
   
   .cdx-about-mission {
     padding: 80px 0 40px;
     background-color: var(--cdx-red);
   }
   
   .cdx-about-mission__eyebrow {
     display: inline-block;
     font-size: 14px;
     font-weight: 600;
     text-transform: uppercase;
     color: var(--cdx-white);
     margin-bottom: 10px;
   }
   
   .cdx-about-mission__title {
     font-size: 40px;
     font-weight: 700;
     line-height: 1.25;
     color: var(--cdx-white);
   }
   
   .cdx-about-mission__text {
     font-size: 17px;
     line-height: 1.8;
     color: var(--cdx-white);
     margin-bottom: 25px;
   }
   
   .cdx-about-mission__btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     padding: 10px 28px;
     font-size: 16px;
     font-weight: 700;
     color: var(--cdx-red);
     background-color: var(--cdx-white);
     border-radius: 8px;
     transition: background-color var(--cdx-transition), transform var(--cdx-transition);
   }
   
   .cdx-about-mission__btn:hover {
     background-color: #f5f5f5;
     color: var(--cdx-red);
     transform: translateY(-2px);
   }
   
   .cdx-about-values {
     background-color: var(--cdx-white);
   }
   
   .cdx-about-values__grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
   }
   
   .cdx-about-values__card {
     position: relative;
     min-height: 420px;
     overflow: hidden;
   }
   
   .cdx-about-values__card > img {
     width: 100%;
     height: 100%;
     min-height: 420px;
     object-fit: cover;
     display: block;
   }
   
   .cdx-about-values__overlay {
     position: absolute;
     inset: 0;
     background: linear-gradient(180deg, rgba(16, 16, 20, 0.55) 0%, rgba(16, 16, 20, 0.35) 40%, rgba(16, 16, 20, 0.85) 100%);
     pointer-events: none;
   }
   
   .cdx-about-values__content {
     position: absolute;
     inset: 0;
     z-index: 1;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     padding: 55px 45px 40px;
   }
   
   .cdx-about-values__title {
     font-size: 35px;
     font-weight: 700;
     line-height: 1.3;
     color: var(--cdx-white);
     max-width: 220px;
   }
   
   .cdx-about-values__desc {
     font-size: 14px;
     line-height: 1.7;
     color: var(--cdx-white);
     margin-top: auto;
   }
   
   .cdx-about-focus__media {
     height: 100%;
     min-height: 700px;
   }
   
   .cdx-about-focus__media img {
     width: 100%;
     height: 100%;
     min-width: min-content;
     min-height: 480px;
     object-fit: cover;
     object-position: center;
     display: block;
   }
   
   .cdx-about-focus__panel {
     height: 100%;
     min-height: 480px;
     display: flex;
     flex-direction: column;
     padding: 80px 60px;
     background-color: var(--cdx-red);
   }
   
   .cdx-about-focus__title {
     font-size: 40px;
     font-weight: 700;
     color: var(--cdx-white);
     margin-bottom: 14px;
     max-width: 280px;
   }
   
   .cdx-about-focus__text {
     font-size: 18px;
     line-height: 1.75;
     color: var(--cdx-white);
     margin-bottom: 20px;
     max-width: 380px;
   }
   
   .cdx-about-focus__btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     margin-top: 20px;
     padding: 10px 28px;
     font-size: 17px;
     font-weight: 700;
     color: var(--cdx-red);
     background-color: var(--cdx-white);
     border-radius: 8px;
     align-self: flex-start;
     transition: background-color var(--cdx-transition), transform var(--cdx-transition);
   }
   
   .cdx-about-focus__btn:hover {
     background-color: #f5f5f5;
     color: var(--cdx-red);
     transform: translateY(-2px);
   }
   
   .cdx-about-team {
     background: #151517;
     padding-bottom: 40px;
   }
   
   .cdx-about-team .container {
     width: 100%;
     max-width: 100%;
   }
   
   .cdx-about-team__slider {
     overflow: hidden;
   }
   
   .cdx-about-team__track {
     display: flex;
     transition: transform 0.45s ease;
     will-change: transform;
   }
   
   .cdx-about-team__track .cdx-team-card {
     flex: 0 0 25%;
     max-width: 25%;
     min-width: 0;
   }
   
   .cdx-about-team__dots {
     margin-top: 40px;
     margin-bottom: 10px;
   }
   
   .cdx-about-team__dots .cdx-team-hero__dot {
     border: none;
     padding: 0;
     cursor: pointer;
     transition: background-color var(--cdx-transition), transform var(--cdx-transition);
   }
   
   .cdx-about-team__dots .cdx-team-hero__dot:hover {
     background-color: rgba(255, 255, 255, 0.6);
   }
   
   .cdx-about-cta {
     background-color: var(--cdx-black);
   }
   
   .cdx-about-cta__eyebrow {
     color: var(--cdx-red) !important;
     letter-spacing: 2px;
   }
   
   /* ==========================================================================
      Get Quote Page — cdx-get-quote
      ========================================================================== */
   
   .cdx-get-quote-page {
     background-color: #f3f3f3;
     background-image: repeating-linear-gradient(
       90deg,
       transparent,
       transparent 79px,
       rgba(0, 0, 0, 0.04) 79px,
       rgba(0, 0, 0, 0.04) 80px
     );
   }
   
   .cdx-get-quote {
     margin-top: 90px;
     padding: 60px 0 80px;
   }
   
   .cdx-get-quote__card {
     position: relative;
     max-width: 920px;
     margin: 0 auto;
     padding: 48px 60px 52px;
     background-color: #18171a;
     border-radius: 20px;
     box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
   }
   
   .cdx-get-quote__close {
     position: absolute;
     top: 24px;
     right: 24px;
     display: flex;
     align-items: center;
     justify-content: center;
     width: 36px;
     height: 36px;
     color: var(--cdx-white);
     font-size: 18px;
     transition: opacity var(--cdx-transition);
   }
   
   .cdx-get-quote__close:hover {
     opacity: 1;
     color: var(--cdx-white);
   }
   
   .cdx-get-quote__header {
     margin-bottom: 36px;
     padding-right: 40px;
   }
   
   .cdx-get-quote__eyebrow {
     display: block;
     font-size: 16px;
     font-weight: 500;
     color: var(--cdx-white);
     margin-bottom: 12px;
   }
   
   .cdx-get-quote__title {
     font-size: 72px;
     font-weight: 700;
     line-height: 1.2;
     color: var(--cdx-white);
     margin-bottom: 30px;
     max-width: 560px;
   }
   
   .cdx-get-quote__features {
     display: flex;
     flex-wrap: wrap;
     gap: 20px 28px;
   }
   
   .cdx-get-quote__features li {
     display: flex;
     align-items: center;
     gap: 10px;
     font-size: 16px;
     font-weight: 600;
     color: var(--cdx-white);
   }
   
   .cdx-get-quote__features li i {
     font-size: 14px;
     color: var(--cdx-red);
   }
   
   .cdx-get-quote__section {
     margin-bottom: 28px;
   }
   
   .cdx-get-quote__label {
     display: block;
     font-size: 17px;
     font-weight: 600;
     color: var(--cdx-white);
     margin-bottom: 12px;
   }
   
   .cdx-get-quote__pills {
     display: flex;
     flex-wrap: wrap;
     gap: 10px;
   }
   
   .cdx-get-quote__pills--build {
     padding: 23px 27px;
     background-color: var(--cdx-red);
     border-radius: 20px;
   }
   
   .cdx-get-quote__pill {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     padding: 6px 16px;
     font-family: var(--cdx-font);
     font-size: 14px;
     font-weight: 700;
     border: none;
     border-radius: 50px;
     cursor: pointer;
     transition: background-color var(--cdx-transition), color var(--cdx-transition), transform var(--cdx-transition);
   }
   
   .cdx-get-quote__pill--build {
     color: var(--cdx-red);
     background-color: var(--cdx-white);
   }
   
   .cdx-get-quote__pill--build.cdx-get-quote__pill--active,
   .cdx-get-quote__pill--build:hover {
     background-color: var(--cdx-secondary);
     color: var(--cdx-white);
   }
   
   .cdx-get-quote__pill--budget {
     color: var(--cdx-red);
     background-color: var(--cdx-white);
   }
   
   .cdx-get-quote__pill--budget.cdx-get-quote__pill--active {
     padding: 10px 24px;
     color: var(--cdx-white);
     background-color: var(--cdx-red);
   }
   
   .cdx-get-quote__pill--budget:hover {
     transform: translateY(-1px);
   }
   
   .cdx-get-quote__group {
     margin-bottom: 0;
   }
   
   .cdx-get-quote__group .cdx-get-quote__label {
     font-size: 16px;
     margin-bottom: 10px;
   }
   
   .cdx-get-quote__input,
   .cdx-get-quote__textarea {
     width: 100%;
     padding: 16px 18px;
     font-family: var(--cdx-font);
     font-size: 15px;
     color: var(--cdx-white);
     background-color: #FFFFFF33;
     border: 1px solid var(--cdx-white);
     border-radius: 8px;
     outline: none;
     transition: border-color var(--cdx-transition), background-color var(--cdx-transition);
   }
   
   .cdx-get-quote__input::placeholder,
   .cdx-get-quote__textarea::placeholder {
     color: rgba(255, 255, 255, 0.7);
   }
   
   .cdx-get-quote__input:focus,
   .cdx-get-quote__textarea:focus {
     border-color: rgba(255, 255, 255, 0.45);
     background-color: rgba(255, 255, 255, 0.1);
   }
   
   .cdx-get-quote__textarea {
     min-height: 140px;
     resize: vertical;
   }
   
   .cdx-get-quote__form .row {
     margin-bottom: 28px;
   }
   
   .cdx-get-quote__submit {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 10px;
     width: 100%;
     padding: 12px 28px;
     font-family: var(--cdx-font);
     font-size: 16px;
     font-weight: 700;
     color: var(--cdx-white);
     background-color: var(--cdx-red);
     border: none;
     border-radius: 10px;
     cursor: pointer;
     transition: background-color var(--cdx-transition), transform var(--cdx-transition);
   }
   
   .cdx-get-quote__submit:hover {
     background-color: var(--cdx-secondary);
     transform: translateY(-2px);
   }
   
   .cdx-get-quote-page .cdx-cta {
     margin-top: 0;
   }
   
   /* ==========================================================================
      Services — cdx-svc
      ========================================================================== */
   
   .cdx-svc-hero {
     position: relative;
     margin-top: 90px;
     min-height: 820px;
     display: flex;
     align-items: center;
     padding: 100px 0 30px;
     background-color: var(--cdx-red);
     overflow: hidden;
   }
   
   .cdx-svc-hero .container {
     position: relative;
     z-index: 2;
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     min-height: 360px;
   }
   
   .cdx-svc-hero__side {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     width: auto;
     font-size: 12px;
     font-weight: 500;
     letter-spacing: 2px;
     text-transform: uppercase;
     color: var(--cdx-white);
     writing-mode: vertical-rl;
     z-index: 1;
     height: max-content;
   }
   
   .cdx-svc-hero__side--left {
     left: 40px;
     transform: translateY(-50%) rotate(180deg);
   }
   
   .cdx-svc-hero__side--right {
     right: 80px;
   }
   
   .cdx-svc-hero__content {
     width: 100%;
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     text-align: left;
   }

   .cdx-svc-hero__item {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     justify-content: flex-end;
     padding: 12px 0;
     min-width: max-content;
   }

   .cdx-svc-hero__num {
     flex-shrink: 0;
     font-size: 14px;
     font-weight: 700;
     color: rgba(255, 255, 255);
     min-width: 28px;
   }
   
   .cdx-svc-hero__line {
     font-size: clamp(28px, 6.5vw, 128px);
     font-weight: 700;
     line-height: 1.05;
     color: var(--cdx-white);
     letter-spacing: -1px;
     margin: 0;
   }

   .cdx-svc-hero__line a {
     color: inherit;
     text-decoration: none;
   }

   .cdx-svc-hero__line a:hover {
     opacity: 0.85;
   }
   
   .cdx-svc-hero__line--outline {
     color: transparent;
     -webkit-text-stroke: 2px var(--cdx-white);
     text-stroke: 2px var(--cdx-white);
   }
   
   .cdx-svc-hero__btn {
     display: flex;
     align-items: center;
     gap: 12px;
     padding: 14px 20px;
     max-width: 540px;
     margin: 0 auto;
     box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
     border-radius: 8px;
     margin-top: 40px;
     background-color: var(--cdx-white);
   }
   
   .cdx-svc-hero-btn__icon {
     flex-shrink: 0;
     font-size: 16px;
     color: #151517;
   }
   
   .cdx-svc-hero-btn__text {
     flex: 1;
     font-size: 14px;
     line-height: 1.5;
     color: #151517;
     margin: 0;
   }
   
   .cdx-svc-hero-btn__text a {
     color: #151517;
     font-weight: 600;
   }
   
   .cdx-svc-hero-btn__text a:hover {
     color: var(--cdx-red);
   }
   
   .cdx-svc-hero-btn__close {
     flex-shrink: 0;
     display: flex;
     align-items: center;
     justify-content: center;
     width: 28px;
     height: 28px;
     padding: 0;
     border: none;
     background: transparent;
     color: var(--cdx-gray-500);
     font-size: 14px;
     cursor: pointer;
     transition: color var(--cdx-transition);
   }
   
   .cdx-svc-hero-btn__close:hover {
     color: var(--cdx-black);
   }
   
   .cdx-svc-intro {
     padding: 100px 0;
     background-color: var(--cdx-white);
   }
   
   .cdx-svc-intro__eyebrow {
     display: inline-block;
     font-size: 16px;
     font-weight: 700;
     text-transform: uppercase;
     color: var(--cdx-black);
     margin-bottom: 10px;
   }
   
   .cdx-svc-intro__title {
     font-size: clamp(26px, 5vw, 72px);
     font-weight: 700;
     line-height: 1;
     color: var(--cdx-black);
     max-width: 560px;
     margin-bottom: 20px;
   }
   
   .cdx-svc-intro__btn {
     color: var(--cdx-black);
     font-weight: 700;
     font-size: 16px;
     line-height: 1.1;
   }
   
   .cdx-svc-intro__visual {
     margin-bottom: 20px;
   }
   
   .cdx-svc-intro__visual img {
     width: 100%;
     max-height: 400px;
     object-fit: contain;
     border-radius: var(--cdx-radius-lg);
   }
   
   .cdx-svc-intro__text {
     font-size: 15px;
     line-height: 1.7;
     color: var(--cdx-gray-600);
   }
   
   .cdx-svc-overview {
     padding: 80px 0 0;
     background-color: var(--cdx-red);
   }
   
   .cdx-svc-overview__media img {
     width: 100%;
     max-height: 320px;
     object-fit: cover;
     object-position: top center;
     display: block;
   }
   
   .cdx-svc-overview__eyebrow {
     font-size: 16px;
     font-weight: 500;
     text-transform: uppercase;
     color: var(--cdx-white);
     margin-bottom: 20px;
   }
   
   .cdx-svc-overview__title {
     font-size: clamp(22px, 3vw, 34px);
     font-weight: 700;
     line-height: 1.35;
     color: var(--cdx-white);
     margin-bottom: 50px;
   }
   
   .cdx-svc-overview__grid {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 60px 50px;
   }
   
   .cdx-svc-overview__item h4 {
     font-size: 14px;
     font-weight: 500;
     color: var(--cdx-white);
     margin-bottom: 20px;
     border-bottom: 1px solid rgba(255, 255, 255, 0.5);
     padding-bottom: 15px;
     text-transform: uppercase;
   }
   
   .cdx-svc-overview__item h3 {
     font-size: 28px;
     font-weight: 700;
     color: var(--cdx-white);
     margin-bottom: 10px;
   }
   
   .cdx-svc-overview__item p {
     font-size: 16px;
     line-height: 1.7;
     color: var(--cdx-white);
   }
   
   .cdx-svc-grid {
     padding: 80px 0 90px;
     background-color: var(--cdx-black);
   }
   
   .cdx-svc-grid__head {
     margin-bottom: 48px;
   }
   
   .cdx-svc-grid__eyebrow {
     display: inline-block;
     font-size: 14px;
     font-weight: 500;
     text-transform: uppercase;
     color: var(--cdx-white);
     margin-bottom: 40px;
   }
   
   .cdx-svc-grid__line {
     display: block;
     width: 100%;
     height: 1px;
     background-color: rgba(255, 255, 255, 0.5);
     margin-bottom: 20px;
   }
   
   .cdx-svc-grid__title {
     font-size: clamp(24px, 3.5vw, 44px);
     font-weight: 700;
     line-height: 1.25;
     color: var(--cdx-white);
   }
   
   .cdx-svc-grid__cards {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 30px;
   }
   
   .cdx-svc-grid__card {
     padding: 28px 24px;
     background-color: var(--cdx-white);
     border-radius: var(--cdx-radius-lg);
     transition: transform var(--cdx-transition), box-shadow var(--cdx-transition);
   }
   
   .cdx-svc-grid__card:hover {
     transform: translateY(-4px);
     box-shadow: var(--cdx-shadow-lg);
   }
   
   .cdx-svc-grid__icon {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 60px;
     height: 60px;
     background-color: var(--cdx-red);
     border-radius: 10px;
     margin-bottom: 30px;
   }
   
   .cdx-svc-grid__icon img {
     max-width: 44px;
   }

   .cdx-svc-grid__icon i {
     font-size: 28px;
     color: var(--cdx-white);
     line-height: 1;
   }
   
   .cdx-svc-grid__card h3 {
     font-size: 24px;
     font-weight: 700;
     line-height: 1.35;
     color: var(--cdx-black);
   }
   
   .cdx-svc-process {
     background: linear-gradient(180deg, var(--cdx-red) 42%, var(--cdx-white) 42%);
   }
   
   .cdx-svc-process__wrap {
     display: grid;
     grid-template-columns: 1fr 1fr;
     min-height: 520px;
   }
   
   .cdx-svc-process__left {
     display: flex;
     flex-direction: column;
   }
   
   .cdx-svc-process__red {
     padding: 60px 48px 40px;
     background-color: var(--cdx-red);
   }
   
   .cdx-svc-process__eyebrow {
     font-size: 14px;
     font-weight: 500;
     text-transform: uppercase;
     color: var(--cdx-white);
     display: inline-block;
   }
   
   .cdx-svc-process__line {
     display: block;
     width: 100%;
     height: 1px;
     background-color: rgba(255, 255, 255, 0.5);
     margin-bottom: 15px;
     margin-top: 10px;
   }
   
   .cdx-svc-process__headline {
     font-size: clamp(26px, 4.5vw, 56px);
     font-weight: 700;
     line-height: 1.3;
     color: var(--cdx-white);
     max-width: 580px;
   }
   
   .cdx-svc-process__media {
     flex: 1;
   }
   
   .cdx-svc-process__media img {
     width: 100%;
     height: 100%;
     min-width: min-content;
     min-height: 320px;
     max-height: 480px;
     object-fit: cover;
     display: block;
   }
   
   .cdx-svc-process__right {
     display: flex;
     flex-direction: column;
     justify-content: center;
     padding: 60px;
     background-color: var(--cdx-white);
   }
   
   .cdx-svc-process__play {
     display: inline-flex;
     align-items: center;
     gap: 20px;
     padding: 0;
     margin-bottom: 40px;
     border: none;
     background: transparent;
     font-family: var(--cdx-font);
     font-size: 18px;
     font-weight: 700;
     color: var(--cdx-black);
     cursor: pointer;
   }
   
   .cdx-svc-process__play span {
     position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
     width: 56px;
     height: 56px;
     border-radius: 50%;
     background-color: var(--cdx-black);
     color: var(--cdx-white);
     font-size: 14px;
     padding-left: 3px;
     z-index: 2;
   }
   
   
   
   .cdx-svc-process__play span::before {
     content: '';
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     width: 76px;
     height: 76px;
     border-radius: 50%;
     background-color: #00000020;
     z-index: 1;
   }
   
   .cdx-svc-process__title {
     font-size: clamp(22px, 3vw, 40px);
     font-weight: 700;
     line-height: 1.05;
     color: var(--cdx-black);
     margin-bottom: 36px;
     max-width: 520px;
   }
   
   .cdx-svc-process__accordion {
     display: flex;
     flex-direction: column;
     gap: 28px;
     max-width: 560px;
   }
   
   .cdx-svc-process__acc-trigger {
     display: flex;
     align-items: flex-start;
     gap: 14px;
     width: 100%;
     padding: 0;
     border: none;
     background: transparent;
     text-align: left;
     cursor: pointer;
     font-family: var(--cdx-font);
     color: #101014;
   }
   
   .cdx-svc-process__acc-icon {
     flex-shrink: 0;
     width: 18px;
     font-size: 20px;
     font-weight: 400;
     line-height: 1.5;
     color: #101014;
   }
   
   .cdx-svc-process__acc-question {
     font-size: 18px;
     font-weight: 700;
     line-height: 1.45;
     color: #101014;
   }
   
   .cdx-svc-process__acc-answer {
     display: none;
     padding: 5px 0 0;
   }
   
   .cdx-svc-process__acc-item--open .cdx-svc-process__acc-answer {
     display: block;
   }
   
   .cdx-svc-process__acc-answer p {
     font-size: 16px;
     line-height: 1.75;
     color: #101014;
     margin: 0;
   }
   
   .cdx-svc-faq {
     padding: 90px 0;
     background-color: var(--cdx-white);
   }
   
   .cdx-svc-faq__title {
     font-size: clamp(24px, 3.2vw, 36px);
     font-weight: 700;
     line-height: 1.2;
     color: var(--cdx-black);
     max-width: 480px;
   }
   
   .cdx-svc-faq__list {
     display: flex;
     flex-direction: column;
   }
   
   .cdx-svc-faq__item {
     border-bottom: 1px solid var(--cdx-gray-200);
   }
   
   .cdx-svc-faq__item--open {
     border-bottom-color: transparent;
     margin-bottom: 4px;
   }
   
   .cdx-svc-faq__trigger {
     display: flex;
     align-items: center;
     gap: 10px;
     width: 100%;
     padding: 22px 20px;
     border: none;
     background: transparent;
     text-align: left;
     cursor: pointer;
     font-family: var(--cdx-font);
     color: var(--cdx-black);
   }
   
   .cdx-svc-faq__icon {
     flex-shrink: 0;
     font-size: 28px;
     font-weight: 400;
     line-height: 1.4;
     color: #3b82f6;
   }
   
   .cdx-svc-faq__question {
     font-size: 28px;
     font-weight: 600;
     line-height: 1.45;
   }
   
   .cdx-svc-faq__answer {
     display: none;
     padding: 0 20px 22px 50px;
   }
   
   .cdx-svc-faq__item--open .cdx-svc-faq__answer {
     display: block;
   }
   
   .cdx-svc-faq__answer p {
     font-size: 16px;
     line-height: 1.3;
     color: #101014;
   }
   
   .cdx-svc-cta .cdx-cta__inner {
     border-bottom: none;
     padding-bottom: 0;
     margin-bottom: 24px;
   }
   
   .cdx-svc-cta .cdx-cta__bottom p {
     max-width: 100%;
   }

   /* ==========================================================================
      Service Detail — cdx-svc-detail
      ========================================================================== */

   .cdx-svc-detail-hero {
     position: relative;
     margin-top: 90px;
     min-height: 420px;
     display: flex;
     align-items: flex-end;
     overflow: hidden;
   }

   .cdx-svc-detail-hero__bg {
     position: absolute;
     inset: 0;
     z-index: 0;
   }

   .cdx-svc-detail-hero__bg img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     object-position: center;
   }

   .cdx-svc-detail-hero__overlay {
     position: absolute;
     inset: 0;
     background: linear-gradient(0deg, color-mix(in srgb, var(--cdx-red) 95%, transparent) 0%, color-mix(in srgb, var(--cdx-red) 65%, transparent) 40%, color-mix(in srgb, var(--cdx-red) 20%, transparent) 100%);
     z-index: 1;
   }

   .cdx-svc-detail-hero .container {
     position: relative;
     z-index: 2;
     padding-top: 80px;
     padding-bottom: 70px;
   }

   .cdx-svc-detail-hero__inner {
     display: flex;
     align-items: flex-end;
     justify-content: space-between;
     gap: 24px;
   }

   .cdx-svc-detail-hero__content {
     flex: 1;
     min-width: 0;
   }

   .cdx-svc-detail-hero__meta {
     display: inline-block;
     font-size: 14px;
     font-weight: 500;
     color: rgba(255, 255, 255, 0.85);
     margin-bottom: 10px;
   }

   .cdx-svc-detail-hero__title {
     max-width: 760px;
     font-size: clamp(36px, 5vw, 64px);
     font-weight: 700;
     line-height: 1.15;
     color: var(--cdx-white);
   }

   .cdx-svc-detail-hero__icon {
     flex-shrink: 0;
     width: 88px;
     height: 88px;
     border-radius: 20px;
     background: rgba(255, 255, 255, 0.12);
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 16px;
   }

   .cdx-svc-detail-hero__icon img {
     width: 100%;
     height: 100%;
     object-fit: contain;
   }

   .cdx-svc-detail {
     background-color: var(--cdx-white);
   }

   .cdx-svc-detail__content {
    padding: 60px 0;
   }

   .cdx-svc-detail__sidebar {
      display: flex;
      flex-direction: column;
      height: 100%;
   }

   .cdx-svc-detail__featured img {
     width: 100%;
     height: 100%;
     max-height: 350px;
     object-fit: cover;
     object-position: top center;
   }

   .cdx-svc-detail__faq-title {
     font-size: 28px;
     font-weight: 700;
     margin-bottom: 24px;
     color: #101014;
   }

   .cdx-svc-hero__side a {
     color: inherit;
     text-decoration: none;
   }

   .cdx-svc-hero__side a:hover {
     color: var(--cdx-red);
   }
   
   /* ==========================================================================
      Portfolio Page — cdx-port
      ========================================================================== */
   
   .cdx-port-banner {
     position: relative;
     margin-top: 90px;
     padding-bottom: 80px;
     overflow: visible;
   }
   
   .cdx-port-banner__bg {
     position: absolute;
     inset: 0;
     bottom: 0;
     z-index: 0;
   }
   
   .cdx-port-banner__bg img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     object-position: center;
   }
   
   .cdx-port-banner__overlay {
     position: absolute;
     inset: 0;
     bottom: 0;
     background: linear-gradient(180deg, rgba(17, 17, 17, 0.35) 0%, rgba(17, 17, 17, 0.7) 100%);
     z-index: 1;
   }
   
   .cdx-port-banner .container {
     position: relative;
     z-index: 2;
     padding-top: 160px;
     padding-bottom: 100px;
   }
   
   .cdx-port-banner__eyebrow {
     display: inline-block;
     font-size: 14px;
     font-weight: 500;
     text-transform: uppercase;
     color: rgba(255, 255, 255, 0.9);
     margin-bottom: 10px;
   }
   
   .cdx-port-banner__title {
     max-width: 720px;
     font-size: 80px;
     font-weight: 700;
     line-height: 1.02;
     color: var(--cdx-white);
     margin-bottom: 24px;
   }
   
   .cdx-port-banner__link {
     display: inline-flex;
     align-items: center;
     gap: 10px;
     font-size: 14px;
     font-weight: 600;
     letter-spacing: 2px;
     text-transform: uppercase;
     color: var(--cdx-white);
     transition: gap var(--cdx-transition), opacity var(--cdx-transition);
   }
   
   .cdx-port-banner__link:hover {
     color: var(--cdx-white);
     gap: 14px;
     opacity: 0.9;
   }
   
   .cdx-port-banner__boxes {
     position: absolute;
     right: 0;
     bottom: 0;
     z-index: 3;
   }
   
   .cdx-port-banner__box {
     min-height: 120px;
     padding: 40px;
     height: 100%;
   }
   
   .cdx-port-banner__box h4 {
     font-size: 14px;
     font-weight: 500;
     line-height: 1.05;
     color: #ffffff90;
     margin: 0;
     max-width: 250px;
     margin-bottom: 20px;
   }
   
   .cdx-port-banner__box p {
     font-size: 26px;
     font-weight: 700;
     line-height: 1.1;
     color: var(--cdx-white);
     margin: 0;
     max-width: 250px;
   }
   
   .cdx-port-banner__box--dark {
     background-color: #151517;
   }
   
   .cdx-port-banner__box--darker {
     background-color: #151517;
   }
   
   .cdx-port-banner__box--red {
     background-color: var(--cdx-red);
   }

   .cdx-portfolio-content__featured img, .cdx-blog-article__featured img {
    width: 100%;
    height: 100%;
    max-height: 350px;
    object-fit: cover;
    object-position: top center;
   }
   
   .cdx-port-about {
     position: relative;
     background-color: #111013;
     z-index: 2;
   }
   
   .cdx-port-about::before {
     content: '';
     position: absolute;
     right: 0;
     bottom: 0;
     top: 0;
     width: 50%;
     height: 100%;
     background-color: #0c1c28;
     z-index: -1;
   }
   .cdx-port-about__grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     min-height: 520px;
   }
   
   .cdx-port-about__left,
   .cdx-port-about__right {
     display: flex;
     flex-direction: column;
     justify-content: center;
     padding: 100px 64px;
   }
   .cdx-port-about__left {
     padding: 100px 0;
   }
   
   .cdx-port-about__eyebrow {
     display: inline-block;
     font-size: 14px;
     font-weight: 500;
     text-transform: uppercase;
     color: #ffffff;
     margin-bottom: 10px;
   }
   
   .cdx-port-about__title {
     font-size: 48px;
     font-weight: 700;
     line-height: 1.02;
     color: var(--cdx-white);
     margin-bottom: 24px;
     max-width: 540px;
   }
   
   .cdx-port-about__text {
     font-size: 16px;
     line-height: 1.8;
     color: rgba(255, 255, 255, 0.9);
     max-width: 480px;
     margin: 0;
   }
   
   .cdx-port-about__testimonial {
     display: flex;
     flex-direction: column;
     height: 100%;
     min-height: 320px;
   }
   
   .cdx-port-about__tag {
     display: inline-flex;
     align-items: center;
     align-self: flex-start;
     padding: 6px 16px;
     font-size: 14px;
     font-weight: 400;
     color: #ffffff;
     border-radius: 8px;
     background-color: rgba(255, 255, 255, 0.08);
     margin-bottom: 32px;
   }
   
   .cdx-port-about__quote {
     font-size: 18px;
     font-weight: 500;
     line-height: 1.65;
     color: var(--cdx-white);
     margin: 0 0 auto;
     max-width: 520px;
   }
   
   .cdx-port-about__author {
     margin-top: 20px;
     margin-bottom: 48px;
   }
   
   .cdx-port-about__author strong {
     display: block;
     font-size: 16px;
     font-weight: 700;
     color: var(--cdx-white);
     margin-bottom: 6px;
   }
   
   .cdx-port-about__author span {
     display: block;
     font-size: 14px;
     color: rgba(255, 255, 255, 0.85);
   }
   
   .cdx-port-about__nav {
     display: flex;
     align-items: center;
     justify-content: space-between;
     margin-top: auto;
   }
   
   .cdx-port-about__pager {
     font-size: 14px;
     font-weight: 500;
     color: rgba(255, 255, 255, 0.7);
     letter-spacing: 1px;
   }
   
   .cdx-port-about__pager em {
     font-style: normal;
     margin: 0 6px;
     color: rgba(255, 255, 255, 0.4);
   }
   
   .cdx-port-about__arrows {
     display: flex;
     align-items: center;
     gap: 50px;
   }
   
   .cdx-port-about__arrow-btn {
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 0;
     border: none;
     background: transparent;
     color: rgba(255, 255, 255, 0.8);
     font-size: 16px;
     cursor: pointer;
     transition: color var(--cdx-transition);
   }
   
   .cdx-port-about__arrow-btn:hover {
     color: var(--cdx-white);
   }

   .cdx-port-about__slide {
     display: none;
   }

   .cdx-port-about__slide.is-active {
     display: block;
   }

   .cdx-port-showcase {
     background-color: #111013;
   }
   
   .cdx-port-showcase__grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     min-height: 480px;
   }
   
   .cdx-port-showcase__media {
     position: relative;
     overflow: hidden;
     min-height: 480px;
   }
   
   .cdx-port-showcase__media img {
     width: 100%;
     height: 100%;
     min-height: 480px;
     object-fit: cover;
     display: block;
   }
   
   .cdx-port-showcase__play {
     position: absolute;
     inset: 0;
     display: flex;
     align-items: center;
     justify-content: center;
     border: none;
     background: rgba(0, 0, 0, 0.2);
     cursor: pointer;
   }
   
   .cdx-port-showcase__play span {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 72px;
     height: 72px;
     border-radius: 50%;
     background-color: var(--cdx-black);
     color: var(--cdx-white);
     font-size: 20px;
     padding-left: 4px;
     box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
   }
   
   .cdx-port-showcase__content {
     display: flex;
     flex-direction: column;
     justify-content: center;
     padding: 80px 64px;
     background-color: var(--cdx-white);
   }
   
   .cdx-port-showcase__eyebrow {
     display: inline-block;
     font-size: 14px;
     font-weight: 600;
     text-transform: uppercase;
     color: #0c1c28;
     margin-bottom: 10px;
   }
   
   .cdx-port-showcase__title {
     font-size: 40px;
     font-weight: 700;
     line-height: 1.05;
     color: var(--cdx-black);
     margin-bottom: 24px;
     max-width: 420px;
   }
   
   .cdx-port-showcase__text {
     font-size: 16px;
     line-height: 1.8;
     color: #151517;
     max-width: 480px;
     font-weight: 600;
     margin: 0;
   }
   
   .cdx-port-projects__head {
     padding: 70px 0 120px;
     background-color: var(--cdx-red);
     position: relative;
     overflow: hidden;
     z-index: 2;
   }

   .cdx-port-projects__head-img {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
   }
   
   .cdx-port-projects__head::before {
     content: '';
     position: absolute;
     right: 5%;
     top: 20%;
     width: 200px;
     height: 200px;
     border: 2px solid rgba(255, 255, 255, 0.08);
     transform: rotate(15deg);
     pointer-events: none;
   }
   
   .cdx-port-projects__head::after {
     content: '';
     position: absolute;
     right: 15%;
     bottom: 10%;
     width: 80px;
     height: 80px;
     background-color: rgba(255, 255, 255, 0.05);
     pointer-events: none;
   }
   
   .cdx-port-projects__title {
     font-size: 40px;
     font-weight: 700;
     line-height: 1.2;
     color: var(--cdx-white);
   }
   
   .cdx-port-projects__desc {
     font-size: 16px;
     line-height: 1.7;
     color: var(--cdx-white);
     margin: 0;
   }
   
   .cdx-port-projects__body {
     position: relative;
     z-index: 2;
     padding-bottom: 120px;
     margin-top: -60px;
   }
   
   .cdx-port-projects__grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 30px;
   }
   
   .cdx-port-card {
     position: relative;
     display: block;
     overflow: hidden;
     min-height: 460px;
     max-height: 460px;
     color: var(--cdx-white);
     border-radius: 12px;
   }
   
   .cdx-port-card--wide {
     grid-column: span 2;
   }
   
   .cdx-port-card img {
     width: 100%;
     height: 100%;
     min-height: 460px;
     object-fit: cover;
     border-radius: 12px;
     display: block;
     filter: grayscale(100%);
     transition: filter 0.4s ease, transform 0.4s ease;
   }
   
   .cdx-port-card:hover img {
     filter: grayscale(60%);
     transform: scale(1.03);
   }
   
   .cdx-port-card::after {
     content: '';
     position: absolute;
     inset: 0;
     background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.55) 100%);
     pointer-events: none;
   }
   
   .cdx-port-card__play {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     z-index: 2;
     display: flex;
     align-items: center;
     justify-content: center;
     width: 72px;
     height: 72px;
     border-radius: 50%;
     background-color: rgba(255, 255, 255, 0.3);
     color: var(--cdx-white);
     font-size: 20px;
     padding-left: 3px;
     transition: transform var(--cdx-transition), background-color var(--cdx-transition);
   }
   
   .cdx-port-card:hover .cdx-port-card__play {
     transform: translate(-50%, -50%) scale(1.08);
     background-color: var(--cdx-red);
     color: var(--cdx-white);
   }
   
   .cdx-port-card__info {
     position: absolute;
     left: 28px;
     right: 28px;
     bottom: 28px;
     z-index: 2;
   }
   
   .cdx-port-card__name {
     font-size: 26px;
     font-weight: 700;
     line-height: 1.35;
     color: var(--cdx-white);
     margin-bottom: 6px;
   }
   
   .cdx-port-card__cat {
     display: block;
     font-size: 16px;
     font-weight: 500;
     color: rgba(255, 255, 255, 0.85);
   }
   
   .cdx-port-cta .cdx-cta__inner {
     border-bottom: none;
     padding-bottom: 0;
     margin-bottom: 24px;
   }
   
   .cdx-port-cta .cdx-cta__bottom p {
     max-width: 100%;
   }
   
   /* ==========================================================================
      Careers Page
      ========================================================================== */
   
   .cdx-career-hero {
       margin-top: 90px;
   }
   .cdx-career-hero__grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     min-height: 800px;
   }
   
   .cdx-career-hero__media {
     position: relative;
     overflow: hidden;
     min-height: 800px;
   }
   
   .cdx-career-hero__media::before {
     content: '';
     position: absolute;
     right: 0;
     bottom: 0;
     width: 100%;
     height: 100%;
     background: linear-gradient(135deg, color-mix(in srgb, var(--cdx-red) 0%, transparent) 0%, color-mix(in srgb, var(--cdx-red) 50%, transparent) 50%, var(--cdx-red) 100%);
     pointer-events: none;
   }
   
   .cdx-career-hero__media img {
     width: 100%;
     height: 100%;
     min-height: 560px;
     max-height: 800px;
     object-fit: cover;
     object-position: center top;
     display: block;
   }
   
   .cdx-career-hero__play {
     position: absolute;
     top: 50%;
     right: 50%;
     transform: translate(-50%, 50%);
     z-index: 2;
     display: flex;
     align-items: center;
     justify-content: center;
     width: 72px;
     height: 72px;
     padding: 0;
     border: none;
     border-radius: 50%;
     background-color: var(--cdx-black);
     color: var(--cdx-white);
     font-size: 20px;
     cursor: pointer;
     box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
     transition: transform var(--cdx-transition), background-color var(--cdx-transition);
   }
   
   .cdx-career-hero__play span {
     display: flex;
     align-items: center;
     justify-content: center;
     padding-left: 4px;
   }
   
   .cdx-career-hero__play:hover {
     transform: translate(-50%, 50%) scale(1.06);
     background-color: var(--cdx-red);
   }
   
   .cdx-career-hero__panel {
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     padding: 80px 72px;
     background-color: #101014;
   }
   
   .cdx-career-hero__intro {
     font-size: 15px;
     line-height: 1.8;
     color: var(--cdx-white);
     max-width: 520px;
     margin-bottom: 48px;
   }
   
   .cdx-career-hero__eyebrow {
     display: inline-block;
     font-size: 14px;
     font-weight: 500;
     text-transform: uppercase;
     color: var(--cdx-white);
     margin-bottom: 10px;
   }
   
   .cdx-career-hero__title {
     font-size: 72px;
     font-weight: 700;
     line-height: 1.2;
     color: var(--cdx-white);
     margin-bottom: 24px;
     max-width: 560px;
   }
   
   .cdx-career-hero__link {
     display: inline-flex;
     align-items: center;
     gap: 12px;
     font-size: 18px;
     font-weight: 600;
     color: var(--cdx-white);
     transition: gap var(--cdx-transition), color var(--cdx-transition);
   }
   
   .cdx-career-hero__link:hover {
     color: var(--cdx-red);
     gap: 16px;
   }
   
   .cdx-career-opportunities {
     position: relative;
     overflow: hidden;
     background-color: var(--cdx-red);
   }
   
   .cdx-career-opportunities__bg {
     position: absolute;
     inset: 0;
     object-fit: cover;
     object-position: center top;
     display: block;
     width: 100%;
     height: 100%;
   }
   
   .cdx-career-opportunities__grid {
     position: relative;
     z-index: 1;
     display: grid;
     grid-template-columns: 1fr 1fr;
     min-height: 640px;
   }
   
   .cdx-career-opportunities__intro {
     display: flex;
     flex-direction: column;
     justify-content: center;
     padding: 80px 64px 0 80px;
   }
   
   .cdx-career-opportunities__eyebrow {
     display: inline-block;
     font-size: 14px;
     font-weight: 600;
     letter-spacing: 2px;
     text-transform: uppercase;
     color: var(--cdx-white);
     margin-bottom: 10px;
   }
   
   .cdx-career-opportunities__title {
     font-size: 40px;
     font-weight: 700;
     line-height: 1.1;
     color: var(--cdx-white);
     max-width: 480px;
     margin-bottom: 36px;
   }
   
   .cdx-career-opportunities__btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     align-self: flex-start;
     padding: 8px 26px;
     font-size: 16px;
     font-weight: 700;
     color: var(--cdx-red);
     background-color: var(--cdx-white);
     border-radius: 8px;
     transition: background-color var(--cdx-transition), transform var(--cdx-transition);
   }
   
   .cdx-career-opportunities__btn:hover {
     background-color: var(--cdx-gray-100);
     transform: translateY(-2px);
     color: var(--cdx-black);
   }
   
   .cdx-career-opportunities__art {
     position: relative;
   }
   
   .cdx-career-opportunities__letter {
     position: absolute;
     left: 0;
     bottom: 0;
     font-size: clamp(120px, 14vw, 200px);
     font-weight: 700;
     line-height: 0.85;
     color: rgba(255, 255, 255, 0.15);
     letter-spacing: -4px;
     user-select: none;
   }
   
   .cdx-career-opportunities__face {
     object-fit: cover;
     object-position: center top;
     z-index: 1;
   }
   
   .cdx-career-opportunities__zigzag {
     position: absolute;
     left: 200px;
     bottom: 24px;
     width: 120px;
     height: 24px;
     z-index: 2;
   }
   
   .cdx-career-opportunities__roles {
     display: flex;
     flex-direction: column;
     justify-content: center;
     padding: 80px 80px 80px 48px;
   }
   
   .cdx-career-opportunities__list {
     display: flex;
     flex-direction: column;
   }
   
   .cdx-career-opportunities__item {
     display: flex;
     flex-direction: column;
     justify-content: flex-end;
     padding: 12px 0;
     text-align: right;
     min-width: max-content;
   }

   .cdx-career-opportunities__item a {
    flex-direction: column;
    align-items: flex-end;
  }
   
   .cdx-career-opportunities__item:last-child {
     border-bottom: none;
   }
   
   .cdx-career-opportunities__num {
     flex-shrink: 0;
     font-size: 14px;
     font-weight: 700;
     color: rgba(255, 255, 255);
     min-width: 28px;
   }
   
   .cdx-career-opportunities__role {
     font-size: clamp(28px, 3.5vw, 48px);
     font-weight: 700;
     line-height: 1.2;
     color: var(--cdx-white);
     letter-spacing: -0.5px;
   }
   
   .cdx-career-opportunities__role--outline {
     color: transparent;
     -webkit-text-stroke: 1.5px var(--cdx-white);
     text-stroke: 1.5px var(--cdx-white);
   }
   
   .cdx-career-why {
       padding: 80px 0 60px;
       background-color: #101014;
   }
   
   .cdx-career-why__head {
     margin-bottom: 56px;
   }
   
   .cdx-career-why__eyebrow {
     display: inline-block;
     font-size: 14px;
     font-weight: 500;
     text-transform: uppercase;
     color: var(--cdx-white);
     margin-bottom: 24px;
   }
   
   .cdx-career-why__title {
     font-size: 52px;
     font-weight: 700;
     line-height: 1.2;
     color: var(--cdx-white);
     max-width: 620px;
     margin: 0;
     padding-top: 20px;
     border-top: 1px solid rgba(255, 255, 255, 0.5);
   }
   
   .cdx-career-why__text {
     font-size: 17px;
     line-height: 1.8;
     color: rgba(255, 255, 255, 0.8);
     margin: 0;
     padding-top: 36px;
   }
   
   .cdx-career-why__gallery {
     display: grid;
     grid-template-columns: 1.65fr 0.85fr;
     gap: 24px;
     align-items: stretch;
   }
   
   .cdx-career-why__media {
     position: relative;
     overflow: hidden;
   }
   
   .cdx-career-why__media img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
   }
   
   .cdx-career-why__media--main {
     min-height: 400px;
   }
   
   .cdx-career-why__media--side {
     min-height: 400px;
   }
   
   .cdx-career-why__play {
     position: absolute;
     inset: 0;
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 0;
     border: none;
     background: rgba(0, 0, 0, 0.15);
     cursor: pointer;
   }
   
   .cdx-career-why__play span {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 72px;
     height: 72px;
     border-radius: 50%;
     background-color: var(--cdx-black);
     color: var(--cdx-white);
     font-size: 20px;
     padding-left: 4px;
     box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
     transition: transform var(--cdx-transition), background-color var(--cdx-transition);
   }
   
   .cdx-career-why__play:hover span {
     transform: scale(1.06);
     background-color: var(--cdx-red);
   }
   
   .cdx-career-highlight {
     position: relative;
     overflow: hidden;
     padding: 72px 0;
     background-color: var(--cdx-red);
   }
   
   .cdx-career-highlight__pattern {
     position: absolute;
     object-fit: cover;
     object-position: center top;
     display: block;
     width: 100%;
     height: 100%;
   }
   
   .cdx-career-highlight .container {
     position: relative;
     z-index: 1;
   }
   
   .cdx-career-highlight__title {
     font-size: 40px;
     font-weight: 700;
     line-height: 1.1;
     color: var(--cdx-white);
     max-width: 480px;
     margin: 0;
   }
   
   .cdx-career-highlight__text {
     font-size: 15px;
     line-height: 1.8;
     color: rgba(255, 255, 255, 0.9);
     margin: 0;
   }
   
   .cdx-career-culture {
     padding: 100px 0 80px;
     background-color: #101014;
   }
   
   .cdx-career-culture__title {
     font-size: 52px;
     font-weight: 500;
     line-height: 1.1;
     color: #e9e0d9;
     max-width: 100%;
     margin-bottom: 20px;
   }
   
   .cdx-career-culture__subtitle {
     font-size: 15px;
     line-height: 1.7;
     color: #e9e0d9;
     max-width: 720px;
     margin-bottom: 80px;
   }
   
   .cdx-career-culture__graphic {
     max-width: 100%;
     height: 100%;
   }
   
   .cdx-career-culture__graphic svg {
     width: 100%;
     height: auto;
     display: block;
   }
   
   .cdx-career-culture__text {
     font-size: 15px;
     line-height: 1.8;
     color: #e9e0d9;
     margin: 0 0 24px;
   }
   
   .cdx-career-culture__text:last-of-type {
     margin-bottom: 0;
   }
   
   .cdx-career-culture__metric {
     margin-top: 32px;
   }
   
   .cdx-career-culture__metric-head {
     display: flex;
     align-items: center;
     justify-content: space-between;
     margin-bottom: 14px;
   }
   
   .cdx-career-culture__metric-label {
     font-size: 15px;
     font-weight: 600;
     color: var(--cdx-white);
   }
   
   .cdx-career-culture__metric-value {
     display: inline-block;
     font-size: 15px;
     font-weight: 600;
     color: var(--cdx-white);
     background-color: rgba(255, 255, 255, 0.1);
     padding: 4px 12px;
     border-radius: 8px;
   }
   
   .cdx-career-culture__bar {
     width: 100%;
     height: 4px;
     background-color: rgba(255, 255, 255, 0.15);
     border-radius: 50px;
     overflow: hidden;
   }
   
   .cdx-career-culture__bar-fill {
     display: block;
     height: 100%;
     background-color: var(--cdx-red);
     border-radius: 50px;
   }
   
   /* ==========================================================================
      Home Page — cdx-home
      ========================================================================== */
   
   .cdx-home-page {
     background-color: var(--cdx-white);
   }
   
   .cdx-header--home {
     background-color: var(--cdx-white);
     border-bottom-color: var(--cdx-gray-200);
   }
   
   .cdx-header__btn--home {
     background-color: #151517;
     color: var(--cdx-white);
     border: none;
   }
   
   .cdx-header__btn--home:hover {
     background-color: var(--cdx-red);
     color: var(--cdx-white);
   }
   
   .cdx-home-banner {
     position: relative;
     padding: 30px 0 0;
     margin-top: 90px;
     margin-bottom: 20px;
     background-color: var(--cdx-white);
   }
   
   .cdx-home-banner__wrapper {
     position: relative;
     z-index: 1;
   }
   
   .cdx-home-banner__top,
   .cdx-home-banner__bottom {
     position: relative;
     margin-bottom: 30px;
     border-radius: 20px;
     overflow: hidden;
   }
   
   .cdx-home-banner__top {
     min-height: 340px;
   }
   
   .cdx-home-banner__bottom {
     min-height: 440px;
     margin-bottom: 0;
   }
   
   .cdx-home-banner__bg {
     position: absolute;
     inset: 0;
     z-index: 1;
     width: 100%;
     height: 100%;
     border-radius: 20px;
   }
   
   .cdx-home-banner__shape {
     position: absolute;
     top: 0;
     left: 0;
     z-index: 1;
     width: 100%;
     height: 100%;
     border-radius: 20px;
     background: linear-gradient(
       128deg,
       var(--cdx-red) 0%,
       color-mix(in srgb, var(--cdx-red) 17%, transparent) 100%
     );
   }
   
   .cdx-home-banner__bg-img {
     position: absolute;
     top: 0;
     left: 0;
     z-index: 0;
     width: 100%;
     height: 100%;
     object-fit: cover;
     border-radius: 20px;
   }
   
   .cdx-home-banner__content {
     position: absolute;
     inset: 0;
     z-index: 2;
     display: flex;
     flex-direction: column;
     justify-content: center;
     padding: 50px;
     width: 100%;
     height: 100%;
   }
   
   .cdx-home-banner__content--detail {
     max-width: 680px;
   }
   
   .cdx-home-banner__lead {
     font-size: clamp(32px, 4vw, 50px);
     font-weight: 700;
     line-height: 1.12;
     color: var(--cdx-white);
     margin: 0;
   }
   
   .cdx-home-banner__title {
     font-size: clamp(28px, 3.5vw, 40px);
     font-weight: 700;
     line-height: 1.15;
     color: var(--cdx-white);
     margin: 0;
   }
   
   .cdx-home-banner__text {
     font-size: clamp(16px, 2vw, 20px);
     font-weight: 400;
     line-height: 1.35;
     color: var(--cdx-white);
     margin: 20px 0 40px;
   }
   
   .cdx-home-banner__footer {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     gap: 20px;
   }
   
   .cdx-home-banner__btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     padding: 12px 25px;
     background-color: var(--cdx-white);
     color: var(--cdx-red);
     font-size: 18px;
     font-weight: 700;
     line-height: 1.3;
     border-radius: 50px;
     box-shadow: 0 4px 8px rgba(114, 114, 114, 0.25);
     transition: background-color var(--cdx-transition), transform var(--cdx-transition);
   }
   
   .cdx-home-banner__btn:hover {
     background-color: var(--cdx-gray-100);
     color: var(--cdx-red);
     transform: translateY(-2px);
   }
   
   .cdx-home-banner__proof {
     display: flex;
     align-items: center;
   }
   
   .cdx-home-banner__avatars {
     display: flex;
     align-items: center;
   }
   
   .cdx-home-banner__avatars img {
     width: 38px;
     height: 38px;
     border-radius: 50%;
     border: 2px solid var(--cdx-white);
     object-fit: cover;
     margin-left: -10px;
   }
   
   .cdx-home-banner__avatars img:first-child {
     margin-left: 0;
   }
   
   .cdx-home-banner__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    height: 32px;
    padding: 0 10px;
    font-size: 13px;
    font-weight: 700;
    color: var(--cdx-red);
    background-color: var(--cdx-white);
    border-radius: 50px;
    margin-left: -12px;
  }
   
   .cdx-home-banner__figure {
     position: absolute;
     bottom: 0;
     right: 0;
     z-index: 3;
     max-width: 46%;
     height: auto;
     pointer-events: none;
   }
   
   .cdx-home-intro {
     padding: 80px 0 40px;
     background-color: #000000;
   }
   
   .cdx-home-intro__eyebrow {
     display: inline-block;
     font-size: 14px;
     font-weight: 600;
     text-transform: uppercase;
     color: #888889;
     margin-bottom: 10px;
   }
   
   .cdx-home-intro__title {
     font-size: clamp(24px, 3.5vw, 52px);
     font-weight: 700;
     line-height: 1.1;
     color: var(--cdx-white);
     margin-bottom: 40px;
     max-width: 560px;
   }
   
   .cdx-home-intro__visual {
     position: relative;
   }
   
   .cdx-home-intro__laptop {
     margin: 40px auto 0;
   }
   
   .cdx-home-intro__screen img {
     max-width: 500px;
     max-height: 354px;
     width: 100%;
     height: 100%;
     object-fit: cover;
   }
   
   
   .cdx-home-intro__text {
     font-size: 17px;
     line-height: 1.8;
     color: rgba(255, 255, 255, 0.86);
     margin-bottom: 50px;
   }
   
   .cdx-home-intro__item {
     height: 100%;
   }
   
   .cdx-home-intro__icon {
     display: inline-block;
     margin-bottom: 20px;
     font-size: 30px;
     color: var(--cdx-white);
   }
   
   .cdx-home-intro__item-title {
     font-size: 20px;
     font-weight: 700;
     color: var(--cdx-white);
     margin-bottom: 15px;
   }
   
   .cdx-home-intro__item-text {
     font-size: 16px;
     line-height: 1.1;
     color: #888889;
     margin: 0;
   }
   
   .cdx-home-services {
     padding: 100px 0;
     background-color: var(--cdx-white);
   }
   
   .cdx-home-services__head {
     text-align: center;
     max-width: 660px;
     margin: 0 auto 56px;
   }
   
   .cdx-home-services__eyebrow {
     display: inline-block;
     font-size: 14px;
     font-weight: 600;
     text-transform: uppercase;
     color: #151517;
     margin-bottom: 10px;
   }
   
   .cdx-home-services__title {
     font-size: clamp(24px, 3.5vw, 52px);
     font-weight: 700;
     line-height: 1.2;
     color: #101014;
     margin: 0;
   }
   
   .cdx-home-services__row {
     position: relative;
     display: grid;
     grid-template-columns: minmax(180px, 28%) 1fr auto;
     align-items: center;
     gap: 24px 40px;
     padding: 32px 0;
     border-bottom: 1px solid var(--cdx-gray-200);
     color: inherit;
     transition: background-color var(--cdx-transition), color var(--cdx-transition);
   }
   
   .cdx-home-services__row:hover,
   .cdx-home-services__row--active {
     background-color: var(--cdx-red);
     color: var(--cdx-white);
     padding-left: 50px;
     padding-right: 32px;
     margin: 0 -32px;
   }
   
   .cdx-home-services__name {
     font-size: 20px;
     font-weight: 700;
     line-height: 1.2;
     color: #101014;
     margin: 0;
   }
   
   .cdx-home-services__row:hover .cdx-home-services__name,
   .cdx-home-services__row--active .cdx-home-services__name {
     color: var(--cdx-white);
   }
   
   .cdx-home-services__desc {
     font-size: 16px;
     line-height: 1.7;
     color: #000000;
     margin: 0;
     max-width: 560px;
     transition: color var(--cdx-transition);
   }
   
   .cdx-home-services__row:hover .cdx-home-services__desc,
   .cdx-home-services__row--active .cdx-home-services__desc {
     color: rgba(255, 255, 255, 0.9);
   }
   
   .cdx-home-services__arrow {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 48px;
     height: 48px;
     border-radius: 50%;
     border: 1px solid #17181C;
     color: var(--cdx-black);
     font-size: 16px;
     flex-shrink: 0;
     transition: background-color var(--cdx-transition), border-color var(--cdx-transition), color var(--cdx-transition);
   }
   
   .cdx-home-services__arrow i {
     transform: rotate(45deg);
   }
   
   .cdx-home-services__row:hover .cdx-home-services__arrow,
   .cdx-home-services__row--active .cdx-home-services__arrow {
     background-color: var(--cdx-white);
     border-color: var(--cdx-white);
     color: var(--cdx-red);
   }
   
   .cdx-home-services__thumb {
     position: absolute;
     right: 120px;
     top: 50%;
     transform: translateY(-50%) rotate(-8deg);
     width: 210px;
     height: 170px;
     object-fit: cover;
     border-radius: 12px;
     box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
     display: none;
     pointer-events: none;
   }
   
   .cdx-home-services__row--active .cdx-home-services__thumb,
   .cdx-home-services__row:hover .cdx-home-services__thumb {
     display: block;
   }
   
   .cdx-home-stats {
     background-color: var(--cdx-white);
   }
   
   .cdx-home-stats__wrap {
     position: relative;
   }
   
   .cdx-home-stats__img {
     width: 100%;
     min-height: 420px;
     max-height: 520px;
     object-fit: cover;
     object-position: center;
     display: block;
   }
   
   .cdx-home-stats__wrap .container {
     position: absolute;
     left: 0;
     right: 0;
     bottom: 0;
     z-index: 2;
   }
   
   .cdx-home-stats__bar {
     display: flex;
     flex-wrap: wrap;
     position: absolute;
     bottom: 0;
     left: 0;
   }
   
   .cdx-home-stats__item {
     display: flex;
     gap: 20px;
     flex: 1;
     min-width: 280px;
     max-width: 320px;
     padding: 32px 36px;
     background-color: var(--cdx-red);
     color: var(--cdx-white);
   }
   
   .cdx-home-stats__item:last-child {
     background-color: #161519;
   }
   
   .cdx-home-stats__item + .cdx-home-stats__item {
     border-left: 1px solid rgba(255, 255, 255, 0.15);
   }
   
   .cdx-home-stats__icon {
     font-size: 40px;
     flex-shrink: 0;
   }
   
   .cdx-home-stats__info strong {
     display: block;
     font-size: clamp(28px, 4vw, 46px);
     font-weight: 700;
     line-height: 1.1;
     margin-bottom: 4px;
     color: rgba(255, 255, 255);
   }
   
   .cdx-home-why {
     background-color: var(--cdx-white);
   }
   
   .cdx-home-why__grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     grid-template-rows: auto 1fr;
     gap: 0;
     min-height: 560px;
   }
   
   .cdx-home-why__intro {
     grid-column: 1;
     grid-row: 1;
     padding: 48px 48px 40px;
     background-color: var(--cdx-white);
   }
   
   .cdx-home-why__eyebrow {
     display: inline-block;
     font-size: 14px;
     font-weight: 600;
     text-transform: uppercase;
     color: #151517;
     margin-bottom: 10px;
   }
   
   .cdx-home-why__title {
     font-size: clamp(24px, 3.5vw, 54px);
     font-weight: 700;
     line-height: 1.25;
     color: #101014;
     max-width: 560px;
     margin: 0;
   }
   
   .cdx-home-why__media {
     grid-column: 1;
     grid-row: 2;
     overflow: hidden;
     min-height: 320px;
   }
   
   .cdx-home-why__media img {
     width: 100%;
     height: 100%;
     min-height: 42px;
     max-height: 420px;
     object-fit: cover;
     display: block;
   }
   
   .cdx-home-why__panel {
     grid-column: 2;
     grid-row: 1 / 3;
     display: flex;
     flex-direction: column;
     justify-content: center;
     padding: 56px 80px;
     background-color: var(--cdx-red);
   }
   
   .cdx-home-why__panel-title {
     font-size: clamp(24px, 3.8vw, 56px);
     font-weight: 700;
     line-height: 1.25;
     color: var(--cdx-white);
     margin-bottom: 40px;
     max-width: 560px;
   }
   
   .cdx-home-why__features {
     display: flex;
     flex-direction: column;
     gap: 0;
   }
   
   .cdx-home-why__feature-btn {
     display: flex;
     align-items: center;
     gap: 16px;
     width: 100%;
     padding: 20px 0;
     border: none;
     background: transparent;
     text-align: left;
     cursor: pointer;
     color: var(--cdx-white);
   }
   
   .cdx-home-why__feature-mark {
     font-size: 22px;
     font-weight: 400;
     line-height: 1;
     min-width: 20px;
   }
   
   .cdx-home-why__feature-name {
     font-size: 20px;
     font-weight: 700;
     line-height: 1.3;
   }
   
   .cdx-home-why__feature-body {
     display: none;
     padding: 0 0 20px 36px;
   }
   
   .cdx-home-why__feature--open .cdx-home-why__feature-body {
     display: block;
   }
   
   .cdx-home-why__feature-body p {
     font-size: 15px;
     line-height: 1.75;
     font-weight: 500;
     color: rgba(255, 255, 255, 0.88);
     margin: 0;
     max-width: 480px;
   }
   
   .cdx-home-team {
     background-color: var(--cdx-white);
   }
   
   .cdx-home-team__grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     min-height: 480px;
   }
   
   .cdx-home-team__intro {
     position: relative;
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
     padding: 48px 40px;
     background-color: var(--cdx-red);
     color: var(--cdx-white);
   }
   
   .cdx-home-team__eyebrow {
     display: inline-block;
     font-size: 14px;
     font-weight: 500;
     text-transform: uppercase;
     color: rgba(255, 255, 255);
     margin-bottom: 10px;
   }
   
   .cdx-home-team__title {
     font-size: clamp(22px, 3vw, 40px);
     font-weight: 700;
     line-height: 1.25;
     color: var(--cdx-white);
     margin: 0;
     max-width: 320px;
   }
   
   .cdx-home-team__hand {
     position: absolute;
     left: 0;
     bottom: 0;
     height: auto;
     transform: translateY(55px);
     z-index: 2;
   }
   
   .cdx-home-team__hand svg,
   .cdx-home-team__hand img {
     width: 100%;
     height: auto;
     display: block;
   }
   
   .cdx-home-team .cdx-team-card {
     aspect-ratio: 3 / 4;
     height: 100%;
   }
   
   .cdx-home-brands {
     padding: 56px 0;
     background-color: #101014;
   }
   
   .cdx-home-brands__inner {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 40px;
   }
   
   .cdx-home-brands__title {
     font-size: clamp(20px, 2.8vw, 30px);
     font-weight: 700;
     line-height: 1.2;
     color: var(--cdx-white);
     margin: 0;
     flex-shrink: 0;
   }
   
   .cdx-home-brands__slider {
     flex: 1;
     min-width: 0;
     overflow: hidden;
     -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
     mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
   }
   
   .cdx-home-brands__track {
     display: flex;
     align-items: center;
     gap: 48px;
     width: max-content;
     margin: 0;
     padding: 0;
     list-style: none;
     animation: cdx-home-brands-marquee 28s linear infinite;
   }
   
   .cdx-home-brands__slider:hover .cdx-home-brands__track {
     animation-play-state: paused;
   }
   
   .cdx-home-brands__track li {
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
   }
   
   .cdx-home-brands__track li img {
     display: block;
     height: 36px;
     width: auto;
     max-width: 140px;
     object-fit: contain;
     opacity: 0.9;
   }
   
   @keyframes cdx-home-brands-marquee {
     from {
       transform: translateX(0);
     }
   
     to {
       transform: translateX(-50%);
     }
   }
   
   .cdx-home-brands__text {
     font-size: 22px;
     font-weight: 700;
     letter-spacing: -0.5px;
     text-transform: lowercase;
     color: var(--cdx-white);
   }
   
   .cdx-home-testimonial {
     position: relative;
     overflow: hidden;
     min-height: 520px;
   }
   
   .cdx-home-testimonial__bg {
     position: absolute;
     inset: 0;
     width: 100%;
     height: 100%;
     object-fit: cover;
     object-position: center;
   }
   
   .cdx-home-testimonial .container {
     position: relative;
     z-index: 1;
     min-height: 520px;
     display: flex;
     align-items: center;
     padding-top: 40px;
     padding-bottom: 40px;
   }
   
   .cdx-home-testimonial__card {
     max-width: 640px;
     padding: 64px;
     background-color: rgba(0, 0, 0, 0.80);
   }
   
   .cdx-home-testimonial__track {
     position: relative;
     min-height: 280px;
   }
   
   .cdx-home-testimonial__slide {
     display: none;
   }
   
   .cdx-home-testimonial__slide.is-active {
     display: block;
     animation: cdxHomeTestimonialFade 0.45s ease;
   }
   
   @keyframes cdxHomeTestimonialFade {
     from {
       opacity: 0;
       transform: translateY(8px);
     }
   
     to {
       opacity: 1;
       transform: translateY(0);
     }
   }
   
   .cdx-home-testimonial__profile {
     display: flex;
     flex-direction: column;
     gap: 16px;
     margin-bottom: 24px;
   }
   
   .cdx-home-testimonial__profile img {
     width: 56px;
     height: 56px;
     border-radius: 50%;
     object-fit: cover;
     flex-shrink: 0;
   }
   
   .cdx-home-testimonial__tags {
     display: flex;
     flex-wrap: wrap;
     gap: 8px;
   }
   
   .cdx-home-testimonial__tag {
     display: inline-flex;
     align-items: center;
     padding: 6px 14px;
     font-size: 13px;
     font-weight: 500;
     color: #888889;
     background-color: #88888925;
     border-radius: 8px;
   }
   
   .cdx-home-testimonial__quote {
     font-size: 16px;
     font-weight: 400;
     line-height: 1.7;
     color: var(--cdx-white);
     margin: 0 0 20px;
   }
   
   .cdx-home-testimonial__author {
     margin-bottom: 0;
   }
   
   .cdx-home-testimonial__author strong {
     display: block;
     font-size: 16px;
     font-weight: 600;
     color: var(--cdx-white);
     margin-bottom: 4px;
   }
   
   .cdx-home-testimonial__author span {
     display: block;
     font-size: 14px;
     color: rgba(255, 255, 255, 0.85);
   }
   
   .cdx-home-testimonial__nav {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding-top: 36px;
     margin-top: 36px;
     border-top: 1px solid rgba(255, 255, 255, 0.12);
   }
   
   .cdx-home-testimonial__pager {
     font-size: 14px;
     font-weight: 500;
     color: rgba(255, 255, 255, 0.7);
     letter-spacing: 1px;
   }
   
   .cdx-home-testimonial__pager em {
     font-style: normal;
     margin: 0 6px;
     color: rgba(255, 255, 255, 0.4);
   }
   
   .cdx-home-testimonial__arrows {
     display: flex;
     align-items: center;
     gap: 20px;
   }
   
   .cdx-home-testimonial__arrow-btn {
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 0;
     border: none;
     background: transparent;
     color: rgba(255, 255, 255, 0.85);
     font-size: 16px;
     cursor: pointer;
     transition: color var(--cdx-transition);
   }
   
   .cdx-home-testimonial__arrow-btn:hover {
     color: var(--cdx-white);
   }
   
   .cdx-home-blog {
     padding: 100px 0;
     background-color: #F6F6F6;
   }
   
   .cdx-home-blog__head {
     display: flex;
     align-items: flex-end;
     justify-content: space-between;
     gap: 24px;
     margin-bottom: 48px;
   }
   
   .cdx-home-blog__eyebrow {
     display: inline-block;
     font-size: 13px;
     font-weight: 600;
     letter-spacing: 2px;
     text-transform: uppercase;
     color: var(--cdx-gray-500);
     margin-bottom: 12px;
   }
   
   .cdx-home-blog__title {
     font-size: clamp(24px, 3.2vw, 40px);
     font-weight: 700;
     line-height: 1.1;
     color: #0c1c28;
     margin: 0;
   }
   
   .cdx-home-blog__title span {
     color: var(--cdx-red);
   }
   
   .cdx-home-blog__btn {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     padding: 12px 28px;
     font-size: 15px;
     font-weight: 600;
     color: var(--cdx-white);
     background-color: var(--cdx-red);
     border-radius: 8px;
     flex-shrink: 0;
     transition: background-color var(--cdx-transition), transform var(--cdx-transition);
   }
   
   .cdx-home-blog__btn:hover {
     background-color: #c41e10;
     color: var(--cdx-white);
     transform: translateY(-2px);
   }
   
   .cdx-home-blog__grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 28px;
   }
   
   .cdx-home-blog__grid .cdx-blog-card__media--short {
     height: 280px;
   }
   
   .cdx-home-blog__grid .cdx-blog-card__title {
     font-size: 22px;
   }
   
   .cdx-home-pricing {
     padding: 100px 0;
     background-color: var(--cdx-white);
   }
   
   .cdx-home-pricing__head {
     text-align: center;
     max-width: 460px;
     margin: 0 auto 48px;
   }
   
   .cdx-home-pricing__eyebrow {
     display: inline-block;
     font-size: 14px;
     font-weight: 600;
     letter-spacing: 2px;
     text-transform: uppercase;
     color: #283742;
     margin-bottom: 10px;
   }
   
   .cdx-home-pricing__title {
     font-size: clamp(24px, 3.2vw, 40px);
     font-weight: 700;
     line-height: 1.2;
     color: var(--cdx-black);
     margin-bottom: 28px;
   }
   
   .cdx-home-pricing__toggle {
     display: flex;
     align-items: center;
     padding: 4px;
     background-color: #f6f6f6;
     border-radius: 50px;
     gap: 4px;
     max-width: max-content;
     margin: 0 auto;
   }
   
   .cdx-home-pricing__toggle-btn {
     padding: 8px 24px;
     border: none;
     border-radius: 50px;
     background: transparent;
     font-size: 14px;
     font-weight: 700;
     color: #151517;
     cursor: pointer;
     transition: background-color var(--cdx-transition), color var(--cdx-transition);
   }

  .cdx-home-pricing__toggle-btn .badge.badge-success {
    display: inline-block;
    background-color: var(--cdx-secondary);
    color: var(--cdx-white);
    font-size: 12px;
    padding: 4px 10px;
  }
   
   .cdx-home-pricing__toggle-btn--active {
     background-color: var(--cdx-red);
     color: var(--cdx-white);
   }
   
   .cdx-home-pricing__cards {
     align-items: stretch;
   }
   
   .cdx-home-pricing__delivery {
     margin: 50px 0 0;
     text-align: center;
     font-size: 14px;
     color: #646466;
   }
   
   .cdx-home-pricing__offer {
     margin-top: 56px;
     text-align: center;
   }
   
   .cdx-home-pricing__offer-text {
     display: inline-flex;
     align-items: center;
     gap: 10px;
     font-size: 16px;
     font-weight: 600;
     color: var(--cdx-black);
     margin-bottom: 24px;
   }
   
   .cdx-home-pricing__offer-text i {
     color: var(--cdx-red);
   }
   
   .cdx-home-pricing__countdown {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 16px;
   }
   
   .cdx-home-pricing__countdown em {
     font-style: normal;
     font-size: 28px;
     font-weight: 700;
     color: var(--cdx-gray-400);
     line-height: 1;
   }
   
   .cdx-home-pricing__countdown-item {
     display: flex;
     flex-direction: column;
     align-items: center;
     min-width: 72px;
   }
   
   .cdx-home-pricing__countdown-item strong {
     font-size: 32px;
     font-weight: 700;
     line-height: 1;
     color: var(--cdx-black);
     margin-bottom: 6px;
   }
   
   .cdx-home-pricing__countdown-item span {
     font-size: 12px;
     font-weight: 500;
     color: var(--cdx-gray-500);
     text-transform: uppercase;
     letter-spacing: 0.5px;
   }
   
   .cdx-home-cta__eyebrow {
     color: var(--cdx-red) !important;
     letter-spacing: 2px;
   }