/* ═══ CTA ═══ */
 .cta-outer {
     padding: 0 6% 100px;
 }

 .cta-box {
     position: relative;
     overflow: hidden;
     min-height: 400px;
     display: grid;
     grid-template-columns: 1fr 1fr;
     align-items: center;
     border: 1.5px solid var(--ink);
     box-shadow: 6px 6px 0 var(--ink);
 }

 .cta-bg {
     position: absolute;
     inset: 0;
 }

 .cta-bg img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     filter: brightness(.2) saturate(.4);
 }

 .cta-bg::after {
     content: '';
     position: absolute;
     inset: 0;
     background: linear-gradient(135deg, rgba(8, 8, 8, .95) 0%, rgba(8, 8, 8, .6) 100%);
 }

 .cta-mesh {
     position: absolute;
     inset: 0;
     z-index: 1;
     background-image: linear-gradient(rgba(184, 224, 0, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(184, 224, 0, .04) 1px, transparent 1px);
     background-size: 56px 56px;
     animation: meshMove 22s linear infinite;
 }

 @keyframes meshMove {
     0% {
         background-position: 0 0
     }

     100% {
         background-position: 56px 56px
     }
 }

 .cta-text {
     position: relative;
     z-index: 2;
     padding: 64px;
 }

 .cta-text h2 {
     font-family: 'Outfit', sans-serif;
     font-size: clamp(28px, 3.6vw, 50px);
     font-weight: 900;
     letter-spacing: -2px;
     line-height: 1.05;
     margin: 14px 0 18px;
     color: #fff;
 }

 .cta-text h2 span {
     color: var(--lime);
 }

 .cta-text p {
     font-size: 15px;
     color: rgba(255, 255, 255, .65);
     line-height: 1.85;
     max-width: 400px;
     margin-bottom: 30px;
 }

 .cta-btns {
     display: flex;
     gap: 12px;
     flex-wrap: wrap;
 }

 .btn-lime-lg {
     padding: 13px 30px;
     background: var(--lime);
     color: var(--ink);
     font-size: 13px;
     font-weight: 900;
     font-family: inherit;
     border: none;
     cursor: pointer;
     letter-spacing: .04em;
     text-transform: uppercase;
     transition: background .2s, transform .15s;
     display: flex;
     align-items: center;
     gap: 6px;
 }

 .btn-lime-lg:hover {
     background: var(--lime-dk);
     transform: translateY(-2px);
 }

 .btn-out-lg {
     padding: 13px 30px;
     border: 1.5px solid rgba(255, 255, 255, .25);
     background: transparent;
     color: #fff;
     font-size: 13px;
     font-weight: 700;
     font-family: inherit;
     cursor: pointer;
     letter-spacing: .04em;
     text-transform: uppercase;
     transition: background .2s, border-color .2s;
 }

 .btn-out-lg:hover {
     background: rgba(255, 255, 255, .07);
     border-color: rgba(255, 255, 255, .4);
 }

 .cta-right {
     position: relative;
     z-index: 2;
     padding: 40px 52px 40px 0;
     display: flex;
     flex-direction: column;
     gap: 12px;
 }

 .cta-fc {
     background: rgba(255, 255, 255, .06);
     border: 1px solid rgba(255, 255, 255, .1);
     padding: 14px 18px;
     display: flex;
     align-items: center;
     gap: 14px;
     transition: background .2s;
 }

 .cta-fc:hover {
     background: rgba(255, 255, 255, .09);
 }

 .cta-fc-icon {
     width: 36px;
     height: 36px;
     background: var(--lime);
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
 }

 .cta-fc-icon svg {
     width: 18px;
     height: 18px;
 }

 .cta-fc strong {
     display: block;
     font-size: 13px;
     font-weight: 800;
     margin-bottom: 2px;
     color: #fff;
 }

 .cta-fc span {
     font-size: 11px;
     color: rgba(255, 255, 255, .5);
 }

 /* ═══════════════════════════════════
     FOOTER + BRAND NAME EFFECT
  ═══════════════════════════════════ */
 footer {
     background: var(--ink);
     border-top: 2px solid var(--lime);
     position: relative;
     z-index: 2;
     overflow: hidden;
 }

 .ft-top {
     padding: 36px 6%;
     border-bottom: 1px solid rgba(255, 255, 255, .08);
     display: flex;
     justify-content: space-between;
     align-items: center;
     gap: 28px;
     flex-wrap: wrap;
 }

 .ft-top-left strong {
     font-family: 'Outfit', sans-serif;
     font-size: 18px;
     font-weight: 900;
     letter-spacing: -.3px;
     display: block;
     margin-bottom: 4px;
     color: #fff;
 }

 .ft-top-left span {
     font-size: 13px;
     color: rgba(255, 255, 255, .5);
 }

 .ft-subscribe {
     display: flex;
     max-width: 420px;
     width: 100%;
 }

 .ft-sub-input {
     flex: 1;
     padding: 11px 16px;
     background: rgba(255, 255, 255, .06);
     border: 1.5px solid rgba(255, 255, 255, .12);
     border-right: none;
     color: #fff;
     font-size: 13px;
     font-family: inherit;
     outline: none;
     transition: border-color .2s;
 }

 .ft-sub-input::placeholder {
     color: rgba(255, 255, 255, .3);
 }

 .ft-sub-input:focus {
     border-color: var(--lime);
 }

 .ft-sub-btn {
     padding: 11px 20px;
     background: var(--lime);
     color: var(--ink);
     border: none;
     font-size: 12px;
     font-weight: 900;
     font-family: inherit;
     cursor: pointer;
     white-space: nowrap;
     text-transform: uppercase;
     letter-spacing: .06em;
     transition: background .2s;
 }

 .ft-sub-btn:hover {
     background: var(--lime-dk);
 }

 .ft-main {
     padding: 56px 6% 48px;
     display: grid;
     grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
     gap: 36px;
 }

 .ft-brand .ft-logo {
     display: flex;
     align-items: center;
     gap: 10px;
     margin-bottom: 16px;
 }

 .ft-logo-box {
     width: 30px;
     height: 30px;
     background: var(--lime);
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .ft-logo-box svg {
     width: 16px;
     height: 16px;
 }

 .ft-logo-name {
     font-family: 'Outfit', sans-serif;
     font-size: 16px;
     font-weight: 900;
     color: #fff;
 }

 .ft-brand p {
     font-size: 13px;
     color: rgba(255, 255, 255, .45);
     line-height: 1.9;
     max-width: 260px;
     margin-bottom: 22px;
 }

 .ft-social {
     display: flex;
     gap: 8px;
     margin-bottom: 24px;
 }

 .ft-soc {
     width: 34px;
     height: 34px;
     background: rgba(255, 255, 255, .05);
     border: 1px solid rgba(255, 255, 255, .1);
     display: flex;
     align-items: center;
     justify-content: center;
     text-decoration: none;
     color: rgba(255, 255, 255, .4);
     font-size: 11px;
     font-weight: 800;
     transition: background .2s, color .2s, border-color .2s;
 }

 .ft-soc:hover {
     background: var(--lime);
     color: var(--ink);
     border-color: var(--lime);
 }

 .ft-badge-row {
     display: flex;
     flex-wrap: wrap;
     gap: 6px;
 }

 .ft-badge {
     padding: 4px 10px;
     border: 1px solid rgba(255, 255, 255, .1);
     font-size: 10px;
     font-weight: 700;
     color: rgba(255, 255, 255, .35);
     letter-spacing: .04em;
     background: rgba(255, 255, 255, .04);
 }

 .ft-col h4 {
     font-size: 10px;
     font-weight: 900;
     letter-spacing: .18em;
     text-transform: uppercase;
     color: rgba(184, 224, 0, .6);
     margin-bottom: 16px;
 }

 .ft-col a {
     display: flex;
     align-items: center;
     gap: 5px;
     margin-bottom: 10px;
     text-decoration: none;
     color: rgba(255, 255, 255, .4);
     font-size: 13px;
     font-weight: 500;
     transition: color .2s;
 }

 .ft-col a:hover {
     color: #fff;
 }

 .ft-col a::before {
     content: '';
     width: 3px;
     height: 3px;
     background: currentColor;
     flex-shrink: 0;
     opacity: .4;
 }

 /* ─── BIG BRAND FOOTER ─── */
 .ft-bigname {
     padding: 0 6% 0;
     line-height: 1;
     overflow: hidden;
 }

 .ft-bigname-inner {
     display: flex;
     align-items: flex-end;
     position: relative;
 }

 .ft-big-text {
     font-family: 'Outfit', sans-serif;
     font-size: clamp(72px, 12vw, 200px);
     font-weight: 900;
     letter-spacing: -.06em;
     color: transparent;
     -webkit-text-stroke: 1.5px rgba(255, 255, 255, .12);
     text-transform: uppercase;
     white-space: nowrap;
     position: relative;
     user-select: none;
     transition: color .4s, -webkit-text-stroke .4s;
     line-height: 0.88;
 }

 .ft-big-text:hover {
     color: rgba(255, 255, 255, .05);
     -webkit-text-stroke: 1.5px rgba(184, 224, 0, .5);
 }

 /* Animated fill on hover */
 .ft-big-text .fill {
     position: absolute;
     inset: 0;
     background: linear-gradient(90deg, transparent 0%, var(--lime) 50%, transparent 100%);
     background-size: 200% 100%;
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
     opacity: 0;
     transition: opacity .5s;
     animation: shimmerBrand 6s linear infinite;
     animation-play-state: paused;
 }

 .ft-bigname-inner:hover .fill {
     opacity: 1;
     animation-play-state: running;
 }

 @keyframes shimmerBrand {
     0% {
         background-position: 200% 0
     }

     100% {
         background-position: -200% 0
     }
 }

 .ft-bigname-year {
     font-family: 'JetBrains Mono', monospace;
     font-size: clamp(14px, 1.5vw, 22px);
     color: rgba(255, 255, 255, .18);
     margin-left: auto;
     padding-bottom: 0.3em;
     letter-spacing: .06em;
     white-space: nowrap;
     padding-left: 32px;
 }

 /* ─── offices ─── */
 .ft-offices {
     padding: 28px 6%;
     border-top: 1px solid rgba(255, 255, 255, .07);
     border-bottom: 1px solid rgba(255, 255, 255, .07);
     display: grid;
     grid-template-columns: repeat(5, 1fr);
 }

 .ft-office {
     padding: 20px 22px;
     border-right: 1px solid rgba(255, 255, 255, .07);
 }

 .ft-office:last-child {
     border-right: none;
 }

 .ft-office-city {
     font-family: 'Outfit', sans-serif;
     font-size: 13px;
     font-weight: 900;
     margin-bottom: 3px;
     color: #fff;
 }

 .ft-office-country {
     font-size: 11px;
     color: rgba(255, 255, 255, .35);
     margin-bottom: 6px;
 }

 .ft-office-dot {
     display: flex;
     align-items: center;
     gap: 5px;
     font-size: 10px;
     color: rgba(255, 255, 255, .4);
 }

 .ft-office-dot::before {
     content: '';
     width: 6px;
     height: 6px;
     background: #4ade80;
     box-shadow: 0 0 6px #4ade80;
     animation: blink 2s infinite;
 }

 @keyframes blink {

     0%,
     100% {
         opacity: 1
     }

     50% {
         opacity: .3
     }
 }

 .ft-bottom {
     padding: 20px 6%;
     display: flex;
     justify-content: space-between;
     align-items: center;
     flex-wrap: wrap;
     gap: 14px;
 }

 .ft-copy {
     font-size: 12px;
     color: rgba(255, 255, 255, .2);
 }

 .ft-legal {
     display: flex;
     gap: 22px;
 }

 .ft-legal a {
     font-size: 12px;
     color: rgba(255, 255, 255, .3);
     text-decoration: none;
     transition: color .2s;
 }

 .ft-legal a:hover {
     color: var(--lime);
 }