/**
 * Realiz - Creative Agency HTML Template
 * @author: ThemeWisdom
 * @version: 1.0.0
 */

/* ==========================================================================
   TABLE OF CONTENTS
   ==========================================================================
   01. Reset & Global Variables
   02. Global Scaffolding (Scrollbar, Cursors)
   03. Reveal On Scroll Engine
   04. Tailwind Fallback Utilities
   05. Common Components (Badges, Navigation)
   06. Layout & Grid Systems
   07. Home Page Variations
       - Home 1: Index / Book
       - Home 2: Vanguard / Arch
       - Home 4: Columns
       - Home 5: List
       - Home 8: Aurora
   08. Inner Page Variations
       - Works / Works-Alt
       - Project Detail
       - About Variants
       - Blog & Journal
   09. Navigation & Menus
   10. Interactive Micro-Engines
   11. Overrides & Performance Hacks
   ========================================================================== */

/* Minimal non-invasive fixes for the local Tailwind-free build */

html {
    -webkit-text-size-adjust: 100%;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

a {
    text-decoration: none;
}

img,
svg,
video,
canvas {
    max-width: 100%;
}

/* Keep hidden menu fully off-canvas until original JS opens it */

#menu-panel {
    will-change: transform;
}

/* Tailwind placeholder for ThemeForest local delivery.
   For production, replace this file with your compiled Tailwind CSS output.
   Example: `npx tailwindcss -i ./src/input.css -o ./assets/css/tailwind.min.css --minify`
*/

/* Basic reset + essential classes for a safer fallback in the packaged theme */

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

img,
video,
canvas,
svg {
    max-width: 100%;
}


/* GLOBAL EASING SYSTEM (2026 EDITION) */

:root {
    --tft-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --tft-ease-out: cubic-bezier(0.33, 1, 0.68, 1);
    --tft-body: 'Plus Jakarta Sans', sans-serif;
    --tft-display: 'Space Grotesk', sans-serif;
    --font-body: 'Plus Jakarta Sans', sans-serif;
    --font-display: 'Space Grotesk', sans-serif;
}

/* --- GLOBAL ELITE SCROLLBAR --- */

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: #0d2620;
}

::-webkit-scrollbar-thumb {
    background: rgba(212, 245, 76, 0.2);
    border-radius: 20px;
    border: 2px solid #0d2620;
}

::-webkit-scrollbar-thumb:hover {
    background: #d4f54c;
}

/* Firefox */

* {
    scrollbar-width: thin;
    scrollbar-color: rgba(212, 245, 76, 0.2) #0d2620;
}

/* REVEAL ON SCROLL ENGINE */

.reveal-up {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1.2s var(--tft-ease), transform 1.2s var(--tft-ease);
    will-change: transform, opacity;
}

.reveal-up.active {
    opacity: 1;
    transform: translateY(0);
}

/* Minimal color utilities (extend as needed in your build) */

.bg-brand-bg {
    background-color: #0d2620 !important;
}

.text-white {
    color: #fff !important;
}

.overflow-hidden {
    overflow: hidden !important;
}

/* Keep this file as an editable placeholder and bundle full Tailwind before final upload. */

/* Tailwind runtime variable defaults for compiled utility classes */

*,
::before,
::after {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x: ;
    --tw-pan-y: ;
    --tw-pinch-zoom: ;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position: ;
    --tw-gradient-via-position: ;
    --tw-gradient-to-position: ;
    --tw-ordinal: ;
    --tw-slashed-zero: ;
    --tw-numeric-figure: ;
    --tw-numeric-spacing: ;
    --tw-numeric-fraction: ;
    --tw-ring-inset: ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgb(59 130 246 / 0.5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur: ;
    --tw-brightness: ;
    --tw-contrast: ;
    --tw-grayscale: ;
    --tw-hue-rotate: ;
    --tw-invert: ;
    --tw-saturate: ;
    --tw-sepia: ;
    --tw-drop-shadow: ;
    --tw-backdrop-blur: ;
    --tw-backdrop-brightness: ;
    --tw-backdrop-contrast: ;
    --tw-backdrop-grayscale: ;
    --tw-backdrop-hue-rotate: ;
    --tw-backdrop-invert: ;
    --tw-backdrop-opacity: ;
    --tw-backdrop-saturate: ;
    --tw-backdrop-sepia: ;
}

::backdrop {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x: ;
    --tw-pan-y: ;
    --tw-pinch-zoom: ;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position: ;
    --tw-gradient-via-position: ;
    --tw-gradient-to-position: ;
    --tw-ordinal: ;
    --tw-slashed-zero: ;
    --tw-numeric-figure: ;
    --tw-numeric-spacing: ;
    --tw-numeric-fraction: ;
    --tw-ring-inset: ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgb(59 130 246 / 0.5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
}

.\!container {
    width: 100% !important
}

.container {
    width: 100%
}

@media (min-width:640px) {
    .\!container {
        max-width: 640px !important
    }
    .container {
        max-width: 640px
    }
}

@media (min-width:768px) {
    .\!container {
        max-width: 768px !important
    }
    .container {
        max-width: 768px
    }
}

@media (min-width:1024px) {
    .\!container {
        max-width: 1024px !important
    }
    .container {
        max-width: 1024px
    }
}

@media (min-width:1280px) {
    .\!container {
        max-width: 1280px !important
    }
    .container {
        max-width: 1280px
    }
}

@media (min-width:1536px) {
    .\!container {
        max-width: 1536px !important
    }
    .container {
        max-width: 1536px
    }
}

.pointer-events-none {
    pointer-events: none
}

.pointer-events-auto {
    pointer-events: auto
}

.invisible {
    visibility: hidden
}

.static {
    position: static
}

.fixed {
    position: fixed
}

.absolute {
    position: absolute
}

.relative {
    position: relative
}

.sticky {
    position: sticky
}

.inset-0 {
    inset: 0
}

.inset-\[-5\%\] {
    inset: -5%
}

.inset-x-0 {
    left: 0;
    right: 0
}

.inset-y-0 {
    top: 0;
    bottom: 0
}

.-bottom-10 {
    bottom: -2.5rem
}

.-bottom-4 {
    bottom: -1rem
}

.-bottom-6 {
    bottom: -1.5rem
}

.-bottom-8 {
    bottom: -2rem
}

.-left-10 {
    left: -2.5rem
}

.-left-20 {
    left: -5rem
}

.-left-6 {
    left: -1.5rem
}

.-right-20 {
    right: -5rem
}

.-right-4 {
    right: -1rem
}

.-right-40 {
    right: -10rem
}

.-right-8 {
    right: -2rem
}

.-top-8 {
    top: -2rem
}

.bottom-0 {
    bottom: 0
}

.bottom-12 {
    bottom: 3rem
}

.bottom-20 {
    bottom: 5rem
}

.bottom-6 {
    bottom: 1.5rem
}

.bottom-8 {
    bottom: 2rem
}

.bottom-\[-40px\] {
    bottom: -40px
}

.bottom-\[52px\] {
    bottom: 52px
}

.bottom-\[74px\] {
    bottom: 74px
}

.left-0 {
    left: 0
}

.left-1\/2 {
    left: 50%
}

.left-12 {
    left: 3rem
}

.left-4 {
    left: 1rem
}

.left-\[-20px\] {
    left: -20px
}

.right-0 {
    right: 0
}

.right-12 {
    right: 3rem
}

.right-20 {
    right: 5rem
}

.right-4 {
    right: 1rem
}

.right-\[-10px\] {
    right: -10px
}

.top-0 {
    top: 0
}

.top-1\/2 {
    top: 50%
}

.top-20 {
    top: 5rem
}

.top-4 {
    top: 1rem
}

.top-40 {
    top: 10rem
}

.top-8 {
    top: 2rem
}

.top-\[-20px\] {
    top: -20px
}

.top-\[12vh\] {
    top: 12vh
}

.top-\[150px\] {
    top: 150px
}

.top-\[16px\] {
    top: 16px
}

.top-\[20\%\] {
    top: 20%
}

.top-\[60\%\] {
    top: 60%
}

.top-\[70px\] {
    top: 70px
}

.top-\[8px\] {
    top: 8px
}

.isolate {
    isolation: isolate
}

.z-0 {
    z-index: 0
}

.z-10 {
    z-index: 10
}

.z-20 {
    z-index: 20
}

.z-30 {
    z-index: 30
}

.z-40 {
    z-index: 40
}

.z-50 {
    z-index: 50
}

.z-\[100\] {
    z-index: 100
}

.z-\[110\] {
    z-index: 110
}

.z-\[12\] {
    z-index: 12
}

.z-\[55\] {
    z-index: 55
}

.z-\[60\] {
    z-index: 60
}

.order-1 {
    order: 1
}

.order-2 {
    order: 2
}

.col-span-12 {
    grid-column: span 12/span 12
}

.row-span-2 {
    grid-row: span 2/span 2
}

.mx-16 {
    margin-left: 4rem;
    margin-right: 4rem
}

.mx-auto {
    margin-left: auto;
    margin-right: auto
}

.my-8 {
    margin-top: 2rem;
    margin-bottom: 2rem
}

.-ml-8 {
    margin-left: -2rem
}

.-mr-12 {
    margin-right: -3rem
}

.-mr-40 {
    margin-right: -10rem
}

.-mt-12 {
    margin-top: -3rem
}

.-mt-40 {
    margin-top: -10rem
}

.mb-0 {
    margin-bottom: 0
}

.mb-1 {
    margin-bottom: .25rem
}

.mb-10 {
    margin-bottom: 2.5rem
}

.mb-12 {
    margin-bottom: 3rem
}

.mb-16 {
    margin-bottom: 4rem
}

.mb-2 {
    margin-bottom: .5rem
}

.mb-20 {
    margin-bottom: 5rem
}

.mb-24 {
    margin-bottom: 6rem
}

.mb-3 {
    margin-bottom: .75rem
}

.mb-32 {
    margin-bottom: 8rem
}

.mb-4 {
    margin-bottom: 1rem
}

.mb-40 {
    margin-bottom: 10rem
}

.mb-5 {
    margin-bottom: 1.25rem
}

.mb-6 {
    margin-bottom: 1.5rem
}

.mb-8 {
    margin-bottom: 2rem
}

.ml-2 {
    margin-left: .5rem
}

.ml-32 {
    margin-left: 8rem
}

.ml-6 {
    margin-left: 1.5rem
}

.ml-auto {
    margin-left: auto
}

.mr-2 {
    margin-right: .5rem
}

.mr-3 {
    margin-right: .75rem
}

.mt-10 {
    margin-top: 2.5rem
}

.mt-12 {
    margin-top: 3rem
}

.mt-16 {
    margin-top: 4rem
}

.mt-2 {
    margin-top: .5rem
}

.mt-20 {
    margin-top: 5rem
}

.mt-4 {
    margin-top: 1rem
}

.mt-40 {
    margin-top: 10rem
}

.mt-6 {
    margin-top: 1.5rem
}

.mt-8 {
    margin-top: 2rem
}

.mt-auto {
    margin-top: auto
}

.line-clamp-2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.block {
    display: block
}

.inline-block {
    display: inline-block
}

.inline {
    display: inline
}

.flex {
    display: flex
}

.inline-flex {
    display: inline-flex
}

.grid {
    display: grid
}

.hidden {
    display: none
}

.aspect-\[1\.8\/1\] {
    aspect-ratio: 1.8/1
}

.aspect-\[3\/4\] {
    aspect-ratio: 3/4
}

.aspect-\[4\/5\] {
    aspect-ratio: 4/5
}

.aspect-square {
    aspect-ratio: 1/1
}

.aspect-video {
    aspect-ratio: 16/9
}

.h-1 {
    height: .25rem
}

.h-1\.5 {
    height: .375rem
}

.h-1\/2 {
    height: 50%
}

.h-10 {
    height: 2.5rem
}

.h-11 {
    height: 2.75rem
}

.h-12 {
    height: 3rem
}

.h-14 {
    height: 3.5rem
}

.h-16 {
    height: 4rem
}

.h-2 {
    height: .5rem
}

.h-20 {
    height: 5rem
}

.h-24 {
    height: 6rem
}

.h-28 {
    height: 7rem
}

.h-3 {
    height: .75rem
}

.h-32 {
    height: 8rem
}

.h-4 {
    height: 1rem
}

.h-48 {
    height: 12rem
}

.h-5 {
    height: 1.25rem
}

.h-6 {
    height: 1.5rem
}

.h-64 {
    height: 16rem
}

.h-8 {
    height: 2rem
}

.h-96 {
    height: 24rem
}

.h-\[100dvh\] {
    height: 100dvh
}

.h-\[140px\] {
    height: 140px
}

.h-\[18px\] {
    height: 18px
}

.h-\[1px\] {
    height: 1px
}

.h-\[2px\] {
    height: 2px
}

.h-\[300px\] {
    height: 300px
}

.h-\[34px\] {
    height: 34px
}

.h-\[360px\] {
    height: 360px
}

.h-\[40\%\] {
    height: 40%
}

.h-\[50\%\] {
    height: 50%
}

.h-\[50px\] {
    height: 50px
}

.h-\[58px\] {
    height: 58px
}

.h-\[600px\] {
    height: 600px
}

.h-\[60px\] {
    height: 60px
}

.h-\[60vh\] {
    height: 60vh
}

.h-\[70px\] {
    height: 70px
}

.h-\[70vh\] {
    height: 70vh
}

.h-\[90vh\] {
    height: 90vh
}

.h-\[calc\(100dvh-70px\)\] {
    height: calc(100dvh - 70px)
}

.h-auto {
    height: auto
}

.h-fit {
    height: -moz-fit-content;
    height: fit-content
}

.h-full {
    height: 100%
}

.h-px {
    height: 1px
}

.h-screen {
    height: 100vh
}

.max-h-0 {
    max-height: 0
}

.min-h-\[33\.33\%\] {
    min-height: 33.33%
}

.min-h-\[800px\] {
    min-height: 800px
}

.min-h-screen {
    min-height: 100vh
}

.w-0 {
    width: 0
}

.w-1 {
    width: .25rem
}

.w-1\.5 {
    width: .375rem
}

.w-1\/4 {
    width: 25%
}

.w-10 {
    width: 2.5rem
}

.w-12 {
    width: 3rem
}

.w-14 {
    width: 3.5rem
}

.w-16 {
    width: 4rem
}

.w-2 {
    width: .5rem
}

.w-20 {
    width: 5rem
}

.w-24 {
    width: 6rem
}

.w-28 {
    width: 7rem
}

.w-3 {
    width: .75rem
}

.w-32 {
    width: 8rem
}

.w-4 {
    width: 1rem
}

.w-48 {
    width: 12rem
}

.w-5 {
    width: 1.25rem
}

.w-6 {
    width: 1.5rem
}

.w-64 {
    width: 16rem
}

.w-72 {
    width: 18rem
}

.w-8 {
    width: 2rem
}

.w-96 {
    width: 24rem
}

.w-\[100px\] {
    width: 100px
}

.w-\[140px\] {
    width: 140px
}

.w-\[150\%\] {
    width: 150%
}

.w-\[150px\] {
    width: 150px
}

.w-\[1px\] {
    width: 1px
}

.w-\[20px\] {
    width: 20px
}

.w-\[260px\] {
    width: 260px
}

.w-\[28px\] {
    width: 28px
}

.w-\[300px\] {
    width: 300px
}

.w-\[40px\] {
    width: 40px
}

.w-\[50px\] {
    width: 50px
}

.w-\[58px\] {
    width: 58px
}

.w-\[600px\] {
    width: 600px
}

.w-\[60px\] {
    width: 60px
}

.w-\[70\%\] {
    width: 70%
}

.w-\[70px\] {
    width: 70px
}

.w-full {
    width: 100%
}

.w-px {
    width: 1px
}

.w-screen {
    width: 100vw
}

.max-w-2xl {
    max-width: 42rem
}

.max-w-3xl {
    max-width: 48rem
}

.max-w-4xl {
    max-width: 56rem
}

.max-w-5xl {
    max-width: 64rem
}

.max-w-6xl {
    max-width: 72rem
}

.max-w-\[1200px\] {
    max-width: 1200px
}

.max-w-\[1240px\] {
    max-width: 1240px
}

.max-w-\[1320px\] {
    max-width: 1320px
}

.max-w-\[1400px\] {
    max-width: 1400px
}

.max-w-\[1500px\] {
    max-width: 1500px
}

.max-w-\[200px\] {
    max-width: 200px
}

.max-w-\[500px\] {
    max-width: 500px
}

.max-w-md {
    max-width: 28rem
}

.max-w-sm {
    max-width: 24rem
}

.max-w-xl {
    max-width: 36rem
}

.max-w-xs {
    max-width: 20rem
}

.flex-1 {
    flex: 1 1 0%
}

.flex-shrink {
    flex-shrink: 1
}

.shrink-0 {
    flex-shrink: 0
}

.origin-center {
    transform-origin: center
}

.-translate-x-1\/2 {
    --tw-translate-x: -50%
}

.-translate-x-1\/2,
.-translate-x-4 {
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.-translate-x-4 {
    --tw-translate-x: -1rem
}

.-translate-x-full {
    --tw-translate-x: -100%
}

.-translate-x-full,
.-translate-y-1\/2 {
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.-translate-y-1\/2 {
    --tw-translate-y: -50%
}

.translate-x-1\/4 {
    --tw-translate-x: 25%
}

.translate-x-1\/4,
.translate-y-4 {
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.translate-y-4 {
    --tw-translate-y: 1rem
}

.translate-y-\[-20px\] {
    --tw-translate-y: -20px
}

.-rotate-2,
.translate-y-\[-20px\] {
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.-rotate-2 {
    --tw-rotate: -2deg
}

.-rotate-90 {
    --tw-rotate: -90deg
}

.-rotate-90,
.rotate-12 {
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.rotate-12 {
    --tw-rotate: 12deg
}

.rotate-3 {
    --tw-rotate: 3deg
}

.rotate-3,
.rotate-6 {
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.rotate-6 {
    --tw-rotate: 6deg
}

.scale-100 {
    --tw-scale-x: 1;
    --tw-scale-y: 1
}

.scale-100,
.scale-105 {
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.scale-105 {
    --tw-scale-x: 1.05;
    --tw-scale-y: 1.05
}

.scale-110 {
    --tw-scale-x: 1.1;
    --tw-scale-y: 1.1
}

.scale-110,
.scale-50 {
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.scale-50 {
    --tw-scale-x: .5;
    --tw-scale-y: .5
}

.scale-95 {
    --tw-scale-x: .95;
    --tw-scale-y: .95
}

.scale-95,
.transform {
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

@keyframes bounce {
    0%,
    to {
        transform: translateY(-25%);
        animation-timing-function: cubic-bezier(.8, 0, 1, 1)
    }
    50% {
        transform: none;
        animation-timing-function: cubic-bezier(0, 0, .2, 1)
    }
}

.animate-bounce {
    animation: bounce 1s infinite
}

@keyframes ping {
    75%,
    to {
        transform: scale(2);
        opacity: 0
    }
}

.animate-ping {
    animation: ping 1s cubic-bezier(0, 0, .2, 1) infinite
}

@keyframes pulse {
    50% {
        opacity: .5
    }
}

.animate-pulse {
    animation: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite
}

.cursor-pointer {
    cursor: pointer
}

.select-none {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.resize-none {
    resize: none
}

.resize {
    resize: both
}

.grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr))
}

.grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr))
}

.flex-col {
    flex-direction: column
}

.flex-wrap {
    flex-wrap: wrap
}

.items-start {
    align-items: flex-start
}

.items-end {
    align-items: flex-end
}

.items-center {
    align-items: center
}

.items-stretch {
    align-items: stretch
}

.justify-end {
    justify-content: flex-end
}

.justify-center {
    justify-content: center
}

.justify-between {
    justify-content: space-between
}

.gap-0 {
    gap: 0
}

.gap-1 {
    gap: .25rem
}

.gap-10 {
    gap: 2.5rem
}

.gap-12 {
    gap: 3rem
}

.gap-16 {
    gap: 4rem
}

.gap-2 {
    gap: .5rem
}

.gap-20 {
    gap: 5rem
}

.gap-24 {
    gap: 6rem
}

.gap-3 {
    gap: .75rem
}

.gap-32 {
    gap: 8rem
}

.gap-4 {
    gap: 1rem
}

.gap-6 {
    gap: 1.5rem
}

.gap-8 {
    gap: 2rem
}

.gap-x-20 {
    -moz-column-gap: 5rem;
    column-gap: 5rem
}

.gap-y-10 {
    row-gap: 2.5rem
}

.space-y-0>:not([hidden])~:not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0px*(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0px*var(--tw-space-y-reverse))
}

.space-y-32>:not([hidden])~:not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(8rem*(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(8rem*var(--tw-space-y-reverse))
}

.space-y-4>:not([hidden])~:not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(1rem*(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1rem*var(--tw-space-y-reverse))
}

.space-y-6>:not([hidden])~:not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(1.5rem*(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1.5rem*var(--tw-space-y-reverse))
}

.self-start {
    align-self: flex-start
}

.overflow-hidden {
    overflow: hidden
}

.overflow-x-auto {
    overflow-x: auto
}

.overflow-y-auto {
    overflow-y: auto
}

.overflow-x-hidden {
    overflow-x: hidden
}

.whitespace-nowrap {
    white-space: nowrap
}

.rounded {
    border-radius: .25rem
}

.rounded-\[2\.5rem\] {
    border-radius: 2.5rem
}

.rounded-\[2px\] {
    border-radius: 2px
}

.rounded-\[2rem\] {
    border-radius: 2rem
}

.rounded-\[4px\] {
    border-radius: 4px
}

.rounded-full {
    border-radius: 9999px
}

.rounded-sm {
    border-radius: .125rem
}

.rounded-bl-\[40px\] {
    border-bottom-left-radius: 40px
}

.rounded-tr-3xl {
    border-top-right-radius: 1.5rem
}

.border {
    border-width: 1px
}

.border-2 {
    border-width: 2px
}

.border-4 {
    border-width: 4px
}

.border-x {
    border-left-width: 1px;
    border-right-width: 1px
}

.border-y {
    border-top-width: 1px
}

.border-b,
.border-y {
    border-bottom-width: 1px
}

.border-l {
    border-left-width: 1px
}

.border-l-2 {
    border-left-width: 2px
}

.border-r {
    border-right-width: 1px
}

.border-t {
    border-top-width: 1px
}

.border-black\/10 {
    border-color: rgba(0, 0, 0, .1)
}

.border-black\/5 {
    border-color: rgba(0, 0, 0, .05)
}

.border-brand-lime {
    --tw-border-opacity: 1;
    border-color: rgb(212 245 76/var(--tw-border-opacity, 1))
}

.border-brand-lime\/20 {
    border-color: rgba(212, 245, 76, .2)
}

.border-brand-lime\/30 {
    border-color: rgba(212, 245, 76, .3)
}

.border-brand-lime\/40 {
    border-color: rgba(212, 245, 76, .4)
}

.border-brand-sidebar {
    --tw-border-opacity: 1;
    border-color: rgb(9 64 48/var(--tw-border-opacity, 1))
}

.border-gray-200 {
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235/var(--tw-border-opacity, 1))
}

.border-gray-400 {
    --tw-border-opacity: 1;
    border-color: rgb(156 163 175/var(--tw-border-opacity, 1))
}

.border-white {
    --tw-border-opacity: 1;
    border-color: rgb(255 255 255/var(--tw-border-opacity, 1))
}

.border-white\/10 {
    border-color: hsla(0, 0%, 100%, .1)
}

.border-white\/20 {
    border-color: hsla(0, 0%, 100%, .2)
}

.border-white\/5 {
    border-color: hsla(0, 0%, 100%, .05)
}

.bg-\[\#161f1d\] {
    --tw-bg-opacity: 1;
    background-color: rgb(22 31 29/var(--tw-bg-opacity, 1))
}

.bg-\[\#f8f9fa\] {
    --tw-bg-opacity: 1;
    background-color: rgb(248 249 250/var(--tw-bg-opacity, 1))
}

.bg-black {
    --tw-bg-opacity: 1;
    background-color: rgb(0 0 0/var(--tw-bg-opacity, 1))
}

.bg-black\/10 {
    background-color: rgba(0, 0, 0, .1)
}

.bg-black\/20 {
    background-color: rgba(0, 0, 0, .2)
}

.bg-black\/40 {
    background-color: rgba(0, 0, 0, .4)
}

.bg-black\/5 {
    background-color: rgba(0, 0, 0, .05)
}

.bg-brand-bg {
    --tw-bg-opacity: 1;
    background-color: rgb(13 38 32/var(--tw-bg-opacity, 1))
}

.bg-brand-bg\/40 {
    background-color: rgba(13, 38, 32, .4)
}

.bg-brand-bg\/60 {
    background-color: rgba(13, 38, 32, .6)
}

.bg-brand-bg\/70 {
    background-color: rgba(13, 38, 32, .7)
}

.bg-brand-dark {
    --tw-bg-opacity: 1;
    background-color: rgb(22 31 29/var(--tw-bg-opacity, 1))
}

.bg-brand-dark\/50 {
    background-color: rgba(22, 31, 29, .5)
}

.bg-brand-lime {
    --tw-bg-opacity: 1;
    background-color: rgb(212 245 76/var(--tw-bg-opacity, 1))
}

.bg-brand-lime\/10 {
    background-color: rgba(212, 245, 76, .1)
}

.bg-brand-lime\/5 {
    background-color: rgba(212, 245, 76, .05)
}

.bg-brand-menu {
    --tw-bg-opacity: 1;
    background-color: rgb(10 61 46/var(--tw-bg-opacity, 1))
}

.bg-brand-sidebar {
    --tw-bg-opacity: 1;
    background-color: rgb(9 64 48/var(--tw-bg-opacity, 1))
}

.bg-brand-sidebar\/10 {
    background-color: rgba(9, 64, 48, .1)
}

.bg-brand-sidebar\/20 {
    background-color: rgba(9, 64, 48, .2)
}

.bg-brand-sidebar\/5 {
    background-color: rgba(9, 64, 48, .05)
}

.bg-brand-sidebar\/90 {
    background-color: rgba(9, 64, 48, .9)
}

.bg-gray-100 {
    --tw-bg-opacity: 1;
    background-color: rgb(243 244 246/var(--tw-bg-opacity, 1))
}

.bg-gray-50 {
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251/var(--tw-bg-opacity, 1))
}

.bg-transparent {
    background-color: transparent
}

.bg-white {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity, 1))
}

.bg-white\/10 {
    background-color: hsla(0, 0%, 100%, .1)
}

.bg-white\/20 {
    background-color: hsla(0, 0%, 100%, .2)
}

.bg-white\/5 {
    background-color: hsla(0, 0%, 100%, .05)
}

.bg-white\/50 {
    background-color: hsla(0, 0%, 100%, .5)
}

.bg-white\/60 {
    background-color: hsla(0, 0%, 100%, .6)
}

.bg-\[radial-gradient\(circle_at_center\2c rgba\(212\2c 245\2c 76\2c 0\.04\)_0\%\2c transparent_70\%\)\] {
    background-image: radial-gradient(circle at center, rgba(212, 245, 76, .04) 0, transparent 70%)
}

.bg-\[radial-gradient\(circle_at_center\2c rgba\(212\2c 245\2c 76\2c 0\.1\)_0\%\2c transparent_70\%\)\] {
    background-image: radial-gradient(circle at center, rgba(212, 245, 76, .1) 0, transparent 70%)
}

.bg-\[radial-gradient\(circle_at_center\2c transparent_0\%\2c rgba\(0\2c 0\2c 0\2c 0\.4\)_100\%\)\] {
    background-image: radial-gradient(circle at center, transparent 0, rgba(0, 0, 0, .4) 100%)
}

.bg-\[url\(\'assets\/img\/about_hero\.png\'\)\]{background-image:url(../img/about_hero.png)}.bg-\[url\(\'assets\/img\/services_hero_bg_1774118938321\.png\'\)\]{background-image:url(../img/cover-1.png)}.bg-gradient-to-b{background-image:linear-gradient(to bottom,var(--tw-gradient-stops))}.bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}.bg-gradient-to-t{background-image:linear-gradient(to top,var(--tw-gradient-stops))}.from-black\/60{--tw-gradient-from:rgba(0,0,0,.6) var(--tw-gradient-from-position);--tw-gradient-to:transparent var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-brand-bg{--tw-gradient-from:#0d2620 var(--tw-gradient-from-position);--tw-gradient-to:rgba(13,38,32,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-brand-bg\/20{--tw-gradient-from:rgba(13,38,32,.2) var(--tw-gradient-from-position);--tw-gradient-to:rgba(13,38,32,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-brand-bg\/95{--tw-gradient-from:rgba(13,38,32,.95) var(--tw-gradient-from-position);--tw-gradient-to:rgba(13,38,32,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-brand-lime{--tw-gradient-from:#d4f54c var(--tw-gradient-from-position);--tw-gradient-to:rgba(212,245,76,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.via-brand-bg\/10{--tw-gradient-to:rgba(13,38,32,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),rgba(13,38,32,.1) var(--tw-gradient-via-position),var(--tw-gradient-to)}.via-brand-bg\/20{--tw-gradient-to:rgba(13,38,32,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),rgba(13,38,32,.2) var(--tw-gradient-via-position),var(--tw-gradient-to)}.via-brand-bg\/40{--tw-gradient-to:rgba(13,38,32,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),rgba(13,38,32,.4) var(--tw-gradient-via-position),var(--tw-gradient-to)}.via-brand-bg\/60{--tw-gradient-to:rgba(13,38,32,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),rgba(13,38,32,.6) var(--tw-gradient-via-position),var(--tw-gradient-to)}.via-transparent{--tw-gradient-to:transparent var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),transparent var(--tw-gradient-via-position),var(--tw-gradient-to)}.to-black\/60{--tw-gradient-to:rgba(0,0,0,.6) var(--tw-gradient-to-position)}.to-black\/80{--tw-gradient-to:rgba(0,0,0,.8) var(--tw-gradient-to-position)}.to-brand-bg{--tw-gradient-to:#0d2620 var(--tw-gradient-to-position)}.to-transparent{--tw-gradient-to:transparent var(--tw-gradient-to-position)}.bg-cover{background-size:cover}.bg-center{background-position:50%}.stroke-\[1\]{stroke-width:1}.object-cover{-o-object-fit:cover;object-fit:cover}.p-10{padding:2.5rem}.p-12{padding:3rem}.p-2{padding:.5rem}.p-4{padding:1rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.px-10{padding-left:2.5rem;padding-right:2.5rem}.px-12{padding-left:3rem;padding-right:3rem}.px-16{padding-left:4rem;padding-right:4rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-8{padding-left:2rem;padding-right:2rem}.px-\[25vw\]{padding-left:25vw;padding-right:25vw}.px-\[8\%\]{padding-left:8%;padding-right:8%}.py-0\.5{padding-top:.125rem;padding-bottom:.125rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-20{padding-top:5rem;padding-bottom:5rem}.py-24{padding-top:6rem;padding-bottom:6rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-32{padding-top:8rem;padding-bottom:8rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-40{padding-top:10rem;padding-bottom:10rem}.py-48{padding-top:12rem;padding-bottom:12rem}.py-5{padding-top:1.25rem;padding-bottom:1.25rem}.py-56{padding-top:14rem;padding-bottom:14rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.py-60{padding-top:15rem;padding-bottom:15rem}.py-8{padding-top:2rem;padding-bottom:2rem}.pb-20{padding-bottom:5rem}.pb-24{padding-bottom:6rem}.pb-32{padding-bottom:8rem}.pb-4{padding-bottom:1rem}.pb-6{padding-bottom:1.5rem}.pb-64{padding-bottom:16rem}.pb-8{padding-bottom:2rem}.pl-10{padding-left:2.5rem}.pl-4{padding-left:1rem}.pl-5{padding-left:1.25rem}.pl-6{padding-left:1.5rem}.pr-12{padding-right:3rem}.pr-8{padding-right:2rem}.pt-12{padding-top:3rem}.pt-16{padding-top:4rem}.pt-2{padding-top:.5rem}.pt-20{padding-top:5rem}.pt-32{padding-top:8rem}.pt-40{padding-top:10rem}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.align-middle{vertical-align:middle}.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.font-body{font-family:Plus Jakarta Sans,sans-serif}.font-display{font-family:Space Grotesk,serif}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-5xl{font-size:3rem;line-height:1}.text-6xl{font-size:3.75rem;line-height:1}.text-7xl{font-size:4.5rem;line-height:1}.text-\[100px\]{font-size:100px}.text-\[10px\]{font-size:10px}.text-\[110px\]{font-size:110px}.text-\[11px\]{font-size:11px}.text-\[12vw\]{font-size:12vw}.text-\[15px\]{font-size:15px}.text-\[15vw\]{font-size:15vw}.text-\[18px\]{font-size:18px}.text-\[24px\]{font-size:24px}.text-\[300px\]{font-size:300px}.text-\[45px\]{font-size:45px}.text-\[8px\]{font-size:8px}.text-\[9px\]{font-size:9px}.text-\[clamp\(70px\2c 13vw\2c 200px\)\]{font-size:clamp(70px,13vw,200px)}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-black{font-weight:900}.font-bold{font-weight:700}.font-light{font-weight:300}.font-medium{font-weight:500}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.lowercase{text-transform:lowercase}.italic{font-style:italic}.not-italic{font-style:normal}.leading-\[0\.75\]{line-height:.75}.leading-\[0\.85\]{line-height:.85}.leading-\[0\.8\]{line-height:.8}.leading-\[0\.95\]{line-height:.95}.leading-\[0\.9\]{line-height:.9}.leading-\[1\.15\]{line-height:1.15}.leading-none{line-height:1}.leading-relaxed{line-height:1.625}.leading-tight{line-height:1.25}.tracking-\[0\.15em\]{letter-spacing:.15em}.tracking-\[0\.1em\]{letter-spacing:.1em}.tracking-\[0\.2em\]{letter-spacing:.2em}.tracking-\[0\.3em\]{letter-spacing:.3em}.tracking-\[0\.45em\]{letter-spacing:.45em}.tracking-\[0\.4em\]{letter-spacing:.4em}.tracking-\[0\.5em\]{letter-spacing:.5em}.tracking-\[0\.6em\]{letter-spacing:.6em}.tracking-\[0\.8em\]{letter-spacing:.8em}.tracking-tight{letter-spacing:-.025em}.tracking-tighter{letter-spacing:-.05em}.tracking-wide{letter-spacing:.025em}.tracking-wider{letter-spacing:.05em}.tracking-widest{letter-spacing:.1em}.text-black\/20{color:rgba(0,0,0,.2)}.text-black\/30{color:rgba(0,0,0,.3)}.text-black\/35{color:rgba(0,0,0,.35)}.text-black\/40{color:rgba(0,0,0,.4)}.text-black\/45{color:rgba(0,0,0,.45)}.text-black\/50{color:rgba(0,0,0,.5)}.text-brand-bg{--tw-text-opacity:1;color:rgb(13 38 32/var(--tw-text-opacity,1))}.text-brand-lime{--tw-text-opacity:1;color:rgb(212 245 76/var(--tw-text-opacity,1))}.text-brand-sidebar{--tw-text-opacity:1;color:rgb(9 64 48/var(--tw-text-opacity,1))}.text-brand-sidebar\/30{color:rgba(9,64,48,.3)}.text-brand-sidebar\/40{color:rgba(9,64,48,.4)}.text-brand-sidebar\/60{color:rgba(9,64,48,.6)}.text-gray-400{--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity,1))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.text-white\/20{color:hsla(0,0%,100%,.2)}.text-white\/30{color:hsla(0,0%,100%,.3)}.text-white\/40{color:hsla(0,0%,100%,.4)}.text-white\/5{color:hsla(0,0%,100%,.05)}.text-white\/50{color:hsla(0,0%,100%,.5)}.text-white\/60{color:hsla(0,0%,100%,.6)}.text-white\/70{color:hsla(0,0%,100%,.7)}.text-white\/80{color:hsla(0,0%,100%,.8)}.text-white\/90{color:hsla(0,0%,100%,.9)}.text-white\/95{color:hsla(0,0%,100%,.95)}.underline{text-decoration-line:underline}.decoration-brand-lime\/0{text-decoration-color:rgba(212,245,76,0)}.decoration-brand-lime\/30{text-decoration-color:rgba(212,245,76,.3)}.decoration-white\/10{text-decoration-color:hsla(0,0%,100%,.1)}.decoration-white\/5{text-decoration-color:hsla(0,0%,100%,.05)}.decoration-\[2px\]{text-decoration-thickness:2px}.underline-offset-8{text-underline-offset:8px}.underline-offset-\[10px\]{text-underline-offset:10px}.underline-offset-\[20px\]{text-underline-offset:20px}.underline-offset-\[30px\]{text-underline-offset:30px}.opacity-0{opacity:0}.opacity-10{opacity:.1}.opacity-100{opacity:1}.opacity-20{opacity:.2}.opacity-30{opacity:.3}.opacity-40{opacity:.4}.opacity-5{opacity:.05}.opacity-50{opacity:.5}.opacity-60{opacity:.6}.opacity-70{opacity:.7}.opacity-80{opacity:.8}.opacity-\[0\.02\]{opacity:.02}.opacity-\[0\.03\]{opacity:.03}.opacity-\[0\.05\]{opacity:.05}.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color)}.shadow,.shadow-2xl{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-2xl{--tw-shadow:0 25px 50px -12px rgba(0,0,0,.25);--tw-shadow-colored:0 25px 50px -12px var(--tw-shadow-color)}.shadow-\[0_0_10px_rgba\(212\2c 245\2c 76\2c 0\.5\)\]{--tw-shadow:0 0 10px rgba(212,245,76,.5);--tw-shadow-colored:0 0 10px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\[0_0_15px_rgba\(212\2c 245\2c 76\2c 0\.6\)\]{--tw-shadow:0 0 15px rgba(212,245,76,.6);--tw-shadow-colored:0 0 15px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\[0_15px_30px_rgba\(0\2c 0\2c 0\2c 0\.5\)\]{--tw-shadow:0 15px 30px rgba(0,0,0,.5);--tw-shadow-colored:0 15px 30px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\[0_20px_50px_rgba\(0\2c 0\2c 0\2c 0\.5\)\]{--tw-shadow:0 20px 50px rgba(0,0,0,.5);--tw-shadow-colored:0 20px 50px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\[10px_0_30px_rgba\(0\2c 0\2c 0\2c 0\.2\)\]{--tw-shadow:10px 0 30px rgba(0,0,0,.2);--tw-shadow-colored:10px 0 30px var(--tw-shadow-color)}.shadow-\[10px_0_30px_rgba\(0\2c 0\2c 0\2c 0\.2\)\],.shadow-lg{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)}.shadow-md{--tw-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color)}.shadow-md,.shadow-sm{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 2px 0 rgba(0,0,0,.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color)}.shadow-xl{--tw-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1);--tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color),0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.outline-none{outline:2px solid transparent;outline-offset:2px}.outline{outline-style:solid}.ring-\[1\.5px\]{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1.5px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.ring-brand-sidebar{--tw-ring-opacity:1;--tw-ring-color:rgb(9 64 48/var(--tw-ring-opacity,1))}.ring-offset-\[1\.5px\]{--tw-ring-offset-width:1.5px}.blur{--tw-blur:blur(8px)}.blur,.blur-3xl{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.blur-3xl{--tw-blur:blur(64px)}.blur-\[100px\]{--tw-blur:blur(100px)}.blur-\[100px\],.blur-\[150px\]{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.blur-\[150px\]{--tw-blur:blur(150px)}.brightness-50{--tw-brightness:brightness(.5)}.brightness-50,.drop-shadow-2xl{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.drop-shadow-2xl{--tw-drop-shadow:drop-shadow(0 25px 25px rgba(0,0,0,.15))}.drop-shadow-\[0_20px_50px_rgba\(0\2c 0\2c 0\2c 0\.5\)\]{--tw-drop-shadow:drop-shadow(0 20px 50px rgba(0,0,0,.5))}.drop-shadow-\[0_20px_50px_rgba\(0\2c 0\2c 0\2c 0\.5\)\],.drop-shadow-lg{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.drop-shadow-lg{--tw-drop-shadow:drop-shadow(0 10px 8px rgba(0,0,0,.04)) drop-shadow(0 4px 3px rgba(0,0,0,.1))}.grayscale{--tw-grayscale:grayscale(100%)}.filter,.grayscale{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.backdrop-blur-md{--tw-backdrop-blur:blur(12px)}.backdrop-blur-md,.backdrop-blur-sm{backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.backdrop-blur-sm{--tw-backdrop-blur:blur(4px)}.backdrop-blur-xl{--tw-backdrop-blur:blur(24px)}.backdrop-blur-xl,.backdrop-filter{backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-100{transition-duration:.1s}.duration-1000{transition-duration:1s}.duration-300{transition-duration:.3s}.duration-500{transition-duration:.5s}.duration-700{transition-duration:.7s}.duration-\[2s\]{transition-duration:2s}.ease-\[cubic-bezier\(0\.77\2c 0\2c 0\.175\2c 1\)\]{transition-timing-function:cubic-bezier(.77,0,.175,1)}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}.selection\:bg-brand-lime ::-moz-selection{--tw-bg-opacity:1;background-color:rgb(212 245 76/var(--tw-bg-opacity,1))}.selection\:bg-brand-lime ::selection{--tw-bg-opacity:1;background-color:rgb(212 245 76/var(--tw-bg-opacity,1))}.selection\:text-brand-sidebar ::-moz-selection{--tw-text-opacity:1;color:rgb(9 64 48/var(--tw-text-opacity,1))}.selection\:text-brand-sidebar ::selection{--tw-text-opacity:1;color:rgb(9 64 48/var(--tw-text-opacity,1))}.selection\:bg-brand-lime::-moz-selection{--tw-bg-opacity:1;background-color:rgb(212 245 76/var(--tw-bg-opacity,1))}.selection\:bg-brand-lime::selection{--tw-bg-opacity:1;background-color:rgb(212 245 76/var(--tw-bg-opacity,1))}.selection\:text-brand-sidebar::-moz-selection{--tw-text-opacity:1;color:rgb(9 64 48/var(--tw-text-opacity,1))}.selection\:text-brand-sidebar::selection{--tw-text-opacity:1;color:rgb(9 64 48/var(--tw-text-opacity,1))}.after\:absolute:after{content:var(--tw-content);position:absolute}.after\:bottom-0:after{content:var(--tw-content);bottom:0}.after\:left-4:after{content:var(--tw-content);left:1rem}.after\:right-4:after{content:var(--tw-content);right:1rem}.after\:h-px:after{content:var(--tw-content);height:1px}.after\:bg-gray-100:after{content:var(--tw-content);--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity,1))}.hover\:-translate-y-1:hover{--tw-translate-y:-0.25rem}.hover\:-translate-y-1:hover,.hover\:rotate-0:hover{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:rotate-0:hover{--tw-rotate:0deg}.hover\:scale-100:hover{--tw-scale-x:1;--tw-scale-y:1}.hover\:scale-100:hover,.hover\:scale-105:hover{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:scale-105:hover{--tw-scale-x:1.05;--tw-scale-y:1.05}.hover\:scale-110:hover{--tw-scale-x:1.1;--tw-scale-y:1.1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:border-brand-lime:hover{--tw-border-opacity:1;border-color:rgb(212 245 76/var(--tw-border-opacity,1))}.hover\:border-brand-lime\/20:hover{border-color:rgba(212,245,76,.2)}.hover\:border-brand-sidebar:hover{--tw-border-opacity:1;border-color:rgb(9 64 48/var(--tw-border-opacity,1))}.hover\:bg-\[\#f0f2f1\]:hover{--tw-bg-opacity:1;background-color:rgb(240 242 241/var(--tw-bg-opacity,1))}.hover\:bg-brand-lime:hover{--tw-bg-opacity:1;background-color:rgb(212 245 76/var(--tw-bg-opacity,1))}.hover\:bg-brand-sidebar:hover{--tw-bg-opacity:1;background-color:rgb(9 64 48/var(--tw-bg-opacity,1))}.hover\:bg-white:hover{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.hover\:bg-white\/5:hover{background-color:hsla(0,0%,100%,.05)}.hover\:text-brand-bg:hover{--tw-text-opacity:1;color:rgb(13 38 32/var(--tw-text-opacity,1))}.hover\:text-brand-lime:hover{--tw-text-opacity:1;color:rgb(212 245 76/var(--tw-text-opacity,1))}.hover\:text-brand-sidebar:hover{--tw-text-opacity:1;color:rgb(9 64 48/var(--tw-text-opacity,1))}.hover\:text-white:hover{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.hover\:underline:hover{text-decoration-line:underline}.hover\:decoration-brand-lime\/100:hover{text-decoration-color:#d4f54c}.hover\:shadow-\[0_0_30px_rgba\(212\2c 245\2c 76\2c 0\.3\)\]:hover{--tw-shadow:0 0 30px rgba(212,245,76,.3);--tw-shadow-colored:0 0 30px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.hover\:grayscale-0:hover{--tw-grayscale:grayscale(0);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.focus\:border-brand-lime:focus{--tw-border-opacity:1;border-color:rgb(212 245 76/var(--tw-border-opacity,1))}.active\:scale-95:active{--tw-scale-x:.95;--tw-scale-y:.95;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group:hover .group-hover\:pointer-events-auto{pointer-events:auto}.group:hover .group-hover\:mb-12{margin-bottom:3rem}.group:hover .group-hover\:w-\[28px\]{width:28px}.group:hover .group-hover\:translate-x-1,.group\/btn:hover .group-hover\/btn\:translate-x-1{--tw-translate-x:0.25rem}.group:hover .group-hover\:translate-x-1,.group:hover .group-hover\:translate-x-2,.group\/btn:hover .group-hover\/btn\:translate-x-1{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group:hover .group-hover\:translate-x-2{--tw-translate-x:0.5rem}.group:hover .group-hover\:translate-y-0{--tw-translate-y:0px}.group:hover .group-hover\:rotate-0,.group:hover .group-hover\:translate-y-0{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group:hover .group-hover\:rotate-0{--tw-rotate:0deg}.group:hover .group-hover\:rotate-\[-45deg\]{--tw-rotate:-45deg}.group:hover .group-hover\:rotate-\[-45deg\],.group:hover .group-hover\:scale-105{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group:hover .group-hover\:scale-105{--tw-scale-x:1.05;--tw-scale-y:1.05}.group:hover .group-hover\:scale-110{--tw-scale-x:1.1;--tw-scale-y:1.1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group:hover .group-hover\:border-brand-lime{--tw-border-opacity:1;border-color:rgb(212 245 76/var(--tw-border-opacity,1))}.group:hover .group-hover\:bg-brand-lime{--tw-bg-opacity:1;background-color:rgb(212 245 76/var(--tw-bg-opacity,1))}.group:hover .group-hover\:bg-brand-lime\/20{background-color:rgba(212,245,76,.2)}.group:hover .group-hover\:bg-brand-sidebar{--tw-bg-opacity:1;background-color:rgb(9 64 48/var(--tw-bg-opacity,1))}.group:hover .group-hover\:text-brand-lime{--tw-text-opacity:1;color:rgb(212 245 76/var(--tw-text-opacity,1))}.group:hover .group-hover\:text-brand-lime\/20{color:rgba(212,245,76,.2)}.group:hover .group-hover\:text-brand-sidebar{--tw-text-opacity:1;color:rgb(9 64 48/var(--tw-text-opacity,1))}.group:hover .group-hover\:text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.group:hover .group-hover\:text-white\/60{color:hsla(0,0%,100%,.6)}.group:hover .group-hover\:underline{text-decoration-line:underline}.group:hover .group-hover\:opacity-100{opacity:1}.group:hover .group-hover\:opacity-20{opacity:.2}.group:hover .group-hover\:opacity-60{opacity:.6}.group:hover .group-hover\:opacity-90{opacity:.9}.group:hover .group-hover\:opacity-\[0\.05\]{opacity:.05}.group:hover .group-hover\:grayscale-0{--tw-grayscale:grayscale(0);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.group.tft-acc-active .group-\[\.tft-acc-active\]\:rotate-45{--tw-rotate:45deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@media (min-width:640px){.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width:768px){.md\:-bottom-12{bottom:-3rem}.md\:-bottom-8{bottom:-2rem}.md\:-left-12{left:-3rem}.md\:-left-20{left:-5rem}.md\:-right-10{right:-2.5rem}.md\:-top-14{top:-3.5rem}.md\:bottom-12{bottom:3rem}.md\:bottom-32{bottom:8rem}.md\:left-8{left:2rem}.md\:left-\[140px\]{left:140px}.md\:right-12{right:3rem}.md\:top-0{top:0}.md\:z-40{z-index:40}.md\:order-1{order:1}.md\:order-2{order:2}.md\:col-span-2{grid-column:span 2/span 2}.md\:col-span-3{grid-column:span 3/span 3}.md\:col-span-4{grid-column:span 4/span 4}.md\:col-span-5{grid-column:span 5/span 5}.md\:col-span-8{grid-column:span 8/span 8}.md\:mb-0{margin-bottom:0}.md\:mb-12{margin-bottom:3rem}.md\:mb-24{margin-bottom:6rem}.md\:mb-4{margin-bottom:1rem}.md\:ml-16{margin-left:4rem}.md\:ml-\[140px\]{margin-left:140px}.md\:mt-0{margin-top:0}.md\:mt-12{margin-top:3rem}.md\:mt-48{margin-top:12rem}.md\:block{display:block}.md\:flex{display:flex}.md\:hidden{display:none}.md\:aspect-\[3\/4\]{aspect-ratio:3/4}.md\:h-12{height:3rem}.md\:h-2\.5{height:.625rem}.md\:h-24{height:6rem}.md\:h-32{height:8rem}.md\:h-36{height:9rem}.md\:h-6{height:1.5rem}.md\:h-\[480px\]{height:480px}.md\:h-\[70vh\]{height:70vh}.md\:h-\[80vh\]{height:80vh}.md\:h-\[90vh\]{height:90vh}.md\:h-auto{height:auto}.md\:h-screen{height:100vh}.md\:min-h-0{min-height:0}.md\:w-1\/2{width:50%}.md\:w-1\/3{width:33.333333%}.md\:w-12{width:3rem}.md\:w-2\.5{width:.625rem}.md\:w-24{width:6rem}.md\:w-32{width:8rem}.md\:w-36{width:9rem}.md\:w-6{width:1.5rem}.md\:w-64{width:16rem}.md\:w-\[350px\]{width:350px}.md\:w-\[360px\]{width:360px}.md\:w-\[85\%\]{width:85%}.md\:w-auto{width:auto}.md\:-translate-x-full{--tw-translate-x:-100%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.md\:grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:flex-row{flex-direction:row}.md\:flex-row-reverse{flex-direction:row-reverse}.md\:items-center{align-items:center}.md\:justify-start{justify-content:flex-start}.md\:justify-end{justify-content:flex-end}.md\:gap-16{gap:4rem}.md\:gap-20{gap:5rem}.md\:gap-32{gap:8rem}.md\:overflow-visible{overflow:visible}.md\:rounded-none{border-radius:0}.md\:border-b-0{border-bottom-width:0}.md\:border-r{border-right-width:1px}.md\:p-12{padding:3rem}.md\:p-20{padding:5rem}.md\:p-24{padding:6rem}.md\:p-6{padding:1.5rem}.md\:p-8{padding:2rem}.md\:px-10{padding-left:2.5rem;padding-right:2.5rem}.md\:px-12{padding-left:3rem;padding-right:3rem}.md\:px-16{padding-left:4rem;padding-right:4rem}.md\:px-20{padding-left:5rem;padding-right:5rem}.md\:px-24{padding-left:6rem;padding-right:6rem}.md\:px-6{padding-left:1.5rem;padding-right:1.5rem}.md\:px-\[35vw\]{padding-left:35vw;padding-right:35vw}.md\:py-10{padding-top:2.5rem;padding-bottom:2.5rem}.md\:py-48{padding-top:12rem;padding-bottom:12rem}.md\:py-56{padding-top:14rem;padding-bottom:14rem}.md\:py-6{padding-top:1.5rem;padding-bottom:1.5rem}.md\:py-64{padding-top:16rem;padding-bottom:16rem}.md\:py-80{padding-top:20rem;padding-bottom:20rem}.md\:pl-16{padding-left:4rem}.md\:pl-\[140px\]{padding-left:140px}.md\:pt-24{padding-top:6rem}.md\:pt-56{padding-top:14rem}.md\:pt-\[120px\]{padding-top:120px}.md\:text-left{text-align:left}.md\:text-right{text-align:right}.md\:text-2xl{font-size:1.5rem;line-height:2rem}.md\:text-3xl{font-size:1.875rem;line-height:2.25rem}.md\:text-4xl{font-size:2.25rem;line-height:2.5rem}.md\:text-5xl{font-size:3rem}.md\:text-5xl,.md\:text-6xl{line-height:1}.md\:text-6xl{font-size:3.75rem}.md\:text-7xl{font-size:4.5rem}.md\:text-7xl,.md\:text-8xl{line-height:1}.md\:text-8xl{font-size:6rem}.md\:text-9xl{font-size:8rem;line-height:1}.md\:text-\[10px\]{font-size:10px}.md\:text-\[10vw\]{font-size:10vw}.md\:text-\[11vw\]{font-size:11vw}.md\:text-\[140px\]{font-size:140px}.md\:text-\[150px\]{font-size:150px}.md\:text-\[160px\]{font-size:160px}.md\:text-\[80px\]{font-size:80px}.md\:text-base{font-size:1rem;line-height:1.5rem}.md\:text-lg{font-size:1.125rem;line-height:1.75rem}.md\:text-sm{font-size:.875rem;line-height:1.25rem}.md\:text-xs{font-size:.75rem;line-height:1rem}}@media (min-width:1024px){.lg\:col-span-2{grid-column:span 2/span 2}.lg\:block{display:block}.lg\:flex{display:flex}.lg\:h-\[550px\]{height:550px}.lg\:w-1\/2{width:50%}.lg\:w-1\/3{width:33.333333%}.lg\:w-2\/3{width:66.666667%}.lg\:w-5\/12{width:41.666667%}.lg\:w-7\/12{width:58.333333%}.lg\:w-\[400px\]{width:400px}.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.lg\:flex-row{flex-direction:row}.lg\:items-end{align-items:flex-end}.lg\:items-center{align-items:center}.lg\:justify-between{justify-content:space-between}.lg\:gap-12{gap:3rem}.lg\:gap-48{gap:12rem}.lg\:border-l{border-left-width:1px}.lg\:p-10{padding:2.5rem}.lg\:p-12{padding:3rem}.lg\:p-20{padding:5rem}.lg\:px-24{padding-left:6rem;padding-right:6rem}.lg\:px-32{padding-left:8rem;padding-right:8rem}.lg\:py-40{padding-top:10rem;padding-bottom:10rem}.lg\:pl-32{padding-left:8rem}.lg\:pt-20{padding-top:5rem}.lg\:text-5xl{font-size:3rem}.lg\:text-5xl,.lg\:text-7xl{line-height:1}.lg\:text-7xl{font-size:4.5rem}.lg\:text-9xl{font-size:8rem;line-height:1}.lg\:text-\[100px\]{font-size:100px}.lg\:text-\[12vw\]{font-size:12vw}.lg\:text-\[5\.5rem\]{font-size:5.5rem}}@media (min-width:1280px){.xl\:w-\[350px\]{width:350px}.xl\:w-\[450px\]{width:450px}}
 html {
    scroll-behavior: smooth;
}

img {
    max-width: 100%;
}

.no-js-note {
    display: none;
}

/* === Final cleanup patch === */

html, body {
    overflow-x: hidden;
}

a {
    color: inherit;
    text-decoration: none;
}

a:hover, a:focus {
    color: inherit;
}

ul, ol {
    list-style: none !important;
    margin: 0;
    padding-left: 0;
}

li::marker {
    content: '' !important;
}

#menu-panel ul, #menu-panel li {
    list-style: none !important;
}

#menu-panel ul[id$="-submenu"] {
    padding-left: 0 !important;
    margin-left: 0 !important;
}

#menu-panel ul[id$="-submenu"] li {
    width: 100%;
    display: flex;
    justify-content: flex-end;
}

#menu-panel ul[id$="-submenu"] a {
    text-decoration: none !important;
}

.text-blue-500, .text-blue-600, .text-blue-700, .text-blue-800, .text-blue-900, a.text-blue-500, a.text-blue-600, a.text-blue-700, a.text-blue-800, a.text-blue-900 {
    color: #d4f54c !important;
}

.realiz-logo-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-family: 'Space Grotesk', serif;
    font-size: 1.35rem;
    line-height: 1;
    font-style: italic;
    text-transform: lowercase;
    color: #094030;
}

.filter-tab {
    color: rgba(255, 255, 255, .58) !important;
    transform: none !important;
    padding-bottom: .9rem;
    letter-spacing: .14em;
}

.filter-tab::after {
    left: 0 !important;
    transform: none !important;
    bottom: 0 !important;
    height: 3px !important;
    border-radius: 999px;
}

.filter-tab.active {
    color: #d4f54c !important;
    transform: none !important;
}

.filter-tab.active::after {
    width: 36px !important;
}

#index-hero-prev, #index-hero-next, #index-hero-prev svg, #index-hero-next svg {
    background: transparent !important;
    backdrop-filter: none !important;
}

/* Global fixes */

.social-item {
    opacity: 0 !important;
    transform: translateY(12px);
    transition: opacity .25s ease, transform .25s ease !important
}

.group:hover .social-item, .aside-group:hover .social-item {
    opacity: 1 !important;
    transform: translateY(0)
}

.group:not(:hover) .social-item, .aside-group:not(:hover) .social-item {
    opacity: 0 !important;
    transform: translateY(12px)
}

.group:hover .social-1, .aside-group:hover .social-1 {
    transition-delay: .16s
}

.group:hover .social-2, .aside-group:hover .social-2 {
    transition-delay: .12s
}

.group:hover .social-3, .aside-group:hover .social-3 {
    transition-delay: .08s
}

.group:hover .social-4, .aside-group:hover .social-4 {
    transition-delay: .04s
}

.group:hover .social-5, .aside-group:hover .social-5 {
    transition-delay: 0s
}

/* Hiding scrollbars for cleaner editorial layouts */

.no-scrollbar::-webkit-scrollbar, .menu-no-scrollbar::-webkit-scrollbar {
    display: none !important;
}

.no-scrollbar, .menu-no-scrollbar {
    -ms-overflow-style: none !important;
    scrollbar-width: none !important;
    overflow-x: hidden !important;
}

#main-scroll-container::-webkit-scrollbar, nav#menu-panel::-webkit-scrollbar {
    width: 6px;
    height: 6px
}

#main-scroll-container::-webkit-scrollbar-track, nav#menu-panel::-webkit-scrollbar-track {
    background: #0d2620
}

#main-scroll-container::-webkit-scrollbar-thumb, nav#menu-panel::-webkit-scrollbar-thumb {
    background: rgba(212, 245, 76, .32);
    border-radius: 999px
}

#main-scroll-container::-webkit-scrollbar-thumb:hover, nav#menu-panel::-webkit-scrollbar-thumb:hover {
    background: #d4f54c
}

.reveal-up .w-12.h-12, .group .w-\[48px\].h-\[58px\], .group .w-\[58px\].h-\[58px\] {
    display: flex;
    align-items: center;
    justify-content: center
}

.group [data-lucide="hand"] {
    display: block;
    margin: auto
}

#kinetic-cursor::after {
    transition: none !important
}

img[src=""], img:not([src]) {
    background: #071e18
}

/**
 * ===================================================================
 * PAGE SPECIFIC STYLES (STRICT SCOPE)
 * ===================================================================
 */

/* --- PAGE: ABOUT-ALT --- */

.tft-page-about-alt :root {
    --tft-bg: #0d2620;
    --tft-sidebar: #094030;
    --tft-menu: #0a3d2e;
    --tft-lime: #d4f54c;
    --tft-white: #ffffff;
    --tft-text-muted: rgba(255, 255, 255, 0.4);
    --tft-text-low: rgba(255, 255, 255, 0.2);
    --tft-border: rgba(212, 245, 76, 0.2);
}

.tft-page-about-alt {
    margin: 0;
    overflow-x: hidden;
    background-color: var(--tft-bg);
    color: var(--tft-white);
    font-family: 'Plus Jakarta Sans', sans-serif;
    cursor: default;
}

/* Vertical Text Utility */

.tft-page-about-alt .text-vertical {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

/* ELITE CUSTOM SCROLLBAR */

.tft-page-about-alt ::-webkit-scrollbar {
    width: 5px;
}

.tft-page-about-alt ::-webkit-scrollbar-track {
    background: var(--tft-bg);
}

.tft-page-about-alt ::-webkit-scrollbar-thumb {
    background: rgba(212, 245, 76, 0.3);
    border-radius: 10px;
}

.tft-page-about-alt ::-webkit-scrollbar-thumb:hover {
    background: var(--tft-lime);
}

/* Custom Scrollbar for Menu */

.tft-page-about-alt .no-scrollbar::-webkit-scrollbar {
    display: none;
}

.tft-page-about-alt .no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Hamburger Morphing Animation */

.tft-page-about-alt .menu-toggle {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s ease, border-color 0.4s ease;
}

.tft-page-about-alt .menu-toggle:hover {
    transform: scale(1.05);
}

.tft-page-about-alt .menu-toggle.menu-open {
    border-color: var(--tft-lime) !important;
    transform: scale(1);
}

.tft-page-about-alt .hamburger-line {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s ease, opacity 0.4s ease, width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: center;
}

.tft-page-about-alt .menu-toggle.menu-open .line-1 {
    transform: translateY(8px) rotate(45deg);
    background-color: #094030;
}

.tft-page-about-alt .menu-toggle.menu-open .line-2 {
    opacity: 0;
    transform: translateX(15px);
}

.tft-page-about-alt .menu-toggle.menu-open .line-3 {
    width: 28px !important;
    transform: translateY(-8px) rotate(-45deg);
}

/* Wave Animation for Hand Icon */

@keyframes wave {
    0% {
        transform: rotate(0deg);
    }
    15% {
        transform: rotate(20deg);
    }
    30% {
        transform: rotate(-15deg);
    }
    45% {
        transform: rotate(20deg);
    }
    60% {
        transform: rotate(-15deg);
    }
    75% {
        transform: rotate(10deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

.tft-page-about-alt .animate-wave {
    animation: wave 1.5s ease-in-out infinite;
    transform-origin: 70% 70%;
}

/* Staggered Bouncy Reveal for Social Icons */

.tft-page-about-alt .social-item {
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.tft-page-about-alt .group:hover .social-item {
    opacity: 1;
    transform: translateY(0);
}

.tft-page-about-alt .group:hover .social-1 {
    transition-delay: 0.15s;
}

.tft-page-about-alt .group:hover .social-2 {
    transition-delay: 0.10s;
}

.tft-page-about-alt .group:hover .social-3 {
    transition-delay: 0.05s;
}

.tft-page-about-alt .group:hover .social-4 {
    transition-delay: 0s;
}

/* About Alt Styles */

.tft-page-about-alt .parallax-target {
    transition: transform 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.tft-page-about-alt .reveal-up {
    opacity: 0;
    transform: translateY(40px);
    transition: all 1.2s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.tft-page-about-alt .reveal-up.active {
    opacity: 1;
    transform: translateY(0);
}

.tft-page-about-alt .dna-gradient {
    background: linear-gradient(135deg, rgba(212, 245, 76, 0.1) 0%, transparent 100%);
}

.tft-page-about-alt .capability-card {
    transition: all 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}

.tft-page-about-alt .capability-card:hover {
    background-color: #d4f54c;
    color: #0d2620;
    transform: translateY(-10px);
}

.tft-page-about-alt .capability-card:hover svg {
    stroke: #0d2620;
    transform: scale(1.1) rotate(-5deg);
}

.tft-page-about-alt .step-progress-line {
    position: absolute;
    left: 2rem;
    top: 2rem;
    bottom: -6rem;
    width: 1px;
    background: rgba(255, 255, 255, 0.1);
    z-index: 10;
}

.tft-page-about-alt .step-progress-fill {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    background: #d4f54c;
    transition: height 0.8s ease;
}

.tft-page-about-alt .hero-stroke-text {
    -webkit-text-stroke: 2px rgba(255, 255, 255, 0.2);
    color: transparent;
    transition: all 0.8s ease;
}

.tft-page-about-alt .hero-stroke-text:hover {
    -webkit-text-stroke-color: #d4f54c;
}

/* --- PAGE: ABOUT-V2 --- */

.tft-page-about-v2 {
    margin: 0;
    background-color: #0d2620;
    color: white;
    font-family: 'Plus Jakarta Sans', sans-serif;
    overflow-x: hidden;
}

/* Vertical Text Utility */

.tft-page-about-v2 .text-vertical {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

/* Custom Scrollbar */

.tft-page-about-v2 .no-scrollbar::-webkit-scrollbar {
    display: none;
}

.tft-page-about-v2 .no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Hamburger Morphing Animation */

.tft-page-about-v2 .menu-toggle {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s ease, border-color 0.4s ease;
}

.tft-page-about-v2 .menu-toggle.menu-open {
    background-color: #d4f54c !important;
    border-color: #d4f54c !important;
    transform: scale(1);
}

.tft-page-about-v2 .hamburger-line {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s ease, opacity 0.4s ease, width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: center;
}

.tft-page-about-v2 .menu-toggle.menu-open .line-1 {
    transform: translateY(8px) rotate(45deg);
    background-color: #094030 !important;
}

.tft-page-about-v2 .menu-toggle.menu-open .line-2 {
    opacity: 0;
    transform: translateX(15px);
}

.tft-page-about-v2 .menu-toggle.menu-open .line-3 {
    width: 28px !important;
    transform: translateY(-8px) rotate(-45deg);
    background-color: #094030 !important;
}

/* Wave Animation */

@keyframes wave {
    0% {
        transform: rotate(0deg);
    }
    15% {
        transform: rotate(20deg);
    }
    30% {
        transform: rotate(-15deg);
    }
    45% {
        transform: rotate(20deg);
    }
    60% {
        transform: rotate(-15deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

.tft-page-about-v2 .animate-wave {
    animation: wave 1.5s ease-in-out infinite;
    transform-origin: 70% 70%;
}

/* Social Icons */

.tft-page-about-v2 .social-item {
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.tft-page-about-v2 .group:hover .social-item {
    opacity: 1;
    transform: translateY(0);
}

.tft-page-about-v2 .group:hover .social-1 {
    transition-delay: 0.15s;
}

.tft-page-about-v2 .group:hover .social-2 {
    transition-delay: 0.10s;
}

/* Animations */

.tft-page-about-v2 .reveal-up {
    opacity: 0;
    transform: translateY(40px);
    transition: all 1.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.tft-page-about-v2 .reveal-up.active {
    opacity: 1;
    transform: translateY(0);
}

.tft-page-about-v2 .parallax-bg {
    transition: transform 0.1s linear;
}

/* Timeline */

.tft-page-about-v2 .timeline-line {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 1px;
    background: rgba(212, 245, 76, 0.1);
    transform: translateX(-50%);
}

.tft-page-about-v2 .timeline-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #d4f54c;
    box-shadow: 0 0 20px #d4f54c;
}

/* Team Cards */

.tft-page-about-v2 .team-card img {
    filter: grayscale(1) contrast(1.2);
    transition: all 0.6s ease;
}

.tft-page-about-v2 .team-card:hover img {
    filter: grayscale(0) contrast(1);
    transform: scale(1.05);
}

/* Stats */

.tft-page-about-v2 .stat-item {
    border-right: 1px solid rgba(255, 255, 255, 0.05);
}

@media (max-width: 768px) {
    .tft-page-about-v2 .stat-item {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }
}

/* --- PAGE: ABOUT --- */

.tft-page-about :root {
    --tft-bg: #0d2620;
    --tft-sidebar: #094030;
    --tft-menu: #0a3d2e;
    --tft-lime: #d4f54c;
    --tft-cream: #f4f3ea;
    --tft-sage: #e2e4d9;
    --tft-dark: #0d2620;
}

.tft-page-about {
    margin: 0;
    overflow: hidden;
    background-color: var(--tft-bg);
    color: white;
    font-family: 'Plus Jakarta Sans', sans-serif;
    cursor: default;
}

/* Vertical Text Utility */

.tft-page-about .text-vertical {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

/* Custom Scrollbar */

.tft-page-about .no-scrollbar::-webkit-scrollbar {
    display: none;
}

.tft-page-about .no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Hamburger Morphing Animation */

.tft-page-about .menu-toggle {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s ease, border-color 0.4s ease;
}

.tft-page-about .menu-toggle.menu-open {
    background-color: var(--tft-lime) !important;
    border-color: var(--tft-lime) !important;
    transform: scale(1);
}

.tft-page-about .hamburger-line {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s ease, opacity 0.4s ease, width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: center;
}

.tft-page-about .menu-toggle.menu-open .line-1 {
    transform: translateY(8px) rotate(45deg);
    background-color: var(--tft-sidebar) !important;
}

.tft-page-about .menu-toggle.menu-open .line-2 {
    opacity: 0;
    transform: translateX(15px);
}

.tft-page-about .menu-toggle.menu-open .line-3 {
    width: 28px !important;
    transform: translateY(-8px) rotate(-45deg);
    background-color: var(--tft-sidebar) !important;
}

/* Wave Animation */

@keyframes wave {
    0% {
        transform: rotate(0deg);
    }
    15% {
        transform: rotate(20deg);
    }
    30% {
        transform: rotate(-15deg);
    }
    45% {
        transform: rotate(20deg);
    }
    60% {
        transform: rotate(-15deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

.tft-page-about .animate-wave {
    animation: wave 1.5s ease-in-out infinite;
    transform-origin: 70% 70%;
}

/* Social Icons */

.tft-page-about .social-item {
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.tft-page-about .group:hover .social-item {
    opacity: 1;
    transform: translateY(0);
}

.tft-page-about .group:hover .social-1 {
    transition-delay: 0.15s;
}

.tft-page-about .group:hover .social-2 {
    transition-delay: 0.10s;
}

.tft-page-about .group:hover .social-3 {
    transition-delay: 0.05s;
}

.tft-page-about .group:hover .social-4 {
    transition-delay: 0s;
}

/* Legacy Styling Compatibility */

.tft-page-about .tft-about-page {
    background-color: var(--tft-cream);
    color: var(--tft-dark);
    height: 100%;
    overflow-y: auto;
    position: relative;
}

.tft-page-about .tft-heading {
    font-family: 'Space Grotesk', serif;
    font-weight: 300;
    color: var(--tft-sidebar);
    font-size: clamp(2.5rem, 5vw, 4rem);
}

.tft-page-about .tft-subtitle {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    opacity: 0.5;
    font-weight: 700;
    color: var(--tft-sidebar);
}

.tft-page-about .tft-container {
    padding: 0 8%;
    max-width: 1400px;
    margin: 0 auto;
}

.tft-page-about .tft-about__section {
    padding: 8rem 0;
}

.tft-page-about .tft-about__section--sage {
    background-color: var(--tft-sage);
}

.tft-page-about .tft-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: white;
    border: 1px solid rgba(13, 38, 32, 0.1);
    border-top: 5px solid var(--tft-sidebar);
    margin-top: 4rem;
    overflow: hidden;
}

@media (max-width: 768px) {
    .tft-page-about .tft-stats {
        grid-template-columns: repeat(2, 1fr);
    }
}

.tft-page-about .tft-stat {
    padding: 3rem 1.5rem;
    text-align: center;
    border-right: 1px solid rgba(13, 38, 32, 0.1);
}

.tft-page-about .tft-stat:last-child {
    border-right: none;
}

.tft-page-about .tft-stat__num {
    display: block;
    font-family: 'Space Grotesk', serif;
    font-size: 3.5rem;
    color: var(--tft-sidebar);
}

.tft-page-about .tft-stat__label {
    font-size: 0.65rem;
    letter-spacing: 0.25em;
    font-weight: 700;
    text-transform: uppercase;
    opacity: 0.6;
    color: var(--tft-sidebar);
}

.tft-page-about .tft-staff__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 4rem;
    margin-top: 4rem;
}

.tft-page-about .tft-staff__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.tft-page-about .tft-staff__img-wrap {
    width: 240px;
    height: 240px;
    border-radius: 50%;
    overflow: hidden;
    border: 12px solid rgba(255, 255, 255, 0.4);
    margin-bottom: 2rem;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.05);
}

.tft-page-about .tft-staff__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(1);
    transition: filter 0.5s ease;
}

.tft-page-about .tft-staff__card:hover .tft-staff__img {
    filter: grayscale(0);
}

.tft-page-about .tft-heading, .tft-page-about .tft-heading * {
    color: #ffffff !important;
}

.tft-page-about .tft-staff__name {
    font-family: 'Space Grotesk', serif;
    font-size: 2.2rem;
    color: var(--tft-sidebar);
}

.tft-page-about .tft-staff__role {
    background: var(--tft-lime);
    padding: 4px 16px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--tft-sidebar);
    margin: 0.5rem 0 1.5rem;
}

.tft-page-about .tft-service {
    background: var(--tft-cream);
    display: flex;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(13, 38, 32, 0.1);
    height: 180px;
    transition: transform 0.4s ease;
}

.tft-page-about .tft-service:hover {
    transform: translateY(-8px);
}

.tft-page-about .tft-service__icon-area {
    width: 140px;
    background: var(--tft-sidebar);
    display: flex;
    align-items: center;
    justify-content: center;
}

.tft-page-about .tft-service__content {
    padding: 2.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.tft-page-about .tft-service__title {
    font-family: 'Space Grotesk', serif;
    font-size: 2rem;
    color: var(--tft-sidebar);
    margin-bottom: 0.5rem;
}

.tft-page-about .tft-service__text {
    font-size: 0.85rem;
    opacity: 0.6;
    line-height: 1.6;
    color: var(--tft-sidebar);
}

.tft-page-about .tft-footer__wrap {
    background: var(--tft-sidebar);
    color: white;
    padding: 6rem 8% 4rem;
    position: relative;
}

.tft-page-about .tft-footer__up-btn {
    position: absolute;
    right: 8%;
    top: -40px;
    width: 44px;
    height: 80px;
    border-radius: 22px;
    border: 1px solid var(--tft-lime);
    background: var(--tft-sidebar);
    color: var(--tft-lime);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.3s;
}

.tft-page-about .tft-footer__up-btn:hover {
    background: var(--tft-lime);
    color: var(--tft-sidebar);
}

/* --- PAGE: BLOG --- */

.tft-page-blog {
    margin: 0;
    background-color: #0d2620;
    color: white;
    font-family: 'Plus Jakarta Sans', sans-serif;
    overflow-x: hidden;
}

/* Vertical Text Utility */

.tft-page-blog .text-vertical {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

/* ELITE CUSTOM SCROLLBAR */

.tft-page-blog ::-webkit-scrollbar {
    width: 5px;
}

.tft-page-blog ::-webkit-scrollbar-track {
    background: var(--brand-bg, #0d2620);
}

.tft-page-blog ::-webkit-scrollbar-thumb {
    background: rgba(212, 245, 76, 0.3);
    border-radius: 10px;
}

.tft-page-blog ::-webkit-scrollbar-thumb:hover {
    background: #d4f54c;
}

/* Custom Scrollbar for Menu */

.tft-page-blog .menu-no-scrollbar::-webkit-scrollbar {
    display: none;
}

.tft-page-blog .menu-no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Hamburger Morphing Animation */

.tft-page-blog .menu-toggle {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s ease, border-color 0.4s ease;
}

.tft-page-blog .menu-toggle.menu-open {
    background-color: #d4f54c !important;
    border-color: #d4f54c !important;
    transform: scale(1);
}

.tft-page-blog .hamburger-line {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s ease, opacity 0.4s ease, width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: center;
}

.tft-page-blog .menu-toggle.menu-open .line-1 {
    transform: translateY(8px) rotate(45deg);
    background-color: #094030 !important;
}

.tft-page-blog .menu-toggle.menu-open .line-2 {
    opacity: 0;
    transform: translateX(15px);
}

.tft-page-blog .menu-toggle.menu-open .line-3 {
    width: 28px !important;
    transform: translateY(-8px) rotate(-45deg);
    background-color: #094030 !important;
}

/* Wave Animation */

@keyframes wave {
    0% {
        transform: rotate(0deg);
    }
    15% {
        transform: rotate(20deg);
    }
    30% {
        transform: rotate(-15deg);
    }
    45% {
        transform: rotate(20deg);
    }
    60% {
        transform: rotate(-15deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

.tft-page-blog .animate-wave {
    animation: wave 1.5s ease-in-out infinite;
    transform-origin: 70% 70%;
}

/* Social Icons */

.tft-page-blog .social-item {
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.tft-page-blog .aside-group:hover .social-item {
    opacity: 1;
    transform: translateY(0);
}

.tft-page-blog .aside-group:hover .social-1 {
    transition-delay: 0.15s;
}

.tft-page-blog .aside-group:hover .social-2 {
    transition-delay: 0.10s;
}

/* Blog Specific Styles */

.tft-page-blog .blog-card-img {
    transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.tft-page-blog .blog-card:hover .blog-card-img {
    transform: scale(1.05);
}

.tft-page-blog .sidebar-widget {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.tft-page-blog .search-input:focus {
    border-color: #d4f54c;
    outline: none;
}

.tft-page-blog .reveal-up {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.tft-page-blog .reveal-up.active {
    opacity: 1;
    transform: translateY(0);
}

.tft-page-blog .line-clamp-2 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.tft-page-blog .category-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #d4f54c;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.tft-page-blog .category-item:hover .category-dot {
    opacity: 1;
}

/* --- PAGE: CONTACT --- */

.tft-page-contact :root {
    --tft-bg: #0d2620;
    --tft-sidebar: #094030;
    --tft-menu: #0a3d2e;
    --tft-lime: #d4f54c;
    --tft-white: #ffffff;
    --tft-text-muted: rgba(255, 255, 255, 0.4);
    --tft-text-low: rgba(255, 255, 255, 0.2);
    --tft-border: rgba(212, 245, 76, 0.2);
}

.tft-page-contact {
    margin: 0;
    overflow-x: hidden;
    background-color: var(--tft-bg);
    color: var(--tft-white);
    font-family: 'Plus Jakarta Sans', sans-serif;
    cursor: default;
}

/* Vertical Text Utility */

.tft-page-contact .text-vertical {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

/* Custom Scrollbar for Menu */

.tft-page-contact .no-scrollbar::-webkit-scrollbar {
    display: none;
}

.tft-page-contact .no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Hamburger Morphing Animation */

.tft-page-contact .menu-toggle {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s ease, border-color 0.4s ease;
}

.tft-page-contact .menu-toggle:hover {
    transform: scale(1.05);
}

.tft-page-contact .menu-toggle.menu-open {
    border-color: var(--tft-lime) !important;
    transform: scale(1);
}

.tft-page-contact .hamburger-line {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s ease, opacity 0.4s ease, width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: center;
}

.tft-page-contact .menu-toggle.menu-open .line-1 {
    transform: translateY(8px) rotate(45deg);
}

.tft-page-contact .menu-toggle.menu-open .line-2 {
    opacity: 0;
    transform: translateX(15px);
}

.tft-page-contact .menu-toggle.menu-open .line-3 {
    width: 28px !important;
    transform: translateY(-8px) rotate(-45deg);
}

/* Wave Animation for Hand Icon */

@keyframes wave {
    0% {
        transform: rotate(0deg);
    }
    15% {
        transform: rotate(20deg);
    }
    30% {
        transform: rotate(-15deg);
    }
    45% {
        transform: rotate(20deg);
    }
    60% {
        transform: rotate(-15deg);
    }
    75% {
        transform: rotate(10deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

.tft-page-contact .animate-wave {
    animation: wave 1.5s ease-in-out infinite;
    transform-origin: 70% 70%;
}

/* Staggered Bouncy Reveal for Social Icons */

.tft-page-contact .social-item {
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.tft-page-contact .group:hover .social-item {
    opacity: 1;
    transform: translateY(0);
}

.tft-page-contact .group:hover .social-1 {
    transition-delay: 0.15s;
}

.tft-page-contact .group:hover .social-2 {
    transition-delay: 0.10s;
}

.tft-page-contact .group:hover .social-3 {
    transition-delay: 0.05s;
}

.tft-page-contact .group:hover .social-4 {
    transition-delay: 0s;
}

/* Contact Page Styles */

.tft-page-contact .contact-input {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--tft-border);
    padding: 1.5rem 0;
    font-size: 1.25rem;
    color: var(--tft-white);
    outline: none;
    transition: border-bottom-color 0.4s ease;
}

.tft-page-contact .contact-input:focus {
    border-bottom-color: var(--tft-lime);
}

.tft-page-contact .contact-label {
    position: absolute;
    left: 0;
    top: 1.5rem;
    font-size: 1.25rem;
    color: var(--tft-text-low);
    pointer-events: none;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.tft-page-contact .contact-input:focus ~ .contact-label, .tft-page-contact .contact-input:not(:placeholder-shown) ~ .contact-label {
    top: -0.5rem;
    font-size: 0.875rem;
    color: var(--tft-lime);
}

.tft-page-contact .reveal-up {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.tft-page-contact .reveal-up.active {
    opacity: 1;
    transform: translateY(0);
}

/* Floating Animation */

@keyframes float {
    0% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(-20px) rotate(2deg);
    }
    100% {
        transform: translateY(0px) rotate(0deg);
    }
}

.tft-page-contact .animate-float {
    animation: float 6s ease-in-out infinite;
}

/* --- PAGE: HOME-7 --- */

.tft-page-home-7 :root {
    --brand-sidebar: #094030;
    --brand-lime: #d4f54c;
    --brand-bg: #0d2620;
    /* MAD DARK GREEN */
    --brand-menu: #0a3d2e;
    --brand-text: #f7f7f3;
}

.tft-page-home-7 {
    font-family: 'Plus Jakarta Sans', sans-serif;
    background-color: var(--brand-bg);
    color: var(--brand-text);
    overflow: hidden;
    margin: 0;
}

.tft-page-home-7 .font-display {
    font-family: 'Space Grotesk', sans-serif;
}

/* Vertical Text Utility */

.tft-page-home-7 .text-vertical {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

/* View Transitions */

.tft-page-home-7 .view-section {
    transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out;
}

/* ELITE CUSTOM SCROLLBAR */

.tft-page-home-7 ::-webkit-scrollbar {
    width: 5px;
}

.tft-page-home-7 ::-webkit-scrollbar-track {
    background: var(--brand-bg, #0d2620);
}

.tft-page-home-7 ::-webkit-scrollbar-thumb {
    background: rgba(212, 245, 76, 0.3);
    border-radius: 10px;
}

.tft-page-home-7 ::-webkit-scrollbar-thumb:hover {
    background: #d4f54c;
}

/* Custom Scrollbar for Menu */

.tft-page-home-7 .menu-no-scrollbar::-webkit-scrollbar {
    display: none;
}

.tft-page-home-7 .menu-no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Hamburger Morphing Animation */

.tft-page-home-7 .menu-toggle {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s ease, border-color 0.4s ease;
}

.tft-page-home-7 .menu-toggle.menu-open {
    background-color: #d4f54c !important;
    border-color: #d4f54c !important;
    transform: scale(1);
}

.tft-page-home-7 .hamburger-line {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s ease, opacity 0.4s ease, width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: center;
}

.tft-page-home-7 .menu-toggle.menu-open .line-1 {
    transform: translateY(8px) rotate(45deg);
    background-color: #094030 !important;
}

.tft-page-home-7 .menu-toggle.menu-open .line-2 {
    opacity: 0;
    transform: translateX(15px);
}

.tft-page-home-7 .menu-toggle.menu-open .line-3 {
    width: 28px !important;
    transform: translateY(-8px) rotate(-45deg);
    background-color: #094030 !important;
}

/* Wave Animation */

@keyframes wave {
    0% {
        transform: rotate(0deg);
    }
    15% {
        transform: rotate(20deg);
    }
    30% {
        transform: rotate(-15deg);
    }
    45% {
        transform: rotate(20deg);
    }
    60% {
        transform: rotate(-15deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

.tft-page-home-7 .animate-wave {
    animation: wave 1.5s ease-in-out infinite;
    transform-origin: 70% 70%;
}

/* Social Icons */

.tft-page-home-7 .social-item {
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.tft-page-home-7 .group:hover .social-item {
    opacity: 1;
    transform: translateY(0);
}

.tft-page-home-7 .group:hover .social-1 {
    transition-delay: 0.15s;
}

.tft-page-home-7 .group:hover .social-2 {
    transition-delay: 0.10s;
}

.tft-page-home-7 .group:hover .social-3 {
    transition-delay: 0.05s;
}

.tft-page-home-7 .group:hover .social-4 {
    transition-delay: 0s;
}

/* GRID BACKGROUND */

.tft-page-home-7 .tft-grid {
    position: fixed;
    inset: 0;
    background-image: linear-gradient(to right, rgba(9, 64, 48, 0.08) 1px, transparent 1px), linear-gradient(to bottom, rgba(9, 64, 48, 0.08) 1px, transparent 1px);
    background-size: 25% 100%;
    pointer-events: none;
    z-index: 1;
}

/* ARCH SLIDER */

.tft-page-home-7 .tft-arch-wrapper {
    position: relative;
    width: 48vw;
    height: 60vh;
    margin-top: auto;
    margin-bottom: 0;
    z-index: 10;
}

.tft-page-home-7 .tft-arch-container {
    width: 100%;
    height: 100%;
    border-radius: 25vw 25vw 0 0;
    overflow: hidden;
    position: relative;
    box-shadow: none;
    cursor: pointer;
    background: transparent;
}

.tft-page-home-7 .tft-arch-img {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform 1.5s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.8s ease;
}

/* MAD TEXTURES */

.tft-page-home-7 .tft-grain {
    position: fixed;
    inset: 0;
    background-image: url('../img/grain-texture.png');
    opacity: 0.03;
    pointer-events: none;
    z-index: 90;
}

/* GRID REFINEMENT */

.tft-page-home-7 .tft-grid {
    position: fixed;
    inset: 0;
    background-image: linear-gradient(to right, rgba(212, 245, 76, 0.03) 1px, transparent 1px), linear-gradient(to bottom, rgba(212, 245, 76, 0.03) 1px, transparent 1px);
    background-size: 20% 100%;
    pointer-events: none;
    z-index: 1;
}

/* ARCH SLIDER - ELITE REFINEMENT */

.tft-page-home-7 .tft-arch-wrapper {
    position: absolute;
    bottom: -20px;
    /* Pushed to bottom */
    left: 50%;
    transform: translateX(-50%);
    width: 60vw;
    height: 65vh;
    z-index: 10;
}

.tft-page-home-7 .tft-arch-container {
    width: 100%;
    height: 100%;
    border-radius: 30vw 30vw 0 0;
    overflow: hidden;
    position: relative;
    box-shadow: 0 -30px 120px -20px rgba(0, 0, 0, 0.7);
    cursor: pointer;
    border: 1px solid rgba(212, 245, 76, 0.2);
    background: transparent;
}

.tft-page-home-7 .tft-arch-img {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform 2.5s cubic-bezier(0.19, 1, 0.22, 1), opacity 1s ease;
    transform: scale(1.1);
}

.tft-page-home-7 .tft-arch-container::after {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow: inset 0 40px 100px rgba(0, 0, 0, 0.4);
    pointer-events: none;
}

.tft-page-home-7 .tft-arch-container:hover .tft-arch-img {
    transform: scale(1.05);
}

/* NAV BUTTONS */

.tft-page-home-7 .tft-nav-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    cursor: pointer;
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    position: absolute;
    top: 45%;
    /* Vertically centered-ish on the curve */
    z-index: 40;
}

.tft-page-home-7 .tft-nav-btn.btn-prev {
    left: -8vw;
}

.tft-page-home-7 .tft-nav-btn.btn-next {
    right: -8vw;
}

.tft-page-home-7 .tft-nav-btn span {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.5em;
    font-weight: 700;
    opacity: 0.3;
    color: var(--brand-lime);
    transition: all 0.4s ease;
}

.tft-page-home-7 .tft-nav-btn:hover {
    transform: translateY(-5px);
}

.tft-page-home-7 .tft-nav-btn:hover span {
    opacity: 1;
    letter-spacing: 0.6em;
}

.tft-page-home-7 .tft-avatar-wrap {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    padding: 2px;
    background: rgba(212, 245, 76, 0.05);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
    transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
    position: relative;
}

.tft-page-home-7 .tft-avatar-wrap::before {
    content: '';
    position: absolute;
    inset: -4px;
    border: 1px solid rgba(212, 245, 76, 0.1);
    border-radius: 50%;
    transition: all 0.4s ease;
}

.tft-page-home-7 .tft-nav-btn:hover .tft-avatar-wrap {
    background: var(--brand-lime);
    transform: scale(1.15) rotate(15deg);
}

.tft-page-home-7 .tft-nav-btn:hover .tft-avatar-wrap::before {
    inset: -8px;
    opacity: 0;
}

.tft-page-home-7 .tft-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

/* CASE STUDY BUBBLE - Elite Refinement */

.tft-page-home-7 .tft-case-bubble {
    width: 160px;
    height: 160px;
    background: var(--brand-lime);
    color: var(--brand-sidebar);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: 'Space Grotesk', serif;
    font-style: italic;
    font-size: 24px;
    font-weight: 500;
    line-height: 0.9;
    position: absolute;
    bottom: 40px;
    right: -40px;
    z-index: 50;
    transition: all 0.8s cubic-bezier(0.19, 1, 0.22, 1);
    cursor: pointer;
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.6);
}

.tft-page-home-7 .tft-case-bubble span:first-child {
    font-size: 18px;
    opacity: 0.7;
    letter-spacing: 0.1em;
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    text-transform: uppercase;
}

.tft-page-home-7 .tft-case-bubble:hover {
    transform: scale(1.1) rotate(15deg);
    background: white;
}

/* WATERMARK TEXT */

.tft-page-home-7 .tft-watermark {
    position: fixed;
    bottom: -5vh;
    left: 50%;
    transform: translateX(-50%);
    font-size: 22vw;
    font-weight: 950;
    color: rgba(212, 245, 76, 0.015);
    font-family: 'Plus Jakarta Sans', sans-serif;
    white-space: nowrap;
    letter-spacing: -0.08em;
    pointer-events: none;
    z-index: 0;
    text-transform: uppercase;
}

.tft-page-home-7 .no-scrollbar::-webkit-scrollbar {
    display: none;
}

/* --- PAGE: HOME-2 --- */

.tft-page-home-2 :root {
    --tft-bg: #0d2620;
    --tft-sidebar: #094030;
    --tft-menu: #0a3d2e;
    --tft-lime: #d4f54c;
    --tft-h2-cream: #f7f7f3;
    --tft-h2-dark: #0a3d2e;
    --tft-h2-border: rgba(10, 61, 46, 0.15);
}

.tft-page-home-2 {
    margin: 0;
    overflow: hidden;
    background-color: var(--tft-bg);
    color: white;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

/* Vertical Text Utility */

.tft-page-home-2 .text-vertical {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

/* View Transitions */

.tft-page-home-2 .view-section {
    transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out;
}

/* Custom Scrollbar for Menu */

.tft-page-home-2 .no-scrollbar::-webkit-scrollbar {
    display: none;
}

.tft-page-home-2 .no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Hamburger Morphing Animation */

.tft-page-home-2 .menu-toggle {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s ease, border-color 0.4s ease;
}

.tft-page-home-2 .menu-toggle.menu-open {
    background-color: #d4f54c !important;
    border-color: #d4f54c !important;
    transform: scale(1);
}

.tft-page-home-2 .hamburger-line {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s ease, opacity 0.4s ease, width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: center;
}

.tft-page-home-2 .menu-toggle.menu-open .line-1 {
    transform: translateY(8px) rotate(45deg);
    background-color: #094030 !important;
}

.tft-page-home-2 .menu-toggle.menu-open .line-2 {
    opacity: 0;
    transform: translateX(15px);
}

.tft-page-home-2 .menu-toggle.menu-open .line-3 {
    width: 28px !important;
    transform: translateY(-8px) rotate(-45deg);
    background-color: #094030 !important;
}

/* Wave Animation */

@keyframes wave {
    0% {
        transform: rotate(0deg);
    }
    15% {
        transform: rotate(20deg);
    }
    30% {
        transform: rotate(-15deg);
    }
    45% {
        transform: rotate(20deg);
    }
    60% {
        transform: rotate(-15deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

.tft-page-home-2 .animate-wave {
    animation: wave 1.5s ease-in-out infinite;
    transform-origin: 70% 70%;
}

/* Social Icons */

.tft-page-home-2 .social-item {
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.tft-page-home-2 .group:hover .social-item {
    opacity: 1;
    transform: translateY(0);
}

.tft-page-home-2 .group:hover .social-1 {
    transition-delay: 0.15s;
}

.tft-page-home-2 .group:hover .social-2 {
    transition-delay: 0.10s;
}

.tft-page-home-2 .group:hover .social-3 {
    transition-delay: 0.05s;
}

.tft-page-home-2 .group:hover .social-4 {
    transition-delay: 0s;
}

.tft-page-home-2 .social-badge {
    width: 3rem;
    height: 3rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: transform 0.35s ease, background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease;
}

.tft-page-home-2 .social-badge:hover {
    transform: translateY(-4px);
    background: #fff;
    color: #094030;
    border-color: #fff;
}

.tft-page-home-2 .social-badge svg {
    width: 1.15rem;
    height: 1.15rem;
}

/* Home 2 Specs */

.tft-page-home-2 .tft-h2 {
    background-color: var(--tft-h2-cream);
    color: var(--tft-h2-dark);
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
}

/* Grain Texture Overlay */

.tft-page-home-2 .tft-grain {
    position: fixed;
    inset: -50%;
    width: 200%;
    height: 200%;
    background-image: url("../img/noise.svg");
    opacity: 0.15;
    pointer-events: none;
    z-index: 99;
    animation: grain-shift 8s steps(10) infinite;
}

@keyframes grain-shift {
    0%,
    100% {
        transform: translate(0, 0);
    }
    10% {
        transform: translate(-5%, -10%);
    }
    30% {
        transform: translate(3%, -15%);
    }
    50% {
        transform: translate(-10%, 10%);
    }
    70% {
        transform: translate(15%, 5%);
    }
    90% {
        transform: translate(-3%, 3%);
    }
}

/* Grid Pattern */

.tft-page-home-2 .tft-grid-bg {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(var(--tft-h2-border) 1px, transparent 1px), linear-gradient(90deg, var(--tft-h2-border) 1px, transparent 1px);
    background-size: 100px 100px;
    pointer-events: none;
    opacity: 0.5;
}

.tft-page-home-2 .tft-h2__hero {
    min-height: 80vh;
    display: flex;
    align-items: center;
    padding: 10rem 8% 4rem;
    gap: 4rem;
    overflow: hidden;
    position: relative;
    z-index: 10;
}

.tft-page-home-2 .tft-h2__hero-img-box {
    position: relative;
    width: clamp(300px, 35vw, 450px);
    aspect-ratio: 0.8/1;
    border: 1px solid var(--tft-h2-dark);
    border-radius: 200px 200px 40px 200px;
    padding: 1rem;
    background: white;
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.1);
    transition: transform 0.8s ease;
    z-index: 10;
}

.tft-page-home-2 .tft-h2__hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
    clip-path: circle(100% at 50% 50%);
    transition: clip-path 1.2s cubic-bezier(0.77, 0, 0.175, 1);
}

.tft-page-home-2 .tft-h2__hero-img--masking {
    clip-path: circle(0% at 50% 50%);
}

.tft-page-home-2 .tft-h2__hero-title {
    font-family: 'Space Grotesk', serif;
    font-size: clamp(3.5rem, 7vw, 7rem);
    line-height: 0.9;
    font-weight: 300;
    position: relative;
    z-index: 10;
}

.tft-page-home-2 .tft-char-wrap {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
}

.tft-page-home-2 .tft-char {
    display: inline-block;
    transform: translateY(110%);
    transition: transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.tft-page-home-2 .tft-revealed .tft-char {
    transform: translateY(0);
}

.tft-page-home-2 .tft-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 1s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.tft-page-home-2 .tft-reveal--active {
    opacity: 1;
    transform: translateY(0);
}

/* Bento Grid - Enhanced Hover */

.tft-page-home-2 .tft-bento {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1.5rem;
}

.tft-page-home-2 .tft-bento__item {
    background: white;
    border: 1px solid var(--tft-h2-border);
    padding: 3rem;
    border-radius: 2rem;
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
}

.tft-page-home-2 .tft-bento__item:hover {
    transform: translateY(-15px) scale(1.02);
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.08);
    border-color: var(--tft-h2-dark);
}

.tft-page-home-2 .tft-bento__item--dark {
    background: var(--tft-h2-dark);
    color: white;
    border: none;
}

.tft-page-home-2 .tft-bento__item--dark:hover {
    background: #0c4d3b;
}

.tft-page-home-2 .tft-bento__item--lime:hover {
    background: #ecff8f;
    border-color: var(--tft-lime);
}

.tft-page-home-2 .tft-bento__item--feature {
    background: linear-gradient(135deg, rgba(212, 245, 76, 0.28), rgba(255, 255, 255, 0.92) 58%), white;
    box-shadow: 0 30px 80px rgba(10, 61, 46, 0.08);
}

.tft-page-home-2 .tft-bento__feature-orb {
    position: absolute;
    inset: auto -4rem -4rem auto;
    width: 12rem;
    height: 12rem;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(212, 245, 76, 0.35), transparent 70%);
    pointer-events: none;
}

.tft-page-home-2 .tft-compass-shell {
    position: relative;
    width: 11rem;
    height: 11rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: radial-gradient(circle at 35% 35%, #ffffff, #f6f8ef 72%);
    border: 1px solid rgba(10, 61, 46, 0.12);
    box-shadow: 0 26px 60px rgba(10, 61, 46, 0.14);
    overflow: hidden;
}

.tft-page-home-2 .tft-compass-shell__inner {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tft-page-home-2 .tft-compass-shell::before {
    content: "";
    position: absolute;
    inset: 12px;
    border-radius: 999px;
    border: 1px dashed rgba(10, 61, 46, 0.12);
}

.tft-page-home-2 .tft-compass-shell .lucide-compass,
.tft-page-home-2 .tft-compass-shell [data-lucide="compass"] {
    display: block;
    width: 4.5rem;
    height: 4.5rem;
    margin: 0;
    flex: 0 0 auto;
    transform-origin: center;
}

.tft-page-home-2 .tft-stat-intro {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 4rem;
}

.tft-page-home-2 .tft-stat-grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .tft-page-home-2 .tft-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1200px) {
    .tft-page-home-2 .tft-stat-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.tft-page-home-2 .tft-stat-card {
    position: relative;
    overflow: hidden;
    min-height: 220px;
    padding: 2rem;
    border-radius: 2rem;
    border: 1px solid rgba(10, 61, 46, 0.12);
    background: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(247, 247, 243, 0.98));
    box-shadow: 0 24px 60px rgba(10, 61, 46, 0.08);
    transition: transform 0.45s ease, box-shadow 0.45s ease, border-color 0.45s ease;
}

.tft-page-home-2 .tft-stat-card:hover {
    transform: translateY(-10px);
    border-color: rgba(212, 245, 76, 0.55);
    box-shadow: 0 34px 90px rgba(10, 61, 46, 0.12);
}

.tft-page-home-2 .tft-stat-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(212, 245, 76, 0.09), transparent 42%);
    pointer-events: none;
}

.tft-page-home-2 .tft-stat-card::after {
    content: "";
    position: absolute;
    right: -30px;
    top: -30px;
    width: 110px;
    height: 110px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(212, 245, 76, 0.22), transparent 72%);
}

.tft-page-home-2 .tft-stat-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: rgba(10, 61, 46, 0.35);
}

.tft-page-home-2 .tft-stat-divider {
    width: 100%;
    height: 1px;
    margin-top: 1.5rem;
    background: linear-gradient(90deg, rgba(10, 61, 46, 0.18), rgba(10, 61, 46, 0.03));
}

.tft-page-home-2 .tft-floating-shape {
    position: absolute;
    width: 100px;
    height: 100px;
    border: 1px solid var(--tft-lime);
    opacity: 0.1;
    border-radius: 50%;
    pointer-events: none;
    transition: transform 0.8s ease;
}

.tft-page-home-2 .tft-bento__item:hover .tft-floating-shape {
    transform: scale(2) rotate(20deg);
    opacity: 0.2;
}

/* Stats Pulse - Enhanced with Glow */

.tft-page-home-2 .tft-pulse-wrap {
    position: relative;
    width: 120px;
    height: 120px;
}

.tft-page-home-2 .tft-pulse-circle {
    position: absolute;
    inset: 0;
    border: 1.5px solid var(--tft-lime);
    border-radius: 50%;
    animation: tft-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    opacity: 0;
    box-shadow: 0 0 15px var(--tft-lime);
}

.tft-page-home-2 .tft-pulse-circle--1 {
    animation-delay: 0s;
}

.tft-page-home-2 .tft-pulse-circle--2 {
    animation-delay: 0.6s;
}

@keyframes tft-pulse {
    0% {
        transform: scale(0.8);
        opacity: 0.8;
    }
    100% {
        transform: scale(1.6);
        opacity: 0;
    }
}

/* Tabs & Accordion - Advanced Phase 4 */

.tft-page-home-2 .tft-tab-active {
    background: var(--tft-h2-dark);
    color: white;
    border-color: var(--tft-h2-dark);
}

.tft-page-home-2 .tft-tab {
    border: 1px solid var(--tft-h2-border);
    transition: all 0.4s ease;
}

.tft-page-home-2 .tft-tab:hover {
    border-color: var(--tft-h2-dark);
    transform: translateY(-3px);
}

.tft-page-home-2 .tft-acc-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 2rem;
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    overflow: hidden;
    position: relative;
    color: #ffffff;
}

.tft-page-home-2 .tft-acc-item:hover {
    transform: translateY(-8px);
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(212, 245, 76, 0.2);
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.3);
}

.tft-page-home-2 .tft-acc-active {
    border-color: var(--tft-lime);
    background: rgba(212, 245, 76, 0.05);
    box-shadow: 0 60px 120px rgba(0, 0, 0, 0.4);
    transform: scale(1.02);
    z-index: 20;
}

.tft-page-home-2 .tft-acc-active .tft-acc-body {
    max-height: 500px;
    padding: 0 3rem 3.5rem;
    opacity: 1;
    transform: translateY(0);
}

.tft-page-home-2 .tft-acc-body {
    max-height: 0;
    overflow: hidden;
    transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
    opacity: 0;
    padding: 0 3rem;
    transform: translateY(20px);
    color: rgba(255, 255, 255, 0.6);
}

.tft-page-home-2 .tft-acc-trigger {
    padding: 2.5rem 3rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    cursor: pointer;
    user-select: none;
}

.tft-page-home-2 .tft-acc-active .tft-acc-trigger i {
    transform: rotate(45deg);
    color: var(--brand-sidebar);
    border-color: var(--tft-lime);
}

.tft-page-home-2 .tft-acc-trigger span {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.25em;
    transition: all 0.4s ease;
    color: var(--tft-lime);
}

.tft-page-home-2 .tft-acc-active .tft-acc-trigger span {
    letter-spacing: 0.35em;
    color: var(--tft-lime);
}

.tft-page-home-2 .tft-img-frame {
    border-radius: 4rem;
    background: #1a1a1a;
    box-shadow: 0 100px 150px rgba(0, 0, 0, 0.5);
}

.tft-page-home-2 .tft-img-frame::after {
    content: '';
    position: absolute;
    inset: -1px;
    border: 2px solid var(--tft-lime);
    border-radius: inherit;
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: -1;
}

.tft-page-home-2 .tft-img-frame:hover::after {
    opacity: 0.5;
}

.tft-page-home-2 .tft-img-frame:hover {
    transform: scale(1.02) rotate(1deg);
}

.tft-page-home-2 .tft-btn-discover {
    position: relative;
    overflow: hidden;
    padding: 1rem 2.5rem;
    border-radius: 99px;
    background: var(--tft-h2-dark);
    color: white;
    transition: all 0.4s ease;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.tft-page-home-2 .tft-btn-discover::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: var(--tft-lime);
    transition: left 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    z-index: 1;
}

.tft-page-home-2 .tft-btn-discover:hover::before {
    left: 0;
}

.tft-page-home-2 .tft-btn-discover span {
    position: relative;
    z-index: 2;
    color: inherit;
    transition: color 0.4s ease;
}

.tft-page-home-2 .tft-btn-discover:hover span {
    color: var(--tft-h2-dark);
}

.tft-page-home-2 .tft-tab-digit {
    position: absolute;
    top: -60px;
    right: -20px;
    font-family: 'Space Grotesk', serif;
    font-size: 18rem;
    color: var(--tft-h2-dark);
    opacity: 0.03;
    font-style: italic;
    pointer-events: none;
}

@media (max-width: 1024px) {
    .tft-page-home-2 .tft-faq-grid {
        grid-template-columns: 1fr;
    }
    .tft-page-home-2 .tft-tab-digit {
        font-size: 10rem;
        top: 0;
    }
}

/* Large BG Text */

.tft-page-home-2 .tft-bg-text {
    position: absolute;
    font-family: 'Space Grotesk', serif;
    font-size: 25vw;
    line-height: 1;
    color: var(--tft-h2-dark);
    opacity: 0.03;
    font-style: italic;
    white-space: nowrap;
    pointer-events: none;
    z-index: 1;
}

.tft-page-home-2 .animate-spin-slow {
    animation: spin 8s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Marquee */

.tft-page-home-2 .tft-marquee {
    overflow: hidden;
    white-space: nowrap;
    background: var(--tft-h2-dark);
    color: var(--tft-h2-cream);
    padding: 1.5rem 0;
}

.tft-page-home-2 .tft-marquee__inner {
    display: inline-block;
    animation: marquee 20s linear infinite;
}

.tft-page-home-2 .tft-marquee__text {
    font-family: 'Space Grotesk', serif;
    font-size: 4rem;
    font-style: italic;
    margin-right: 2rem;
}

@keyframes marquee {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

@media (max-width: 1024px) {
    .tft-page-home-2 .tft-bento {
        grid-template-columns: 1fr;
    }
    .tft-page-home-2 .tft-bento__item {
        grid-column: span 1 !important;
    }
    .tft-page-home-2 .tft-marquee__text {
        font-size: 2rem;
    }
}

/* --- PAGE: HOME-3 --- */

html,
.tft-page-home-3 {
    margin: 0;
    max-width: 100%;
    overflow-x: hidden;
}

.tft-page-home-3 {
    overflow: hidden;
    background-color: #0d2620;
    color: white;
    font-family: 'Plus Jakarta Sans', sans-serif;
    cursor: default;
    --brand-sidebar: #094030;
    --brand-lime: #d4f54c;
    --brand-bg: #0d2620;
}

/* Vertical Text Utility */

.tft-page-home-3 .text-vertical {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

/* View Transitions */

.tft-page-home-3 .view-section {
    transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out;
}

/* Realizic Book Shadows */

.tft-page-home-3 .book-shadow {
    box-shadow: 0 50px 100px rgba(0, 0, 0, 0.8);
}

.tft-page-home-3 .page-left {
    box-shadow: inset -10px 0 20px rgba(0, 0, 0, 0.5);
}

.tft-page-home-3 .page-right {
    box-shadow: inset 10px 0 20px rgba(0, 0, 0, 0.5);
}

@media (min-width: 768px) {
    .tft-page-home-3 .page-left {
        box-shadow: inset -20px 0 30px rgba(0, 0, 0, 0.5);
    }
    .tft-page-home-3 .page-right {
        box-shadow: inset 20px 0 30px rgba(0, 0, 0, 0.5);
    }
}

/* 3D Parallax Environment */

.tft-page-home-3 .perspective-container {
    perspective: 1500px;
}

.tft-page-home-3 .book-3d {
    transform-style: preserve-3d;
    transition: transform 0.15s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Slider Transitions */

.tft-page-home-3 .fade-overlay {
    transition: opacity 0.5s ease-in-out;
}

.tft-page-home-3 .img-pan {
    transition: transform 10s ease-out;
    transform: scale(1);
}

.tft-page-home-3 .img-pan.zoomed {
    transform: scale(1.08);
}

.tft-page-home-3 .text-reveal {
    display: inline-block;
    transition: transform 0.8s cubic-bezier(0.77, 0, 0.175, 1);
}

.tft-page-home-3 .text-hidden {
    transform: translateY(110%);
}

/* Home 4 - Flex Columns */

.tft-page-home-3 .h4-col {
    transition: flex 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    flex: 1;
}

@media (min-width: 768px) {
    .tft-page-home-3 .h4-col:hover {
        flex: 1.3;
    }
}

.tft-page-home-3 .h4-content {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.5s ease;
}

.tft-page-home-3 .h4-col:hover .h4-content,
.tft-page-home-3 .h4-col.pre-active .h4-content {
    opacity: 1;
    transform: translateY(0);
}

.tft-page-home-3 .h4-col:hover .overlay-dim,
.tft-page-home-3 .h4-col.pre-active .overlay-dim {
    opacity: 0.3;
}

/* Custom Scrollbar for Menu */

.tft-page-home-3 .no-scrollbar::-webkit-scrollbar {
    display: none;
}

.tft-page-home-3 .no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Vertical Text Utility */

.tft-page-home-3 .text-vertical {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

/* View Transitions */

.tft-page-home-3 .view-section {
    transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out;
}

/* Custom Scrollbar for Menu */

.tft-page-home-3 .no-scrollbar::-webkit-scrollbar {
    display: none;
}

.tft-page-home-3 .no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Hamburger Morphing Animation */

.tft-page-home-3 .menu-toggle {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s ease, border-color 0.4s ease;
}

.tft-page-home-3 .menu-toggle.menu-open {
    background-color: #d4f54c !important;
    border-color: #d4f54c !important;
    transform: scale(1);
}

.tft-page-home-3 .hamburger-line {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s ease, opacity 0.4s ease, width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: center;
}

.tft-page-home-3 .menu-toggle.menu-open .line-1 {
    transform: translateY(8px) rotate(45deg);
    background-color: #094030 !important;
}

.tft-page-home-3 .menu-toggle.menu-open .line-2 {
    opacity: 0;
    transform: translateX(15px);
}

.tft-page-home-3 .menu-toggle.menu-open .line-3 {
    width: 28px !important;
    transform: translateY(-8px) rotate(-45deg);
    background-color: #094030 !important;
}

/* Wave Animation */

@keyframes wave {
    0% {
        transform: rotate(0deg);
    }
    15% {
        transform: rotate(20deg);
    }
    30% {
        transform: rotate(-15deg);
    }
    45% {
        transform: rotate(20deg);
    }
    60% {
        transform: rotate(-15deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

.tft-page-home-3 .animate-wave {
    animation: wave 1.5s ease-in-out infinite;
    transform-origin: 70% 70%;
}

/* Social Icons */

.tft-page-home-3 .social-item {
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.tft-page-home-3 .group:hover .social-item {
    opacity: 1;
    transform: translateY(0);
}

.tft-page-home-3 .group:hover .social-1 {
    transition-delay: 0.15s;
}

.tft-page-home-3 .group:hover .social-2 {
    transition-delay: 0.10s;
}

.tft-page-home-3 .group:hover .social-3 {
    transition-delay: 0.05s;
}

.tft-page-home-3 .group:hover .social-4 {
    transition-delay: 0s;
}

/* Home 3 Enhancements - MAD LEVEL */

.tft-page-home-3 .h3-slider-track {
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    overscroll-behavior-x: contain;
    cursor: grab;
}

.tft-page-home-3 .h3-slider-track.active {
    cursor: grabbing;
}

.tft-page-home-3 .h3-slider-track::-webkit-scrollbar {
    display: none;
}

.tft-page-home-3 .h3-card {
    transition: all 0.8s cubic-bezier(0.19, 1, 0.22, 1);
    transform: translateY(var(--ty, 0px)) skewX(var(--skew, 0deg)) scale(var(--scale, 0.85));
    filter: brightness(0.4) grayscale(100%);
    scroll-snap-align: center;
}

.tft-page-home-3 .h3-card.is-active {
    --scale: 1;
    filter: brightness(1) grayscale(0%);
    z-index: 30;
}

@media (min-width: 768px) {
    .tft-page-home-3 .h3-card.is-active:hover {
        --ty: -30px;
    }
}

.tft-page-home-3 .h3-category {
    transition: all 0.8s cubic-bezier(0.19, 1, 0.22, 1);
    opacity: 0;
    transform: translateY(10px);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
    background: rgb(13 38 32);
    backdrop-filter: blur(4px);
    padding: 2px 8px;
    border-radius: 2px;
    width: fit-content;
}

.tft-page-home-3 .h3-card.is-active .h3-category {
    opacity: 1 !important;
    transform: translateY(0);
}

.tft-page-home-3 .h3-card-img {
    filter: contrast(1.1) brightness(0.9);
    transition: transform 1.5s cubic-bezier(0.19, 1, 0.22, 1), filter 1s ease;
}

.tft-page-home-3 .h3-card.is-active .h3-card-img {
    filter: contrast(1.2) brightness(1.1);
}

.tft-page-home-3 .h3-card.is-active:hover .h3-card-img {
    transform: scale(1.15);
}

.tft-page-home-3 .h3-img-wrap {
    backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.02);
    transition: all 0.8s cubic-bezier(0.19, 1, 0.22, 1);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.tft-page-home-3 .h3-card.is-active .h3-img-wrap {
    border-color: rgba(255, 255, 255, 0.1);
}

.tft-page-home-3 .h3-card.is-active:hover .h3-img-wrap {
    border-color: rgba(212, 245, 76, 0.3);
    box-shadow: 0 60px 100px -20px rgba(0, 0, 0, 0.8), 0 0 40px rgba(212, 245, 76, 0.1);
}

.tft-page-home-3 .h3-title {
    transition: transform 0.8s cubic-bezier(0.19, 1, 0.22, 1), text-shadow 0.8s ease, opacity 0.8s ease;
    opacity: 0.3;
    transform: translateY(20px);
}

.tft-page-home-3 .h3-card.is-active .h3-title {
    opacity: 1;
    transform: translateY(0);
}

.tft-page-home-3 .h3-card.is-active:hover .h3-title {
    transform: translateX(30px) translateY(-10px);
    text-shadow: 0 40px 60px rgba(0, 0, 0, 1);
}

/* Liquid Button */

.tft-page-home-3 .h3-btn-wrapper {
    transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
    transform: translateY(40px);
    opacity: 0;
    border-radius: 4px;
}

.tft-page-home-3 .h3-card.is-active .h3-btn-wrapper {
    opacity: 0.6;
    transform: translateY(20px);
}

.tft-page-home-3 .h3-card.is-active:hover .h3-btn-wrapper {
    transform: translateY(0);
    opacity: 1;
}

.tft-page-home-3 .h3-btn-main {
    background: white;
    color: #094030;
    transition: all 0.5s ease;
    position: relative;
    overflow: hidden;
}

.tft-page-home-3 .h3-btn-main span {
    position: relative;
    z-index: 10;
}

.tft-page-home-3 .h3-btn-main::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--brand-lime);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
    z-index: 0;
}

.tft-page-home-3 .h3-btn-wrapper:hover .h3-btn-main::before {
    transform: scaleX(1);
    transform-origin: left;
}

.tft-page-home-3 .h3-btn-main span {
    position: relative;
    z-index: 1;
}

/* Mouse Reflection */

.tft-page-home-3 .h3-reflection {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(212, 245, 76, 0.1) 0%, transparent 60%);
    mix-blend-mode: overlay;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: 15;
}

.tft-page-home-3 .h3-card:hover .h3-reflection {
    opacity: 1;
}

.tft-page-home-3 .h3-meta {
    position: absolute;
    right: 20px;
    bottom: 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    z-index: 20;
    opacity: 0.4;
    transition: all 0.6s ease;
}

.tft-page-home-3 .menu-panel-glow {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 22%), radial-gradient(circle at top right, rgba(212, 245, 76, 0.08), transparent 35%), #0a3d2e;
}

.tft-page-home-3 .menu-row {
    position: relative;
    overflow: hidden;
    transition: transform 0.35s ease, padding 0.35s ease;
}

.tft-page-home-3 .menu-row::before {
    content: "";
    position: absolute;
    inset: 10px -20px;
    background: linear-gradient(90deg, rgba(212, 245, 76, 0.14), transparent 72%);
    opacity: 0;
    transform: translateX(-24px);
    transition: transform 0.35s ease, opacity 0.35s ease;
    pointer-events: none;
}

.tft-page-home-3 .menu-row:hover {
    transform: translateX(8px);
    padding-left: 10px;
}

.tft-page-home-3 .menu-row:hover::before {
    opacity: 1;
    transform: translateX(0);
}

.tft-page-home-3 .menu-submenu a {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    transition: color 0.3s ease, transform 0.3s ease, letter-spacing 0.3s ease;
}

.tft-page-home-3 .menu-submenu a::before {
    content: "";
    width: 18px;
    height: 1px;
    background: rgba(212, 245, 76, 0.35);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

.tft-page-home-3 .menu-submenu a:hover {
    color: #fff;
    transform: translateX(-6px);
    letter-spacing: 0.02em;
}

.tft-page-home-3 .menu-submenu a:hover::before {
    transform: scaleX(1);
}

.tft-page-home-3 .h3-card:hover .h3-meta {
    opacity: 0.8;
    transform: translateY(-10px);
}

/* Liquid Button */

.tft-page-home-3 .h3-btn-wrapper {
    transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
    transform: translateY(40px);
    opacity: 0;
    border-radius: 4px;
}

.tft-page-home-3 .h3-card:hover .h3-btn-wrapper {
    transform: translateY(0);
    opacity: 1;
}

.tft-page-home-3 .h3-btn-main {
    background: white;
    color: var(--brand-sidebar);
    transition: all 0.5s ease;
    position: relative;
    overflow: hidden;
}

.tft-page-home-3 .h3-btn-main::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--brand-lime);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
    z-index: 0;
}

.tft-page-home-3 .h3-btn-wrapper:hover .h3-btn-main::before {
    transform: scaleX(1);
    transform-origin: left;
}

.tft-page-home-3 .h3-btn-main span {
    position: relative;
    z-index: 1;
}

/* BG PATTERNS */

.tft-page-home-3 .h3-bg-lines {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(to right, rgba(212, 245, 76, 0.03) 1px, transparent 1px);
    background-size: 15% 100%;
    pointer-events: none;
    z-index: 1;
}

.tft-page-home-3 .h3-v-line {
    position: absolute;
    top: 0;
    width: 1px;
    height: 100%;
    background: linear-gradient(to bottom, transparent, rgba(212, 245, 76, 0.08), transparent);
    pointer-events: none;
}

@keyframes rotateCompass {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

.tft-page-home-3 .h3-compass {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80vh;
    height: 80vh;
    border: 1px dashed rgba(212, 245, 76, 0.04);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    animation: rotateCompass 60s linear infinite;
}

.tft-page-home-3 .h3-compass::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 110%;
    height: 110%;
    border: 1px solid rgba(212, 245, 76, 0.02);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

/* Home 5 Interactive List & Dynamic Image Fade */

.tft-page-home-3 .h5-list-item {
    padding: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    font-family: 'Space Grotesk', serif;
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.3);
    cursor: pointer;
    transition: all 0.4s ease;
    display: flex;
    align-items: center;
    background: transparent;
    position: relative;
}

@media (min-width: 768px) {
    .tft-page-home-3 .h5-list-item {
        font-size: 1.5rem;
        padding: 1.5rem 1rem;
    }
}

.tft-page-home-3 .h5-list-item:hover,
.tft-page-home-3 .h5-list-item.active {
    color: rgba(255, 255, 255, 1);
    transform: translateX(10px);
}

.tft-page-home-3 .h5-list-item::before {
    content: '+';
    color: transparent;
    margin-right: 0.75rem;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 300;
    transition: color 0.4s ease;
}

.tft-page-home-3 .h5-list-item.active::before {
    color: white;
}

.tft-page-home-3 .h5-list-item.active {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.03) 0%, transparent 100%);
}

.tft-page-home-3 .h5-list-item::after {
    content: '';
    position: absolute;
    left: -100px;
    top: 50%;
    width: 100px;
    height: 1px;
    background: rgba(255, 255, 255, 0.05);
    transition: background 0.4s ease;
}

.tft-page-home-3 .h5-list-item.active::after {
    background: rgba(255, 255, 255, 0.2);
}

.tft-page-home-3 .h5-image {
    transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1), filter 0.8s ease, opacity 0.8s ease;
    transform-origin: center;
}

.tft-page-home-3 .h5-image.animating-out {
    opacity: 0;
    transform: scale(1.15) translateY(20px);
    filter: blur(12px) brightness(0.5);
}

.tft-page-home-3 .h5-image.animating-in {
    opacity: 0;
    transform: scale(0.9) translateY(-20px);
    filter: blur(10px) brightness(1.5);
}

/* Home 6 Magical Hover Interactions (Redesigned) */

.tft-page-home-3 #view-home-6 {
    background-color: #fafbfc;
}

.tft-page-home-3 .h6-row {
    transition: background-color 0.5s ease;
    border-color: rgba(0, 0, 0, 0.06);
}

.tft-page-home-3 .h6-row:hover {
    background-color: #ffffff;
}

/* Hide Default Cursor when inside row */

.tft-page-home-3 .h6-row:hover {
    cursor: none;
}

.tft-page-home-3 .h6-row:hover * {
    cursor: none;
}

/* Fanning Gallery Images */

.tft-page-home-3 .h6-fan-img {
    opacity: 0;
    transform: translate(0, 20px) rotate(0deg) scale(0.8);
    transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.tft-page-home-3 .group:hover .h6-fan-img {
    opacity: 1;
    transform: translate(var(--x), 0) rotate(var(--r)) scale(1);
}

.tft-page-home-3 .h3-slider-track {
    scrollbar-width: none;
}

.tft-page-home-3 .h3-slider-track::-webkit-scrollbar {
    display: none;
}

.tft-page-home-3 .h3-index {
    transition: all 1.2s cubic-bezier(0.19, 1, 0.22, 1);
    opacity: 0.05;
    transform: scale(0.8) translateX(50px);
    font-style: italic;
}

.tft-page-home-3 .h3-card.is-active .h3-slider-track {
    scrollbar-width: none;
}

.tft-page-home-3 .h3-index {
    opacity: 0.15;
    transform: scale(1) translateX(0);
    color: var(--brand-lime);
}

/* Ghost Marquee Background */

@keyframes marquee {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

.tft-page-home-3 .animate-marquee {
    animation: marquee 25s linear infinite;
    width: 200%;
}

/* Home 8 Full Screen Tracker */

.tft-page-home-3 .h8-nav-item {
    transition: color 0.3s ease;
    color: rgba(255, 255, 255, 0.4);
}

.tft-page-home-3 .h8-nav-item:hover {
    color: white;
}

.tft-page-home-3 .h8-nav-item.active {
    color: white;
}

.tft-page-home-3 .h8-nav-line {
    transition: width 0.4s ease, background-color 0.4s ease;
    width: 2rem;
    background-color: rgba(255, 255, 255, 0.3);
}

.tft-page-home-3 .h8-nav-item:hover .h8-nav-line {
    background-color: rgba(255, 255, 255, 0.8);
    width: 3rem;
}

.tft-page-home-3 .h8-nav-item.active .h8-nav-line {
    width: 5rem;
    background-color: #d4f54c;
}

/* Home 10 Arch Background Grid Lines */

.tft-page-home-3 .arch-bg-grid {
    background-image: linear-gradient(to bottom right, transparent 49.9%, rgba(9, 64, 48, 0.15) 50%, transparent 50.1%), linear-gradient(to top right, transparent 49.9%, rgba(9, 64, 48, 0.15) 50%, transparent 50.1%), linear-gradient(to right, transparent 49.9%, rgba(9, 64, 48, 0.15) 50%, transparent 50.1%), linear-gradient(to bottom, transparent 49.9%, rgba(9, 64, 48, 0.15) 50%, transparent 50.1%);
    background-size: 100% 100%, 100% 100%, 33.33% 100%, 100% 33.33%;
    background-position: center;
}

/* --- PAGE: HOME-4 --- */

.tft-page-home-4 {
    margin: 0;
    overflow: hidden;
    background-color: #0d2620;
    color: white;
    font-family: 'Plus Jakarta Sans', sans-serif;
    cursor: default;
}

/* Vertical Text Utility */

.tft-page-home-4 .text-vertical {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

/* View Transitions */

.tft-page-home-4 .view-section {
    transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out;
}

/* Custom Scrollbar for Menu */

.tft-page-home-4 .no-scrollbar::-webkit-scrollbar {
    display: none;
}

.tft-page-home-4 .no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Vertical Text Utility */

.tft-page-home-4 .text-vertical {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

/* View Transitions */

.tft-page-home-4 .view-section {
    transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out;
}

/* Custom Scrollbar for Menu */

.tft-page-home-4 .no-scrollbar::-webkit-scrollbar {
    display: none;
}

.tft-page-home-4 .no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Hamburger Morphing Animation */

.tft-page-home-4 .menu-toggle {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s ease, border-color 0.4s ease;
}

.tft-page-home-4 .menu-toggle.menu-open {
    background-color: #d4f54c !important;
    border-color: #d4f54c !important;
    transform: scale(1);
}

.tft-page-home-4 .hamburger-line {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s ease, opacity 0.4s ease, width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: center;
}

.tft-page-home-4 .menu-toggle.menu-open .line-1 {
    transform: translateY(8px) rotate(45deg);
    background-color: #094030 !important;
}

.tft-page-home-4 .menu-toggle.menu-open .line-2 {
    opacity: 0;
    transform: translateX(15px);
}

.tft-page-home-4 .menu-toggle.menu-open .line-3 {
    width: 28px !important;
    transform: translateY(-8px) rotate(-45deg);
    background-color: #094030 !important;
}

/* Wave Animation */

@keyframes wave {
    0% {
        transform: rotate(0deg);
    }
    15% {
        transform: rotate(20deg);
    }
    30% {
        transform: rotate(-15deg);
    }
    45% {
        transform: rotate(20deg);
    }
    60% {
        transform: rotate(-15deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

.tft-page-home-4 .animate-wave {
    animation: wave 1.5s ease-in-out infinite;
    transform-origin: 70% 70%;
}

/* Social Icons */

.tft-page-home-4 .social-item {
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.tft-page-home-4 .group:hover .social-item {
    opacity: 1;
    transform: translateY(0);
}

.tft-page-home-4 .group:hover .social-1 {
    transition-delay: 0.15s;
}

.tft-page-home-4 .group:hover .social-2 {
    transition-delay: 0.10s;
}

.tft-page-home-4 .group:hover .social-3 {
    transition-delay: 0.05s;
}

.tft-page-home-4 .group:hover .social-4 {
    transition-delay: 0s;
}

/* Home 4 - Flex Columns */

.tft-page-home-4 .h4-col {
    transition: flex 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    flex: 1;
}

@media (min-width: 768px) {
    .tft-page-home-4 .h4-col:hover {
        flex: 1.3;
    }
}

.tft-page-home-4 .h4-content {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.5s ease;
}

.tft-page-home-4 .h4-col:hover .h4-content,
.tft-page-home-4 .h4-col.pre-active .h4-content {
    opacity: 1;
    transform: translateY(0);
}

.tft-page-home-4 .h4-col:hover .overlay-dim,
.tft-page-home-4 .h4-col.pre-active .overlay-dim {
    opacity: 0.3;
}

/* --- PAGE: HOME-5 --- */

.tft-page-home-5 {
    margin: 0;
    overflow: hidden;
    background-color: #0d2620;
    color: white;
    font-family: 'Plus Jakarta Sans', sans-serif;
    cursor: default;
}

/* Vertical Text Utility */

.tft-page-home-5 .text-vertical {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

/* View Transitions */

.tft-page-home-5 .view-section {
    transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out;
}

/* Custom Scrollbar for Menu */

.tft-page-home-5 .no-scrollbar::-webkit-scrollbar {
    display: none;
}

.tft-page-home-5 .no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Vertical Text Utility */

.tft-page-home-5 .text-vertical {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

/* View Transitions */

.tft-page-home-5 .view-section {
    transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out;
}

/* Custom Scrollbar for Menu */

.tft-page-home-5 .no-scrollbar::-webkit-scrollbar {
    display: none;
}

.tft-page-home-5 .no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Hamburger Morphing Animation */

.tft-page-home-5 .menu-toggle {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s ease, border-color 0.4s ease;
}

.tft-page-home-5 .menu-toggle.menu-open {
    background-color: #d4f54c !important;
    border-color: #d4f54c !important;
    transform: scale(1);
}

.tft-page-home-5 .hamburger-line {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s ease, opacity 0.4s ease, width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: center;
}

.tft-page-home-5 .menu-toggle.menu-open .line-1 {
    transform: translateY(8px) rotate(45deg);
    background-color: #094030 !important;
}

.tft-page-home-5 .menu-toggle.menu-open .line-2 {
    opacity: 0;
    transform: translateX(15px);
}

.tft-page-home-5 .menu-toggle.menu-open .line-3 {
    width: 28px !important;
    transform: translateY(-8px) rotate(-45deg);
    background-color: #094030 !important;
}

/* Wave Animation */

@keyframes wave {
    0% {
        transform: rotate(0deg);
    }
    15% {
        transform: rotate(20deg);
    }
    30% {
        transform: rotate(-15deg);
    }
    45% {
        transform: rotate(20deg);
    }
    60% {
        transform: rotate(-15deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

.tft-page-home-5 .animate-wave {
    animation: wave 1.5s ease-in-out infinite;
    transform-origin: 70% 70%;
}

/* Social Icons */

.tft-page-home-5 .social-item {
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.tft-page-home-5 .group:hover .social-item {
    opacity: 1;
    transform: translateY(0);
}

.tft-page-home-5 .group:hover .social-1 {
    transition-delay: 0.15s;
}

.tft-page-home-5 .group:hover .social-2 {
    transition-delay: 0.10s;
}

.tft-page-home-5 .group:hover .social-3 {
    transition-delay: 0.05s;
}

.tft-page-home-5 .group:hover .social-4 {
    transition-delay: 0s;
}

/* Home 5 Interactive List & Dynamic Image Fade */

.tft-page-home-5 .h5-list-item {
    padding: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    font-family: 'Space Grotesk', serif;
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.3);
    cursor: pointer;
    transition: color 0.28s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), background 0.28s ease, letter-spacing 0.28s ease, opacity 0.28s ease;
    display: flex;
    align-items: center;
    background: transparent;
    position: relative;
    overflow: hidden;
}

@media (min-width: 768px) {
    .tft-page-home-5 .h5-list-item {
        font-size: 1.5rem;
        padding: 1.5rem 1rem;
    }
}

.tft-page-home-5 .h5-list-item:hover,
.tft-page-home-5 .h5-list-item.active {
    color: rgba(255, 255, 255, 1);
    transform: translateX(10px);
    letter-spacing: 0.015em;
}

.tft-page-home-5 .h5-list-item::before {
    content: '+';
    color: transparent;
    margin-right: 0.75rem;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 300;
    transition: color 0.24s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.tft-page-home-5 .h5-list-item.active::before {
    color: white;
}

.tft-page-home-5 .h5-list-item:hover::before,
.tft-page-home-5 .h5-list-item.active::before {
    transform: translateX(4px) rotate(90deg);
}

.tft-page-home-5 .h5-list-item.active {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.01) 65%, transparent 100%);
}

.tft-page-home-5 .h5-list-item::after {
    content: '';
    position: absolute;
    left: -100px;
    top: 50%;
    width: 100px;
    height: 1px;
    background: rgba(255, 255, 255, 0.05);
    transition: background 0.24s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.tft-page-home-5 .h5-list-item.active::after {
    background: rgba(255, 255, 255, 0.24);
    transform: translateX(16px);
}

.tft-page-home-5 .h5-list-item::selection {
    background: rgba(212, 245, 76, 0.22);
}

.tft-page-home-5 .h5-list-item:not(.active) {
    opacity: 0.74;
}

.tft-page-home-5 .h5-list-item:hover,
.tft-page-home-5 .h5-list-item.active {
    opacity: 1;
}

.tft-page-home-5 .h5-image-shell {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.35);
}

.tft-page-home-5 .h5-image-frame,
.tft-page-home-5 .h5-image-veil {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.tft-page-home-5 .h5-image-frame {
    border: 1px solid rgba(255, 255, 255, 0.08);
    z-index: 5;
}

.tft-page-home-5 .h5-image-frame::before,
.tft-page-home-5 .h5-image-frame::after {
    content: "";
    position: absolute;
    background: rgba(255, 255, 255, 0.72);
    transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.28s ease;
}

.tft-page-home-5 .h5-image-frame::before {
    width: 52px;
    height: 1px;
    top: 18px;
    left: 18px;
}

.tft-page-home-5 .h5-image-frame::after {
    width: 1px;
    height: 52px;
    right: 18px;
    bottom: 18px;
}

.tft-page-home-5 .h5-image-wrap:hover .h5-image-frame::before {
    transform: translateX(12px);
}

.tft-page-home-5 .h5-image-wrap:hover .h5-image-frame::after {
    transform: translateY(-12px);
}

.tft-page-home-5 .h5-image-veil {
    z-index: 4;
    background: linear-gradient(to top, rgba(4, 12, 10, 0.48), rgba(4, 12, 10, 0.14) 42%, rgba(255, 255, 255, 0.01));
    transition: opacity 0.42s ease;
}

.tft-page-home-5 .h5-image-meta {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 6;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
    pointer-events: none;
}

.tft-page-home-5 .h5-image-index,
.tft-page-home-5 .h5-image-tag {
    background: rgba(8, 26, 22, 0.52);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.88);
}

.tft-page-home-5 .h5-image-index {
    padding: 0.65rem 0.85rem;
    font-size: 0.72rem;
    letter-spacing: 0.34em;
    text-transform: uppercase;
}

.tft-page-home-5 .h5-image-tag {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    padding: 1rem 0.55rem;
    font-size: 0.64rem;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: rgba(212, 245, 76, 0.9);
}

.tft-page-home-5 .h5-image-wrap {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    --h5-shift-x: 0px;
    --h5-shift-y: 0px;
}

.tft-page-home-5 .h5-image-layer {
    position: absolute;
    inset: -8%;
    background-size: cover;
    background-position: center;
    transform-origin: center;
    will-change: transform, opacity, clip-path, filter;
}

.tft-page-home-5 .h5-image-current {
    z-index: 2;
    transform: translate3d(var(--h5-shift-x), var(--h5-shift-y), 0) scale(1);
    transition: filter 0.52s ease, opacity 0.52s ease, transform 0.72s cubic-bezier(0.22, 1, 0.36, 1);
}

.tft-page-home-5 .h5-image-next {
    z-index: 3;
    opacity: 0;
    clip-path: inset(0 0 100% 0);
    transform: scale(1.08) translate3d(0, 26px, 0);
    transition: clip-path 0.68s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.34s ease, transform 0.68s cubic-bezier(0.22, 1, 0.36, 1);
}

.tft-page-home-5 .h5-image-wrap.is-dir-prev .h5-image-next {
    clip-path: inset(100% 0 0 0);
    transform: scale(1.08) translate3d(0, -26px, 0);
}

.tft-page-home-5 .h5-image-wrap:hover .h5-image-current {
    transform: translate3d(var(--h5-shift-x), var(--h5-shift-y), 0) scale(1.045);
    filter: saturate(1.02) contrast(1.04);
}

.tft-page-home-5 .h5-image-wrap:hover .h5-image-veil {
    opacity: 0.74;
}

.tft-page-home-5 .h5-image-wrap.is-transitioning .h5-image-current {
    filter: saturate(0.9) brightness(0.78);
    transform: translate3d(0, 0, 0) scale(0.96);
}

.tft-page-home-5 .h5-image-wrap.is-transitioning .h5-image-next {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    transform: scale(1);
}

.tft-page-home-5 .h5-image-meta {
    transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.28s ease;
}

.tft-page-home-5 .h5-image-wrap.is-transitioning .h5-image-meta {
    opacity: 0;
    transform: translateY(-12px);
}

.tft-page-home-5 .h5-image-shell::after {
    content: "";
    position: absolute;
    inset: 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    opacity: 0;
    transform: scale(0.985);
    transition: opacity 0.32s ease, transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
    z-index: 6;
}

.tft-page-home-5 .h5-image-wrap:hover .h5-image-shell::after,
.tft-page-home-5 .h5-image-wrap.is-transitioning .h5-image-shell::after {
    opacity: 1;
    transform: scale(1);
}

.tft-page-home-5 .h5-counter-wrap {
    position: relative;
    width: 92px;
    height: 92px;
    display: grid;
    place-items: center;
    transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

.tft-page-home-5 .h5-counter-core {
    position: relative;
    z-index: 2;
    width: 68px;
    height: 68px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 10px !important;
    background: transparent;
    box-shadow: none;
}

.tft-page-home-5 .h5-counter-ring {
    position: absolute;
    inset: 0;
}

.tft-page-home-5 .h5-counter-ring path {
    stroke: rgba(212, 245, 76, 0.9);
}

.tft-page-home-5 #h5-counter {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    min-height: 1em;
    transform: none;
    transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.22s ease;
}

.tft-page-home-5 .h5-counter-wrap.is-updating {
    transform: rotate(-8deg) scale(0.96);
}

.tft-page-home-5 .h5-counter-wrap.is-updating #h5-counter {
    opacity: 0.35;
    transform: translateY(8px);
}

.tft-page-home-5 #h5-btn-prev,
.tft-page-home-5 #h5-btn-next {
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.tft-page-home-5 #h5-btn-prev:hover,
.tft-page-home-5 #h5-btn-next:hover {
    transform: translateY(-4px) scale(1.04);
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.28);
}

@media (max-width: 767px) {
    .tft-page-home-5 .h5-image-meta {
        top: 12px;
        right: 12px;
    }
    .tft-page-home-5 .h5-image-index {
        padding: 0.5rem 0.65rem;
        font-size: 0.58rem;
    }
    .tft-page-home-5 .h5-image-tag {
        display: none;
    }
}

/* --- PAGE: HOME-6 --- */

.tft-page-home-6 {
    margin: 0;
    overflow: hidden;
    background-color: #0d2620;
    color: white;
    font-family: 'Plus Jakarta Sans', sans-serif;
    cursor: default;
}

/* Vertical Text Utility */

.tft-page-home-6 .text-vertical {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

/* View Transitions */

.tft-page-home-6 .view-section {
    transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out;
}

/* Custom Scrollbar for Menu */

.tft-page-home-6 .no-scrollbar::-webkit-scrollbar {
    display: none;
}

.tft-page-home-6 .no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Vertical Text Utility */

.tft-page-home-6 .text-vertical {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

/* View Transitions */

.tft-page-home-6 .view-section {
    transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out;
}

/* Custom Scrollbar for Menu */

.tft-page-home-6 .no-scrollbar::-webkit-scrollbar {
    display: none;
}

.tft-page-home-6 .no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Hamburger Morphing Animation */

.tft-page-home-6 .menu-toggle {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s ease, border-color 0.4s ease;
}

.tft-page-home-6 .menu-toggle.menu-open {
    background-color: #d4f54c !important;
    border-color: #d4f54c !important;
    transform: scale(1);
}

.tft-page-home-6 .hamburger-line {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s ease, opacity 0.4s ease, width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: center;
}

.tft-page-home-6 .menu-toggle.menu-open .line-1 {
    transform: translateY(8px) rotate(45deg);
    background-color: #094030 !important;
}

.tft-page-home-6 .menu-toggle.menu-open .line-2 {
    opacity: 0;
    transform: translateX(15px);
}

.tft-page-home-6 .menu-toggle.menu-open .line-3 {
    width: 28px !important;
    transform: translateY(-8px) rotate(-45deg);
    background-color: #094030 !important;
}

/* Wave Animation */

@keyframes wave {
    0% {
        transform: rotate(0deg);
    }
    15% {
        transform: rotate(20deg);
    }
    30% {
        transform: rotate(-15deg);
    }
    45% {
        transform: rotate(20deg);
    }
    60% {
        transform: rotate(-15deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

.tft-page-home-6 .animate-wave {
    animation: wave 1.5s ease-in-out infinite;
    transform-origin: 70% 70%;
}

/* Social Icons */

.tft-page-home-6 .social-item {
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.tft-page-home-6 .group:hover .social-item {
    opacity: 1;
    transform: translateY(0);
}

.tft-page-home-6 .group:hover .social-1 {
    transition-delay: 0.15s;
}

.tft-page-home-6 .group:hover .social-2 {
    transition-delay: 0.10s;
}

.tft-page-home-6 .group:hover .social-3 {
    transition-delay: 0.05s;
}

.tft-page-home-6 .group:hover .social-4 {
    transition-delay: 0s;
}

/* Home 6 Magical Hover Interactions */

.tft-page-home-6 #view-home-6 {
    background-color: #fafbfc;
}

.tft-page-home-6 .h6-row {
    position: relative;
    transition: background-color 0.4s ease, transform 0.4s ease;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
    margin-bottom: 0;
    overflow: hidden;
}

/* Preloader Border Reveal (0 to 100%) */

.tft-page-home-6 .h6-row::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: #d4f54c;
    transform-origin: left;
    transform: scaleX(0);
    transition: transform 0.65s cubic-bezier(0.165, 0.84, 0.44, 1);
    z-index: 15;
    pointer-events: none;
}

.tft-page-home-6 .h6-row:hover::after {
    transform: scaleX(1);
}

.tft-page-home-6 .h6-row:hover {
    background-color: #ffffff;
    transform: scale(1.002);
    z-index: 5;
    cursor: none;
}

/* Ultra-Compact Visual Spacing (Direct User Request) */

.tft-page-home-6 .h6-row>div:nth-child(2) {
    padding-top: 0.5rem !important;
    /* Extremely tight */
    padding-bottom: 0.5rem !important;
}

@media (min-width: 768px) {
    .tft-page-home-6 .h6-row>div:nth-child(2) {
        padding-top: 0.75rem !important;
        /* Ultra-compact desktop */
        padding-bottom: 0.75rem !important;
    }
}

.tft-page-home-6 .h6-row:hover * {
    cursor: none;
}

/* Global Horizontal Scroll Eraser */

.tft-page-home-6 {
    overflow-x: hidden !important;
    width: 100vw;
}

.tft-page-home-6 #view-home-6 {
    width: 100%;
    overflow-x: hidden !important;
}

.tft-page-home-6 .h6-index {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 54px;
}

.tft-page-home-6 .h6-index::before {
    content: "";
    position: absolute;
    width: 52px;
    height: 52px;
    border-radius: 999px;
    background: radial-gradient(circle, rgb(212 245 76 / 54%), rgba(212, 245, 76, 0.06) 65%, hsl(0deg 0% 0% / 12%) 72%);
    opacity: 0;
    transform: scale(0.7);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.tft-page-home-6 .h6-row:hover .h6-index::before {
    opacity: 1;
    transform: scale(1);
}

.tft-page-home-6 .group:hover .group-hover\:text-brand-lime {
    --tw-text-opacity: 1;
    color: #000 !important;
}

.tft-page-home-6 .h6-fan-img {
    opacity: 0;
    transform: translate(0, 10px) rotate(0deg) scale(0.9);
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.22s ease;
    will-change: transform, opacity;
}

.tft-page-home-6 .h6-row:hover .h6-fan-img {
    opacity: 1;
    transform: translate(var(--x), 0) rotate(var(--r)) scale(1);
    transition-delay: var(--d);
}

@keyframes marquee {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

.tft-page-home-6 .animate-marquee {
    animation: marquee 25s linear infinite;
    width: 200%;
}

/* --- PAGE: HOME-7 --- */

.tft-page-home-7 {
    margin: 0;
    overflow: hidden;
    background-color: #0d2620;
    color: white;
    font-family: 'Plus Jakarta Sans', sans-serif;
    cursor: default;
}

/* Vertical Text Utility */

.tft-page-home-7 .text-vertical {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

/* View Transitions */

.tft-page-home-7 .view-section {
    transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out;
}

/* Custom Scrollbar for Menu */

.tft-page-home-7 .no-scrollbar::-webkit-scrollbar {
    display: none;
}

.tft-page-home-7 .no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Vertical Text Utility */

.tft-page-home-7 .text-vertical {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

/* View Transitions */

.tft-page-home-7 .view-section {
    transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out;
}

/* Custom Scrollbar for Menu */

.tft-page-home-7 .no-scrollbar::-webkit-scrollbar {
    display: none;
}

.tft-page-home-7 .no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Hamburger Morphing Animation */

.tft-page-home-7 .menu-toggle {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s ease, border-color 0.4s ease;
}

.tft-page-home-7 .menu-toggle.menu-open {
    background-color: #d4f54c !important;
    border-color: #d4f54c !important;
    transform: scale(1);
}

.tft-page-home-7 .hamburger-line {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s ease, opacity 0.4s ease, width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: center;
}

.tft-page-home-7 .menu-toggle.menu-open .line-1 {
    transform: translateY(8px) rotate(45deg);
    background-color: #094030 !important;
}

.tft-page-home-7 .menu-toggle.menu-open .line-2 {
    opacity: 0;
    transform: translateX(15px);
}

.tft-page-home-7 .menu-toggle.menu-open .line-3 {
    width: 28px !important;
    transform: translateY(-8px) rotate(-45deg);
    background-color: #094030 !important;
}

/* Wave Animation */

@keyframes wave {
    0% {
        transform: rotate(0deg);
    }
    15% {
        transform: rotate(20deg);
    }
    30% {
        transform: rotate(-15deg);
    }
    45% {
        transform: rotate(20deg);
    }
    60% {
        transform: rotate(-15deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

.tft-page-home-7 .animate-wave {
    animation: wave 1.5s ease-in-out infinite;
    transform-origin: 70% 70%;
}

/* Social Icons */

.tft-page-home-7 .social-item {
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.tft-page-home-7 .group:hover .social-item {
    opacity: 1;
    transform: translateY(0);
}

.tft-page-home-7 .group:hover .social-1 {
    transition-delay: 0.15s;
}

.tft-page-home-7 .group:hover .social-2 {
    transition-delay: 0.10s;
}

.tft-page-home-7 .group:hover .social-3 {
    transition-delay: 0.05s;
}

.tft-page-home-7 .group:hover .social-4 {
    transition-delay: 0s;
}

/* Home 7 Grid */

.tft-page-home-7 .h7-card {
    position: relative;
    isolation: isolate;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: linear-gradient(180deg, rgba(9, 64, 48, 0.82), rgba(9, 64, 48, 0.68));
    transition: all 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

.tft-page-home-7 .h7-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(212, 245, 76, 0.08), transparent 36%, rgba(0, 0, 0, 0.14));
    opacity: 0;
    transition: opacity 0.18s ease;
    z-index: 1;
}

.tft-page-home-7 .h7-card::after {
    content: "";
    position: absolute;
    inset: 18px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    opacity: 0;
    transform: scale(0.96);
    transition: opacity 0.18s ease, transform 0.18s ease;
    z-index: 1;
}

.tft-page-home-7 .h7-card:hover {
    transform: translateY(-8px);
    border-color: rgba(212, 245, 76, 0.28);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
}

.tft-page-home-7 .h7-card:hover::before,
.tft-page-home-7 .h7-card:hover::after {
    opacity: 1;
    transform: scale(1);
}

.tft-page-home-7 .h7-card-img {
    transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), filter 0.2s ease;
    filter: brightness(0.62) saturate(0.95);
}

.tft-page-home-7 .h7-card:hover .h7-card-img {
    transform: scale(1.09);
    filter: brightness(0.9) saturate(1.05);
}

.tft-page-home-7 .h7-card-content {
    position: relative;
    z-index: 2;
}

.tft-page-home-7 .h7-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 10px;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72);
}

.tft-page-home-7 .h7-kicker::before {
    content: "";
    width: 18px;
    height: 1px;
    background: rgba(212, 245, 76, 0.75);
}

.tft-page-home-7 .h7-badge {
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.88);
    background: rgba(255, 255, 255, 0.06);
    transition: transform 0.15s ease, background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.tft-page-home-7 .h7-card:hover .h7-badge {
    transform: translateY(-2px);
    background: #d4f54c;
    color: #094030;
    border-color: #d4f54c;
}

.tft-page-home-7 .h7-index {
    position: absolute;
    top: 22px;
    right: 22px;
    width: 46px;
    height: 46px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: rgba(9, 64, 48, 0.62);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #d4f54c;
    font-size: 11px;
    letter-spacing: 0.24em;
    backdrop-filter: blur(8px);
    transition: transform 0.15s ease, background-color 0.15s ease;
    z-index: 2;
}

.tft-page-home-7 .h7-card:hover .h7-index {
    transform: scale(1.06);
    background: rgba(212, 245, 76, 0.14);
}

.tft-page-home-7 .h7-desc {
    max-width: 19rem;
    color: rgba(255, 255, 255, 0.76);
    line-height: 1.7;
    transition: color 0.15s ease, transform 0.15s ease;
}

.tft-page-home-7 .h7-card:hover .h7-desc {
    color: rgba(255, 255, 255, 0.94);
    transform: translateY(-2px);
}

.tft-page-home-7 .h7-card {
    transform-style: preserve-3d;
}

.tft-page-home-7 .h7-card-content {
    z-index: 3;
}

.tft-page-home-7 .h7-card-title,
.tft-page-home-7 .h7-desc,
.tft-page-home-7 .h7-index,
.tft-page-home-7 .h7-badge {
    transition: transform .2s ease, color .18s ease, opacity .18s ease;
}

.tft-page-home-7 .h7-card:hover .h7-card-title {
    transform: translateY(-4px);
    color: #ffffff;
}

.tft-page-home-7 .h7-card:hover .h7-desc {
    transform: translateY(-2px);
}

.tft-page-home-7 .h7-card:hover .h7-badge {
    box-shadow: 0 16px 30px rgba(212, 245, 76, .18);
}

/* --- PAGE: INDEX --- */

.tft-page-index {
    margin: 0;
    overflow: hidden;
    background-color: #0d2620;
    color: white;
    font-family: 'Plus Jakarta Sans', sans-serif;
    cursor: default;
}

/* Vertical Text Utility */

.tft-page-index .text-vertical {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

/* View Transitions */

.tft-page-index .view-section {
    transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out;
}

/* Realizic Book Shadows */

.tft-page-index .book-shadow {
    box-shadow: 0 50px 100px rgba(0, 0, 0, 0.8);
}

.tft-page-index .page-left {
    box-shadow: inset -10px 0 20px rgba(0, 0, 0, 0.5);
}

.tft-page-index .page-right {
    box-shadow: inset 10px 0 20px rgba(0, 0, 0, 0.5);
}

@media (min-width: 768px) {
    .tft-page-index .page-left {
        box-shadow: inset -20px 0 30px rgba(0, 0, 0, 0.5);
    }
    .tft-page-index .page-right {
        box-shadow: inset 20px 0 30px rgba(0, 0, 0, 0.5);
    }
}

/* 3D Parallax Environment */

.tft-page-index .perspective-container {
    perspective: 1500px;
}

.tft-page-index .book-3d {
    transform-style: preserve-3d;
    transition: transform 0.15s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Slider Transitions */

.tft-page-index .fade-overlay {
    transition: opacity 0.5s ease-in-out;
}

.tft-page-index .img-pan {
    transition: transform 10s ease-out;
    transform: scale(1);
}

.tft-page-index .img-pan.zoomed {
    transform: scale(1.08);
}

.tft-page-index .text-reveal {
    display: inline-block;
    transition: transform 0.8s cubic-bezier(0.77, 0, 0.175, 1);
}

.tft-page-index .text-hidden {
    transform: translateY(110%);
}

/* Home 4 - Flex Columns */

.tft-page-index .h4-col {
    transition: flex 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    flex: 1;
}

@media (min-width: 768px) {
    .tft-page-index .h4-col:hover {
        flex: 1.3;
    }
}

.tft-page-index .h4-content {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.5s ease;
}

.tft-page-index .h4-col:hover .h4-content,
.tft-page-index .h4-col.pre-active .h4-content {
    opacity: 1;
    transform: translateY(0);
}

.tft-page-index .h4-col:hover .overlay-dim,
.tft-page-index .h4-col.pre-active .overlay-dim {
    opacity: 0.3;
}

/* ELITE CUSTOM SCROLLBAR */

.tft-page-index ::-webkit-scrollbar {
    width: 5px;
}

.tft-page-index ::-webkit-scrollbar-track {
    background: #0d2620;
}

.tft-page-index ::-webkit-scrollbar-thumb {
    background: rgba(212, 245, 76, 0.3);
    border-radius: 10px;
}

.tft-page-index ::-webkit-scrollbar-thumb:hover {
    background: #d4f54c;
}

/* Custom Scrollbar for Menu */

.tft-page-index .menu-no-scrollbar::-webkit-scrollbar {
    display: none;
}

.tft-page-index .menu-no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Hamburger Morphing Animation */

.tft-page-index .menu-toggle {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s ease, border-color 0.4s ease;
}

.tft-page-index .menu-toggle.menu-open {
    background-color: #d4f54c !important;
    border-color: #d4f54c !important;
    transform: scale(1);
}

.tft-page-index .hamburger-line {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s ease, opacity 0.4s ease, width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: center;
}

.tft-page-index .menu-toggle.menu-open .line-1 {
    transform: translateY(8px) rotate(45deg);
    background-color: #094030 !important;
}

.tft-page-index .menu-toggle.menu-open .line-2 {
    opacity: 0;
    transform: translateX(15px);
}

.tft-page-index .menu-toggle.menu-open .line-3 {
    width: 28px !important;
    transform: translateY(-8px) rotate(-45deg);
    background-color: #094030 !important;
}

/* Wave Animation */

@keyframes wave {
    0% {
        transform: rotate(0deg);
    }
    15% {
        transform: rotate(20deg);
    }
    30% {
        transform: rotate(-15deg);
    }
    45% {
        transform: rotate(20deg);
    }
    60% {
        transform: rotate(-15deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

.tft-page-index .animate-wave {
    animation: wave 1.5s ease-in-out infinite;
    transform-origin: 70% 70%;
}

/* Social Icons */

.tft-page-index .social-item {
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.tft-page-index .group:hover .social-item {
    opacity: 1;
    transform: translateY(0);
}

.tft-page-index .group:hover .social-1 {
    transition-delay: 0.15s;
}

.tft-page-index .group:hover .social-2 {
    transition-delay: 0.10s;
}

.tft-page-index .group:hover .social-3 {
    transition-delay: 0.05s;
}

.tft-page-index .group:hover .social-4 {
    transition-delay: 0s;
}

/* --- PAGE: PROJECT-DETAIL --- */

.tft-page-project-detail :root {
    --brand-bg: #0d2620;
    --brand-lime: #d4f54c;
}

.tft-page-project-detail {
    margin: 0;
    background-color: var(--brand-bg);
    color: white;
    font-family: 'Plus Jakarta Sans', sans-serif;
    overflow-x: hidden;
}

/* Fluid Typography */

.tft-page-project-detail .tft-title {
    font-size: clamp(3rem, 10vw, 8rem);
}

.tft-page-project-detail .tft-subtitle {
    font-size: clamp(1.25rem, 3vw, 2.5rem);
}

/* ELITE CUSTOM SCROLLBAR */

.tft-page-project-detail ::-webkit-scrollbar {
    width: 5px;
}

.tft-page-project-detail ::-webkit-scrollbar-track {
    background: var(--brand-bg, #0d2620);
}

.tft-page-project-detail ::-webkit-scrollbar-thumb {
    background: rgba(212, 245, 76, 0.3);
    border-radius: 10px;
}

.tft-page-project-detail ::-webkit-scrollbar-thumb:hover {
    background: #d4f54c;
}

/* Custom Scrollbar for Menu */

.tft-page-project-detail .menu-no-scrollbar::-webkit-scrollbar {
    display: none;
}

.tft-page-project-detail .menu-no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Reveal Animations */

.tft-page-project-detail .reveal-up {
    transform: translateY(50px);
    opacity: 0;
    transition: all 1s cubic-bezier(0.25, 1, 0.5, 1);
}

.tft-page-project-detail .reveal-up.is-visible {
    transform: translateY(0);
    opacity: 1;
}

/* Asymmetric Grid */

.tft-page-project-detail .tft-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: clamp(1.5rem, 4vw, 3rem);
}

.tft-page-project-detail .grid-item-wide {
    grid-column: span 12;
}

.tft-page-project-detail .grid-item-mid-l {
    grid-column: span 8;
}

.tft-page-project-detail .grid-item-mid-r {
    grid-column: span 4;
}

.tft-page-project-detail .grid-item-sm {
    grid-column: span 6;
}

/* Scanning Line Effect (Reduced opacity for better contrast) */

.tft-page-project-detail .tft-scan-wrapper {
    position: relative;
    overflow: hidden;
}

.tft-page-project-detail .tft-scan-wrapper::after {
    content: '';
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, transparent, rgba(212, 245, 76, 0.1), transparent);
    animation: scan 6s linear infinite;
    pointer-events: none;
}

@keyframes scan {
    0% {
        top: -100%;
    }
    100% {
        top: 100%;
    }
}

/* Magnetic Next Button */

.tft-page-project-detail .tft-next-pjt {
    position: relative;
    cursor: pointer;
    transition: transform 0.3s ease;
}

/* Vertical Text Utility */

.tft-page-project-detail .text-vertical {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

/* Hamburger Morphing */

.tft-page-project-detail .menu-toggle {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.tft-page-project-detail .menu-toggle.menu-open {
    color: #094030 !important;
}

.tft-page-project-detail .hamburger-line {
    transition: all 0.4s ease;
    transform-origin: center;
}

.tft-page-project-detail .menu-toggle.menu-open .line-1 {
    transform: translateY(8px) rotate(45deg);
    background-color: #094030 !important;
}

.tft-page-project-detail .menu-toggle.menu-open .line-2 {
    opacity: 0;
}

.tft-page-project-detail .menu-toggle.menu-open .line-3 {
    transform: translateY(-8px) rotate(-45deg);
    background-color: #094030 !important;
}

/* Parallax Hero */

.tft-page-project-detail .tft-hero {
    height: 100dvh;
    position: relative;
    overflow: hidden;
}

.tft-page-project-detail .tft-hero__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transform: scale(1.1);
    transition: transform 0.1s linear;
}

.tft-page-project-detail .tft-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(13, 38, 32, 0.3) 0%, rgba(13, 38, 32, 0.95) 100%);
}

/* Spec Table */

.tft-page-project-detail .tft-spec-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding-block: 1.5rem;
}

/* --- PAGE: SERVICES --- */

.tft-page-services {
    margin: 0;
    background-color: #0d2620;
    color: white;
    font-family: 'Plus Jakarta Sans', sans-serif;
    overflow-x: hidden;
}

/* Noise Backdrop */

.tft-page-services .noise-bg::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("../img/noise.svg");
    opacity: 0.05;
    pointer-events: none;
    z-index: 50;
}

/* Vertical Text Utility */

.tft-page-services .text-vertical {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

/* ELITE CUSTOM SCROLLBAR */

.tft-page-services ::-webkit-scrollbar {
    width: 5px;
}

.tft-page-services ::-webkit-scrollbar-track {
    background: var(--brand-bg, #0d2620);
}

.tft-page-services ::-webkit-scrollbar-thumb {
    background: rgba(212, 245, 76, 0.3);
    border-radius: 10px;
}

.tft-page-services ::-webkit-scrollbar-thumb:hover {
    background: #d4f54c;
}

/* Custom Scrollbar for Menu */

.tft-page-services .menu-no-scrollbar::-webkit-scrollbar {
    display: none;
}

.tft-page-services .menu-no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Hamburger Morphing Animation */

.tft-page-services .menu-toggle {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s ease, border-color 0.4s ease;
}

.tft-page-services .menu-toggle.menu-open {
    background-color: #d4f54c !important;
    border-color: #d4f54c !important;
    transform: scale(1);
}

.tft-page-services .hamburger-line {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s ease, opacity 0.4s ease, width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: center;
}

.tft-page-services .menu-toggle.menu-open .line-1 {
    transform: translateY(8px) rotate(45deg);
    background-color: #094030 !important;
}

.tft-page-services .menu-toggle.menu-open .line-2 {
    opacity: 0;
    transform: translateX(15px);
}

.tft-page-services .menu-toggle.menu-open .line-3 {
    width: 28px !important;
    transform: translateY(-8px) rotate(-45deg);
    background-color: #094030 !important;
}

/* Reveal Animations */

.tft-page-services .reveal-up {
    opacity: 0;
    transform: translateY(50px);
    transition: all 1.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.tft-page-services .reveal-up.active {
    opacity: 1;
    transform: translateY(0);
}

/* Service Cards */

.tft-page-services .service-card {
    transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
    border: 1px solid rgba(255, 255, 255, 0.05);
    position: relative;
    z-index: 1;
}

.tft-page-services .service-card:hover {
    border-color: #d4f54c;
    background: rgba(212, 245, 76, 0.02);
    transform: translateY(-10px);
}

.tft-page-services .service-card-img {
    filter: grayscale(1) contrast(1.1) brightness(0.8);
    transition: filter 0.8s ease;
}

.tft-page-services .service-card:hover .service-card-img {
    filter: grayscale(0) contrast(1) brightness(1);
}

/* Service Icon Hover Refinement */

.tft-page-services .service-card:hover i,
.tft-page-services .service-card:hover svg {
    color: #0d2620 !important;
    stroke: #0d2620 !important;
}

/* Timeline */

.tft-page-services .step-dot {
    transition: all 0.5s ease;
    box-shadow: 0 0 0 rgba(212, 245, 76, 0);
}

.tft-page-services .step-item.active .step-dot {
    background: #d4f54c;
    box-shadow: 0 0 20px #d4f54c, 0 0 40px rgba(212, 245, 76, 0.3);
}

/* FAQ Deck */

.tft-page-services .faq-deck {
    display: grid;
    gap: 1.25rem;
}

.tft-page-services .faq-panel {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(212, 245, 76, 0.12);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)), radial-gradient(circle at top right, rgba(212, 245, 76, 0.12), transparent 34%);
    transition: transform 0.3s ease, border-color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.tft-page-services .faq-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(212, 245, 76, 0.08), transparent 32%, transparent 68%, rgba(212, 245, 76, 0.05));
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.tft-page-services .faq-panel:hover {
    transform: translateY(-4px);
    border-color: rgba(212, 245, 76, 0.3);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.22);
}

.tft-page-services .faq-panel:hover::before,
.tft-page-services .faq-panel.is-open::before {
    opacity: 1;
}

.tft-page-services .faq-panel.is-open {
    border-color: rgba(212, 245, 76, 0.42);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.04)), radial-gradient(circle at top right, rgba(212, 245, 76, 0.22), transparent 40%);
    box-shadow: 0 26px 80px rgba(0, 0, 0, 0.28);
}

.tft-page-services .faq-trigger {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1.5rem;
    align-items: center;
    text-align: left;
    background: transparent;
    border: 0;
    padding: 2rem;
    color: inherit;
    cursor: pointer;
}

.tft-page-services .faq-kicker {
    display: block;
    margin-bottom: 0.9rem;
    font-size: 0.65rem;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: rgba(212, 245, 76, 0.7);
}

.tft-page-services .faq-title {
    margin: 0;
    font-family: "Space Grotesk", serif;
    font-size: clamp(1.6rem, 2vw, 2.2rem);
    line-height: 1.05;
    letter-spacing: -0.03em;
    transition: color 0.24s ease, transform 0.24s ease;
}

.tft-page-services .faq-panel:hover .faq-title,
.tft-page-services .faq-panel.is-open .faq-title {
    color: #d4f54c;
    transform: translateX(4px);
}

.tft-page-services .faq-summary {
    display: block;
    margin-top: 0.9rem;
    color: rgba(255, 255, 255, 0.44);
    font-size: 0.98rem;
    line-height: 1.75;
    max-width: 44rem;
}

.tft-page-services .faq-orb {
    width: 64px;
    height: 64px;
    border-radius: 9999px;
    border: 1px solid rgba(212, 245, 76, 0.2);
    background: rgba(255, 255, 255, 0.03);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: transform 0.3s ease, border-color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
    flex-shrink: 0;
}

.tft-page-services .faq-orb::before,
.tft-page-services .faq-orb::after {
    content: "";
    position: absolute;
    background: #d4f54c;
    border-radius: 999px;
    transition: transform 0.28s ease, opacity 0.28s ease;
}

.tft-page-services .faq-orb::before {
    width: 20px;
    height: 2px;
}

.tft-page-services .faq-orb::after {
    width: 2px;
    height: 20px;
}

.tft-page-services .faq-panel:hover .faq-orb,
.tft-page-services .faq-panel.is-open .faq-orb {
    border-color: rgba(212, 245, 76, 0.45);
    background: rgba(212, 245, 76, 0.08);
    box-shadow: 0 0 30px rgba(212, 245, 76, 0.12);
}

.tft-page-services .faq-panel.is-open .faq-orb {
    transform: rotate(180deg) scale(1.04);
}

.tft-page-services .faq-panel.is-open .faq-orb::after {
    transform: scaleY(0);
    opacity: 0;
}

.tft-page-services .faq-content {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.42s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.24s ease;
}

.tft-page-services .faq-panel.is-open .faq-content {
    opacity: 1;
}

.tft-page-services .faq-content-inner {
    padding: 0 2rem 2rem;
}

.tft-page-services .faq-content-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(220px, 0.8fr);
    gap: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.tft-page-services .faq-.tft-page-services {
    margin: 0;
    color: rgba(255, 255, 255, 0.66);
    line-height: 1.85;
    font-size: 1rem;
}

.tft-page-services .faq-meta {
    padding: 1.1rem 1.2rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
}

.tft-page-services .faq-meta-label {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.68rem;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.35);
}

.tft-page-services .faq-meta-value {
    margin: 0;
    color: #f2f7ea;
    font-size: 0.98rem;
    line-height: 1.7;
}

@media (max-width: 768px) {
    .tft-page-services .faq-trigger {
        padding: 1.5rem;
        grid-template-columns: minmax(0, 1fr);
    }
    .tft-page-services .faq-orb {
        width: 52px;
        height: 52px;
    }
    .tft-page-services .faq-content-inner {
        padding: 0 1.5rem 1.5rem;
    }
    .tft-page-services .faq-content-grid {
        grid-template-columns: 1fr;
    }
}

/* Social Icons */

.tft-page-services .social-item {
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.tft-page-services .group:hover .social-item {
    opacity: 1;
    transform: translateY(0);
}

.tft-page-services .group:hover .social-1 {
    transition-delay: 0.15s;
}

.tft-page-services .group:hover .social-2 {
    transition-delay: 0.1s;
}

.tft-page-services .group:hover .social-3 {
    transition-delay: 0.05s;
}

/* Wave Animation */

@keyframes wave {
    0% {
        transform: rotate(0deg);
    }
    15% {
        transform: rotate(20deg);
    }
    30% {
        transform: rotate(-15deg);
    }
    45% {
        transform: rotate(20deg);
    }
    60% {
        transform: rotate(-15deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

.tft-page-services .animate-wave {
    animation: wave 1.5s ease-in-out infinite;
    transform-origin: 70% 70%;
}

/* --- PAGE: SINGLE-POST --- */

.tft-page-single-post {
    margin: 0;
    background-color: #0d2620;
    color: white;
    font-family: 'Plus Jakarta Sans', sans-serif;
    overflow-x: hidden;
}

/* ELITE CUSTOM SCROLLBAR */

.tft-page-single-post ::-webkit-scrollbar {
    width: 5px;
}

.tft-page-single-post ::-webkit-scrollbar-track {
    background: var(--brand-bg, #0d2620);
}

.tft-page-single-post ::-webkit-scrollbar-thumb {
    background: rgba(212, 245, 76, 0.3);
    border-radius: 10px;
}

.tft-page-single-post ::-webkit-scrollbar-thumb:hover {
    background: #d4f54c;
}

/* Custom Scrollbar for Menu */

.tft-page-single-post .menu-no-scrollbar::-webkit-scrollbar {
    display: none;
}

.tft-page-single-post .menu-no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Progress Bar */

.tft-page-single-post .progress-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: rgba(255, 255, 255, 0.05);
    z-index: 100;
}

.tft-page-single-post .progress-bar {
    width: 0%;
    height: 3px;
    background: #d4f54c;
    transition: width 0.1s ease;
}

/* Hamburger Morphing Animation */

.tft-page-single-post .menu-toggle {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s ease, border-color 0.4s ease;
}

.tft-page-single-post .menu-toggle.menu-open {
    background-color: #d4f54c !important;
    border-color: #d4f54c !important;
    transform: scale(1);
}

.tft-page-single-post .hamburger-line {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s ease, opacity 0.4s ease, width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: center;
}

.tft-page-single-post .menu-toggle.menu-open .line-1 {
    transform: translateY(8px) rotate(45deg);
    background-color: #094030 !important;
}

.tft-page-single-post .menu-toggle.menu-open .line-2 {
    opacity: 0;
    transform: translateX(15px);
}

.tft-page-single-post .menu-toggle.menu-open .line-3 {
    width: 28px !important;
    transform: translateY(-8px) rotate(-45deg);
    background-color: #094030 !important;
}

.tft-page-single-post h2,
.tft-page-single-post h1,
.tft-page-blog h1,
h2.sr-only {
    border: 0
}

/* Vertical Text Utility */

.tft-page-single-post .text-vertical {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

/* Wave Animation */

@keyframes wave {
    0% {
        transform: rotate(0deg);
    }
    15% {
        transform: rotate(20deg);
    }
    30% {
        transform: rotate(-15deg);
    }
    45% {
        transform: rotate(20deg);
    }
    60% {
        transform: rotate(-15deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

.tft-page-single-post .animate-wave {
    animation: wave 1.5s ease-in-out infinite;
    transform-origin: 70% 70%;
}

/* Social Icons */

.tft-page-single-post .social-item {
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.tft-page-single-post .group:hover .social-item {
    opacity: 1;
    transform: translateY(0);
}

.tft-page-single-post .group:hover .social-1 {
    transition-delay: 0.15s;
}

.tft-page-single-post .group:hover .social-2 {
    transition-delay: 0.10s;
}

.tft-page-single-post .social-badge {
    width: 3rem;
    height: 3rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: transform 0.35s ease, background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease;
}

.tft-page-single-post .social-badge:hover {
    transform: translateY(-4px);
    border-color: #d4f54c;
    background: #d4f54c;
    color: #094030;
}

.tft-page-single-post .social-badge svg {
    width: 1rem;
    height: 1rem;
}

/* Article Typography */

.tft-page-single-post .article-body p {
    font-size: clamp(1rem, 1.2vw, 1.25rem);
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 2rem;
    font-weight: 300;
}

.tft-page-single-post .article-body h2 {
    font-family: 'Space Grotesk', serif;
    font-size: clamp(2rem, 3vw, 3.5rem);
    line-height: 1.2;
    margin: 4rem 0 2rem;
}

.tft-page-single-post .article-body blockquote {
    border-left: 2px solid #d4f54c;
    padding-left: 2rem;
    margin: 3rem 0;
    font-family: 'Space Grotesk', serif;
    font-style: italic;
    font-size: 1.5rem;
    color: #d4f54c;
}

/* Table of Contents */

.tft-page-single-post .toc-link.active {
    color: #d4f54c;
    transform: translateX(5px);
}

.tft-page-single-post .toc-link {
    transition: all 0.3s ease;
}

/* Form Controls */

.tft-page-single-post .form-input:focus {
    border-color: #d4f54c;
    outline: none;
    background: rgba(255, 255, 255, 0.05);
}

/* Comments */

.tft-page-single-post .comment-item {
    border-left: 1px solid rgba(255, 255, 255, 0.05);
}

.tft-page-single-post .reveal-up {
    opacity: 0;
    transform: translateY(30px);
    transition: all 1s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.tft-page-single-post .reveal-up.active {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 1024px) {
    .tft-page-single-post .toc-sidebar {
        display: none;
    }
}

/* --- PAGE: WORKS-ALT --- */

.tft-page-works-alt {
    margin: 0;
    background-color: #0d2620;
    color: white;
    font-family: 'Plus Jakarta Sans', sans-serif;
    overflow-x: hidden;
    transition: background-color 1s cubic-bezier(0.19, 1, 0.22, 1);
}

/* Noise Backdrop */

.tft-page-works-alt .noise-bg::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("../img/noise.svg");
    opacity: 0.05;
    pointer-events: none;
    z-index: 200;
}

/* Vertical Text Utility */

.tft-page-works-alt .text-vertical {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

/* Split Layout */

.tft-page-works-alt .split-container {
    display: flex;
    height: 100vh;
    width: 100vw;
}

.tft-page-works-alt .left-panel {
    width: 50%;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 20;
    padding-left: clamp(160px, 20vw, 300px);
    padding-top: 35vh;
    padding-bottom: 60vh;
    scroll-behavior: smooth;
}

.tft-page-works-alt .left-panel {
    scrollbar-width: thin;
    scrollbar-color: rgba(212, 245, 76, 0.45) rgba(255, 255, 255, 0.04);
}
@supports (scrollbar-gutter: stable) {
    .tft-page-works-alt .left-panel {
        scrollbar-gutter: stable;
    }
}

.tft-page-works-alt .left-panel::-webkit-scrollbar {
    width: 8px;
}

.tft-page-works-alt .left-panel::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.04);
}

.tft-page-works-alt .left-panel::-webkit-scrollbar-thumb {
    background: rgba(212, 245, 76, 0.35);
    border-radius: 999px;
}

.tft-page-works-alt .left-panel::-webkit-scrollbar-thumb:hover {
    background: rgba(212, 245, 76, 0.7);
}

.tft-page-works-alt .right-panel {
    width: 50%;
    height: 100%;
    position: relative;
    overflow: hidden;
    z-index: 10;
    background: #000;
}

/* Kinetic List Item */

.tft-page-works-alt .project-item {
    position: relative;
    margin-bottom: 15rem;
    cursor: pointer;
    transition: transform 1s cubic-bezier(0.19, 1, 0.22, 1);
}

.tft-page-works-alt .project-item h2 {
    font-family: 'Space Grotesk', serif;
    font-size: clamp(60px, 9vw, 150px);
    line-height: 0.75;
    letter-spacing: -0.06em;
    color: rgba(255, 255, 255, 0.03);
    transition: all 1s cubic-bezier(0.19, 1, 0.22, 1);
    pointer-events: none;
}

.tft-page-works-alt .project-item.active h2,
.tft-page-works-alt .project-item:hover h2 {
    color: #d4f54c;
    transform: translateX(50px);
    font-style: italic;
    opacity: 1;
}

.tft-page-works-alt .project-item .item-num {
    position: absolute;
    left: -90px;
    top: 25px;
    font-size: 13px;
    font-weight: 900;
    color: #d4f54c;
    opacity: 0;
    letter-spacing: 0.5em;
    transition: opacity 0.8s;
}

.tft-page-works-alt .project-item.active .item-num {
    opacity: 1;
}

/* Kinetic Wipe Engine */

.tft-page-works-alt .viewport-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    z-index: 1;
    clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
    transition: opacity 1s ease-in-out;
    transform: scale(1.3);
}

.tft-page-works-alt .viewport-image.active {
    opacity: 1;
    z-index: 2;
    animation: kinetic-wipe 1.8s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}

@keyframes kinetic-wipe {
    0% {
        clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
        transform: scale(1.4) rotate(5deg);
        filter: brightness(0) blur(20px);
    }
    100% {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        transform: scale(1) rotate(0deg);
        filter: brightness(1) blur(0);
    }
}

/* CUSTOM CURSOR */

.tft-page-works-alt #kinetic-cursor {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    border: 1px solid rgba(212, 245, 76, 0.15);
    position: fixed;
    pointer-events: none;
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translate(-50%, -50%);
    transition: width 0.8s, height 0.8s, border-color 0.8s;
}

.tft-page-works-alt #kinetic-cursor::after {
    content: "VIEW";
    font-size: 10px;
    font-weight: 900;
    color: #d4f54c;
    letter-spacing: 0.5em;
    opacity: 0;
    transition: opacity 0.5s;
}

.tft-page-works-alt .project-item:hover~#kinetic-cursor,
.tft-page-works-alt #kinetic-cursor.on-item {
    width: 200px;
    height: 200px;
    border-color: #d4f54c;
}

.tft-page-works-alt .project-item:hover~#kinetic-cursor::after,
.tft-page-works-alt #kinetic-cursor.on-item::after {
    opacity: 1;
}

/* --- PAGE: WORKS --- */

.tft-page-works :root {
    --tft-bg: #0d2620;
    --tft-sidebar: #094030;
    --tft-lime: #d4f54c;
    --tft-white: #ffffff;
    --tft-glass: rgba(255, 255, 255, 0.05);
    --tft-ease: cubic-bezier(0.19, 1, 0.22, 1);
}

.tft-page-works {
    background-color: var(--tft-bg);
    color: var(--tft-white);
    font-family: 'Plus Jakarta Sans', sans-serif;
    overflow-x: hidden;
    margin: 0;
}

/* Subtle Grain & Depth */

.tft-page-works .noise-bg::before {
    content: "";
    position: fixed;
    inset: 0;
    background: url("../img/noise.svg");
    opacity: 0.04;
    pointer-events: none;
    z-index: 100;
}

/* Sophisticated Background */

.tft-page-works .tft-ambiance {
    position: fixed;
    inset: 0;
    background: radial-gradient(circle at 80% 20%, rgba(212, 245, 76, 0.03) 0%, transparent 50%), radial-gradient(circle at 20% 80%, rgba(212, 245, 76, 0.02) 0%, transparent 40%);
    pointer-events: none;
    z-index: 1;
}

/* Vertical Text Utility */

.tft-page-works .text-vertical {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

/* ELITE CUSTOM SCROLLBAR */

.tft-page-works ::-webkit-scrollbar {
    width: 5px;
}

.tft-page-works ::-webkit-scrollbar-track {
    background: var(--tft-bg);
}

.tft-page-works ::-webkit-scrollbar-thumb {
    background: rgba(212, 245, 76, 0.3);
    border-radius: 10px;
}

.tft-page-works ::-webkit-scrollbar-thumb:hover {
    background: var(--tft-lime);
}

/* Custom Scrollbar for Menu */

.tft-page-works .menu-no-scrollbar::-webkit-scrollbar {
    display: none;
}

.tft-page-works .menu-no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* ELITE GRID SYSTEM */

.tft-page-works .tft-elite-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: clamp(2rem, 5vw, 4rem);
}

@media (min-width: 768px) {
    .tft-page-works .tft-elite-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .tft-page-works .tft-elite-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.tft-page-works .tft-card {
    position: relative;
    overflow: hidden;
    background: var(--tft-sidebar);
    transition: all 1.2s var(--tft-ease);
}

.tft-page-works .tft-card__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 2s var(--tft-ease);
    scale: 1.1;
}

.tft-page-works .tft-card:hover .tft-card__media {
    transform: scale(1.15) rotate(1deg);
}

.tft-page-works .tft-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(13, 38, 32, 0.9) 0%, transparent 60%);
    opacity: 0.6;
    transition: opacity 0.8s var(--tft-ease);
}

.tft-page-works .tft-card:hover .tft-card__overlay {
    opacity: 0.9;
}

.tft-page-works .tft-card__content {
    position: absolute;
    inset: 0;
    padding: clamp(2rem, 5vw, 4rem);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    transform: translateY(20px);
    transition: transform 0.8s var(--tft-ease);
}

.tft-page-works .tft-card:hover .tft-card__content {
    transform: translateY(0);
}

.tft-page-works .tft-card__content,
.tft-page-works .tft-card__overlay {
    pointer-events: none;
}

.tft-page-works .tft-card__link {
    position: absolute;
    inset: 0;
    z-index: 5;
}

.tft-page-works .tft-card__link:focus-visible {
    outline: 2px solid var(--tft-lime);
    outline-offset: -8px;
}

.tft-page-works .tft-card__title {
    font-size: clamp(2.5rem, 5vw, 6rem);
    line-height: 0.9;
    letter-spacing: -0.04em;
    margin-bottom: 1.5rem;
}

/* Cinematic Filtering */

.tft-page-works .filter-tab {
    position: relative;
    color: rgba(255, 255, 255, 0.3);
    transition: all 0.6s var(--tft-ease);
    cursor: pointer;
}

.tft-page-works .filter-tab.active {
    color: var(--tft-lime);
    transform: scale(1.1);
}

.tft-page-works .filter-tab::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    width: 0;
    height: 2px;
    background: var(--tft-lime);
    transform: translateX(-50%);
    transition: width 0.6s var(--tft-ease);
}

.tft-page-works .filter-tab.active::after {
    width: 30px;
}

/* Typography */

.tft-page-works .tft-title {
    font-size: clamp(4rem, 12vw, 15rem);
    line-height: 0.8;
    letter-spacing: -0.05em;
}

.tft-page-works .tft-italic {
    font-style: italic;
    font-family: 'Space Grotesk', serif;
}

/* CUSTOM EXPLORE CURSOR */

.tft-page-works #tft-cursor {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: var(--tft-lime);
    color: var(--tft-sidebar);
    position: fixed;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.4em;
    z-index: 400;
    opacity: 0;
    transform: scale(0) translate(-50%, -50%);
    transition: opacity 0.4s, transform 0.6s var(--tft-ease);
    mix-blend-mode: normal;
}

.tft-page-works .tft-elite-grid:hover~#tft-cursor {
    opacity: 1;
    transform: scale(1) translate(-50%, -50%);
}

/* Reveal Animations */

.tft-page-works .reveal-up {
    opacity: 0;
    transform: translateY(60px);
    transition: all 1.2s var(--tft-ease);
}

.tft-page-works .reveal-up.active {
    opacity: 1;
    transform: translateY(0);
}

/* Component: Slider Global Buttons (Elite Corner-Cut S-REWRITE) */

.tft-slider-btn {
    width: 68px;
    height: 68px;
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(20px);
    border: none !important;
    /* Explicitly borderless */
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    cursor: pointer;
    overflow: hidden;
    color: white;
    z-index: 10;
}

/* Precise 45-degree chamfers */

.tft-slider-btn--prev {
    clip-path: polygon(25% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 25%);
}

.tft-slider-btn--next {
    clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 100%, 0% 100%);
}

.tft-slider-btn:hover {
    transform: translateY(-5px) scale(1.03);
    background: rgba(212, 245, 76, 0.1);
    color: var(--tft-lime);
}

.tft-slider-btn i {
    font-size: 1.4rem;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    z-index: 2;
}

.tft-slider-btn--prev:hover i {
    transform: translateX(-4px);
}

.tft-slider-btn--next:hover i {
    transform: translateX(4px);
}

/* Corner Bleeding Glow */

.tft-slider-btn::before {
    content: '';
    position: absolute;
    width: 150%;
    height: 150%;
    background: radial-gradient(circle at center, var(--tft-lime) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.6s ease, transform 0.6s ease;
    z-index: 0;
}

.tft-slider-btn--prev::before {
    top: -75%;
    left: -75%;
    transform: scale(0.5);
}

.tft-slider-btn--next::before {
    bottom: -75%;
    right: -75%;
    transform: scale(0.5);
}

.tft-slider-btn:hover::before {
    opacity: 0.25;
    transform: scale(1);
}

.tft-slider-bg {
    display: none !important;
}

/* --- HOME 2 TEXT INVISIBILITY PATCH --- */

.tft-page-home-2 .bg-white,
.tft-page-home-2 .bg-\[\#f8f9fa\],
.tft-page-home-2 .bg-brand-sidebar\/5,
.tft-page-home-2 .bg-brand-lime,
.tft-page-home-2 .bg-gray-50,
.tft-page-home-2 aside,
.tft-page-home-2 .tft-bento__item:not(.tft-bento__item--dark),
.tft-page-home-2 .tft-stat-card {
    color: #094030;
}

.tft-page-home-2 .text-brand-sidebar {
    color: #094030 !important;
}

/* --- PROFESSIONAL "KINETIC BOUTIQUE" SLIDER TYPOGRAPHY --- */

.tft-page-index .tft-slider-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 1.5rem;
}

.tft-page-index .tft-slider-meta {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    font-family: var(--tft-sans, 'Plus Jakarta Sans', sans-serif);
    font-size: clamp(0.7rem, 1.4vw, 0.8rem);
    text-transform: uppercase;
    letter-spacing: 0.6em;
    color: white;
    margin-bottom: 0.75rem;
}

.tft-page-index .tft-slider-index {
    color: var(--tft-lime);
    font-weight: 700;
}

.tft-page-index .tft-slider-h1 {
    font-size: clamp(4.5rem, 14vw, 11rem);
    line-height: 1.05;
    color: white;
    margin: 0;
    display: flex;
    flex-direction: column;
}

.tft-page-index .tft-slider-h1--italic {
    font-family: var(--tft-serif, 'Space Grotesk', serif);
    font-style: italic;
    font-weight: 400;
    margin-right: -0.1em;
}

.tft-page-index .tft-slider-h1--bold {
    font-family: var(--tft-sans, 'Plus Jakarta Sans', sans-serif);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: -0.04em;
    transform: translateX(12%);
    /* Boutique Offset */
}

.tft-page-index .text-reveal-wrap {
    display: block;
    overflow: hidden;
    padding-bottom: 0.18em;
    /* Premium Descender support */
}

.tft-page-index .text-reveal {
    display: inline-block;
    transition: transform 1.2s cubic-bezier(0.19, 1, 0.22, 1);
}

.tft-page-index .tft-slider-action {
    margin-top: 3.5rem;
    opacity: 0;
    transform: translateY(30px);
    transition: all 1s cubic-bezier(0.19, 1, 0.22, 1) 0.5s;
}

.tft-page-index .tft-slider-action.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.tft-page-index .tft-btn-view {
    position: relative;
    display: inline-block;
    width: 240px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--tft-sans, 'Plus Jakarta Sans', sans-serif);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    color: white;
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    cursor: pointer;
}

.tft-page-index .tft-btn-view::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0%;
    height: 1.5px;
    background: var(--tft-lime);
    transform: translateX(-50%);
    transition: width 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.tft-page-index .tft-btn-view:hover {
    background: rgba(255, 255, 255, 0.06);
    letter-spacing: 0.4em;
    border-color: rgba(255, 255, 255, 0.25);
    transform: scale(1.02);
}

.tft-page-index .tft-btn-view:hover::after {
    width: 100%;
}

/* --- GLOBAL BRAND NORMALIZATION (LOWERCASE ENFORCEMENT) --- */

footer span.font-display,
footer h4.font-display,
.tft-footer-logo {
    text-transform: lowercase !important;
    letter-spacing: -0.05em !important;
}

/* --- HOME 2 ACCORDION REFINEMENT (VISIBILITY & LIME ACCENTS) --- */

.tft-page-home-2 .tft-acc-trigger span {
    color: var(--tft-lime) !important;
    font-size: 13px;
    letter-spacing: 0.2em;
    font-weight: 800;
}

/* --- PREMIUM COMMENT FORM (SINGLE POST REFINEMENT) --- */

.tft-page-single-post .tft-comment-form-wrap {
    padding: 4rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 2rem;
    position: relative;
    overflow: hidden;
    margin-top: 6rem;
}

.tft-page-single-post .tft-comment-form-header {
    margin-bottom: 3rem;
}

.tft-page-single-post .tft-label-mini {
    display: block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4em;
    color: var(--tft-lime);
    margin-bottom: 1rem;
    opacity: 0.6;
}

.tft-page-single-post .tft-comment-form {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
}

@media (min-width: 768px) {
    .tft-page-single-post .tft-comment-form {
        grid-template-columns: 1fr 1fr;
    }
}

.tft-page-single-post .tft-input-group {
    position: relative;
    width: 100%;
}

.tft-page-single-post .tft-comment-input {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 1.5rem 0;
    font-size: 1.1rem;
    color: white;
    outline: none;
    transition: all 0.4s ease;
}

.tft-page-single-post .tft-comment-input:focus {
    border-bottom-color: var(--tft-lime);
}

.tft-page-single-post .tft-comment-label {
    position: absolute;
    left: 0;
    top: 1.5rem;
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.3);
    pointer-events: none;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
}

.tft-page-single-post .tft-comment-input:focus~.tft-comment-label,
.tft-page-single-post .tft-comment-input:not(:placeholder-shown)~.tft-comment-label {
    top: -0.5rem;
    font-size: 0.7rem;
    color: var(--tft-lime);
    letter-spacing: 0.2em;
}

.tft-page-single-post .tft-comment-textarea {
    height: 150px;
    resize: none;
}

/* --- COMMENT FORM BUTTON (REALIZ REFINEMENT) --- */

.tft-page-single-post .tft-btn-submit-discourse {
    background: #094030;
    /* Authoritative Sidebar Dark */
    color: #fff;
    border: 1px solid rgba(212, 245, 76, 0.35);
    padding: 1.25rem 3.5rem;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.35em;
    border-radius: 4px;
    transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
    cursor: pointer;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.tft-page-single-post .tft-btn-submit-discourse:hover {
    background: var(--tft-lime, #d4f54c);
    color: #0d2620 !important;
    border-color: #d4f54c;
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(186, 255, 65, 0.15);
}

.tft-page-single-post .tft-btn-submit-discourse:hover span {
    color: #0d2620 !important;
}

/* --- COMMENT REPLY BUTTON SURGERY --- */

.mt-24 button.text-brand-lime,
.comment-item button {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer;
    box-shadow: none !important;
    outline: none !important;
    min-width: unset !important;
    height: auto !important;
    transition: all 0.3s ease;
}

.mt-24 button.text-brand-lime:hover,
.comment-item button:hover {
    color: #fff !important;
    text-decoration: none;
    /* Removed underline to prioritize icon movement */
}

/* Base button positioning for Aura */

.mt-24 button.text-brand-lime,
.comment-item button {
    position: relative;
    z-index: 1;
}

/* The 'Focus Glow' aura on the button itself */

.mt-24 button.text-brand-lime::after,
.comment-item button::after {
    content: '';
    position: absolute;
    inset-inline-start: auto;
    inset-inline-end: -10px;
    /* Positioned behind the arrow */
    top: 50%;
    transform: translateY(-50%) scale(0);
    width: 24px;
    height: 24px;
    background: var(--tft-lime);
    opacity: 0;
    border-radius: 50%;
    transition: all 0.5s var(--tft-ease);
    z-index: -1;
}

/* Icon transformation (targets both i and svg for compatibility) */

.mt-24 button.text-brand-lime :is(i,
svg),
.comment-item button :is(i,
svg) {
    transition: all 0.4s var(--tft-ease);
    color: var(--tft-lime);
}

/* Hover States */

.mt-24 button.text-brand-lime:hover :is(i,
svg),
.comment-item button:hover :is(i,
svg) {
    transform: translate(6px, -3px) rotate(-10deg) scale(1.1);
    color: #fff !important;
}

.mt-24 button.text-brand-lime:hover::after,
.comment-item button:hover::after {
    opacity: 0.15;
    transform: translateY(-50%) scale(1);
}

/* --- PREMIUM CONTACT FORM (REALIZ UPGRADE) --- */

.tft-page-contact .tft-premium-form-wrap {
    padding: clamp(2rem, 5vw, 5rem);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 1.5rem;
    position: relative;
    overflow: hidden;
    box-shadow: 0 50px 120px -40px rgba(0, 0, 0, 0.6), inset 0 1px 1px rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px);
}

.tft-page-contact .tft-premium-form-wrap::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at center, rgba(212, 245, 76, 0.03) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

.tft-page-contact .tft-form-header {
    margin-bottom: clamp(3rem, 8vw, 5rem);
    position: relative;
    z-index: 1;
}

.tft-page-contact .tft-label-mini {
    display: block;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5em;
    color: var(--tft-lime);
    margin-bottom: 1.25rem;
    opacity: 0.9;
}

.tft-page-contact .tft-contact-form {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3.5rem;
    position: relative;
    z-index: 1;
}

@media (min-width: 768px) {
    .tft-page-contact .tft-contact-form {
        grid-template-columns: 1fr 1fr;
    }
}

.tft-page-contact .tft-input-group {
    position: relative;
    width: 100%;
}

.tft-page-contact .tft-contact-input {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 2px solid rgba(255, 255, 255, 0.08);
    padding: 1.75rem 0;
    font-size: clamp(1.1rem, 2.5vw, 1.4rem);
    color: white;
    outline: none;
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.tft-page-contact .tft-contact-input:focus {
    border-bottom-color: var(--tft-lime);
}

.tft-page-contact .tft-contact-label {
    position: absolute;
    left: 0;
    top: 1.75rem;
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.25);
    pointer-events: none;
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-weight: 700;
}

.tft-page-contact .tft-contact-input:focus~.tft-contact-label,
.tft-page-contact .tft-contact-input:not(:placeholder-shown)~.tft-contact-label {
    top: -0.75rem;
    font-size: 0.75rem;
    color: var(--tft-lime);
    letter-spacing: 0.3em;
    opacity: 1;
}

.tft-page-contact .tft-contact-textarea {
    height: 220px;
    resize: none;
}

.tft-page-contact .tft-btn-submit-contact {
    background: var(--tft-lime);
    color: var(--tft-sidebar);
    padding: 1.75rem 4rem;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.4em;
    border-radius: 6px;
    transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
    cursor: pointer;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.4);
    border: none;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    width: fit-content;
    position: relative;
    overflow: hidden;
}

.tft-page-contact .tft-btn-submit-contact::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1);
    z-index: 0;
}

.tft-page-contact .tft-btn-submit-contact:hover {
    transform: translateY(-8px);
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.6);
    color: var(--tft-sidebar);
}

.tft-page-contact .tft-btn-submit-contact:hover::before {
    transform: scaleX(1);
    transform-origin: left;
}

.tft-page-contact .tft-btn-submit-contact span,
.tft-page-contact .tft-btn-submit-contact i {
    position: relative;
    z-index: 1;
}

.tft-page-contact .tft-btn-submit-contact:hover i {
    transform: translateX(8px);
}

/* --- PREMIUM SOCIAL GRID (REALIZ UPGRADE) --- */

.tft-page-contact .tft-social-grid-wrap {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: clamp(4rem, 10vw, 8rem);
    padding-bottom: clamp(4rem, 10vw, 8rem);
}

.tft-page-contact .tft-social-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 2rem;
}

@media (min-width: 640px) {
    .tft-page-contact .tft-social-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .tft-page-contact .tft-social-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.tft-page-contact .tft-social-card {
    position: relative;
    padding: 3rem;
    background: rgba(255, 255, 255, 0.01);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    text-decoration: none;
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    overflow: hidden;
    height: 100%;
}

.tft-page-contact .tft-social-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top right, rgba(212, 245, 76, 0.08) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 0.6s ease;
}

.tft-page-contact .tft-social-card:hover {
    transform: translateY(-12px) scale(1.02);
    background: rgba(255, 255, 255, 0.02);
    border-color: rgba(212, 245, 76, 0.2);
    box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.5);
}

.tft-page-contact .tft-social-card:hover::before {
    opacity: 1;
}

.tft-page-contact .tft-social-icon {
    width: 2rem;
    height: 2rem;
    color: var(--tft-lime);
    opacity: 0.4;
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    margin-bottom: 2rem;
}

.tft-page-contact .tft-social-card:hover .tft-social-icon {
    opacity: 1;
    transform: scale(1.2) rotate(-8deg);
}

.tft-page-contact .tft-social-title {
    font-family: var(--font-display);
    font-size: 1.8rem;
    color: white;
    margin-bottom: 0.5rem;
    transition: all 0.4s ease;
}

.tft-page-contact .tft-social-desc {
    font-family: var(--font-body);
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.35);
    line-height: 1.6;
    letter-spacing: 0.02em;
    transition: all 0.4s ease;
}

.tft-page-contact .tft-social-card:hover .tft-social-desc {
    color: rgba(255, 255, 255, 0.6);
}

.tft-page-contact .tft-social-arrow {
    position: absolute;
    bottom: 2.5rem;
    right: 2.5rem;
    width: 1.25rem;
    height: 1.25rem;
    color: var(--tft-lime);
    opacity: 0;
    transform: translate(-10px, 10px);
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.tft-page-contact .tft-social-card:hover .tft-social-arrow {
    opacity: 1;
    transform: translate(0, 0);
}

/* ==========================================================================
   RLZ-FILTER: PREMIUM EDITORIAL PORTFOLIO FILTER
   ========================================================================== */

.rlz-filter {
    position: relative;
    z-index: 50;
    margin-block-end: clamp(1.5rem, 4vw, 3rem);
}

/* Desktop Navigation */

.rlz-filter__nav {
    display: none;
}

@media (min-width: 1024px) {
    .rlz-filter__nav {
        display: block;
    }
}

.rlz-filter__list {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(1rem, 2vw, 3rem);
    list-style: none !important;
    padding: 0;
    margin: 0;
}

.rlz-filter__btn {
    background: transparent;
    border: none;
    padding: 0.5rem 0;
    color: var(--tft-white);
    opacity: 0.4;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    transition: all 0.6s var(--tft-ease);
    position: relative;
    text-align: left;
}

.rlz-filter__btn::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    bottom: 0;
    width: 0;
    height: 1px;
    background: var(--tft-lime);
    transition: width 0.6s var(--tft-ease);
}

.rlz-filter__index {
    font-family: var(--tft-sans, 'Plus Jakarta Sans', sans-serif);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.2em;
    margin-block-end: 4px;
    color: var(--tft-lime);
    transform: translateY(4px);
    transition: transform 0.6s var(--tft-ease);
}

.rlz-filter__label {
    font-family: var(--tft-sans, 'Plus Jakarta Sans', sans-serif);
    font-size: clamp(10px, 1vw, 12px);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4em;
}

.rlz-filter__btn:hover,
.rlz-filter__btn.active {
    opacity: 1;
}

.rlz-filter__btn:hover .rlz-filter__index,
.rlz-filter__btn.active .rlz-filter__index {
    transform: translateY(0);
}

.rlz-filter__btn.active::before {
    width: 100%;
}

/* Mobile Trigger: Floating Island */

.rlz-filter__mobile-trigger {
    display: flex;
    align-items: center;
    gap: 12px;
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--tft-lime);
    color: #0d2620 !important;
    /* Theme Dark Green */
    padding: 14px 32px;
    border-radius: 999px;
    border: none;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    font-family: var(--tft-font-display);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    z-index: 100;
    cursor: pointer;
    transition: all 0.4s var(--tft-ease);
}

.rlz-filter__mobile-trigger:hover {
    transform: translateX(-50%) translateY(-5px);
    background: white;
    color: #0d2620 !important;
}

@media (min-width: 1024px) {
    .rlz-filter__mobile-trigger {
        display: none;
    }
}

#main-scroll-container {
    overflow-x: hidden !important;
}

/* --- MOBILE FILTER DRAWER: UNIFIED INTERFACE --- */

.rlz-filter-drawer {
    position: fixed;
    inset: 0;
    background: rgba(9, 64, 48, 0.98);
    backdrop-filter: blur(25px);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3rem;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all 0.6s var(--tft-ease);
}

.rlz-filter-drawer.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.rlz-filter-drawer__close {
    position: absolute;
    top: 40px;
    right: 40px;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 1px solid rgba(212, 245, 76, 0.2);
    background: transparent;
    color: var(--tft-lime);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.4s var(--tft-ease);
    z-index: 1010;
}

.rlz-filter-drawer__close:hover {
    background: var(--tft-lime);
    color: var(--tft-sidebar);
    transform: rotate(90deg) scale(1.1);
}

.rlz-filter-drawer__list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    text-align: center;
    list-style: none !important;
}

.rlz-filter-drawer__btn {
    background: transparent;
    border: none;
    font-family: var(--tft-font-display);
    font-size: clamp(2.5rem, 8vw, 4.5rem);
    font-style: italic;
    color: white;
    opacity: 0.6;
    /* Increased for readability */
    transition: all 0.4s var(--tft-ease);
    cursor: pointer;
}

.rlz-filter-drawer__btn:hover,
.rlz-filter-drawer__btn.active {
    opacity: 1;
    color: var(--tft-lime);
    transform: scale(1.05) translateX(10px);
}

/* --- RLZ-FILTER: LAYOUT STABILITY PATCH (NO-WRAP) --- */

.rlz-filter__list {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.rlz-filter__list::-webkit-scrollbar {
    display: none;
}

.rlz-filter__item {
    flex-shrink: 0;
}

/* --- ELITE PORTFOLIO REDESIGN (2026 EDITION) --- */

.tft-page-works .tft-elite-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: clamp(2rem, 5vw, 6rem);
    width: 100%;
}

.tft-page-works .tft-card {
    position: relative;
    grid-column: span 12;
    overflow: hidden;
    background: #000;
    transition: clip-path 1.2s cubic-bezier(0.85, 0, 0.15, 1);
}

@media (min-width: 768px) {
    .tft-page-works .tft-card {
        grid-column: span 6;
    }
}

@media (min-width: 1024px) {
    .tft-page-works .tft-card {
        grid-column: span 4;
    }
}

.tft-page-works .tft-card__media-wrap {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    clip-path: inset(0 0 0 0);
    transition: clip-path 1.2s var(--tft-ease);
}

.tft-page-works .tft-card:hover .tft-card__media-wrap {
    clip-path: inset(4% 4% 4% 4%);
}

.tft-page-works .tft-card__media {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(1) brightness(0.7);
    transition: transform 2.4s var(--tft-ease), filter 1.2s var(--tft-ease);
    scale: 1.1;
    will-change: transform;
}

.tft-page-works .tft-card:hover .tft-card__media {
    transform: scale(1.05);
    filter: grayscale(0) brightness(0.9);
}

.tft-page-works .tft-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(9, 64, 48, 0.95) 0%, transparent 50%);
    opacity: 0;
    transition: opacity 1.2s var(--tft-ease);
    z-index: 2;
}

.tft-page-works .tft-card:hover .tft-card__overlay {
    opacity: 1;
}

.tft-page-works .tft-card__content {
    position: absolute;
    inset: 0;
    padding: clamp(2rem, 5vw, 4rem);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    z-index: 5;
    pointer-events: none;
}

.tft-page-works .tft-card__title-mask {
    overflow: hidden;
    display: block;
}

.tft-page-works .tft-card__title {
    font-size: clamp(2.2rem, 3.5vw, 4.5rem) !important;
    line-height: 0.95 !important;
    margin: 0 !important;
    word-break: break-word;
    hyphens: auto;
    transform: translateY(110%);
    transition: transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}

.tft-page-works .tft-card:hover .tft-card__title {
    transform: translateY(0);
}

.tft-page-works .tft-card__meta {
    font-family: var(--tft-font-body);
    font-size: 9px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.6em;
    color: var(--tft-lime);
    margin-bottom: 2rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    opacity: 0;
    transform: translateX(-20px);
    transition: all 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.1s;
}

.tft-page-works .tft-card:hover .tft-card__meta {
    opacity: 1;
    transform: translateX(0);
}

.tft-page-works .tft-card__meta::before {
    content: '';
    width: 20px;
    height: 1px;
    background: var(--tft-lime);
}

/* CURSOR INTERACTION HOOKS */

#tft-cursor.is-viewing {
    width: 120px;
    height: 120px;
    background: var(--tft-lime);
    color: #000;
    border-color: var(--tft-lime);
    mix-blend-mode: normal;
    font-size: 10px;
    font-weight: 900;
}

/* --- MAGNETIC DATA WRAPPER --- */

.rlz-magnetic {
    display: inline-block;
    transition: transform 0.2s linear;
    will-change: transform;
}

/* --- MENU TOGGLE: MECHANICAL EDITORIAL ENGINE (2026 ELITE) --- */

body .menu-toggle {
    transition: transform 0.45s cubic-bezier(0.19, 1, 0.22, 1), background-color 0.35s ease;
    cursor: pointer;
    overflow: hidden !important;
    position: relative;
    border: none !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

body .menu-toggle .hamburger-line {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    width: 28px !important;
    height: 2px !important;
    background-color: #d4f54c !important;
    /* Sharp Lime Contrast */
    transition: all 0.45s cubic-bezier(0.19, 1, 0.22, 1);
    transform-origin: center;
}

/* Precise vertical stratification (centered root) */

body .menu-toggle .line-1 {
    transform: translate(-50%, -8px) !important;
}

body .menu-toggle .line-2 {
    transform: translate(-50%, 0) !important;
    width: 20px !important;
    opacity: 0.8 !important;
}

body .menu-toggle .line-3 {
    transform: translate(-50%, 8px) !important;
}

/* HOVER: Premium Coordinating Slide */

body .menu-toggle:hover {
    transform: scale(1.06);
    background-color: #d4f54c !important;
    /* Premium Lime Pop */
    box-shadow: 0 0 30px rgba(212, 245, 76, 0.4);
}

body .menu-toggle:hover .hamburger-line {
    background-color: #094030 !important;
    /* Invert to Sidebar Green on Hover */
}

body .menu-toggle:hover .line-1 {
    transform: translate(-50%, -8px) translateX(3px) !important;
    opacity: 1 !important;
}

body .menu-toggle:hover .line-2 {
    transform: translate(-50%, 0) translateX(1px) !important;
    width: 28px !important;
    opacity: 1 !important;
}

body .menu-toggle:hover .line-3 {
    transform: translate(-50%, 8px) translateX(3px) !important;
    opacity: 1 !important;
}

/* Morphing 'X' - MECHANICAL SNAPPING (180deg) */

body .menu-toggle.menu-open {
    background-color: #d4f54c !important;
    transform: scale(1) rotate(180deg);
}

body .menu-toggle.menu-open .hamburger-line {
    background-color: #0d2620 !important;
    width: 28px !important;
    opacity: 1 !important;
}

body .menu-toggle.menu-open .line-1 {
    transform: translate(-50%, -50%) rotate(45deg) !important;
}

body .menu-toggle.menu-open .line-2 {
    opacity: 0 !important;
    transform: translate(100%, -50%) !important;
}

body .menu-toggle.menu-open .line-3 {
    transform: translate(-50%, -50%) rotate(-45deg) !important;
}

/* CINEMA FILTER STAGGER */

.tft-page-works .tft-card {
    transition: opacity 0.8s var(--tft-ease), transform 0.8s var(--tft-ease), clip-path 1.2s var(--tft-ease);
}

.tft-page-works .tft-card.is-filtering {
    opacity: 0;
    transform: scale(0.95) translateY(10px);
    pointer-events: none;
}

/* --- FILTER DRAWER END --- */

/* --- PREMIUM MAGNETIC SHARE COMPONENT --- */

.tft-share-grid {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.tft-share-item {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}

.tft-share-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    color: white;
    background: transparent;
    transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
    flex-shrink: 0;
}

.tft-share-label {
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    color: rgba(255, 255, 255, 0.3);
    opacity: 0;
    transform: translateX(-10px);
    transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
    pointer-events: none;
    white-space: nowrap;
}

.tft-share-item:hover .tft-share-icon {
    background: var(--tft-lime);
    color: var(--tft-sidebar);
    border-color: var(--tft-lime);
    transform: scale(1.1) rotate(-5deg);
    box-shadow: 0 10px 30px rgba(186, 255, 41, 0.3);
}

.tft-share-item:hover .tft-share-label {
    opacity: 1;
    transform: translateX(0);
    color: white;
}

/* --- TABLE OF CONTENTS REFINEMENT --- */

.toc-link {
    position: relative;
    transition: all 0.4s ease;
}

.toc-link.active {
    color: var(--tft-lime) !important;
    padding-inline-start: 1.5rem;
}

.toc-link.active::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    top: 50%;
    width: 1rem;
    height: 1px;
    background: var(--tft-lime);
    transform: translateY(-50%);
}

.article-body section {
    scroll-margin-top: 15vw;
}

/*/* --- TABLE OF CONTENTS: ARCHITECTURAL LEDGER (ELITE PASS) --- */

.tft-toc-list {
    position: relative;
    padding-inline-start: 1rem;
    border-inline-start: 1px solid rgba(255, 255, 255, 0.04);
    margin-block-start: 2rem;
}

.toc-link {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 0.85rem 0 0.85rem 2rem;
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-style: italic;
    /* Editorial manuscript feel */
    color: rgba(255, 255, 255, 0.25) !important;
    text-decoration: none;
    transition: all 0.7s cubic-bezier(0.19, 1, 0.22, 1);
    position: relative;
}

.tft-toc-num {
    font-family: var(--font-body);
    font-size: 9px;
    font-weight: 800;
    font-style: normal;
    letter-spacing: 0.15em;
    opacity: 0.3;
    transition: all 0.4s ease;
}

/* Polished Hover Interaction */

.toc-link::after {
    content: '';
    position: absolute;
    inset-inline-start: -1px;
    top: 50%;
    transform: translateY(-50%) scaleY(0);
    width: 2px;
    height: 14px;
    background: rgb(186 255 65 / 63%);
    transition: transform 0.4s var(--tft-ease);
    transform-origin: center;
}

.toc-link:hover {
    color: rgba(255, 255, 255, 0.9) !important;
    padding-inline-start: 2.5rem;
}

.toc-link:hover::after {
    transform: translateY(-50%) scaleY(1);
}

.toc-link:hover .tft-toc-num {
    opacity: 0.8;
}

/* Active State: The Precision Instrument */

.toc-link.active {
    color: var(--tft-lime) !important;
    font-style: normal;
    padding-inline-start: 3.5rem;
}

.toc-link.active .tft-toc-num {
    opacity: 1;
    color: white;
}

/* The Active Indicator (Main Bar) */

.toc-link.active::before {
    content: '';
    position: absolute;
    inset-inline-start: -1px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 36px;
    background: rgba(186, 255, 65, 1);
    box-shadow: 0 0 20px rgba(186, 255, 65, 1);
    z-index: 10;
    border-radius: 1px;
}

.toc-link.active .tft-toc-text {
    font-weight: 500;
}

/* --- PREMIUM SHARE HUB (FINAL STABILITY) --- */

.tft-share-hub {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.tft-share-hub__item {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 0.75rem;
    border-radius: 99px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(10px);
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    text-decoration: none;
    width: 60%;
    min-width: 180px;
}

.tft-share-hub__icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--tft-sidebar);
    color: var(--tft-lime);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.tft-share-hub__label {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: rgba(255, 255, 255, 0.4);
    transition: all 0.4s ease;
}

.tft-share-hub__item:hover {
    background: var(--tft-lime);
    border-color: rgba(186, 255, 65, 0.7);
    /* 30% transparent border */
    transform: translateX(10px);
    box-shadow: 0 10px 25px rgba(186, 255, 65, 0.1);
    /* Glow reduced by 50% */
}

.tft-share-hub__item:hover .tft-share-hub__icon {
    background: var(--tft-sidebar);
    color: white;
    transform: scale(0.9) rotate(-10deg);
}

.tft-share-hub__item:hover .tft-share-hub__label {
    color: var(--tft-sidebar);
}

/* ARTICLE LAYOUT STABILITY */

.article-body section {
    scroll-margin-top: 15vh;
}

/* --- ELITE TIMELINE: KINETIC HORIZONTAL (2026 SERVICES) --- */

.tft-timeline__path {
    background-image: linear-gradient(to right, transparent, var(--tft-sidebar) 50%, transparent);
    opacity: 0.15;
    height: 1px;
}

.tft-timeline__card {
    position: relative;
    z-index: 2;
    transition: all 0.6s var(--tft-ease);
}

.tft-timeline__card:hover {
    transform: translateY(-5px);
}

.tft-timeline__card h3 span.italic {
    transition: color 0.6s var(--tft-ease);
}

.tft-timeline__card:hover h3 span.italic {
    color: var(--tft-sidebar);
    opacity: 1;
}

@media (max-width: 1023px) {
    .tft-timeline__path {
        display: none;
    }
    .tft-timeline__card {
        padding-bottom: 4rem;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    }
    .tft-timeline__card:last-child {
        border-bottom: none;
    }
}

/* --- RESTORED ROADMAP: VERTICAL BEAM (2026 SERVICES) --- */

.tft-process-dot {
    transition: all 0.5s var(--tft-ease);
    box-shadow: 0 0 0 rgba(212, 245, 76, 0);
}

.tft-process-item:hover .tft-process-dot {
    background: #d4f54c;
    border-color: #d4f54c;
    box-shadow: 0 0 20px #d4f54c, 0 0 40px rgba(212, 245, 76, 0.3);
    transform: scale(1.4);
}

.tft-process-item:hover h3 {
    color: #d4f54c;
    transition: color 0.4s var(--tft-ease);
}

/* --- PROJECT DETAIL: TECHNICAL HUD & CTAs (2026 PASS) --- */

.tft-spec-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding: 1.5rem 0;
    transition: all 0.4s var(--tft-ease);
}

.tft-spec-item:last-child {
    border-bottom: none;
}

.tft-spec-item:hover {
    padding-left: 1rem;
    border-bottom-color: var(--tft-lime);
}

@media (max-width: 767px) {
    .tft-spec-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
}

/* --- PROJECT HERO: ELITE HUD & SCAN ENGINE (2026 PASS) --- */

.tft-hero {
    perspective: 1000px;
}

.tft-hero__hud {
    position: absolute;
    top: 5vh;
    left: 0;
    width: 100%;
    z-index: 20;
    padding: 0 5vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.hud-path {
    flex: 1;
    height: 1px;
    background: repeating-linear-gradient(90deg, rgba(212, 245, 76, 0.2) 0, rgba(212, 245, 76, 0.2) 4px, transparent 4px, transparent 8px);
    margin: 0 2rem;
    opacity: 0.3;
}

.hud-node {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.hud-status-blink {
    width: 5px;
    height: 5px;
    background: var(--tft-lime);
    border-radius: 50%;
    animation: tft-pulse-glow 2s infinite;
}

@keyframes tft-pulse-glow {
    0% {
        transform: scale(1);
        opacity: 1;
        box-shadow: 0 0 0 0 rgba(212, 245, 76, 0.7);
    }
    70% {
        transform: scale(1.5);
        opacity: 0;
        box-shadow: 0 0 0 6px rgba(212, 245, 76, 0);
    }
    100% {
        transform: scale(1);
        opacity: 0;
        box-shadow: 0 0 0 0 rgba(212, 245, 76, 0);
    }
}

.tft-hero__scanline {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 15vh;
    background: linear-gradient(to bottom, transparent, rgba(212, 245, 76, 0.05), transparent);
    z-index: 5;
    pointer-events: none;
    animation: tft-scan 8s linear infinite;
}

@keyframes tft-scan {
    0% {
        transform: translateY(-100vh);
    }
    100% {
        transform: translateY(100vh);
    }
}

/* MAGAZINE MASTER TYPOGRAPHY */

.tft-title-elite {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    /* Centered editorial alignment */
}

.title-sup {
    font-family: var(--font-display);
    font-style: italic;
    font-size: clamp(40px, 8vw, 85px);
    /* Dominant but secondary */
    letter-spacing: 0.05em;
    color: var(--tft-lime);
    margin-bottom: -1.5rem;
    /* Precise 'nesting' overlap */
    position: relative;
    z-index: 2;
    display: block;
    line-height: 1;
}

.title-base {
    display: block;
    font-family: var(--font-body);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -0.06em;
    line-height: 0.8;
    position: relative;
    z-index: 1;
}

@media (max-width: 767px) {
    .title-sup {
        margin-bottom: 0.5rem;
        font-size: clamp(24px, 8vw, 32px);
    }
    .title-base {
        font-size: clamp(48px, 15vw, 80px) !important;
        line-height: 1;
    }
    .tft-title-elite {
        gap: 0.25rem;
    }
    .hud-path {
        display: none;
    }
}

/* === HOME 2 REFINEMENT (2026 ELITE) === */

.tft-h2__metrics {
    position: relative;
    background-color: #ffffff;
    background-image: radial-gradient(circle at 20% 30%, rgba(212, 245, 76, 0.04) 0%, transparent 50%), radial-gradient(circle at 80% 70%, rgba(212, 245, 76, 0.04) 0%, transparent 50%), linear-gradient(rgba(0, 0, 0, 0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 0, 0.02) 1px, transparent 1px);
    background-size: 100% 100%, 100% 100%, 60px 60px, 60px 60px;
    overflow: hidden;
}

.tft-h2__metrics::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    opacity: 0.03;
    pointer-events: none;
    z-index: 0;
}

/* Sidebar Shadow Override for safety across all versions */

.tft-page-home-2 aside {
    box-shadow: 4px 0 25px rgba(0, 0, 0, 0.04) !important;
    border-right: 1px solid rgba(0, 0, 0, 0.05) !important;
}

/* Footer Logo Mark Refinement */

.tft-h2 .realiz-logo-mark {
    font-size: 1.5rem;
    font-weight: 500;
    color: #0d2620;
    letter-spacing: -0.02em;
}

/* === HOME 2 EXPLORATION REFINEMENT (2026 ELITE) === */

.tft-h2__exploration-wrap {
    background-image: radial-gradient(circle at -10% -10%, rgba(212, 245, 76, 0.03) 0%, transparent 40%), linear-gradient(rgba(0, 0, 0, 0.01) 1.5px, transparent 1.5px), linear-gradient(90deg, rgba(0, 0, 0, 0.01) 1.5px, transparent 1.5px);
    background-size: 100% 100%, 80px 80px, 80px 80px;
}

.tft-tab {
    background: rgb(11 65 49 / 7%);
    color: rgb(12 66 50);
    border: 1px solid rgba(0, 0, 0, 0.05);
    cursor: pointer !important;
    position: relative;
    z-index: 20;
}

.tft-tab:hover {
    background: rgba(0, 0, 0, 0.08);
    color: rgba(0, 0, 0, 0.9);
    transform: translateY(-2px);
}

.tft-tab-active {
    background: #0c4131 !important;
    color: #d4f54c !important;
    border-color: #0d2620 !important;
    box-shadow: 0 10px 30px rgba(13, 38, 32, 0.15);
}

/* Fix Subscribe Button Depth & Cutoff */

.footer-subscribe-wrap {
    overflow: visible !important;
}

/* Smooth Tab Content Entry & Transitions */

#tab-content,
#tab-img {
    transition: opacity 0.6s ease, transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
    will-change: opacity, transform;
}

/* === INNOVATION IMAGE REFINEMENT (2026 ELITE) === */

.tft-img-frame {
    perspective: 1500px;
}

.tft-img-frame>div:first-child {
    transform-origin: center;
    transition: transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.8s ease;
    will-change: transform;
}

.tft-img-frame:hover>div:first-child {
    transform: rotateX(2deg) rotateY(-4deg) scale(1.02);
    box-shadow: 0 50px 100px rgba(9, 64, 48, 0.15);
}

/* Floating "Liquid Flow" for the Lime Button */

.tft-img-frame .absolute.bg-brand-lime {
    animation: tft-lime-float 6s ease-in-out infinite;
    z-index: 20;
}

@keyframes tft-lime-float {
    0%,
    100% {
        transform: translate(0, 0) rotate(12deg);
    }
    33% {
        transform: translate(-10px, -20px) rotate(6deg);
    }
    66% {
        transform: translate(6px, -15px) rotate(18deg);
    }
}

.tft-img-frame:hover .absolute.bg-brand-lime {
    animation-play-state: paused;
    transform: translate(0, 0) rotate(0deg) scale(1.1);
    box-shadow: 0 40px 80px rgba(212, 245, 76, 0.35);
}

/* === PREMIUM FORM BUTTONS (2026 ELITE) === */

.tft-btn-submit-discourse,
.tft-btn-submit-contact {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem 3rem;
    background: #0d2620 !important;
    /* Premium Dark Sidebar Green */
    color: #ffffff !important;
    /* Base White text */
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    border: 1px solid #d4f54c !important;
    /* Permanent Lime border */
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
    position: relative;
    overflow: hidden;
    z-index: 10;
}

.tft-btn-submit-discourse::before,
.tft-btn-submit-contact::before {
    content: '';
    position: absolute;
    inset: 0;
    background: #d4f54c;
    /* High-Visibility Lime fill */
    transform: translateX(-101%);
    transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1);
    z-index: -1;
}

.tft-btn-submit-discourse:hover::before,
.tft-btn-submit-contact:hover::before {
    transform: translateX(0);
}

.tft-btn-submit-discourse:hover,
.tft-btn-submit-contact:hover {
    color: #0d2620 !important;
    /* Dark text on Lime fill for maximum contrast */
    transform: translateY(-3px);
    box-shadow: 0 20px 40px rgba(212, 245, 76, 0.35);
}

/* Explicit Contrast for "Identity" Inputs */

.tft-contact-input,
.tft-comment-input {
    color: #ffffff !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.tft-contact-input:focus,
.tft-comment-input:focus {
    border-bottom: 1px solid #d4f54c !important;
}

/* Premium Info Card (Contact.html) */

.tft-premium-info-grid {
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 3rem;
    border-radius: 1.5rem;
    position: relative;
    overflow: hidden;
}

.tft-premium-info-grid::after {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 200px;
    height: 200px;
    background: #d4f54c;
    filter: blur(140px);
    opacity: 0.05;
    pointer-events: none;
}

/* === EMERALD VOID MOBILE MENU (2026 ELITE) === */

@media (max-width: 767px) {
    #menu-panel {
        width: 100% !important;
        left: 0 !important;
        top: 0 !important;
        height: 100dvh !important;
        background: radial-gradient(circle at 0% 0%, #0d2620 0%, #000000 100%) !important;
        backdrop-filter: blur(20px);
        padding-top: 80px !important;
        z-index: 100 !important;
    }
    .tft-mobile-menu-footer {
        margin-top: auto;
        padding-top: 3rem;
        border-top: 1px solid rgba(255, 255, 255, 0.05);
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }
    .tft-mobile-contact-link {
        font-family: var(--font-display);
        font-size: 1.5rem;
        color: #d4f54c;
        text-decoration: none;
        transition: opacity 0.3s ease;
    }
    .tft-mobile-social-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
    }
    .tft-mobile-social-item {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        border: 1px solid rgba(255, 255, 255, 0.1);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 10px;
        font-weight: 700;
    }
    /* Staggered Animation for Menu Items */
    .menu-row {
        opacity: 0;
        transform: translateY(30px);
        transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
    }
    .menu-open .menu-row {
        opacity: 1;
        transform: translateY(0);
    }
    .menu-open .menu-row:nth-child(1) {
        transition-delay: 0.1s;
    }
    .menu-open .menu-row:nth-child(2) {
        transition-delay: 0.15s;
    }
    .menu-open .menu-row:nth-child(3) {
        transition-delay: 0.2s;
    }
    .menu-open .menu-row:nth-child(4) {
        transition-delay: 0.25s;
    }
    .menu-open .menu-row:nth-child(5) {
        transition-delay: 0.3s;
    }

}

/* === VANGUARD CREATIVE FOOTER (2026 ELITE V2) === */

.tft-vanguard-footer {
    background: var(--brand-sidebar);
    /* Eliminated hardcoded black */
    color: var(--text-white, #ffffff);
    padding: 0 0 4rem;
    position: relative;
    overflow: hidden;
    z-index: 10;
}

/* Status Bar: Refined Bevel & Glass */

.tft-footer-status-bar {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    /* Sharper border */
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    padding: 1.75rem 8%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(13, 38, 32, 0.4);
    /* Stronger theme-integrated dark */
    backdrop-filter: blur(12px);
    box-shadow: inset 0 1px 0 rgba(212, 245, 76, 0.05);
    /* Hidden "lime" highlight */
}

.tft-status-indicator {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.35em;
    color: var(--brand-lime, #d4f54c);
}

.tft-status-indicator span.opacity-40 {
    font-weight: 400;
    letter-spacing: 0.1em;
}

.tft-status-dot {
    width: 7px;
    height: 7px;
    background: var(--brand-lime, #d4f54c);
    border-radius: 50%;
    position: relative;
    box-shadow: 0 0 10px var(--brand-lime, #d4f54c);
}

.tft-status-dot::after {
    content: '';
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    background: var(--brand-lime, #d4f54c);
    opacity: 0.4;
    animation: tft-pulse 2.5s infinite;
}

@keyframes tft-pulse {
    0% {
        transform: scale(1);
        opacity: 0.5;
    }
    100% {
        transform: scale(3.5);
        opacity: 0;
    }
}

/* Massive Type Tier: High-Fidelity Balance */

.tft-footer-hero {
    padding: 10rem 8% 12rem;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.tft-footer-big-type {
    font-family: var(--font-display);
    font-size: clamp(3.5rem, 13vw, 11rem);
    /* Slighly larger */
    line-height: 0.8;
    letter-spacing: -0.05em;
    font-style: italic;
    color: var(--text-white, #ffffff);
    display: block;
    transition: all 0.7s var(--tft-ease);
    text-decoration: none;
}

.tft-footer-big-type:hover {
    color: var(--brand-lime, #d4f54c);
    transform: perspective(1000px) rotateX(10deg);
    /* Modern 3D lift */
}

.tft-footer-big-type span {
    display: block;
    font-family: var(--font-body);
    font-style: normal;
    font-weight: 500;
    /* Bolder contrast */
    text-transform: uppercase;
    letter-spacing: 0.2em;
    /* Wider track */
    font-size: clamp(0.9rem, 2vw, 1.8rem);
    margin-bottom: 3.5rem;
    color: var(--brand-lime, #d4f54c);
    /* Changed to full lime highlight */
    opacity: 0.8;
}

/* Main Grid Tier */

.tft-footer-main-grid {
    padding: 8rem 8% 5rem;
    display: grid;
    grid-template-columns: 2.2fr 1fr 1fr 1.8fr;
    gap: 5rem;
}

@media (max-width: 1024px) {
    .tft-footer-main-grid {
        grid-template-columns: 1.5fr 1fr;
        gap: 3rem;
    }
}

@media (max-width: 768px) {
    .tft-footer-main-grid {
        grid-template-columns: 1fr;
        gap: 4rem;
    }
}

.tft-footer-column h4 {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5em;
    color: rgba(255, 255, 255, 0.25);
    margin-bottom: 3rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.tft-footer-link {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 2vw, 1.8rem);
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    margin-bottom: 1.25rem;
    transition: all 0.4s var(--tft-ease);
    position: relative;
    width: fit-content;
    overflow: hidden;
}

.tft-footer-link:hover {
    color: var(--brand-lime, #d4f54c);
    transform: translateX(8px);
}

.tft-footer-link::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 1px;
    background: var(--brand-lime, #d4f54c);
    transform: translateX(-101%);
    transition: transform 0.4s var(--tft-ease);
}

.tft-footer-link:hover::after {
    transform: translateX(0);
}

/* Social Tier: Dynamic Hover */

.tft-footer-socials {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Bottom Tier: Kinetic Symmetry */

.tft-footer-bottom {
    padding: 3rem 8%;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.tft-copyright {
    font-family: var(--font-body);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    color: rgba(255, 255, 255, 0.15);
}

.tft-back-to-top {
    width: 65px;
    height: 65px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-white, #ffffff);
    transition: all 0.5s var(--tft-ease);
    background: transparent;
    backdrop-filter: blur(5px);
}

.tft-back-to-top:hover {
    background: var(--brand-lime, #d4f54c);
    border-color: var(--brand-lime, #d4f54c);
    color: var(--brand-sidebar, #094030);
    transform: rotate(360deg) scale(1.1);
}

/* Vanguard Engine Animations (Reveal Up) */

.tft-vanguard-footer .reveal-up {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s var(--tft-ease);
}

.tft-vanguard-footer .reveal-up.active {
    opacity: 1;
    transform: translateY(0);
}

/* Newsletter Refinement (2026 Elite) */

.tft-footer-newsletter {
    position: relative;
    display: flex;
    align-items: center;
}

.tft-footer-newsletter-input {
    width: 100%;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    padding: 1.25rem 4rem 1.25rem 1.5rem;
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--text-white, #ffffff);
    transition: all 0.4s var(--tft-ease);
}

.tft-footer-newsletter-input:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--brand-lime, #d4f54c);
}

.tft-aurora__nav-btn {
    position: relative;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.4s var(--tft-ease);
}

.tft-nav-btn__ring {
    display: none;
    /* Removed per user request */
}

.tft-aurora__nav-btn:hover {
    background: rgba(212, 245, 76, 0.1);
    border-color: var(--brand-lime, #d4f54c);
    transform: scale(1.05);
}

.tft-aurora__nav-btn.aurora-prev:hover i {
    transform: translateX(-5px);
}

.tft-aurora__nav-btn.aurora-next:hover i {
    transform: translateX(5px);
}

.tft-aurora__nav-btn:active {
    transform: scale(0.95);
}

.tft-aurora__nav-btn i {
    transition: transform 0.3s var(--tft-ease);
    color: white;
}

.tft-aurora__nav-btn:hover i {
    color: var(--brand-lime, #d4f54c);
}

.tft-footer-submit-btn {
    position: absolute;
    right: 8px;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--brand-lime, #d4f54c);
    color: var(--brand-sidebar, #094030);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.4s var(--tft-ease);
}

.tft-footer-submit-btn:hover {
    background: #ffffff;
    transform: scale(1.05);
}

.tft-footer-submit-btn svg {
    width: 18px;
    height: 18px;
}

/* === ELITE SIDEBAR WIDGETS (2026 JOURNAL V2) === */

.sidebar-widget {
    background: rgba(255, 255, 255, 0.02);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.sidebar-widget:hover {
    background: rgba(255, 255, 255, 0.04);
    border-top-color: var(--brand-lime-alpha, rgba(163, 255, 0, 0.3));
}

/* Sidebar Search Fix */

.tft-sidebar-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.tft-sidebar-search-input {
    width: 100%;
    height: 48px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    padding: 0 52px 0 20px;
    font-family: var(--font-body);
    font-size: 13px;
    color: white;
    transition: all 0.4s ease;
}

.tft-sidebar-search-input:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--brand-lime, #d4f54c);
}

.tft-sidebar-search-btn {
    position: absolute;
    right: 4px;
    width: 40px;
    height: 40px;
    background: var(--brand-lime, #d4f54c);
    color: var(--brand-sidebar, #094030);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    border-radius: 4px;
    border: none;
    cursor: pointer;
}

.tft-sidebar-search-btn:hover {
    background: white;
    transform: scale(1.05);
}

/* Featured Story Widget */

.tft-widget-featured {
    position: relative;
    aspect-ratio: 3/4;
    overflow: hidden;
    background: var(--brand-sidebar, #094030);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 30px;
    border-radius: 4px;
}

.tft-widget-featured__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.4;
    filter: grayscale(100%);
    transition: all 1.2s cubic-bezier(0.23, 1, 0.32, 1);
}

.tft-widget-featured:hover .tft-widget-featured__img {
    filter: grayscale(0%);
    opacity: 0.6;
    transform: scale(1.1);
}

.tft-widget-featured__content {
    position: relative;
    z-index: 10;
}

/* Tag Grid (Blade Style) */

.tft-tag-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.tft-tag-item {
    padding: 12px 15px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: rgba(255, 255, 255, 0.4);
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border-radius: 4px;
}

.tft-tag-item:hover {
    background: var(--brand-lime, #d4f54c);
    border-color: var(--brand-lime, #d4f54c);
    color: var(--brand-sidebar, #094030);
    transform: translateY(-3px);
}

/* Studio HUD (Glassmorphic Stats) */

.tft-widget-stats {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 100%);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 30px;
    border-radius: 4px;
}

.tft-stat-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.tft-stat-row:last-child {
    border-bottom: none;
}

.tft-stat-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    opacity: 0.3;
    font-family: var(--font-body);
}

.tft-stat-value {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 600;
    color: var(--brand-lime, #d4f54c);
    font-size: 16px;
}

/* Social Pulse Hub */

.tft-social-pulse-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

.tft-social-pulse-item {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.4s var(--tft-ease);
    text-decoration: none;
    border-radius: 4px;
}

.tft-social-pulse-item:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--brand-lime, #d4f54c);
}

.tft-pulse-dot {
    width: 6px;
    height: 6px;
    background: var(--brand-lime, #d4f54c);
    border-radius: 50%;
    position: relative;
}

.tft-pulse-dot::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    background: var(--brand-lime, #d4f54c);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: tft-pulse-social 2s infinite;
}

@keyframes tft-pulse-social {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.8;
    }
    100% {
        transform: translate(-50%, -50%) scale(3.5);
        opacity: 0;
    }
}

/* === ELITE POLISH: ABOUT-V2 (2026 REFINEMENT) === */

.tft-elite-highlight {
    position: relative;
    display: inline-block;
    padding: 0 12px;
    z-index: 1;
    color: var(--brand-sidebar, #094030) !important;
}

.tft-elite-highlight::before {
    content: '';
    position: absolute;
    bottom: 5%;
    left: 0;
    width: 100%;
    height: 85%;
    background: var(--brand-lime, #d4f54c);
    z-index: -1;
    transform: rotate(-1deg);
    transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
}

.tft-elite-highlight:hover::before {
    height: 100%;
    transform: rotate(0deg);
}

/* Team Card Elite (High-Fidelity) */

.tft-team-card-elite {
    position: relative;
    overflow: hidden;
    border-radius: 4px;
    background: #f8f8f8;
}

.tft-team-card-elite__img-wrap {
    position: relative;
    aspect-ratio: 3/4;
    overflow: hidden;
}

.tft-team-card-elite__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%);
    transition: all 1.2s cubic-bezier(0.19, 1, 0.22, 1);
}

.tft-team-card-elite:hover .tft-team-card-elite__img {
    filter: grayscale(0%);
    transform: scale(1.1);
}

.tft-team-card-elite__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(9, 64, 48, 0.8) 0%, transparent 60%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 30px;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
    pointer-events: none;
}

.tft-team-card-elite:hover .tft-team-card-elite__overlay {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.tft-team-card-elite__glass {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 20px;
    border-radius: 4px;
}

.tft-team-card-elite__social {
    display: flex;
    gap: 15px;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.tft-team-card-elite__social-link {
    color: white;
    opacity: 0.5;
    transition: all 0.3s ease;
}

.tft-team-card-elite__social-link:hover {
    color: var(--brand-lime, #d4f54c);
    opacity: 1;
    transform: translateY(-2px);
}

.tft-team-specialty-hud {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 5px;
}

.tft-team-dot {
    width: 6px;
    height: 6px;
    background: var(--brand-lime, #d4f54c);
    border-radius: 50%;
    animation: tft-pulse-social 2s infinite;
}

/* === ELITE HERO & CTA REFINE (2026 JOURNAL) === */

.tft-hero-glass-wrap {
    position: relative;
    padding: 3rem;
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(20px);
    border-left: 2px solid var(--brand-lime, #d4f54c);
    border-radius: 4px;
}

/* CTA Portal (High-Fidelity) */

.tft-cta-portal {
    background-color: var(--brand-sidebar, #094030) !important;
    position: relative;
    overflow: hidden;
}

.tft-cta-portal::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(163, 255, 0, 0.08) 0%, transparent 70%);
    pointer-events: none;
}

.tft-cta-parallax {
    position: absolute;
    inset: 0;
    opacity: 0.15;
    background-size: cover;
    background-position: center;
    transition: transform 0.8s cubic-bezier(0.19, 1, 0.22, 1);
}

.tft-cta-portal:hover .tft-cta-parallax {
    transform: scale(1.05);
    opacity: 0.2;
}

/* Elite Blade Button (Large) */

.tft-btn-blade-lg {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1.5rem 3.5rem;
    background: var(--brand-lime, #d4f54c);
    color: var(--brand-sidebar, #094030);
    text-transform: uppercase;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.5em;
    text-decoration: none;
    border-radius: 4px;
    /* Realiz Blade Geometry */
    transition: all 0.5s var(--tft-ease);
    box-shadow: 0 0 0 rgba(163, 255, 0, 0);
}

.tft-btn-blade-lg:hover {
    background: #ffffff;
    color: var(--brand-sidebar, #094030);
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2), 0 0 30px rgba(163, 255, 0, 0.2);
}

.tft-btn-blade-lg i {
    width: 14px;
    height: 14px;
    transition: transform 0.5s var(--tft-ease);
}

.tft-btn-blade-lg:hover i {
    transform: translateX(6px);
}

/* === ELITE TIMELINE & CTA FINAL (2026 REFINEMENT) === */

.tft-timeline-pulse {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    background: linear-gradient(to bottom, transparent, rgba(163, 255, 0, 0.4) 15%, rgba(163, 255, 0, 0.4) 85%, transparent);
    transform: translateX(-50%);
    z-index: 1;
}

.tft-milestone-dot-glow {
    position: absolute;
    top: 0;
    left: 50%;
    width: 12px;
    height: 12px;
    background: var(--brand-lime, #d4f54c);
    border-radius: 50%;
    transform: translate(-50%, 0);
    box-shadow: 0 0 20px rgba(163, 255, 0, 0.6);
    z-index: 2;
}

.tft-milestone-dot-glow::after {
    content: '';
    position: absolute;
    inset: -10px;
    border: 1px solid rgba(163, 255, 0, 0.2);
    border-radius: 50%;
    animation: tft-pulse-social 3s infinite;
}

.tft-milestone-glass {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 2.5rem;
    border-radius: 4px;
    transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
}

.tft-timeline-item:hover .tft-milestone-glass {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(163, 255, 0, 0.3);
    transform: translateY(-8px);
}

/* Studio HUD Display */

.tft-studio-hud {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    position: absolute;
    right: 5%;
    bottom: 10%;
    text-align: right;
    pointer-events: none;
    z-index: 2;
}

.tft-hud-label {
    font-family: var(--font-body);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.3);
}

.tft-hud-value {
    transform: translateY(0);
    pointer-events: auto;
}

.tft-team-card-elite__glass {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 20px;
    border-radius: 4px;
}

.tft-team-card-elite__social {
    display: flex;
    gap: 15px;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.tft-team-card-elite__social-link {
    color: white;
    opacity: 0.5;
    transition: all 0.3s ease;
}

.tft-team-card-elite__social-link:hover {
    color: var(--brand-lime, #d4f54c);
    opacity: 1;
    transform: translateY(-2px);
}

.tft-team-specialty-hud {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 5px;
}

.tft-team-dot {
    width: 6px;
    height: 6px;
    background: var(--brand-lime, #d4f54c);
    border-radius: 50%;
    animation: tft-pulse-social 2s infinite;
}

/* === ELITE HERO & CTA REFINE (2026 JOURNAL) === */

.tft-hero-glass-wrap {
    position: relative;
    padding: 3rem;
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(20px);
    border-left: 2px solid var(--brand-lime, #d4f54c);
    border-radius: 4px;
}

/* CTA Portal (High-Fidelity) */

.tft-cta-portal {
    background-color: var(--brand-sidebar, #094030) !important;
    position: relative;
    overflow: hidden;
}

.tft-cta-portal::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(163, 255, 0, 0.08) 0%, transparent 70%);
    pointer-events: none;
}

.tft-cta-parallax {
    position: absolute;
    inset: 0;
    opacity: 0.15;
    background-size: cover;
    background-position: center;
    transition: transform 0.8s cubic-bezier(0.19, 1, 0.22, 1);
}

.tft-cta-portal:hover .tft-cta-parallax {
    transform: scale(1.05);
    opacity: 0.2;
}

/* Elite Blade Button (Large) */

.tft-btn-blade-lg {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1.5rem 3.5rem;
    background: var(--brand-lime, #d4f54c);
    color: var(--brand-sidebar, #094030);
    text-transform: uppercase;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.5em;
    text-decoration: none;
    border-radius: 4px;
    /* Realiz Blade Geometry */
    transition: all 0.5s var(--tft-ease);
    box-shadow: 0 0 0 rgba(163, 255, 0, 0);
}

.tft-btn-blade-lg:hover {
    background: #ffffff;
    color: var(--brand-sidebar, #094030);
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2), 0 0 30px rgba(163, 255, 0, 0.2);
}

.tft-btn-blade-lg i {
    width: 14px;
    height: 14px;
    transition: transform 0.5s var(--tft-ease);
}

.tft-btn-blade-lg:hover i {
    transform: translateX(6px);
}

/* Vanguard Evolution Timeline (Visual Split-Mode) */

.tft-evolution-track {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
}

.tft-evolution-guide {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 1px;
    background: rgba(255, 255, 255, 0.1);
    transform: translateX(-50%);
}

.tft-milestone {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 120px;
    width: 100%;
}

.tft-milestone--reverse {
    flex-direction: row-reverse;
}

.tft-milestone__content {
    width: 42%;
}

.tft-milestone__year-side {
    width: 42%;
}

.tft-milestone-marker {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    background: var(--brand-lime, #d4f54c);
    border-radius: 50%;
    border: 3px solid var(--brand-bg, #094030);
    z-index: 10;
}

/* Vertical Sidebar Logo (Confirmed V173) */

.tft-sidebar-logo-vertical {
    position: relative;
    height: 200px;
    width: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 4rem 0;
}

.tft-sidebar-logo-vertical img {
    position: absolute;
    width: 173px;
    height: auto;
    max-width: none;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.3);
}

.tft-hud-value {
    transform: translateY(0);
    pointer-events: auto;
}

.tft-team-card-elite__glass {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 20px;
    border-radius: 4px;
}

.tft-team-card-elite__social {
    display: flex;
    gap: 15px;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.tft-team-card-elite__social-link {
    color: white;
    opacity: 0.5;
    transition: all 0.3s ease;
}

.tft-team-card-elite__social-link:hover {
    color: var(--brand-lime, #d4f54c);
    opacity: 1;
    transform: translateY(-2px);
}

.tft-team-specialty-hud {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 5px;
}

.tft-team-dot {
    width: 6px;
    height: 6px;
    background: var(--brand-lime, #d4f54c);
    border-radius: 50%;
    animation: tft-pulse-social 2s infinite;
}

/* === ELITE HERO & CTA REFINE (2026 JOURNAL) === */

.tft-hero-glass-wrap {
    position: relative;
    padding: 3rem;
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(20px);
    border-left: 2px solid var(--brand-lime, #d4f54c);
    border-radius: 4px;
}

/* CTA Portal (High-Fidelity) */

.tft-cta-portal {
    background-color: var(--brand-sidebar, #094030) !important;
    position: relative;
    overflow: hidden;
}

.tft-cta-portal::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(163, 255, 0, 0.08) 0%, transparent 70%);
    pointer-events: none;
}

.tft-cta-parallax {
    position: absolute;
    inset: 0;
    opacity: 0.15;
    background-size: cover;
    background-position: center;
    transition: transform 0.8s cubic-bezier(0.19, 1, 0.22, 1);
}

.tft-cta-portal:hover .tft-cta-parallax {
    transform: scale(1.05);
    opacity: 0.2;
}

/* Elite Blade Button (Large) */

.tft-btn-blade-lg {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1.5rem 3.5rem;
    background: var(--brand-lime, #d4f54c);
    color: var(--brand-sidebar, #094030);
    text-transform: uppercase;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.5em;
    text-decoration: none;
    border-radius: 4px;
    /* Realiz Blade Geometry */
    transition: all 0.5s var(--tft-ease);
    box-shadow: 0 0 0 rgba(163, 255, 0, 0);
}

.tft-btn-blade-lg:hover {
    background: #ffffff;
    color: var(--brand-sidebar, #094030);
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2), 0 0 30px rgba(163, 255, 0, 0.2);
}

.tft-btn-blade-lg i {
    width: 14px;
    height: 14px;
    transition: transform 0.5s var(--tft-ease);
    height: 25px;
}

.tft-btn-blade-lg:hover i {
    transform: translateX(6px);
}

/* Vanguard Evolution Timeline (Visual Split-Mode) */

.tft-evolution-track {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
}

.tft-evolution-guide {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 1px;
    background: rgba(255, 255, 255, 0.1);
    transform: translateX(-50%);
}

.tft-milestone {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 120px;
    width: 100%;
}

.tft-milestone--reverse {
    flex-direction: row-reverse;
}

.tft-milestone__content {
    width: 42%;
}

.tft-milestone__year-side {
    width: 42%;
}

.tft-milestone-marker {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    background: var(--brand-lime, #d4f54c);
    border-radius: 50%;
    border: 3px solid var(--brand-bg, #094030);
    z-index: 10;
}

/* Vertical Sidebar Logo (Confirmed V173) */

.tft-sidebar-logo-vertical {
    position: relative;
    height: 200px;
    width: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 4rem 0;
}

.tft-sidebar-logo-vertical img {
    position: absolute;
    width: 173px;
    height: auto;
    max-width: none;
    transform: rotate(-90deg);
    opacity: 0.85;
    transition: all 0.4s var(--tft-ease);
}

/* Disable logo hover vertical shift */

.tft-sidebar-logo-vertical:hover img {
    transform: rotate(-90deg) translateY(0) !important;
    opacity: 1;
}

/* === HOME 5: THE STORYTELLER (2026 ARCHITECTURAL LIST) === */

.h5-list-item {
    position: relative;
    padding: 1.5rem 0;
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    font-weight: 300;
    color: rgba(255, 255, 255, 0.2);
    cursor: pointer;
    transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
    white-space: nowrap;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.h5-list-item::before {
    content: '+';
    position: absolute;
    left: -2rem;
    opacity: 0;
    transform: translateX(-10px);
    transition: all 0.4s ease;
    color: var(--brand-lime, #d4f54c);
}

.h5-list-item:hover,
.h5-list-item.active {
    color: white;
    padding-left: 1.5rem;
}

.h5-list-item:hover::before,
.h5-list-item.active::before {
    opacity: 1;
    transform: translateX(0);
}

/* Image Engine */

.h5-image-wrap {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #0d2620;
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.4);
    transform: perspective(1000px) rotateY(var(--h5-shift-x, 0deg)) rotateX(var(--h5-shift-y, 0deg));
    transition: transform 0.1s ease;
}

.h5-image-shell {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.h5-image-layer {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform 1.2s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.8s ease;
}

.h5-image-next {
    opacity: 0;
    transform: scale(1.1);
}

/* Transition State */

.h5-image-wrap.is-transitioning .h5-image-next {
    opacity: 1 !important;
    transform: scale(1) !important;
    z-index: 2;
}

.h5-image-wrap.is-transitioning .h5-image-current {
    opacity: 0.5;
    transform: scale(0.95);
    z-index: 1;
}

/* Meta HUD */

.h5-image-meta {
    position: absolute;
    bottom: 3rem;
    left: 3rem;
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.h5-image-index {
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    color: var(--brand-lime, #d4f54c) !important;
}

.h5-image-tag {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-style: italic;
    color: white;
}

/* Counter Engine */

.h5-counter-wrap {
    position: relative;
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.h5-counter-ring {
    transform: rotate(-90deg);
    stroke-dasharray: 283;
    stroke-dashoffset: 283;
    transition: stroke-dashoffset 0.8s cubic-bezier(0.19, 1, 0.22, 1);
}

.h5-counter-wrap.is-updating .h5-counter-ring {
    stroke-dashoffset: 0;
}

.h5-counter-core {
    position: absolute;
}

/* --- SECTION: PREMIUM LOCATION BUTTONS (2026 ELITE) --- */

.tft-location-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    width: 100%;
}

@media (max-width: 640px) {
    .tft-location-wrap {
        flex-direction: column;
        gap: 1rem;
    }
}

.tft-location-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: clamp(0.75rem, 2vw, 1.25rem) clamp(1.5rem, 4vw, 3rem);
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 999px;
    font-family: var(--font-display);
    font-size: clamp(0.75rem, 1.2vw, 0.9rem);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #fff;
    overflow: hidden;
    transition: transform 0.6s var(--tft-ease), border-color 0.4s var(--tft-ease);
    isolation: isolate;
    cursor: pointer;
    text-decoration: none;
    backdrop-filter: blur(8px);
    white-space: nowrap;
}

@media (max-width: 640px) {
    .tft-location-btn {
        width: 240px;
        /* Fixed width for stacked buttons on mobile */
    }
}

/* --- HOME-7: ARCHIVE REFINEMENT --- */

.tft-page-home-7 .tft-avatar-wrap {
    background: var(--brand-lime) !important;
    /* Solid bright green as requested */
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.tft-page-home-7 .tft-nav-btn:hover .tft-avatar-wrap {
    background: #fff !important;
    /* White on hover for premium contrast */
    box-shadow: 0 0 30px rgba(212, 245, 76, 0.4);
}

.tft-page-home-7 .tft-avatar {
    opacity: 0.85;
    transition: opacity 0.4s ease;
}

.tft-page-home-7 .tft-nav-btn:hover .tft-avatar {
    opacity: 1;
}

/* Decorative Diagonal Lines */

.tft-page-home-7::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image: repeating-linear-gradient(45deg, rgba(212, 245, 76, 0.01) 0px, rgba(212, 245, 76, 0.01) 1px, transparent 1px, transparent 50px);
    pointer-events: none;
    z-index: 1;
}

/* Enhanced Watermark Depth */

.tft-page-home-7 .tft-watermark {
    text-shadow: 0 0 100px rgba(212, 245, 76, 0.05);
    background: linear-gradient(to bottom, rgba(212, 245, 76, 0.02), transparent);
}

/* --- CASE STUDY BUBBLE (BRIGHT GREEN BG) --- */

.tft-page-home-7 .tft-case-bubble {
    background: #d4f54c !important;
    /* Forces the exact brand-lime green */
    color: #094030 !important;
    /* High-contrast dark green text */
    font-weight: 700 !important;
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.6), inset 0 0 20px rgba(255, 255, 255, 0.3) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.tft-page-home-7 .tft-case-bubble span:first-child {
    font-size: 16px !important;
    text-align: center !important;
    display: block !important;
    width: 100% !important;
    opacity: 0.8 !important;
    letter-spacing: 0.2em !important;
    margin-bottom: 5px !important;
}

.tft-page-home-7 .tft-case-bubble:hover {
    background: #ffffff !important;
    color: #094030 !important;
    transform: scale(1.1) rotate(15deg) !important;
}

.tft-location-btn__text {
    position: relative;
    z-index: 2;
    transition: color 0.4s var(--tft-ease);
}

.tft-location-btn__bg {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 150%;
    aspect-ratio: 1/1;
    background: #d4f54c;
    /* Using var(--brand-lime) literal for reliability */
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    transition: transform 0.6s var(--tft-ease);
    z-index: 1;
}

/* Hover States */

.tft-location-btn:hover {
    border-color: #d4f54c;
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(212, 245, 76, 0.15);
}

.tft-location-btn:hover .tft-location-btn__bg {
    transform: translate(-50%, -50%) scale(1);
}

.tft-location-btn:hover .tft-location-btn__text {
    color: #094030;
    /* Using var(--brand-sidebar) literal for reliability */
}

/* Mobile Unique Fix for Button Stacking */

@media (max-width: 480px) {
    .tft-location-btn {
        width: 100%;
        text-align: center;
    }
}

/* --- HOME-7: ELITE INTERACTION REFINEMENT --- */

.tft-page-home-7 .h7-card {
    transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

.tft-page-home-7 .h7-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border: 1px solid var(--brand-lime);
    opacity: 0;
    transform: scale(0.98);
    transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
    z-index: 5;
    pointer-events: none;
}

.tft-page-home-7 .h7-card:hover {
    transform: translateY(-12px) !important;
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.4) !important;
}

.tft-page-home-7 .h7-card:hover::before {
    opacity: 0.4;
    transform: scale(1);
    inset: 12px;
}

/* Parallax Content Shift */

.tft-page-home-7 .h7-card-content {
    transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

.tft-page-home-7 .h7-card:hover .h7-card-content {
    transform: translateY(-8px) !important;
}

.tft-page-home-7 .h7-title {
    transition: transform 0.7s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

.tft-page-home-7 .h7-card:hover .h7-title {
    transform: translateX(10px);
}

.tft-page-home-7 .h7-desc {
    opacity: 0.6;
    transform: translateY(10px);
    transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

.tft-page-home-7 .h7-card:hover .h7-desc {
    opacity: 1;
    transform: translateY(0);
}

/* Liquid Badge Effect */

.tft-page-home-7 .h7-badge {
    position: relative;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    transition: all 0.4s ease !important;
}

.tft-page-home-7 .h7-badge::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 150%;
    aspect-ratio: 1;
    background: var(--brand-lime);
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
    z-index: -1;
}

.tft-page-home-7 .h7-card:hover .h7-badge {
    color: var(--brand-sidebar) !important;
    border-color: var(--brand-lime) !important;
}

.tft-page-home-7 .h7-card:hover .h7-badge::before {
    transform: translate(-50%, -50%) scale(1);
}

/* Index Number Glow */

.tft-page-home-7 .h7-index {
    transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

.tft-page-home-7 .h7-card:hover .h7-index {
    background: var(--brand-lime) !important;
    color: var(--brand-sidebar) !important;
    transform: scale(1.1) rotate(10deg) !important;
    box-shadow: 0 0 20px rgba(212, 245, 76, 0.4);
}

/* Cinematic Dark Overlay & Text Protection */

.tft-page-home-7 .h7-card::after {
    content: '';
    position: absolute;
    inset: 0;
    /* Deeper dark gradient to bridge image and text */
    background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.55) 50%, rgba(0, 0, 0, 0.85) 100%);
    opacity: 0;
    /* Hidden by default to keep the layout vibrant/alive */
    transition: opacity 0.5s cubic-bezier(0.165, 0.84, 0.44, 1), background 0.5s ease;
    z-index: 2;
    pointer-events: none;
}

.tft-page-home-7 .h7-card:hover::after {
    opacity: 1;
    /* Reveals only on hover for cinematic focus */
}

.tft-page-home-7 .h7-card-content {
    z-index: 10 !important;
    /* Forces content above the cinematic overlay */
}

/* Typographic Protection & Micro-Interactions */

.tft-page-home-7 .h7-title {
    letter-spacing: -0.0125em;
    transform: translateY(-5px);
}

.tft-page-about-alt .tft-capability-card:hover .tft-capability-card__description {
    color: var(--tft-bg) !important;
    opacity: 1;
    transform: translateY(-8px);
}

/* Add a smooth transition to the paragraph so the color fades nicely */

.capability-card p {
    transition: color 0.3s ease;
}

/* Change the paragraph color to white when the main card is hovered */

.capability-card:hover p {
    color: #0d2620;
}

/* === SOVEREIGN ELITE V2: PREMIUM PROJECT CATEGORY BADGE === */

.tft-cat-badge {
    margin-bottom: clamp(1.5rem, 3vh, 2.5rem);
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1s var(--tft-ease-out), transform 1s var(--tft-ease-out);
}

.tft-cat-badge.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.tft-cat-badge__pill {
    display: inline-flex;
    align-items: center;
    padding: clamp(0.4rem, 0.8vh, 0.6rem) clamp(1rem, 2vw, 1.5rem);
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(212, 245, 76, 0.15);
    border-radius: 100px;
    gap: 1rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    transition: all 0.4s var(--tft-ease);
}

.tft-cat-badge__pill:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(212, 245, 76, 0.4);
    box-shadow: 0 15px 40px rgba(212, 245, 76, 0.1);
    transform: translateY(-2px);
}

.tft-cat-badge__index {
    color: var(--tft-lime);
    font-family: var(--font-display, 'Space Grotesk', sans-serif);
    font-weight: 700;
    font-size: clamp(0.75rem, 1.2vw, 0.9rem);
    letter-spacing: 0.1em;
}

.tft-cat-badge__divider {
    width: 1px;
    height: 12px;
    background: rgba(255, 255, 255, 0.2);
}

.tft-cat-badge__label {
    color: rgba(255, 255, 255, 0.9);
    font-family: var(--font-body, 'Plus Jakarta Sans', sans-serif);
    font-weight: 500;
    font-size: clamp(0.7rem, 1vw, 0.8rem);
    text-transform: uppercase;
    letter-spacing: 0.3em;
}

/* RTL Support */

[dir="rtl"] .tft-cat-badge__pill {
    padding-inline: clamp(1rem, 2vw, 1.5rem);
}

/* === SOVEREIGN ELITE V2: REFINED CATEGORY ONLY BADGE === */

.tft-cat-badge__pill {
    padding-inline: clamp(1.2rem, 3vw, 2rem);
    gap: 0;
}

/* === SOVEREIGN ELITE V2: CINEMATIC SLIDER TRANSITIONS === */

.tft-slider-h1 {
    transition: transform 0.8s var(--tft-ease-out), opacity 0.8s var(--tft-ease-out);
}

.tft-slider-h1.is-animating {
    transform: translateY(30px) skewY(4deg);
    opacity: 0;
}

.text-reveal-wrap {
    display: block;
    overflow: hidden;
    padding-top: 0.05em;
    padding-bottom: 0.05em;
    margin-top: -0.05em;
    margin-bottom: -0.05em;
}

.text-reveal {
    display: block;
    transform: translateY(0);
    transition: transform 0.8s cubic-bezier(0.19, 1, 0.22, 1);
}

.is-animating .text-reveal {
    transform: translateY(110%);
}

/* === SOVEREIGN ELITE V2: FULL COMPONENT MOTION === */

.tft-cat-badge,
.tft-slider-action {
    transition: transform 0.7s var(--tft-ease-out), opacity 0.7s var(--tft-ease-out);
    transition-delay: 0.1s;
}

.tft-cat-badge.is-animating {
    transform: translateY(-20px) scale(0.9);
    opacity: 0;
    transition-delay: 0s;
}

.tft-slider-action.is-animating {
    transform: translateY(20px) scale(0.9);
    opacity: 0;
    transition-delay: 0s;
}

#webgl-canvas {
    transition: transform 0.8s var(--tft-ease-out);
}

.is-animating #webgl-canvas {
    transform: scale(1.08) rotate(1deg);
}

/* === SOVEREIGN ELITE V2: PREMIUM METRICS (HOME-2) === */

.tft-h2__metrics-enhanced {
    background-image: linear-gradient(rgba(10, 61, 46, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(10, 61, 46, 0.03) 1px, transparent 1px);
    background-size: 40px 40px;
}

.tft-stat-card-new {
    position: relative;
    padding: clamp(2rem, 4vh, 3.5rem) clamp(1.5rem, 3vw, 2.5rem);
    background: #ffffff;
    border: 1px solid rgba(10, 61, 46, 0.08);
    border-radius: 2.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 380px;
    transition: all 0.6s var(--tft-ease-out);
    overflow: hidden;
}

.tft-stat-card-new:hover {
    transform: translateY(-12px);
    border-color: var(--tft-lime);
    box-shadow: 0 40px 90px -20px rgba(10, 61, 46, 0.12);
}

.tft-stat-card-new::before {
    content: '';
    position: absolute;
    top: 10%;
    right: 10%;
    width: 120px;
    height: 120px;
    background: radial-gradient(circle, rgba(212, 245, 76, 0.15) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.6s ease;
}

.tft-stat-card-new:hover::before {
    opacity: 1;
}

.tft-stat-card-new__top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4em;
    color: rgba(10, 61, 46, 0.3);
}

.tft-stat-card-new__index {
    padding: 4px 8px;
    border-bottom: 1px solid rgba(10, 61, 46, 0.1);
}

.tft-stat-card-new__body {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tft-stat-card-new__number {
    font-family: var(--tft-display, 'Space Grotesk', serif);
    font-size: clamp(3.5rem, 6vw, 5.5rem);
    color: var(--tft-bg);
    line-height: 1;
    letter-spacing: -0.04em;
    font-weight: 600;
    transition: transform 0.6s var(--tft-ease-out);
}

.tft-stat-card-new:hover .tft-stat-card-new__number {
    transform: scale(1.05);
}

.tft-stat-card-new__bottom {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.tft-stat-card-new__label {
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.35em;
    color: rgba(10, 61, 46, 0.4);
}

.tft-stat-card-new__line {
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, rgba(10, 61, 46, 0.1) 0%, rgba(10, 61, 46, 0.02) 100%);
    transition: transform 0.6s var(--tft-ease-out);
    transform-origin: left;
}

.tft-stat-card-new:hover .tft-stat-card-new__line {
    background: var(--tft-lime);
    transform: scaleX(1.1);
}

/* === SOVEREIGN ELITE V2: PREMIUM HERO (HOME-2) === */

.tft-h2__hero {
    min-height: 100vh;
    padding: 0;
    display: flex;
    align-items: center;
    background-color: var(--tft-h2-dark);
    position: relative;
    z-index: 10;
    overflow: hidden;
}

.tft-h2__hero-bg-overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 65% 35%, rgba(212, 245, 76, 0.06) 0%, transparent 75%);
    pointer-events: none;
    z-index: 1;
}

.tft-h2__hero-metadata {
    opacity: 0;
    transition: opacity 1.2s var(--tft-ease-out), transform 1.2s var(--tft-ease-out);
    z-index: 50;
    pointer-events: none;
}

/* Metadata Far Cornders to prevent title overlap */

.tft-h2__hero-metadata.top-12 {
    top: 3.5rem;
    left: 3.5rem;
    transform: translateY(-15px);
}

.tft-h2__hero-metadata.bottom-12 {
    bottom: 3.5rem;
    right: 3.5rem;
    transform: translateY(15px);
}

.on-reveal .tft-h2__hero-metadata {
    opacity: 1;
    transform: translateY(0);
}

.tft-h2__hero-img-box-v2 {
    position: relative;
    width: clamp(280px, 40vw, 520px);
    aspect-ratio: 0.85/1;
    padding: 1.25rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(12px);
    border-radius: 4rem 4rem 10.5rem 4rem;
    box-shadow: 0 45px 110px -25px rgba(0, 0, 0, 0.5);
    transition: all 0.9s var(--tft-ease-out);
    z-index: 20;
}

/* Shutter Animation Overlay */

.tft-h2__shutter-overlay {
    position: absolute;
    inset: 0;
    background: var(--tft-h2-dark);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.75s var(--tft-ease-out);
    z-index: 5;
}

.tft-h2__hero-img-v2 {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

/* Typography Reveal Engine */

.tft-h2__hero-title-v2 {
    font-size: clamp(3.2rem, 7.5vw, 8rem);
    letter-spacing: -0.045em;
    font-weight: 600;
    line-height: 0.82;
    position: relative;
    z-index: 30;
}

.reveal-inner {
    display: inline-block;
    transform: translateY(115%);
    transition: transform 1.2s var(--tft-ease-out);
}

.on-reveal .reveal-inner {
    transform: translateY(0);
}

/* Navigation & Arrows Persistence */

.reveal-up {
    opacity: 0;
    transform: translateY(35px);
    transition: opacity 1.2s var(--tft-ease-out), transform 1.2s var(--tft-ease-out);
    transition-delay: 0.5s;
    position: relative;
    z-index: 60;
}

.on-reveal .reveal-up {
    opacity: 1;
    transform: translateY(0);
}

.tft-nav-btn {
    width: 58px;
    height: 58px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: transparent;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.45s var(--tft-ease-out);
    cursor: pointer;
}

.tft-nav-btn:hover {
    background: var(--tft-lime);
    border-color: var(--tft-lime);
    color: #0b251e;
    transform: translateY(-4px) scale(1.05);
}

.tft-nav-btn i {
    width: 19px;
    height: 19px;
}

@keyframes progress-vanguard {
    0% {
        transform: translateX(-105%);
    }
    40% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(105%);
    }
}

.animate-progress-line {
    animation: progress-vanguard 5s cubic-bezier(0.77, 0, 0.175, 1) infinite;
}

.reveal-text {
    display: block;
    margin-bottom: 2.5rem;
    color: var(--tft-lime);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.8em;
    opacity: 0;
    transition: opacity 1.2s ease;
    transition-delay: 0.7s;
}

.on-reveal .reveal-text {
    opacity: 1;
}

/* === SOVEREIGN ELITE V3: ULTIMATE HERO (HOME-2) === */

.tft-h2__hero-ultimate {
    min-height: 100vh;
    background-color: #050f0d;
    display: flex;
    align-items: center;
    position: relative;
    z-index: 10;
}

.tft-h2__hero-canvas {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 70% 30%, rgba(212, 245, 76, 0.08) 0%, transparent 65%), radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.02) 0%, transparent 50%);
    pointer-events: none;
}

.tft-h2__hero-topography {
    overflow: hidden;
}

.tft-h2__topo-text {
    position: absolute;
    font-family: var(--tft-display, 'Space Grotesk', serif);
    font-size: 22vw;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.025);
    white-space: nowrap;
    line-height: 1;
    letter-spacing: -0.05em;
    pointer-events: none;
    user-select: none;
}

.tft-h2__kicker-v2 {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6em;
    color: var(--tft-lime);
    margin-bottom: 3rem;
    display: block;
}

.tft-h2__hero-title-v3 {
    font-size: clamp(4rem, 10vw, 10.5rem);
    letter-spacing: -0.05em;
    font-weight: 600;
}

.tft-h2__hud-nav {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    padding: 8px;
    backdrop-filter: blur(10px);
}

.tft-h2__hud-btn {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    transition: all 0.4s var(--tft-ease-out);
    background: transparent;
    cursor: pointer;
    border: none;
}

.tft-h2__hud-btn:hover {
    background: var(--tft-lime);
    color: #050f0d;
}

.tft-h2__hud-divider {
    width: 1px;
    height: 20px;
    background: rgba(255, 255, 255, 0.1);
    margin: 0 5px;
}

.tft-h2__exhibition-frame {
    position: relative;
    width: clamp(300px, 45vw, 600px);
    aspect-ratio: 0.9/1;
}

.tft-h2__shutter-box {
    width: 100%;
    height: 100%;
    border-radius: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 60px 120px -30px rgba(0, 0, 0, 0.6);
}

.tft-h2__hero-img-ultimate {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tft-h2__img-glow {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(5, 15, 13, 0.4), transparent 40%);
    pointer-events: none;
}

.vertical-text {
    writing-mode: vertical-rl;
}

@keyframes progress-vanguard {
    0% {
        transform: translateX(-100%);
    }
    50% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(100%);
    }
}

.animate-progress-vanguard {
    animation: progress-vanguard 4s cubic-bezier(0.77, 0, 0.175, 1) infinite;
}

/* === SOVEREIGN ELITE V4: VANGUARD HERO (STABLE REDESIGN) === */

.tft-h2__vanguard-hero {
    background-color: #0d2620;
}

.tft-h2__vanguard-canvas {
    pointer-events: none;
}

.tft-h2__vanguard-grid {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(212, 245, 76, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(212, 245, 76, 0.03) 1px, transparent 1px);
    background-size: 60px 60px;
}

.tft-h2__vanguard-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 75% 25%, rgba(212, 245, 76, 0.07) 0%, transparent 60%);
}

.tft-h2__vanguard-title {
    font-size: clamp(4rem, 8vw, 8rem);
    letter-spacing: -0.04em;
    font-weight: 600;
    line-height: 0.85;
}

.tft-h2__nav-pill {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    padding: 6px;
    backdrop-filter: blur(12px);
}

.tft-h2__nav-arrow {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    transition: all 0.4s var(--tft-ease-out);
    background: transparent;
    cursor: pointer;
    border: none;
}

.tft-h2__nav-arrow:hover {
    background: var(--tft-lime);
    color: #0d2620;
}

.tft-h2__nav-arrow svg {
    width: 18px;
    height: 18px;
}

.tft-h2__nav-sep {
    width: 1px;
    height: 16px;
    background: rgba(255, 255, 255, 0.12);
    margin: 0 4px;
}

.tft-h2__vanguard-frame {
    position: relative;
    width: clamp(280px, 35vw, 480px);
    aspect-ratio: 0.85/1;
}

.tft-h2__vanguard-shutter {
    width: 100%;
    height: 100%;
    border-radius: 3.5rem 3.5rem 10rem 3.5rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 50px 100px -30px rgba(0, 0, 0, 0.5);
}

.tft-h2__vanguard-img-v3 {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tft-h2__vanguard-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(13, 38, 32, 0.4), transparent 50%);
    pointer-events: none;
}

@keyframes h2-progress {
    0% {
        transform: translateX(-100%);
    }
    50% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(100%);
    }
}

.animate-h2-progress {
    animation: h2-progress 4.5s cubic-bezier(0.77, 0, 0.175, 1) infinite;
}

/* === SOVEREIGN ELITE V5: VANGUARD BEM FINAL (ZERO-SHIFT ENGINE) === */

.tft-h2-vanguard {
    position: relative;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #0d2620;
    overflow: hidden;
}

.tft-h2-vanguard__bg {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.tft-h2-vanguard__grid {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(212, 245, 76, 0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(212, 245, 76, 0.02) 1px, transparent 1px);
    background-size: 80px 80px;
}

.tft-h2-vanguard__glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 75% 25%, rgba(212, 245, 76, 0.06) 0%, transparent 70%);
}

.tft-h2-vanguard__topo {
    position: absolute;
    left: -5%;
    bottom: 5%;
    font-size: 25vw;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.02);
    line-height: 1;
    letter-spacing: -0.05em;
    user-select: none;
}

.tft-h2-vanguard__container {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 6%;
    position: relative;
    z-index: 10;
    flex: 1;
    display: flex;
    align-items: center;
}

.tft-h2-vanguard__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4rem;
    width: 100%;
    min-height: 550px;
    position: relative;
}

@media (min-width: 1024px) {
    .tft-h2-vanguard__content {
        flex-direction: row;
        gap: 2rem;
    }
}

.tft-h2-vanguard__info {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    position: relative;
    min-height: 500px;
}

@media (min-width: 1024px) {
    .tft-h2-vanguard__info {
        width: 60%;
    }
}

.tft-h2-vanguard__info-inner {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.tft-h2-vanguard__kicker-box {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    margin-bottom: 2.5rem;
}

.tft-h2-vanguard__kicker-line {
    width: 3.5rem;
    height: 1px;
    background-color: rgba(212, 245, 76, 0.5);
}

.tft-h2-vanguard__kicker-text {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.8em;
    color: var(--tft-lime);
}

.tft-h2-vanguard__title {
    color: #ffffff;
    margin: 0;
}

.tft-h2-vanguard__title-line {
    display: block;
    overflow: hidden;
    font-size: clamp(3.8rem, 8.2vw, 8.2rem);
    line-height: 0.85;
    letter-spacing: -0.045em;
    font-weight: 600;
}

.tft-h2-vanguard__title-line--serif {
    font-family: var(--tft-serif, serif);
    font-style: italic;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.85);
}

/* Captions Motion Enhanced */

.reveal-inner {
    display: inline-block;
    transform: translateY(115%) skewY(10deg);
    filter: blur(20px);
    opacity: 0;
    transition: all 1.2s cubic-bezier(0.23, 1, 0.32, 1);
}

.on-reveal .reveal-inner {
    transform: translateY(0%) skewY(0deg);
    filter: blur(0px);
    opacity: 1;
}

/* PINNED HUD */

.tft-h2-vanguard__hud {
    position: absolute;
    bottom: 5rem;
    left: 6%;
    display: flex;
    align-items: center;
    gap: 2.5rem;
    z-index: 100;
}

@media (min-width: 1024px) {
    .tft-h2-vanguard__hud {
        left: 10%;
        bottom: 12dvh;
    }
}

.tft-h2-vanguard__nav-pill {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    padding: 0.4rem;
    backdrop-filter: blur(15px);
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.3);
    transition: all 0.4s ease;
}

.tft-h2-vanguard__nav-btn {
    width: 3.8rem;
    height: 3.8rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--tft-lime);
    /* BRIGHT LIME DEFAULT */
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.tft-h2-vanguard__nav-btn:hover {
    color: #ffffff;
    background: var(--tft-lime);
    box-shadow: 0 0 30px rgba(212, 245, 76, 0.4);
    transform: scale(1.1);
}

.tft-h2-vanguard__nav-btn i {
    width: 20px;
    height: 20px;
}

.tft-h2-vanguard__nav-sep {
    width: 1px;
    height: 1.4rem;
    background-color: rgba(255, 255, 255, 0.15);
    margin: 0 0.4rem;
}

.tft-h2-vanguard__progress {
    display: none;
    flex: 1;
    max-width: 180px;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
}

@media (min-width: 640px) {
    .tft-h2-vanguard__progress {
        display: block;
    }
}

.tft-h2-vanguard__progress-bar {
    position: absolute;
    inset: 0;
    background-color: var(--tft-lime);
    opacity: 0.5;
    transform: translateX(-100%);
    animation: h2-vanguard-progress 6s cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
}

@keyframes h2-vanguard-progress {
    0% {
        transform: translateX(-100%);
    }
    50% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(100%);
    }
}

/* MEDIA */

.tft-h2-vanguard__media {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

@media (min-width: 1024px) {
    .tft-h2-vanguard__media {
        width: 35%;
        justify-content: flex-end;
    }
}

.tft-h2-vanguard__frame {
    position: relative;
    width: clamp(300px, 40vw, 520px);
    aspect-ratio: 0.85/1;
}

.tft-h2-vanguard__shutter {
    width: 100%;
    height: 100%;
    border-radius: 4rem 4rem 11rem 4rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    position: relative;
    overflow: hidden;
    box-shadow: 0 60px 120px -30px rgba(0, 0, 0, 0.6);
}

.tft-h2-vanguard__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.8s cubic-bezier(0.77, 0, 0.175, 1);
}

/* Subtle Shutter Transition */

.tft-h2-vanguard__wipe-mask {
    position: absolute;
    inset: 0;
    background: #0d2620;
    z-index: 10;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.6s ease;
}

.is-wiping .tft-h2-vanguard__wipe-mask {
    opacity: 0.85;
}

.is-wiping .tft-h2-vanguard__img {
    transform: scale(0.9);
    filter: blur(10px);
    opacity: 0;
}

.tft-h2-vanguard__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(13, 38, 32, 0.5), transparent 45%);
    pointer-events: none;
    z-index: 2;
}

.tft-h2-vanguard__meta-tag {
    position: absolute;
    bottom: -3.5rem;
    right: 0;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5em;
    color: rgba(255, 255, 255, 0.15);
    white-space: nowrap;
}

/* POLISHED TICKER */

.tft-h2-vanguard .tft-h2__carousel {
    width: 100%;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(212, 245, 76, 0.015);
    padding: 1.5rem 0;
    backdrop-filter: blur(5px);
    position: relative;
    z-index: 15;
}

.tft-h2-vanguard .tft-h2__carousel::before,
.tft-h2-vanguard .tft-h2__carousel::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(212, 245, 76, 0.1), transparent);
}

.tft-h2-vanguard .tft-h2__carousel::before {
    top: 0;
}

.tft-h2-vanguard .tft-h2__carousel::after {
    bottom: 0;
}

.tft-h2-vanguard .tft-h2__carousel-track span {
    font-size: clamp(2rem, 4vw, 4rem);
    font-style: italic;
    font-weight: 300;
    letter-spacing: -0.02em;
    opacity: 0.7;
    margin: 0 1rem;
}

/* === SOVEREIGN ELITE V6: MASTERPIECE POLISH (ZERO-SHIFT) === */

.tft-h2-vanguard__content {
    min-height: 80vh;
}

.tft-h2-vanguard__info {
    position: relative;
    padding-bottom: 8rem;
}

.tft-h2-vanguard__title-wrap {
    min-height: 320px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.tft-h2-vanguard__nav {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}

@media (max-width: 1023px) {
    .tft-h2-vanguard__info {
        padding-bottom: 6rem;
    }
    .tft-h2-vanguard__nav {
        justify-content: center;
    }
}

.tft-h2-vanguard__kicker-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.6rem 1.2rem;
    background: rgba(212, 245, 76, 0.05);
    border: 1px solid rgba(212, 245, 76, 0.15);
    border-radius: 999px;
    margin-bottom: 3.5rem;
    backdrop-filter: blur(5px);
}

.tft-h2-vanguard__kicker-dot {
    width: 6px;
    height: 6px;
    background: var(--tft-lime);
    border-radius: 50%;
    box-shadow: 0 0 10px var(--tft-lime);
    animation: tft-pulse 2s infinite;
}

@keyframes tft-pulse {
    0% {
        opacity: 0.4;
        transform: scale(0.8);
    }
    50% {
        opacity: 1;
        transform: scale(1.1);
    }
    100% {
        opacity: 0.4;
        transform: scale(0.8);
    }
}

.tft-h2-vanguard__nav-btn {
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.tft-h2-vanguard__nav-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 0 20px rgba(212, 245, 76, 0.3);
}

.tft-h2-vanguard__shutter {
    padding: 0 !important;
}

.tft-h2-vanguard__img {
    width: 100% !important;
    height: 100% !important;
    object-position: center;
}

/* === VANGUARD ABSOLUTE HUD & WIPE MASK === */

.tft-h2-vanguard__hud {
    position: absolute;
    bottom: 5rem;
    left: 6%;
    display: flex;
    align-items: center;
    gap: 2.5rem;
    z-index: 100;
}

@media (min-width: 1024px) {
    .tft-h2-vanguard__hud {
        left: 10%;
        bottom: 12dvh;
    }
}

.tft-h2-vanguard__wipe-mask {
    position: absolute;
    inset: 0;
    background: #0d2620;
    z-index: 10;
    transform: translateX(100%);
    pointer-events: none;
    transition: transform 0.7s cubic-bezier(0.77, 0, 0.175, 1);
}

.is-wiping .tft-h2-vanguard__wipe-mask {
    transform: translateX(0%);
}

.is-wiping-out .tft-h2-vanguard__wipe-mask {
    transform: translateX(-100%);
}

/* === HOME 6: HYPER-PRECISE MAGNETIC CURSOR === */

#h6-cursor {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 9999;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background-color: #d4f54c;
    /* HARDCODED LIME FOR VISIBILITY */
    color: #0d2620;
    font-family: var(--tft-display, 'Space Grotesk');
    font-weight: 700;
    font-style: italic;
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-size: 13px;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.4);
    /* TRANSITION ONLY ON OPACITY AND SCALE - NOT TRANSLATION */
    transition: opacity 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    box-shadow: 0 20px 50px rgba(212, 245, 76, 0.5);
    backdrop-filter: blur(2px);
}

#h6-cursor.active {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* HOME 6 HEADER HUD IMPROVEMENT */

.h6-header-hud {
    padding: 6rem 10% 3rem 10%;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    background: #ffffff;
}

.h6-header-hud__top {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.h6-header-hud__meta {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.6em;
    color: #0d2620;
    opacity: 0.4;
}

.h6-header-hud__title {
    font-family: var(--tft-display, 'Space Grotesk');
    font-size: clamp(2.5rem, 6vw, 6rem);
    font-weight: 600;
    line-height: 0.9;
    letter-spacing: -0.04em;
    color: #094030;
    margin: 0;
}

.h6-header-hud__count {
    font-family: var(--tft-body);
    font-size: 12px;
    font-weight: 600;
    color: #0d2620;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.h6-header-hud__count-line {
    width: 40px;
    height: 1px;
    background: #0d2620;
    opacity: 0.15;
}

.h6-row {
    cursor: none !important;
}

/* --- PAGE: HOME-5 FINAL ENHANCEMENTS --- */

.tft-page-home-5 .h5-list-item {
    padding: 1.25rem 0.5rem !important;
    gap: 1.5rem;
    align-items: baseline !important;
    transition: all 0.45s var(--tft-ease) !important;
    border-bottom-color: rgba(255, 255, 255, 0.035) !important;
}

.tft-page-home-5 .h5-list-index {
    font-family: var(--font-body);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.25em;
    opacity: 0.24;
    transition: all 0.42s var(--tft-ease);
    min-width: 2rem;
}

.tft-page-home-5 .h5-list-item:hover .h5-list-index,
.tft-page-home-5 .h5-list-item.active .h5-list-index {
    opacity: 1;
    color: var(--brand-lime, #d4f54c);
    transform: translateX(4px);
}

.tft-page-home-5 .h5-list-text {
    flex: 1;
    font-family: var(--font-display);
    font-weight: 500;
    transition: transform 0.42s var(--tft-ease);
}

.tft-page-home-5 .h5-list-item:hover .h5-list-text,
.tft-page-home-5 .h5-list-item.active .h5-list-text {
    transform: translateX(8px);
}

.tft-page-home-5 .h5-list-cat {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.35em;
    opacity: 0;
    transform: translateX(-10px);
    transition: all 0.42s var(--tft-ease);
    color: var(--brand-lime, #d4f54c);
    font-family: var(--font-body);
}

.tft-page-home-5 .h5-list-item:hover .h5-list-cat,
.tft-page-home-5 .h5-list-item.active .h5-list-cat {
    opacity: 0.55;
    transform: translateX(0);
}

.tft-page-home-5 .h5-list-item.active .h5-list-line {
    opacity: 1 !important;
}

/* TFT-FIX: MOBILE SCROLLING FOR HOME-6 */

@media (max-width: 1024px) {
    .tft-page-home-6 main#view-home-6 {
        -webkit-overflow-scrolling: touch !important;
        overflow-y: auto !important;
        display: block !important;
        /* Break flex if it's causing issues */
        min-height: calc(100vh - 70px);
        height: auto !important;
    }
    .tft-page-home-6 .absolute.inset-0.flex.justify-center.z-1 {
        display: none !important;
        /* Hide decorative background grids on mobile to reduce hit-test overhead */
    }
    .tft-page-home-6 .no-scrollbar {
        scrollbar-width: auto !important;
        -ms-overflow-style: auto !important;
    }
    .tft-page-home-6 .no-scrollbar::-webkit-scrollbar {
        display: block !important;
        width: 4px;
    }
}

/* Sketchy Ring Animation */

@keyframes ringJitter {
    0% {
        transform: scale(1) rotate(0deg);
        opacity: 0.85;
    }
    33% {
        transform: scale(1.02) rotate(1deg);
        opacity: 1;
    }
    66% {
        transform: scale(0.99) rotate(-1deg);
        opacity: 0.9;
    }
    100% {
        transform: scale(1) rotate(0deg);
        opacity: 0.85;
    }
}

.tft-page-home-5 .h5-counter-ring {
    animation: ringJitter 4s infinite linear;
    stroke-dasharray: 600;
    stroke-dashoffset: 600;
    transition: stroke-dashoffset 1.2s var(--tft-ease);
}

.tft-page-home-5 .h5-counter-wrap:not(.is-updating) .h5-counter-ring {
    stroke-dashoffset: 0;
}

.tft-page-home-5 .h5-counter-wrap.is-updating .h5-counter-ring {
    stroke-dashoffset: 120;
    opacity: 0.4;
}

.tft-page-home-5 .h5-counter-core {
    padding-bottom: 0 !important;
    /* Resetting an old forced padding */
}

.tft-page-home-5 #h5-counter {
    font-family: var(--font-display) !important;
}

/* --- FONT FALLBACKS FOR FRAMEWORK-LESS --- */

.font-serif {
    font-family: var(--font-display, 'Space Grotesk'), serif !important;
}

.font-sans {
    font-family: var(--font-body, 'Plus Jakarta Sans'), sans-serif !important;
}

/* --- HOME-5 DESIGN CLEANUP --- */

.tft-page-home-5 .h5-list-index {
    min-width: 5.5rem !important;
    /* Wider for categories */
    text-transform: uppercase;
}

.tft-page-home-5 .h5-list-item::after {
    display: none !important;
}

/* Removing nonsense line */

.tft-page-home-5 .h5-list-item::before {
    display: none !important;
}

/* Removing nonsense plus */

.tft-page-home-5 .h5-list-text {
    opacity: 0.6;
}

.tft-page-home-5 .h5-list-item.active .h5-list-text {
    opacity: 1;
}

.tft-page-home-5 .h5-image-shell::after {
    border: none !important;
    /* Removing inner image border */
}

.tft-page-home-5 .h5-image-meta {
    top: 15px;
    right: 15px;
    gap: 0.35rem;
}

.tft-page-home-5 .h5-image-index,
.tft-page-home-5 .h5-image-tag {
    background: #d4f54c;
    color: #094030;
    font-weight: 700;
    border-radius: 2px;
}

/* --- HOME-5 BOMBBB INTERACTIONS (STUDIO ELITE) --- */

.tft-page-home-5 .h5-bg-title {
    transition: transform 0.8s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.8s ease;
    pointer-events: none;
    white-space: nowrap;
    will-change: transform, opacity;
}

.tft-page-home-5 .h5-list-item {
    position: relative;
    z-index: 10;
    mix-blend-mode: lighten;
    padding-left: 1.5rem !important;
}

.tft-page-home-5 .h5-list-item::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    top: 50%;
    width: 0;
    height: 1px;
    background: var(--brand-lime);
    transition: width 0.45s var(--tft-ease);
}

.tft-page-home-5 .h5-list-item:hover::before,
.tft-page-home-5 .h5-list-item.active::before {
    width: 1rem;
}

.tft-page-home-5 .h5-list-index {
    font-weight: 800;
    letter-spacing: 0.1em;
    font-size: 0.55rem;
    opacity: 0.15 !important;
    transform: translateY(-2px);
    transition: all 0.5s var(--tft-ease);
}

.tft-page-home-5 .h5-list-item:hover .h5-list-index,
.tft-page-home-5 .h5-list-item.active .h5-list-index {
    opacity: 1 !important;
    color: var(--brand-lime);
    transform: translateY(-8px);
}

.tft-page-home-5 .h5-list-text {
    font-size: clamp(1.2rem, 2.5vw, 2rem);
    letter-spacing: -0.02em;
    transition: all 0.5s var(--tft-ease);
}

.tft-page-home-5 .h5-list-item:hover .h5-list-text,
.tft-page-home-5 .h5-list-item.active .h5-list-text {
    transform: translateX(12px);
    letter-spacing: 0.02em;
}

/* Image Interaction */

.tft-page-home-5 .h5-image-wrap {
    perspective: 1200px;
}

.tft-page-home-5 .h5-image-shell {
    transition: transform 0.6s var(--tft-ease);
    transform-style: preserve-3d;
}

.tft-page-home-5 .h5-image-current {
    transform: scale(1) translateZ(0);
    transition: transform 0.9s var(--tft-ease), opacity 0.6s ease, filter 0.6s ease;
}

.tft-page-home-5 .h5-image-wrap.is-transitioning .h5-image-current {
    transform: scale(1.1) translateZ(-50px);
    opacity: 0.3;
    filter: blur(8px) grayscale(1);
}

.tft-page-home-5 .h5-image-next {
    clip-path: circle(0% at 50% 50%);
    transform: scale(0.8) translateZ(100px);
    transition: clip-path 0.8s var(--tft-ease), transform 0.8s var(--tft-ease), opacity 0.5s ease;
}

.tft-page-home-5 .h5-image-wrap.is-transitioning .h5-image-next {
    clip-path: circle(100% at 50% 50%);
    transform: scale(1) translateZ(0);
    opacity: 1;
}

/* Floating Case Study Circle */

.tft-page-home-5 .h5-case-study-btn {
    pointer-events: auto;
    z-index: 30;
    will-change: transform;
}

/* --- REFINING THE BOMB --- */

.tft-page-home-5 .h5-image-layer {
    filter: brightness(1.1) contrast(1.1);
}

.tft-page-home-5 .h5-image-veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(30deg, rgba(13, 38, 32, 0.8) 0%, transparent 60%);
    z-index: 5;
    pointer-events: none;
}

.tft-page-home-5 .h5-image-meta {
    z-index: 10;
}

.tft-page-home-5 .h5-image-index {
    font-size: 0.7rem;
    padding: 0.4rem 1rem;
    letter-spacing: 0.2rem;
    box-shadow: 0 10px 30px rgba(212, 245, 76, 0.2);
}

.tft-page-home-5 .h5-list-item.active .h5-list-text {
    color: var(--brand-lime);
    text-shadow: 0 0 20px rgba(212, 245, 76, 0.2);
}

/* --- PREMIUM REFINEMENTS (HOME-5) --- */

.h5-noise-overlay {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

.tft-page-home-5 .h5-list {
    width: 100%;
}

.tft-page-home-5 .h5-list-item {
    width: 100%;
    margin-bottom: 0.5rem;
    overflow: visible;
    /* Prevent text clipping */
}

.tft-page-home-5 .h5-list-text {
    white-space: normal;
    /* Allow wrapping for long titles */
    line-height: 1.1;
    display: block;
    max-width: 90%;
}

/* ZERO-HEARTBEAT TRANSITION SYSTEM */

.tft-page-home-5 .h5-image-current {
    z-index: 1;
    opacity: 1;
    transform: scale(1);
    transition: transform 1.2s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.8s ease-in-out, filter 0.8s ease-in-out;
}

.tft-page-home-5 .h5-image-wrap.is-transitioning .h5-image-current {
    opacity: 0.5;
    /* Don't hide completely to avoid black flash */
    transform: scale(1.05);
    filter: blur(4px);
}

.tft-page-home-5 .h5-image-next {
    z-index: 2;
    clip-path: inset(0 100% 0 0);
    /* Reveal from left/right instead of circle pulsate */
    transform: scale(1.1);
    transition: clip-path 0.9s cubic-bezier(0.77, 0, 0.175, 1), transform 1.2s cubic-bezier(0.25, 1, 0.5, 1);
}

.tft-page-home-5 .h5-image-wrap.is-transitioning .h5-image-next {
    clip-path: inset(0 0 0 0);
    transform: scale(1);
}

/* Metadata reveal */

.tft-page-home-5 .h5-image-index {
    transform: translateY(20px);
    opacity: 0;
    transition: all 0.6s var(--tft-ease);
}

.tft-page-home-5 .h5-image-wrap:not(.is-transitioning) .h5-image-index {
    transform: translateY(0);
    opacity: 1;
}

/* --- ADVANCED TILT & MOTION --- */

.tft-page-home-5 .h5-image-wrap {
    perspective: 1500px;
}

.tft-page-home-5 .h5-image-shell {
    transition: transform 0.2s cubic-bezier(0.23, 1, 0.32, 1);
    transform-style: preserve-3d;
}

.tft-page-home-5 .h5-list-item {
    transition: transform 0.4s var(--tft-ease), color 0.4s var(--tft-ease);
}

.tft-page-home-5 .h5-list-item:hover {
    transform: translateX(15px) scale(1.02);
}

.tft-page-home-5 .h5-bg-title {
    filter: blur(8px);
    /* More atmospheric blur */
}

/* GRID REVEAL SYSTEM */

@keyframes gridRevealV {
    0% {
        transform: scaleY(0);
    }
    100% {
        transform: scaleY(1);
    }
}

@keyframes gridRevealH {
    0% {
        transform: scaleX(0);
    }
    100% {
        transform: scaleX(1);
    }
}

.val-line {
    transform-origin: top;
    animation: gridRevealV 1.6s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}

.hor-line {
    transform-origin: left;
    animation: gridRevealH 1.6s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}

.val-line:nth-child(1) {
    animation-delay: 0.1s;
}

.val-line:nth-child(2) {
    animation-delay: 0.2s;
}

.val-line:nth-child(3) {
    animation-delay: 0.3s;
}

.val-line:nth-child(4) {
    animation-delay: 0.4s;
}

.hor-line {
    animation-delay: 0.5s;
}

/* --- DEFINITIVE REFINEMENTS (HOME-5) --- */

.tft-page-home-5 .h5-image-next {
    clip-path: none !important;
    /* Definitively remove circular pulse heartbeat */
    opacity: 0;
    transform: scale(1.05);
    transition: opacity 0.9s cubic-bezier(0.4, 0, 0.2, 1), transform 1.2s cubic-bezier(0.23, 1, 0.32, 1);
}

.tft-page-home-5 .h5-image-wrap.is-transitioning .h5-image-next {
    opacity: 1;
    transform: scale(1);
}

/* Remove 'Nonsense' top shapes */

.tft-page-home-5 .h5-image-veil {
    display: none !important;
}

/* Full Grid Pattern Overlay */

.h5-grid-overlay {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
    background-size: 50px 50px;
    background-position: center;
    pointer-events: none;
    opacity: 0;
    animation: fadeIn 2s 1s forwards;
}

@keyframes fadeIn {
    to {
        opacity: 1;
    }
}

/* --- DESIGN POLISH (HOME-5) --- */

.tft-page-home-5 .h5-bg-title {
    filter: none !important;
    /* NO MORE BLURRY SHIT */
    opacity: 0.015 !important;
}

.tft-page-home-5 .h5-list {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 500px;
}

.tft-page-home-5 .h5-list-item {
    flex: 1;
    /* Match the grid horizontal spacing */
    display: flex;
    flex-direction: row;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.035);
    /* Align items to lines */
    padding: 0 1rem;
}

.tft-page-home-5 .h5-list-item:nth-child(1) {
    border-top: 1px solid rgba(255, 255, 255, 0.035);
}

.tft-page-home-5 .h5-list-index {
    min-width: 7rem !important;
}

.tft-page-home-5 .h5-grid-overlay {
    opacity: 0.03 !important;
    /* Even more subtle grid */
}

/* --- RECTIFYING INTERFACE GRID (HOME-5) --- */

.tft-page-home-5 .h5-bg-title {
    filter: none !important;
    /* Remove blurry shit */
}

.tft-page-home-5 .h5-list-item {
    height: 100px !important;
    /* Forces items to span 2 grid cells (2x50px) */
    padding: 0 !important;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03) !important;
}

/* Align titles to vertical grid */

.tft-page-home-5 .h5-list-text {
    font-size: clamp(1.2rem, 2.5vw, 1.8rem);
}

.tft-page-home-5 .h5-list-index {
    min-width: 6rem !important;
    font-size: 0.5rem;
    opacity: 0.25 !important;
}

/* --- HOME-5 POLISH: REMOVING HEART-RATE AND ENSURING ONE-LINE TITLES --- */

.tft-page-home-5 .h5-list-text {
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.tft-page-home-5 .h5-image-wrap.is-transitioning .h5-image-current {
    filter: none !important;
    transform: none !important;
    opacity: 0.7 !important;
}

/* Submerge the jitter to a more natural architectural vibration */

@keyframes ringJitter {
    0% {
        transform: scale(1);
        opacity: 0.9;
    }
    50% {
        transform: scale(1.005);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 0.9;
    }
}

/* --- PAGE: HOME-5 FINAL DECLUTTER & STABILITY --- */

/* Hide the project index on image slider as requested */

.tft-page-home-5 .h5-image-index {
    display: none !important;
}

/* Force one-line titles with ellipsis for list items */

.tft-page-home-5 .h5-list-text {
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

/* Stable cross-fade transition without scale shift (Heart-rate fix) */

.tft-page-home-5 .h5-image-wrap.is-transitioning .h5-image-current {
    opacity: 0.1 !important;
    filter: none !important;
    transform: none !important;
    transition: opacity 0.6s ease;
}

.tft-page-home-5 .h5-image-next {
    opacity: 0;
    transition: opacity 0.6s ease, transform 0.6s var(--tft-ease);
}

.tft-page-home-5 .h5-image-wrap.is-transitioning .h5-image-next {
    opacity: 1;
    transform: scale(1) !important;
}

/* Subtle architectural vibration for the sketchy ring */

@keyframes ringJitterSoft {
    0% {
        transform: scale(1) rotate(0deg);
        opacity: 0.95;
    }
    50% {
        transform: scale(1.006) rotate(0.4deg);
        opacity: 1;
    }
    100% {
        transform: scale(1) rotate(0deg);
        opacity: 0.95;
    }
}

.tft-page-home-5 .h5-counter-ring {
    animation: ringJitterSoft 6s infinite linear !important;
}

/* --- PAGE: HOME-5 UNIQUE 'BLUEPRINT' FRAME --- */

.tft-page-home-5 .h5-image-wrap {
    padding: 0 !important;
    /* Reset padding to avoid layout shift with clip-path */
}

.tft-page-home-5 .h5-image-shell {
    clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
    border: none !important;
    /* Clip-path doesn't support regular borders, we use overlays instead */
    overflow: visible;
}

/* Recreating the border using an overlay that follows the clip-path */

.tft-page-home-5 .h5-image-frame {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 10;
    clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
    border: 3px solid rgba(255, 255, 255, 0.12);
    transition: border-color 0.42s var(--tft-ease);
}

.tft-page-home-5 .h5-image-wrap:hover .h5-image-frame {
    border-color: rgba(212, 245, 76, 0.45);
    box-shadow: inset 0 0 15px rgba(212, 245, 76, 0.05);
}

/* L-Shaped architectural brackets */

.tft-page-home-5 .h5-image-frame::before,
.tft-page-home-5 .h5-image-frame::after {
    content: "";
    position: absolute;
    border-color: #d4f54c;
    border-style: solid;
    opacity: 0.8;
    z-index: 11;
    transition: transform 0.42s var(--tft-ease), opacity 0.42s ease;
}

.tft-page-home-5 .h5-image-wrap:hover .h5-image-frame::before {
    transform: translate(-4px, -4px);
}

.tft-page-home-5 .h5-image-wrap:hover .h5-image-frame::after {
    transform: translate(4px, 4px);
}

/* General refinement: Ensure the label pops */

.tft-page-home-5 .h5-image-tag {
    background: #d4f54c !important;
    color: #094030 !important;
    font-weight: 800 !important;
    letter-spacing: 0.15em !important;
    padding: 0.6rem 1.2rem !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
    z-index: 20;
}

/* --- PAGE: HOME-5 'BLUEPRINT EDITORIAL' LIST --- */

.tft-page-home-5 .h5-list-item {
    position: relative;
    border: none !important;
    padding: 1.5rem 1rem !important;
    margin-bottom: 0.5rem;
    transition: all 0.45s var(--tft-ease);
}

.tft-page-home-5 .h5-list-item.active {
    background: rgba(255, 255, 255, 0.04);
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}

/* Technical L-brackets for active list item */

.tft-page-home-5 .h5-list-item.active::before,
.tft-page-home-5 .h5-list-item.active::after {
    content: "";
    position: absolute;
    width: 12px;
    height: 12px;
    border-color: #d4f54c;
    border-style: solid;
    opacity: 1;
    z-index: 5;
    transition: transform 0.45s var(--tft-ease);
}

.tft-page-home-5 .h5-list-item.active::before {
    top: 0;
    left: 0;
    border-width: 1.5px 0 0 1.5px;
}

.tft-page-home-5 .h5-list-item.active::after {
    bottom: 0;
    right: 0;
    border-width: 0 1.5px 1.5px 0;
}

/* Floating Technical Index */

.tft-page-home-5 .h5-list-index {
    font-family: var(--font-mono, monospace) !important;
    font-size: 0.6rem;
    font-weight: 700;
    position: absolute;
    left: -1rem;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.15;
    transition: all 0.45s var(--tft-ease);
}

.tft-page-home-5 .h5-list-item.active .h5-list-index {
    opacity: 0.8;
    color: #d4f54c;
    transform: translateY(-50%) translateX(1.5rem);
}

/* Scanning Underline for active project */

.tft-page-home-5 .h5-list-text {
    position: relative;
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    /* Realiz Fluid Typography */
    letter-spacing: -0.02em;
    padding-left: 1.5rem;
}

.tft-page-home-5 .h5-list-item.active .h5-list-text::after {
    content: "";
    position: absolute;
    bottom: -6px;
    left: 1.5rem;
    height: 1px;
    background: #d4f54c;
    width: 40px;
    box-shadow: 0 0 10px #d4f54c;
    animation: h5Scan 2s infinite ease-in-out;
}

@keyframes h5Scan {
    0% {
        transform: scaleX(1);
        opacity: 0.4;
    }
    50% {
        transform: scaleX(2.5);
        opacity: 1;
    }
    100% {
        transform: scaleX(1);
        opacity: 0.4;
    }
}

/* Enhanced Category Tag */

.tft-page-home-5 .h5-list-cat {
    font-family: var(--font-mono, monospace);
    font-size: 9px;
    font-weight: 800;
    background: rgba(212, 245, 76, 0.1);
    color: #010100 !important;
    padding: 2px 8px;
    border-radius: 2px;
    letter-spacing: 0.2em;
}

/* --- PAGE: HOME-5 TRANSPARENCY FIX --- */

/* Completely neutralize any container backgrounds that may bleed through the notched corners */

.tft-page-home-5 .h5-image-wrap,
.tft-page-home-5 .h5-image-shell,
.tft-page-home-5 .h5-image-current,
.tft-page-home-5 .h5-image-next {
    background-color: transparent !important;
}

/* --- PAGE: HOME-5 CLIP-PATH SYNC --- */

/* Apply the same clip-path to the parent wrap to ensure no background bleed in corners */

.tft-page-home-5 .h5-image-wrap {
    clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px) !important;
    background: transparent !important;
}

/* --- SOVEREIGN ELITE: HOME-6 CLEAN EDITORIAL --- */

:root {
    --tft-serif: "Cormorant Garamond", serif;
}

.tft-h6-serif {
    font-family: var(--tft-serif) !important;
}

.h6-header-hud__meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--font-mono, monospace);
    font-size: 10px;
    letter-spacing: 0.1em;
    opacity: 0.5;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    padding-bottom: 1rem;
}

.h6-row {
    transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
    border-bottom: 1px solid rgba(0, 0, 0, 0.03) !important;
}

.h6-row:hover {
    background-color: #f7f9f8 !important;
}

.h6-row h3 {
    transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1), color 0.4s ease;
}

.h6-row:hover h3 {
    transform: translateX(20px);
    color: #094030 !important;
}

.h6-row:hover .h6-index {
    color: #d4f54c !important;
}

.h6-row::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 100%;
    background: #d4f54c;
    transition: width 0.6s var(--tft-ease);
    z-index: 20;
    pointer-events: none;
}

.h6-row:hover::before {
    width: 4px;
}

.h6-header-hud__timer {
    font-weight: 700;
    color: #094030;
    opacity: 0.8;
}

.h6-fan-img {
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.8) !important;
    transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease !important;
}

.tft-h4-serif {
    font-family: var(--tft-serif) !important;
    font-weight: 300 !important;
}

.tft-v4-col::after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 1px;
    background: #d4f54c;
    z-index: 10;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.tft-v4-col:last-child::after {
    display: none;
}

/* === POLISHED HOME-4 (COLUMNS) REFINEMENTS === */

.tft-page-home-4 {
    --v4-ease: cubic-bezier(0.19, 1, 0.22, 1);
    --transition-v4: 0.8s var(--v4-ease);
    background-color: #0d2620;
    overflow: hidden;
}

/* Texture Overlays */

.tft-v4-grain,
.tft-v4-noise {
    position: fixed;
    inset: 0;
    z-index: 99;
    pointer-events: none;
    opacity: 0.04;
}

.tft-v4-grain {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.tft-v4-noise {
    opacity: 0.02;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='turbulence' baseFrequency='1.2' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
}

/* Sidebar Refinements */

.tft-v4-aside {
    transition: width var(--transition-v4), transform var(--transition-v4), box-shadow 0.6s ease;
    background: #ffffff !important;
}

.tft-v4-aside:hover {
    box-shadow: 30px 0 80px rgba(0, 0, 0, 0.25);
}

.tft-v4-aside__stripe {
    transition: background-color 0.4s ease;
}

.tft-v4-aside:hover .tft-v4-aside__stripe {
    background-color: #f7f7f3;
}

.tft-v4-aside__tag {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

.tft-v4-aside__interactive-icon {
    transition: all 0.5s var(--v4-ease);
    transform-origin: center;
}

.tft-v4-aside__interactive-icon:hover {
    transform: scale(1.1) rotate(15deg);
    background: #d4f54c !important;
    color: #094030 !important;
    box-shadow: 0 0 40px rgba(212, 245, 76, 0.4);
}

@keyframes tft-sparkle {
    0% {
        transform: scale(1) rotate(0deg);
        opacity: 0.8;
    }
    50% {
        transform: scale(1.2) rotate(180deg);
        opacity: 1;
    }
    100% {
        transform: scale(1) rotate(360deg);
        opacity: 0.8;
    }
}

.tft-v4-icon-spark {
    animation: tft-sparkle 4s linear infinite;
}

/* Main Column Interaction */

.tft-v4-col {
    position: relative;
    overflow: hidden;
    transition: flex 1.2s var(--v4-ease), opacity 0.8s ease;
    will-change: flex;
}

.tft-v4-col:hover {
    flex: 1.8 !important;
    z-index: 2;
}

.tft-v4-col__bg {
    transition: transform 2s var(--v4-ease), filter 1s ease;
    filter: saturate(0.75) brightness(0.85);
}

.tft-v4-col:hover .tft-v4-col__bg {
    filter: saturate(1.1) brightness(1.1);
}

.tft-v4-col__title {
    font-family: 'Playfair Display', serif !important;
    font-size: clamp(3.5rem, 10vw, 8rem);
    letter-spacing: -0.05em;
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.6));
    transition: transform 1s var(--v4-ease), opacity 0.8s ease;
    pointer-events: none;
}

.tft-v4-col:hover .tft-v4-col__title {
    transform: scale(1.05) translateY(-10px);
    opacity: 1;
}

.tft-v4-col__btn {
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    transition: all 0.4s var(--v4-ease);
}

.tft-v4-col__btn:hover {
    background: #d4f54c !important;
    color: #0d2620 !important;
    border-color: #d4f54c !important;
    box-shadow: 0 30px 60px rgba(212, 245, 76, 0.3);
}

/* HUD Overlay */

.tft-v4-hud {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(20px);
    transition: all 0.5s var(--v4-ease);
}

.tft-v4-hud:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-8px);
}

/* Mobile Adjustments */

@media (max-width: 768px) {
    .tft-v4-col {
        min-height: 40vh !important;
    }
    .tft-v4-col:hover {
        flex: 2.2 !important;
    }
    .tft-v4-col__title {
        font-size: clamp(2.8rem, 15vw, 4.5rem);
    }
}

/* ============================================== */

/* RLZ REFINEMENTS: HOME-4 (COLUMNS)              */

/* ============================================== */

/* VARIABLE RECONCILIATION */

:root {
    --rlz-lime: #d4f54c;
    --rlz-sidebar: #094030;
}

/* VERTICAL LINE ENFORCEMENT */

/* VANGUARD PERISTENT GRID (HOME-4) */

.tft-page-home-4 .tft-v4-col {
    position: relative;
    border: none !important;
    /* Managed by pseudo-elements for precision */
}

/* CASE STUDY ANCHOR INTERACTION */

.tft-page-home-4 a.rounded-full {
    text-decoration: none !important;
    transition: all 0.4s var(--tft-ease);
}

.tft-page-home-4 a.rounded-full:hover {
    background-color: var(--rlz-lime) !important;
    color: var(--rlz-sidebar) !important;
    box-shadow: 0 0 40px rgba(212, 245, 76, 0.4), 0 20px 40px rgba(0, 0, 0, 0.4);
    transform: scale(1.1) rotate(-2deg);
}

.tft-page-home-4 a.rounded-full span {
    pointer-events: none;
}

/* --- SOVEREIGN ELITE: INDEX SLIDER TEXT CLIPPING FIXES (2026 EDITION) --- */

.tft-page-index .tft-slider-h1 {
    width: fit-content !important;
    padding-inline-end: 8vw !important;
    /* Premium gutter for large editorial typography */
    pointer-events: none;
}

.tft-page-index .tft-slider-h1--bold {
    transform: none !important;
    /* Eliminate layout-blind transform clipping */
    margin-inline-start: 12% !important;
    /* High-performance layout shift */
    white-space: nowrap !important;
}

.tft-page-index .text-reveal-wrap {
    overflow: visible !important;
    /* Allow the boutique offset to breathe horizontally */
    clip-path: inset(-100% -100% 0 -100%) !important;
    /* Surgical vertical clipping for the reveal animation */
}

/* Ensure the responsive layer doesn't clip titles at mobile breakpoints */

@media (max-width: 1024px) {
    .tft-page-index .tft-slider-h1 {
        padding-inline-end: 2vw !important;
    }
}

@media (max-width: 768px) {
    .tft-page-index .tft-slider-h1 {
        padding-inline-end: 0 !important;
        width: 100% !important;
        align-items: center !important;
    }
    .tft-page-index .tft-slider-h1--bold {
        margin-inline-start: 0 !important;
        transform: none !important;
        text-align: center !important;
    }
    .tft-page-index .text-reveal-wrap {
        text-align: center !important;
    }
}

/* --- SOVEREIGN ELITE: INDEX SLIDER TEXT CLIPPING FIXES (2026 EDITION) --- */

/* This block resolves horizontal text clipping in the premium editorial slider */

.tft-page-index .tft-slider-h1 {
    width: fit-content !important;
    padding-inline-end: 8vw !important;
    /* High-fidelity gutter for italic/bold offsets */
    pointer-events: none;
    font-size: clamp(3.2rem, 12vw, 11rem) !important;
    /* Fluid typography optimization for narrow viewports */
}

.tft-page-index .tft-slider-h1--bold {
    transform: none !important;
    /* Override layout-blind transform that causes edge clipping */
    margin-inline-start: 12% !important;
    /* Premium layout-aware positioning */
    white-space: nowrap !important;
}

.tft-page-index .text-reveal-wrap {
    overflow: visible !important;
    /* Allow the horizontal breathing room required by the design system */
    clip-path: inset(-100% -100% 0 -100%) !important;
    /* Vertical-only clipping to maintain the reveal effect logic */
}

/* RESPONSIVE REFINEMENTS (320px - 1024px) */

@media (max-width: 1024px) {
    .tft-page-index .tft-slider-h1 {
        padding-inline-end: 2vw !important;
    }
}

@media (max-width: 768px) {
    .tft-page-index .tft-slider-h1 {
        font-size: clamp(2.8rem, 15vw, 4.5rem) !important;
        /* Scaled down for mobile consistency */
        padding-inline-end: 0 !important;
        width: 100% !important;
        align-items: center !important;
    }
    .tft-page-index .tft-slider-h1--bold {
        margin-inline-start: 0 !important;
        text-align: center !important;
    }
    .tft-page-index .text-reveal-wrap {
        text-align: center !important;
    }
}

/* --- SOVEREIGN ELITE: MOBILE MENU UX & RESPONSIVE HUD --- */

/* This section optimizes the menu interaction for premium responsiveness */

/* 1. Universal X-Morph (Hamburger to Close) */

.menu-toggle.menu-open {
    background-color: #d4f54c !important;
    /* Switch to brand lime on open */
    box-shadow: 0 0 35px rgba(212, 245, 76, 0.4) !important;
    transform: scale(1.1) rotate(0deg);
}

.menu-toggle.menu-open .line-1 {
    transform: translateY(8px) rotate(45deg) !important;
    background-color: #094030 !important;
    /* Dark interaction states */
}

.menu-toggle.menu-open .line-2 {
    opacity: 0 !important;
    transform: translateX(15px) !important;
}

.menu-toggle.menu-open .line-3 {
    width: 28px !important;
    transform: translateY(-8px) rotate(-45deg) !important;
    background-color: #094030 !important;
}

/* 2. Responsive Header Inversion (for Active Menu State) */

@media (max-width: 768px) {
    /* Pivot header to dark theme when menu panel is active for high-fidelity immersion */
    body.menu-active header.fixed {
        background-color: #094030 !important;
        border-bottom-color: rgba(255, 255, 255, 0.1) !important;
        box-shadow: 0 15px 50px rgba(0, 0, 0, 0.5);
        height: 80px;
        /* Slight expansion for editorial breathe */
        transition: all 0.4s var(--tft-ease);
    }
    body.menu-active header img {
        filter: brightness(0) invert(1) !important;
        /* Pure white mark integration */
        transform: scale(0.9);
        transition: transform 0.4s var(--tft-ease);
    }
    /* Ensure the menu panel translates correctly under the dynamic header */
    #menu-panel {
        top: 80px !important;
        height: calc(100dvh - 80px) !important;
    }
}

/* --- SOVEREIGN ELITE: HIGH-FIDELITY MOBILE MENU UX (REFINED) --- */

/* 1. Neutralize the redundant manual X button styling to match brand aesthetics */

#menu-panel .menu-toggle {
    background: transparent !important;
    border: none !important;
    color: rgba(255, 255, 255, 0.4) !important;
    box-shadow: none !important;
    transition: all 0.3s var(--tft-ease);
}

#menu-panel .menu-toggle:hover {
    color: var(--tft-lime, #d4f54c) !important;
    transform: rotate(90deg) scale(1.1);
}

/* 2. Restore Original Header Aesthetics (Don't change logo) */

@media (max-width: 768px) {
    body.menu-active header.fixed {
        background-color: #ffffff !important;
        /* Keep original header background */
        border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        height: 70px !important;
        /* Keep original height */
    }
    body.menu-active header img {
        filter: none !important;
        /* STRICT: Do not change the logo colors */
        transform: none !important;
    }
    /* Optimize the floating menu panel position */
    #menu-panel {
        top: 70px !important;
        height: calc(100dvh - 70px) !important;
        background: #0d2620 !important;
        /* Ensure solid brand background */
        border-top: 1px solid rgba(255, 255, 255, 0.05);
    }
}

/* 3. Refine the Main Toggle Morph to be Surgical and Premium */

.menu-toggle.menu-open {
    background-color: #094030 !important;
    /* Dark green contrast for white background header */
    border-radius: 999px !important;
    /* Circle instead of square */
    transform: scale(0.9);
}

.menu-toggle.menu-open .line-1,
.menu-toggle.menu-open .line-3 {
    background-color: #d4f54c !important;
    /* Sharp lime lines for the X */
}

/* Ensure submenus are readable */

.tft-menu-glass {
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

/* --- SOVEREIGN ELITE: PREMIUM HUD ARCHITECTURE (V3 FINAL) --- */

/* Surgical refinement of the mobile navigation system for zero-blink aesthetic consistency */

@media (max-width: 768px) {
    /* 1. Global Header active motif (Dark Mode Integration) */
    body.menu-active header.fixed {
        background-color: #094030 !important;
        /* Premium Sidebar Green */
        border-bottom: 1px solid rgba(212, 245, 76, 0.1) !important;
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }
    /* 2. Brand Identity Persistence (Logo) */
    /* If the user's logo is dark, we make it white on the dark header. 
       If it's already white (as in the screenshot), we ensure no filters break it. */
    body.menu-active header img {
        transition: all 0.4s ease;
    }
    /* 3. Universal Toggle Refinement (The Close X) */
    .menu-toggle.menu-open {
        background-color: #d4f54c !important;
        /* Switch to Lime Circle */
        border-radius: 999px !important;
        width: 52px !important;
        height: 52px !important;
        box-shadow: 0 0 20px rgba(212, 245, 76, 0.5) !important;
        transform: scale(0.9) rotate(0deg);
    }
    /* Ensuring high-contrast cross on the lime circle */
    .menu-toggle.menu-open .line-1,
    .menu-toggle.menu-open .line-3 {
        background-color: #094030 !important;
        height: 3px !important;
        width: 24px !important;
        right: 14px !important;
    }
}

/* 4. Menu Panel Glassmorphism & Depth */

#menu-panel {
    background-color: rgba(13, 38, 32, 0.98) !important;
    /* Deep Green Glass */
    backdrop-filter: blur(25px) saturate(150%);
    -webkit-backdrop-filter: blur(25px) saturate(150%);
    border-right: 1px solid rgba(255, 255, 255, 0.05);
}

/* Enhancing navigation contrast */

#menu-panel span.font-display {
    text-shadow: 0 0 40px rgba(0, 0, 0, 0.5);
    letter-spacing: 0.02em !important;
}

/* Accordion Icons refined */

#menu-panel .bg-brand-lime {
    box-shadow: 0 5px 15px rgba(212, 245, 76, 0.2);
}

/* Final Logo Immunity (Dont change my logo) */

header img,
.tft-sidebar-logo-vertical img,
.tft-footer-column img {
    filter: none !important;
    opacity: 1 !important;
}

/* Adjusting the mobile menu panel transparency for premium feel */

#menu-panel {
    background: #0d2620 !important;
    /* Brand Dark Green (Non-pass-through for high readability) */
    opacity: 1 !important;
    box-shadow: 20px 0 60px rgba(0, 0, 0, 0.5);
}

/* Responsive header fix to keep it clean */

@media (max-width: 768px) {
    header.fixed {
        height: 70px !important;
    }
}

/* Enhancing the close button contrast */

.menu-toggle.menu-open .line-1,
.menu-toggle.menu-open .line-3 {
    background-color: #094030 !important;
    /* Dark green X lines */
    box-shadow: none !important;
}

/* --- SOVEREIGN ELITE: ULTIMATE READABILITY ENGINE --- */

/* This block uses extreme specificity and brand-locked contrast to solve accessibility issues. */

@media (max-width: 768px) {
    /* 1. Header State: Dark Green Inversion - LOCKED */
    body.menu-active [class*="header"],
    body.menu-active header.fixed,
    body.menu-active .fixed.top-0.left-0.w-full {
        background: #094030 !important;
        /* Brand Dark Sidebar Green */
        background-color: #094030 !important;
        border-bottom: 2px solid #d4f54c !important;
        /* Accent border for depth */
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
        height: 70px !important;
        transition: background-color 0.4s var(--tft-ease);
    }
    /* 2. Brand Identity: Pure White Mark on Dark HUD */
    body.menu-active header img {
        opacity: 1 !important;
        transition: filter 0.4s ease;
    }
    /* 3. The Close Interaction: High-Contrast Lime HUD */
    body.menu-active .menu-toggle.menu-open {
        background-color: #d4f54c !important;
        /* Vibrant Lime Backdrop */
        border-radius: 999px !important;
        width: 50px !important;
        height: 50px !important;
        transform: scale(0.9) !important;
        border: none !important;
    }
    /* Locked Dark Lines for the X - Perfect Contrast (21:1) */
    body.menu-active .menu-toggle.menu-open .line-1,
    body.menu-active .menu-toggle.menu-open .line-2,
    body.menu-active .menu-toggle.menu-open .line-3 {
        background-color: #0d251f !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
}

/* 4. Navigation Panel: Readability Master */

#menu-panel {
    background-color: #094030 !important;
    border-right: 1px solid rgba(255, 255, 255, 0.05);
}

#menu-panel .font-display,
#menu-panel a,
#menu-panel span {
    color: #ffffff !important;
    /* Absolute white for reading */
}

#menu-panel span[class*="text-white/"] {
    color: #ffffff !important;
    opacity: 0.5 !important;
    /* Subdued metadata */
}

/* Accordion Icons Enhancement */

#menu-panel .bg-brand-lime {
    background-color: #d4f54c !important;
}

/* --- SOVEREIGN ELITE V4: ULTIMATE RESPONSIVE REDESIGN --- */

/* Total overhaul of the mobile navigation system for elite 2026 standards. */

@media (max-width: 768px) {
    /* 1. The Global Header (Initial State) */
    header.fixed {
        background: #ffffff !important;
        /* Pristine White */
        border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
        height: 70px !important;
        padding-inline: 20px !important;
        transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1);
    }
    /* 2. The Universal Toggle (The Icon Redesign) */
    .menu-toggle {
        width: 50px !important;
        height: 50px !important;
        background: #094030 !important;
        /* Brand Dark Sidebar Green */
        border-radius: 999px !important;
        border: none !important;
        box-shadow: 0 5px 15px rgba(9, 64, 48, 0.2) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        transition: all 0.4s var(--tft-ease) !important;
    }
    .menu-toggle .hamburger-line {
        background-color: #ffffff !important;
        /* Stark White Lines for Max Readability */
        right: 11px !important;
        width: 28px !important;
        height: 2px !important;
        border-radius: 4px !important;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }
    .menu-toggle .line-3 {
        width: 18px !important;
    }
    /* Editorial offset */
    /* Hover/Focus State for the toggle */
    .menu-toggle:hover {
        transform: scale(1.05);
        background: #0d2620 !important;
    }
    /* 3. The Active "Open" State Redesign */
    body.menu-active header.fixed {
        background: #0d2620 !important;
        /* Smooth pivot to Brand Dark Green */
        border-bottom-color: rgba(255, 255, 255, 0.05) !important;
    }
    /* The Morphing X (Close Button) - Absolute Contrast */
    .menu-toggle.menu-open {
        background: #d4f54c !important;
        /* High-Visibility Lime backdrop */
    }
    .menu-toggle.menu-open .line-1,
    .menu-toggle.menu-open .line-2,
    .menu-toggle.menu-open .line-3 {
        background-color: #094030 !important;
        /* Dark Green X lines on Lime backdrop */
    }
    .menu-toggle.menu-open .line-1 {
        transform: translateY(8px) rotate(45deg) !important;
    }
    .menu-toggle.menu-open .line-2 {
        opacity: 0 !important;
    }
    .menu-toggle.menu-open .line-3 {
        width: 28px !important;
        transform: translateY(-8px) rotate(-45deg) !important;
    }
    /* 4. The Menu Panel (Redesign) */
    #menu-panel {
        top: 70px !important;
        background: #0d2620 !important;
        /* Deep Green Solid */
        height: calc(100dvh - 70px) !important;
        z-index: 55 !important;
    }
    #menu-panel .tft-menu-glass {
        background: transparent !important;
        border: none !important;
    }
    /* Enhanced Links & Typography */
    #menu-panel a,
    #menu-panel span.font-display {
        font-family: 'Space Grotesk', sans-serif !important;
        font-weight: 500 !important;
        font-size: 2.2rem !important;
        letter-spacing: -0.01em !important;
        color: #ffffff !important;
        transition: all 0.3s ease;
    }
    #menu-panel a:hover {
        color: #d4f54c !important;
        padding-left: 10px;
    }
    /* Submenus Refinement */
    #menu-panel ul[id$="-submenu"] a {
        font-size: 1.25rem !important;
        opacity: 0.6 !important;
    }
    #menu-panel ul[id$="-submenu"] a:hover {
        opacity: 1 !important;
    }
    /* Metadata (-01, -02 etc) */
    #menu-panel span.tracking-widest {
        color: rgba(212, 245, 76, 0.5) !important;
        /* Branded Lime indices */
    }
}

/* Staggered entrance animation for menu items on mobile */

body.menu-active #menu-panel li {
    animation: slideInUp 0.6s cubic-bezier(0.19, 1, 0.22, 1) forwards;
    opacity: 0;
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

body.menu-active #menu-panel li:nth-child(1) {
    animation-delay: 0.1s;
}

body.menu-active #menu-panel li:nth-child(2) {
    animation-delay: 0.15s;
}

body.menu-active #menu-panel li:nth-child(3) {
    animation-delay: 0.2s;
}

body.menu-active #menu-panel li:nth-child(4) {
    animation-delay: 0.25s;
}

/* --- SOVEREIGN ELITE V5: COMPACT HUD & HIGH-CONTRAST CROSS --- */

/* Resolving "shit" styling in menu footer and refining responsive compactness. */

@media (max-width: 768px) {
    /* 1. Universal Toggle Redesign: The High-Contrast Pulse X */
    .menu-toggle {
        background: #094030 !important;
        /* Brand Dark Sidebar Green (Persistent Base) */
        border-radius: 999px !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
        transition: all 0.4s var(--tft-ease) !important;
    }
    /* Normal State: White lines on Dark backdrop */
    .menu-toggle .hamburger-line {
        background-color: #ffffff !important;
    }
    /* Active State: THE LIME CROSS (The requested bright green) */
    .menu-toggle.menu-open {
        background: #094030 !important;
        /* Keep it dark for the green X to pop */
        box-shadow: 0 0 25px rgba(212, 245, 76, 0.4) !important;
    }
    .menu-toggle.menu-open .line-1,
    .menu-toggle.menu-open .line-2,
    .menu-toggle.menu-open .line-3 {
        background-color: #d4f54c !important;
        /* Bright Theme Green cross */
        height: 2px !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    /* 2. Compact Menu Panel (No more big top gap) */
    #menu-panel {
        top: 70px !important;
    }
    #menu-panel .pt-12 {
        padding-top: 2rem !important;
    }
    /* Tighten top space */
    #menu-panel .px-10 {
        padding-inline: 1.5rem !important;
    }
    #menu-panel .py-6 {
        padding-block: 1rem !important;
    }
    /* Tighten nav items */
    #menu-panel span.font-display {
        font-size: 1.8rem !important;
    }
    /* Readable but compact */
    /* 3. The "Shit" Footer Fix (Premium Redesign) */
    .tft-mobile-menu-footer {
        padding-top: 2rem !important;
        margin-top: 2rem !important;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        display: block !important;
        /* Ensure it shows correctly */
        opacity: 1 !important;
    }
    .tft-mobile-contact-link {
        font-family: inherit !important;
        font-weight: 600 !important;
        font-size: 1.4rem !important;
        color: #ffffff !important;
        letter-spacing: -0.02em !important;
        text-decoration: none !important;
    }
    .tft-mobile-social-grid {
        display: flex !important;
        flex-wrap: wrap;
        gap: 12px !important;
        margin-top: 1.5rem !important;
    }
    .tft-mobile-social-item {
        width: 44px !important;
        height: 44px !important;
        border: 1px solid rgba(212, 245, 76, 0.3);
        border-radius: 999px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-family: 'Plus Jakarta Sans', sans-serif !important;
        font-size: 10px !important;
        font-weight: 600 !important;
        color: #d4f54c !important;
        text-transform: uppercase;
        background: rgba(212, 245, 76, 0.05);
        transition: all 0.3s var(--tft-ease);
    }
    .tft-mobile-social-item:hover {
        background: #d4f54c !important;
        color: #094030 !important;
        border-color: #d4f54c !important;
    }
}

/* --- HOME-2 RESPONSIVE GAP REFINEMENT --- */

@media (max-width: 768px) {
    /* 1. Eliminate the excessive vertical centering on mobile to reduce top gap */
    .tft-page-home-2 .tft-h2-vanguard {
        justify-content: flex-start !important;
        padding-top: 120px !important;
        /* Fixed offset from header */
    }
    body .menu-toggle:hover .hamburger-line {
        background-color: #0d2620 !important;
    }
    .tft-page-home-2 .tft-h2-vanguard__container {
        flex: none !important;
        min-height: auto !important;
    }
    .tft-page-home-2 .tft-h2-vanguard__content {
        min-height: auto !important;
        gap: 2.5rem !important;
        /* Tighten internal section gap */
    }
    /* 2. Header Contrast Enforcement for Home-2 */
    .tft-page-home-2 header.fixed {
        background-color: #ffffff !important;
        /* Ensure pristine white header */
        border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
    }
    /* 3. Correct any accidental "Desian" typos at runtime via CSS (Elite Stability) */
    /* (Though the source says Design, we ensure the letter 'g' visibility) */
    .tft-h2-vanguard__title-line .reveal-inner {
        letter-spacing: -0.05em !important;
    }
}

/* --- SOVEREIGN ELITE: THE FINAL HUD (READABILITY OVERRIDE) --- */

/* Eliminating "boring glowy shadows" and locking in maximum accessibility contrast. */

@media (max-width: 768px) {
    /* 1. Global Reset of Glow effects */
    .menu-toggle,
    .menu-toggle.menu-open {
        box-shadow: none !important;
        transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1) !important;
    }
    /* 2. State-Based Contrast Mastery */
    /* Normal State: Dark Circle, Pure White Lines */
    .menu-toggle {
        background-color: #094030 !important;
        transform: scale(0.85) !important;
        /* Elegant size */
    }
    .menu-toggle .hamburger-line {
        background-color: #ffffff !important;
        height: 2px !important;
    }
    /* Active State (The X): Vibrant LIME Circle, DARK lines - PINNED CONTRAST (21:1) */
    .menu-toggle.menu-open {
        background-color: #d4f54c !important;
        /* Switch to solid bright theme green */
        transform: scale(1) rotate(0deg) !important;
        /* Scale up slightly on open */
    }
    .menu-toggle.menu-open .line-1,
    .menu-toggle.menu-open .line-2,
    .menu-toggle.menu-open .line-3 {
        background-color: #0d2620 !important;
        /* Force high-depth charcoal green lines */
        height: 2.5px !important;
        /* Thicker for absolute readability */
        width: 24px !important;
        right: 13px !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    /* Ensuring the Close X lines are centered perfectly without generic transforms */
    .menu-toggle.menu-open .line-1 {
        transform: translateY(7px) rotate(45deg) !important;
    }
    .menu-toggle.menu-open .line-3 {
        transform: translateY(-7px) rotate(-45deg) !important;
    }
}

/* Enhancing navigation menu item contrast on dark theme */

#menu-panel .on-reveal span.font-display {
    color: #ffffff !important;
    text-shadow: none !important;
    /* No fuzzy shadows */
}

/* --- SOVEREIGN ELITE V6: HOME-2 VANGUARD COMPACTNESS REFINEMENT --- */

/* Reducing the vertical debt between the editorial title and the cinematic image on mobile. */

@media (max-width: 768px) {
    .tft-page-home-2 .tft-h2-vanguard {
        padding-top: 80px !important;
        /* Fixed offset refinement (reduced from 120px) */
    }
    .tft-page-home-2 .tft-h2-vanguard__container {
        padding-top: 0 !important;
        margin-bottom: 0 !important;
    }
    .tft-page-home-2 .tft-h2-vanguard__info {
        min-height: auto !important;
        /* Eliminating the 500px void block */
        padding-bottom: 0 !important;
    }
    .tft-page-home-2 .tft-h2-vanguard__content {
        gap: 1.5rem !important;
        /* Unified sectoral gap reduction */
        min-height: auto !important;
    }
    .tft-page-home-2 .tft-h2-vanguard__info-inner {
        padding-bottom: 0 !important;
    }
}

/* --- SOVEREIGN ELITE V7: HOME-2 VANGUARD MOBILE HUD & TYPO REFINEMENT --- */

/* Resolving the "Innovative Motion" top-clearance and the massive bottom-gap debt. */

@media (max-width: 768px) {
    /* 1. Add clearance for the kicker text relative to the header */
    .tft-page-home-2 .tft-h2-vanguard__kicker-box {
        margin-top: 2rem !important;
    }
    /* 2. Collapse the forced screen height and convert section to a flow-based layout */
    .tft-page-home-2 .tft-h2-vanguard {
        height: auto !important;
        min-height: 100svh !important;
        padding-bottom: 4rem !important;
        display: flex !important;
        flex-direction: column !important;
    }
    /* 3. Re-orient the HUD from absolute-pinned to relative-following */
    .tft-page-home-2 .tft-h2-vanguard__hud {
        position: relative !important;
        bottom: auto !important;
        margin-top: 3rem !important;
        /* Unified sectoral gap reduction */
        left: 0 !important;
        padding-inline: 6% !important;
        transform: none !important;
    }
    /* 4. Fine-tuning the vanguard container to eliminate accidental margins */
    .tft-page-home-2 .tft-h2-vanguard__container {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }
}

/* --- SOVEREIGN ELITE V8: INDEX PAGE MOBILE COMPACTNESS & NAV FIX --- */

/* Surgical refinements to eliminate empty space and fix the navigation button scale. */

@media (max-width: 768px) {
    /* 1. Scale down the slider buttons to prevent overflow and restore visibility */
    .tft-slider-btn {
        width: 50px !important;
        height: 50px !important;
    }
    .tft-slider-btn i {
        font-size: 1rem !important;
    }
    /* 2. Compact the Editorial Typography */
    .tft-slider-h1 {
        font-size: clamp(2.2rem, 10vw, 3.5rem) !important;
        gap: 0.5rem !important;
    }
    .tft-cat-badge {
        margin-bottom: 1rem !important;
    }
    .tft-slider-action {
        margin-top: 1.5rem !important;
    }
    /* 3. Reduce the perspective container padding for tighter framing */
    .perspective-container {
        padding: 1.5rem !important;
    }
    /* 4. Adjust the corner badge typography for clarity in small scale */
    #badge-current {
        font-size: 2.5rem !important;
    }
}

/* --- SOVEREIGN ELITE V9: HOME-2 VANGUARD MOBILE ALIGNMENT REFINEMENT --- */

/* Transitioning from left-aligned editorial to purely centered architectural symmetry. */

@media (max-width: 768px) {
    .tft-page-home-2 .tft-h2-vanguard__content {
        text-align: center !important;
    }
    /* 1. Center the kicker box and remove the asymmetrical line */
    .tft-page-home-2 .tft-h2-vanguard__kicker-box {
        justify-content: center !important;
        gap: 0 !important;
    }
    .tft-page-home-2 .tft-h2-vanguard__kicker-line {
        display: none !important;
    }
    /* 2. Ensure all title lines follow the central axis */
    .tft-page-home-2 .tft-h2-vanguard__title {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }
}

/* --- SOVEREIGN ELITE V10: HOME-4 REDESIGN & GLOBAL SCROLL ARCHITECTURE --- */

/* 1. Home-4 Premium Typography & Blade Buttons */

.tft-v4-col__title--serif {
    font-family: var(--tft-serif, serif);
    font-style: italic;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.8);
    margin-top: 0.5rem;
}

.tft-v4-col__btn--elite {
    clip-path: polygon(10% 0%, 100% 0%, 100% 70%, 90% 100%, 0% 100%, 0% 30%);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4), 0 0 20px rgba(212, 245, 76, 0.1);
}

.tft-v4-col__btn--elite:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.5), 0 0 30px rgba(163, 255, 0, 0.2);
}

/* 2. Global Mobile Scroll Fix (The High-Fidelity Accessibility Lock) */

/* This prevents content clipping on viewport-locked templates like Home-4, Home-7, etc. */

@media (max-width: 768px) {
    body[class*="tft-page-"] {
        height: auto !important;
        min-height: 100svh !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }
    /* This prevents content clipping only on long-form scrolling templates like Home-5. */
    .tft-page-home-5 .view-section {
        position: relative !important;
        height: auto !important;
        min-height: 100svh !important;
        overflow: visible !important;
    }
    .tft-page-home-2 .view-section,
    .tft-page-home-3 .view-section,
    .tft-page-home-6 .view-section,
    .tft-page-home-7 .view-section {
        position: absolute !important;
        inset: 0 !important;
        height: 100% !important;
        overflow: hidden !important;
    }
    /* Fixing accidental content shifting on mobile headers */
    header.fixed {
        position: fixed !important;
        /* Lock it */
        z-index: 999 !important;
    }
}

/* --- HOME-4 MOBILE MEGA-FIX: 1-ITEM-PER-ROW STACK & SCROLL --- */

@media (max-width: 768px) {
    .tft-page-home-4 div.absolute.left-0.z-10 {
        position: absolute !important;
        height: calc(100vh - 70px) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding-top: 70px !important;
        top: 0 !important;
        left: 0 !important;
    }
    .tft-page-home-4 #view-home-4 {
        position: relative !important;
        display: block !important;
        /* FORCE BLOCK STACKING */
        width: 100% !important;
        height: auto !important;
        min-height: fit-content !important;
        inset: auto !important;
        border: none !important;
    }
    .tft-page-home-4 .tft-v4-col {
        display: block !important;
        /* FORCE BLOCK STACKING */
        width: 100% !important;
        height: 60vh !important;
        min-height: 480px !important;
        position: relative !important;
        border-bottom: 2px solid rgba(212, 245, 76, 0.1) !important;
    }
    .tft-page-home-4 .tft-v4-col__title {
        font-size: clamp(2.5rem, 10vw, 4.5rem) !important;
        margin-bottom: 1.5rem !important;
    }
}

/* --- SOVEREIGN ELITE V11: HOME-5 MOBILE COMPACTNESS & DENSITY --- */

/* Surgical refinements to List-Style (Home-5) for improved small-screen balance. */

@media (max-width: 768px) {
    /* 1. Tighter Typographic Scale & Hiding Index */
    .tft-page-home-5 .h5-list-index {
        display: none !important;
    }
    .tft-page-home-5 .h5-list-text {
        font-size: clamp(1rem, 6vw, 1.4rem) !important;
        padding-left: 0.5rem !important;
    }
    /* 2. Increased Row Density (Ultra-Compact) */
    /* --- SOVEREIGN ELITE: SLIDER TYPOGRAPHY REFINEMENT --- */
    /* Resolving the glyph clipping issue for large serif/italic fonts in 'reveal' containers. */
    .text-reveal-wrap {
        overflow: hidden !important;
        padding-right: 1.5em !important;
        /* Massive breathing room for extreme italic/serif glyph handles */
        margin-right: -1.5em !important;
        /* Compensate for the bleed to maintain optical centering */
        display: inline-block !important;
    }
    .text-reveal {
        display: inline-block !important;
        will-change: transform;
        pointer-events: auto !important;
    }
    /* Ensuring the slider H1 is bite-perfect across all resolutions */
    .tft-slider-h1 {
        line-height: 0.8 !important;
        /* Ultra-compact editorial stacking */
        overflow: visible !important;
        /* Prevent parent container clipping */
    }
    .tft-slider-h1--italic {
        font-style: italic !important;
        transform: skewX(-5deg);
        /* Slight editorial skew refinement */
    }
    .tft-page-home-5 .h5-list-item {
        height: auto !important;
        padding: 0.45rem 0.5rem !important;
        margin-bottom: 0.15rem !important;
        transition: background 0.3s ease !important;
    }
    /* 3. Active-State Elevation (Visual Block) */
    .tft-page-home-5 .h5-list-item.active {
        background: rgba(212, 245, 76, 0.08) !important;
        border-left: 3px solid #d4f54c;
        /* Removed translateX to prevent horizontal scroll leak */
    }
    .tft-page-home-5 .h5-list-item.active .h5-list-text {
        color: #ffffff !important;
    }
    /* 4. Compact Scrolling Container - Forced Horizontal Silence */
    .tft-page-home-5 .view-section,
    .tft-page-home-5 .h4-content,
    .tft-page-home-5 div[class*="overflow-y-auto"] {
        overflow-x: hidden !important;
    }
    .tft-page-home-5 .view-section {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }
    /* 5. Scaled-Down Navigation & Case Study Buttons */
    .tft-page-home-5 .max-w-\[1400px\] {
        gap: 2rem !important;
    }
    /* Ensuring the large "case study" circle doesn't overwhelm the list */
    .tft-page-home-5 div[class*="rounded-full"][class*="bg-brand-lime"] {
        width: 105px !important;
        height: 105px !important;
    }
    .tft-page-home-5 div[class*="rounded-full"][class*="bg-brand-lime"] span {
        font-size: 0.8rem !important;
    }
}

/* ==========================================================================
   INDEX SLIDER EVOLUTION (v2.0)
   - Full-bleed Edge-to-Edge Hero
   - High-Fidelity Optical Expansion & Pan
   ========================================================================== */

/* Neutralize legacy 3D tilt from JS without deleting old code */

#slider-container[class*="book-3d"] {
    transform: none !important;
    perspective: none !important;
}

/* Guarantee size and visibility for the full-width media layer */

#slider-media-layer {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    will-change: transform;
    pointer-events: none;
    background-color: #071e18;
    /* Safety brand fill */
    transition: transform 0.8s cubic-bezier(0.33, 1, 0.68, 1);
}

/* Internal Hover Effect (Triggered by slider-container group) */

#slider-container:hover #slider-media-layer {
    transform: scale(1.1) translate(var(--mx, 0), var(--my, 0));
}

/* Ensure WebGL canvas and Fallback image are correctly layered */

#webgl-canvas {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    z-index: 20;
    pointer-events: none;
}

#slider-fallback-image {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    z-index: 11;
}

/* Chromatic Flare & HUD Stability */

.tft-cat-badge,
.tft-slider-btn,
.tft-slider-action {
    transition: all 0.6s var(--tft-ease);
}

#slider-container:hover .tft-cat-badge__pill {
    background: #d4f54c !important;
    box-shadow: 0 0 30px rgba(212, 245, 76, 0.4);
}

#slider-container:hover .tft-cat-badge__label {
    color: #094030 !important;
}

/* ARCHITECTURAL GLASS V2 (HIGH-FIDELITY) */

.tft-glass-panel,
.tft-index-badge,
.tft-slider-btn {
    backdrop-filter: blur(40px) saturate(220%) !important;
    background: rgba(13, 38, 32, 0.25) !important;
    border-top: 1.5px solid rgba(255, 255, 255, 0.2) !important;
    border-left: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-right: 0.5px solid rgba(255, 255, 255, 0.05) !important;
    border-bottom: 0.5px solid rgba(255, 255, 255, 0.05) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.02) !important;
}

.tft-slider-h1 {
    text-align: center !important;
    width: 100% !important;
}

.tft-cat-badge {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
}

#slider-container:hover .tft-slider-btn {
    border-color: #d4f54c !important;
    background: rgba(212, 245, 76, 0.1);
}

/* TYPOGRAPHIC SHUTTER REVEAL (ES2026 MODERN) */

.tft-slider-h1 .text-reveal-wrap {
    overflow: hidden !important;
    display: block;
    padding-right: 1.5em !important;
    /* Sync with global reveal padding for high-fidelity bleed */
    margin-right: -1.5em !important;
}

.tft-slider-h1 .text-reveal {
    display: block;
    transform: translateY(0);
    transition: transform 0.8s cubic-bezier(0.19, 1, 0.22, 1);
}

.tft-slider-h1.is-animating .text-reveal {
    transform: translateY(110%);
    transition: transform 0.4s cubic-bezier(0.45, 0, 0.55, 1);
}

/* GLOBAL LENS BLUR PULSE (HUD FOCUS) */

#view-home-1.is-transitioning .tft-glass-panel,
#view-home-1.is-transitioning .tft-index-badge,
#view-home-1.is-transitioning .tft-slider-h1,
#view-home-1.is-transitioning .tft-cat-badge {
    filter: blur(8px) opacity(0.5);
    transform: scale(0.98);
}

#view-home-1 .tft-glass-panel,
#view-home-1 .tft-index-badge,
#view-home-1 .tft-slider-h1,
#view-home-1 .tft-cat-badge {
    transition: filter 0.8s var(--tft-ease), transform 0.8s var(--tft-ease), opacity 0.8s var(--tft-ease);
}

/* 
   INDEX VIEWPORT LOCK (Restores Absolute Hero Context)
   Overrides the global "relative scroll" fix specifically for the Index Slider.
*/

.tft-page-index .view-section {
    position: absolute !important;
    inset: 0 !important;
    height: 100% !important;
    min-height: 100% !important;
    overflow: hidden !important;
}

@media (max-width: 768px) {
    .tft-page-index,
    .tft-page-index body {
        height: 100vh !important;
        height: 100svh !important;
        overflow: hidden !important;
    }
}

/* --- RESTORATION: HOME-4 COLUMNS BASE --- */

.tft-page-home-4 #view-home-4 {
    display: flex !important;
    flex-direction: row !important;
}

.tft-v4-col {
    flex: 1 !important;
    position: relative !important;
    height: 100% !important;
    overflow: hidden !important;
    border-right: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.tft-v4-col:hover {
    flex: 1.4 !important;
}

.tft-v4-col__bg {
    transition: transform 1.2s cubic-bezier(0.23, 1, 0.32, 1);
}

.tft-v4-col:hover .tft-v4-col__bg {
    transform: scale(1.1);
}

.tft-v4-col:hover .overlay-dim {
    opacity: 0.3 !important;
}

/* --- RESTORATION: HOME-2 VANGUARD BASE --- */

.tft-h2-vanguard {
    position: relative;
    width: 100%;
    height: 100vh;
    height: 100svh;
    overflow: hidden;
    background: var(--tft-bg, #0d2620);
    display: flex;
    align-items: center;
}

.tft-h2-vanguard__container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 6%;
    position: relative;
    z-index: 10;
}

.tft-h2-vanguard__content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4rem;
}

.tft-h2-vanguard__info {
    flex: 1;
    max-width: 600px;
}

.tft-h2-vanguard__media {
    flex: 1;
    display: flex;
    justify-content: flex-end;
}

.tft-h2-vanguard__frame {
    position: relative;
    width: 100%;
    max-width: 500px;
}

.tft-h2-vanguard__img {
    width: 100%;
    height: auto;
    object-fit: cover;
    clip-path: polygon(0 0, 100% 0, 100% 90%, 90% 100%, 0 100%);
}

/* ============================================== */

/* PAGE: HOME 8 (AURORA PULSE)                    */

/* ============================================== */

.tft-page-home-8 {
    --aurora-lime: #d4f54c;
    --aurora-bg: #0d2620;
    background-color: var(--aurora-bg);
    overflow: hidden;
}

.tft-aurora {
    position: relative;
    width: 100%;
    height: 100vh;
    background: var(--aurora-bg);
}

.tft-aurora__snakes {
    position: absolute;
    inset: 0;
    z-index: 10;
    pointer-events: none;
    opacity: 0.45;
}

.tft-aurora__path {
    transition: d 1.4s cubic-bezier(1, 0, 0, 1), stroke-dashoffset 0.1s linear, stroke 1.2s ease, filter 0.8s ease, transform 0.8s ease;
    stroke-dasharray: 4000;
    stroke-dashoffset: 4000;
    filter: drop-shadow(0 0 12px var(--aurora-lime));
    will-change: d, filter, transform;
}

.tft-aurora__path.glitching {
    filter: blur(35px) brightness(2.5) contrast(150%);
    transform: scale(1.1) translate(15px, -10px);
    opacity: 0.6;
}

.tft-aurora__slider {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.tft-aurora__slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 1.2s var(--tft-ease);
}

.tft-aurora__slide.active {
    opacity: 1;
    visibility: visible;
    z-index: 5;
}

.tft-aurora__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: all 1.2s cubic-bezier(1, 0, 0, 1);
    transform: scale(0.95);
    filter: blur(10px);
}

.tft-aurora__slide.active {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
    filter: blur(0px);
    z-index: 20;
}

.tft-aurora__slide.exiting {
    opacity: 0;
    visibility: visible;
    transform: scale(1.4);
    filter: blur(30px);
    z-index: 25;
}

.tft-aurora__bg {
    transition: transform 8s linear;
    transform: scale(1.05);
    /* Base Ken Burns state */
}

.tft-aurora__slide.active .tft-aurora__bg {
    animation: tftKenBurns 20s infinite alternate ease-in-out;
}

@keyframes tftKenBurns {
    from {
        transform: scale(1.05) translate(0, 0);
    }
    to {
        transform: scale(1.2) translate(-2%, -2%);
    }
}

.tft-aurora__content {
    z-index: 30;
}

.tft-aurora__slide .reveal-title {
    opacity: 0;
    transform: translateY(120px) skewY(12deg);
    transition: all 1.4s cubic-bezier(0.19, 1, 0.22, 1);
    font-size: clamp(60px, 14vw, 240px);
    letter-spacing: -0.05em;
}

.tft-aurora__slide.active .reveal-title {
    opacity: 1;
    transform: translateY(0) skewY(0);
    transition-delay: 0.6s;
}

.tft-aurora__slide h2>span {
    display: block;
    line-height: 0.8;
    letter-spacing: 0.01em;
}

/* OPTICAL BLUR OVERLAY */

.tft-aurora__overlay {
    background: rgba(13, 38, 32, 0);
    backdrop-filter: blur(0px);
    transition: all 0.8s cubic-bezier(1, 0, 0, 1);
}

.tft-aurora--transitioning .tft-aurora__overlay {
    background: rgba(13, 38, 32, 0.8);
    backdrop-filter: blur(30px);
    pointer-events: auto;
}

@media (max-width: 768px) {
    .tft-aurora__content {
        padding: 2rem;
    }
}

/* ==========================================================================
   EDITORIAL RIBBON (HOME 2)
   ========================================================================== */

.tft-ribbon {
    --ribbon-height: clamp(80px, 10vh, 120px);
    width: 100%;
    min-height: var(--ribbon-height);
    display: flex;
    align-items: center;
    background: linear-gradient(90deg, transparent, rgba(212, 245, 76, 0.05), transparent);
}

.tft-ribbon__scan {
    animation: tftRibbonScan 6s linear infinite;
    box-shadow: 0 0 20px var(--brand-lime);
}

@keyframes tftRibbonScan {
    0% {
        left: -10%;
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        left: 110%;
        opacity: 0;
    }
}

.tft-marquee {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 10px 0;
}

.tft-marquee__inner {
    display: flex;
    width: max-content;
    flex-wrap: nowrap;
    animation: tftMarquee 40s linear infinite;
    will-change: transform;
}

.tft-marquee__text {
    flex-shrink: 0;
    white-space: nowrap;
    padding-right: 40px;
}

@keyframes tftMarquee {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-33.3333%);
    }
}

.tft-ribbon .tft-marquee__text {
    color: white;
    font-size: clamp(24px, 4.5vw, 64px);
    line-height: 1;
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.05);
    transition: all 0.5s var(--tft-ease);
}

.tft-ribbon:hover .tft-marquee__text {
    color: var(--brand-lime);
    text-shadow: 0 0 30px rgba(212, 245, 76, 0.3);
}

@media (max-width: 768px) {
    .tft-aurora {
        height: calc(100dvh - 70px);
    }
    .tft-aurora__content {
        padding-top: 60px;
        padding-left: 1rem;
        padding-right: 1rem;
        text-align: center;
    }
    .tft-aurora__slide .reveal-title {
        font-size: clamp(32px, 10vw, 52px) !important;
        line-height: 0.9;
    }
    .tft-aurora__hud {
        bottom: 80px;
        gap: 1rem;
        width: 100%;
        justify-content: center;
        padding: 0 1rem;
    }
    .tft-aurora__nav-btn {
        width: 44px;
        height: 44px;
    }
    .tft-aurora__hud .w-32 {
        display: none;
        /* Remove progress line on mobile for maximum clean space */
    }
    .tft-aurora__hud span {
        font-size: 14px;
    }
}

/* ==========================================================================
   SOVEREIGN 2026: UI GEOMETRY & ASPECT-RATIO FIXES
   - Resolves "EGG" shape for the Back to Top button
   - Enforces fixed scaling for mobile menu accordion circles
   ========================================================================== */

/* 1. BACK TO TOP (GEOMETRIC INTEGRITY) */

.tft-back-to-top {
    width: 65px !important;
    height: 65px !important;
    aspect-ratio: 1 / 1 !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    /* Ensure icon isn't pushed by internal padding */
}

/* 2. MOBILE MENU: ACCORDION GEOMETRY CORE */

/* Ensures the lime-green interaction circles maintain scale rather than stretching to row height. */

.w-5 {
    width: 20px !important;
}

.h-5 {
    height: 20px !important;
}

.rounded-full {
    border-radius: 9999px !important;
}

.bg-brand-lime {
    background-color: #d4f54c !important;
}

/* Specific Menu Accordion Override: Enhancing for Mobile High-Visibility */

#menu-panel .w-5.h-5.rounded-full {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 4px 10px rgba(212, 245, 76, 0.2);
}

/* 3. RESPONSIVE MENU: HUD ALIGNMENT (INDEX) */

@media (max-width: 768px) {
    /* Stabilize mobile menu triggers and icons */
    .menu-panel .py-6 {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }
    .menu-panel .font-display {
        font-size: 1.5rem !important;
    }
}

/* ============================================== */

/* SOVEREIGN 2026: HOME 7 (ARCH) MODERNIZATION   */

/* ============================================== */

.tft-page-home-7 {
    --h7-blur: 16px;
    --h7-glass: rgba(255, 255, 255, 0.04);
    --h7-border: rgba(255, 255, 255, 0.1);
}

/* KINETIC PARTICLES LAYER */

.tft-h7-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: radial-gradient(circle, #d4f54c 1px, transparent 1px);
    background-size: 120px 120px;
    opacity: 0.05;
    animation: tftArchiveFlow 40s linear infinite;
}

@keyframes tftArchiveFlow {
    0% {
        transform: translateY(0) rotate(0deg);
    }
    100% {
        transform: translateY(-120px) rotate(2deg);
    }
}

/* GLASSMORPHIC HUD NAVIGATION */

.tft-h7-hud {
    width: 65px;
    height: 65px;
    flex-shrink: 0;
    border-radius: 999px;
    background: var(--h7-glass);
    backdrop-filter: blur(var(--h7-blur));
    border: 1px solid var(--h7-border);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

.tft-h7-hud img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

.tft-h7-hud:hover {
    background: var(--brand-lime);
    border-color: var(--brand-lime);
    transform: scale(1.15) rotate(15deg);
    box-shadow: 0 0 30px rgba(212, 245, 76, 0.4);
}

/* ARCH GLOW REFINEMENT */

.tft-arch-container {
    box-shadow: 0 -40px 150px -20px rgba(0, 0, 0, 0.8), inset 0 0 100px rgba(13, 38, 32, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* CASE STUDY PREMIUM BUBBLE */

.tft-h7-case {
    background: var(--h7-glass);
    backdrop-filter: blur(20px);
    border: 1px solid var(--h7-border);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    transition: all 0.5s ease;
}

.tft-h7-case:hover {
    transform: scale(1.1) translateY(-10px);
    background: var(--brand-lime);
    box-shadow: 0 0 40px rgba(212, 245, 76, 0.6);
}

/* EDITORIAL WATERMARK STROKE */

.tft-h7-watermark {
    position: absolute;
    right: 5vw;
    top: 50%;
    transform: translateY(-50%);
    writing-mode: vertical-rl;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 15vh;
    font-weight: 900;
    text-transform: uppercase;
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.03);
    color: transparent;
    pointer-events: none;
    z-index: 5;
    letter-spacing: 0.1em;
}

/* ============================================== */

/* PAGE: ABOUT ALT (TIMELINE ALIGNMENT)          */

/* ============================================== */

.tft-page-about-alt .step-progress-line {
    position: absolute;
    left: 32px;
    /* Half of 64px (w-16) */
    top: 64px;
    bottom: -128px;
    /* Extend to meet next circle */
    width: 1px;
    background: rgba(212, 245, 76, 0.2);
    z-index: 10;
}

.tft-page-about-alt .step-progress-fill {
    width: 100%;
    height: 0%;
    background: var(--brand-lime);
    transition: height 1s ease;
}

.tft-page-about-alt .w-16.h-16 {
    width: 64px !important;
    height: 64px !important;
    flex-shrink: 0;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    z-index: 20;
}

span.text-vertical.text-\[10px\].tracking-\[0\.15em\].opacity-80.uppercase,
span.text-vertical.text-\[9px\].tracking-\[0\.2em\].font-medium.whitespace-nowrap.uppercase {
    writing-mode: vertical-lr;
    transform: rotate(180deg);
}

/* ThemeForest packaging cleanup */

.tft-visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.js-accordion-toggle {
    cursor: pointer;
}

.tft-docs {
    max-width: 960px;
    margin: 0 auto;
    padding: 48px 24px;
    color: #fff;
    background: #071e18;
    min-height: 100vh;
}

.tft-docs__hero,
.tft-docs__section {
    margin-bottom: 40px;
}

.tft-docs__badge {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 999px;
    background: #d4f54c;
    color: #0d2620;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.tft-docs h1,
.tft-docs h2,
.tft-docs h3 {
    font-family: 'Space Grotesk', sans-serif;
}

.tft-docs p,
.tft-docs li {
    color: rgba(255, 255, 255, .78);
    line-height: 1.7;
}

.tft-docs pre {
    background: rgba(255, 255, 255, .04);
    padding: 20px;
    border-radius: 16px;
    overflow: auto;
    border: 1px solid rgba(255, 255, 255, .08);
}

.tft-docs code {
    color: #d4f54c;
}

.tft-docs__footer {
    margin-top: 64px;
    font-size: 13px;
    opacity: .5;
}

.tft-inline-1 {
    background-image: url('../img/project_strategy.png');
    filter: grayscale(1) brightness(0.6);
}

.tft-inline-2 {
    transition-delay: 0.5s;
}

.tft-inline-3 {
    transition-delay: 0.1s;
}

.tft-inline-4 {
    transition-delay: 0.2s;
}

.tft-inline-5 {
    transition-delay: 0.3s;
}

.tft-inline-6 {
    transition-delay: 0.4s;
}

.tft-inline-7 {
    transition-delay: 0.6s;
}

.tft-inline-8 {
    background-image: url('../img/project_strategy.png');
}

.tft-inline-9 {
    font-style: italic;
    opacity: 0.5;
}

.tft-inline-10 {
    margin-top: 8rem;
    opacity: 0.3;
    font-size: 12px;
}

.tft-inline-11 {
    left: 30%;
    opacity: 0.5;
}

.tft-inline-12 {
    left: 70%;
    opacity: 0.3;
}

.tft-inline-13 {
    background-image: url('../img/s1.jpg');
}

.tft-inline-14 {
    background-image: url('../img/visionary_male_alt.png');
}

.tft-inline-15 {
    background-image: url('../img/s6.jpg');
}

.tft-inline-16 {
    background-image: url('../img/s7.png');
}

.tft-inline-17 {
    transform: translateX(0%);
}

.tft-inline-18 {
    background-image: url('../img/project_vision.png');
}

.tft-inline-19 {
    background-image: linear-gradient(rgba(212, 245, 76, 0.15) 1px, transparent 1px), linear-gradient(90deg, rgba(212, 245, 76, 0.15) 1px, transparent 1px);
    background-size: 80px 80px;
}

.tft-inline-20 {
    --r: -30deg;
    --x: -70px;
    --d: 0.1s;
}

.tft-inline-21 {
    --r: -15deg;
    --x: -35px;
    --d: 0.15s;
}

.tft-inline-22 {
    --r: 0deg;
    --x: 0px;
    --d: 0.2s;
}

.tft-inline-23 {
    --r: 15deg;
    --x: 35px;
    --d: 0.25s;
}

.tft-inline-24 {
    --r: 30deg;
    --x: 70px;
    --d: 0.3s;
}

.tft-inline-25 {
    --r: -30deg;
    --x: -70px;
    --d: 0.05s;
}

.tft-inline-26 {
    --r: -15deg;
    --x: -35px;
    --d: 0.1s;
}

.tft-inline-27 {
    --r: 0deg;
    --x: 0px;
    --d: 0.15s;
}

.tft-inline-28 {
    --r: 15deg;
    --x: 35px;
    --d: 0.2s;
}

.tft-inline-29 {
    --r: 30deg;
    --x: 70px;
    --d: 0.25s;
}

.tft-inline-30 {
    width: 25%;
}

.tft-inline-31 {
    background-image: url('../img/project_editorial.png');
}

.tft-inline-32 {
    background-image: radial-gradient(var(--tft-sidebar) 1px, transparent 1px);
    background-size: 40px 40px;
}

/* moved-inline-style-block-1 */

:root {
    --tft-bg: #0d2620;
    --tft-lime: #d4f54c;
    --tft-white: #ffffff;
    --tft-text: rgba(255, 255, 255, 0.7);
}

body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    background: #071e18;
    color: #fff;
    line-height: 1.6;
    padding: 2rem;
}

h1,
h2,
h3 {
    font-family: 'Space Grotesk', sans-serif;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 1rem;
    margin-top: 3rem;
}

code {
    background: rgba(255, 255, 255, 0.05);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    color: var(--tft-lime);
}

.var-map {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    background: rgba(0, 0, 0, 0.2);
    padding: 2rem;
    border-radius: 1rem;
}

.badge {
    display: inline-block;
    padding: 4px 12px;
    background: var(--tft-lime);
    color: var(--tft-bg);
    font-size: 10px;
    font-weight: 800;
    border-radius: 99px;
    text-transform: uppercase;
    margin-bottom: 1rem;
}

/* moved-inline-style-block-2 */

/* SOVEREIGN MOBILE SOLUTION: HOME 4 COLUMNS */

@media (max-width: 991px) {
    body.tft-page-home-4 {
        overflow: hidden !important;
        /* Eliminate redundant scrollbar */
        height: 100dvh !important;
    }
    .tft-page-home-4 .absolute.z-10 {
        position: relative !important;
        height: auto !important;
        min-height: 100dvh !important;
        overflow: visible !important;
        padding-top: 70px !important;
        top: 0 !important;
        left: 0 !important;
        background: #0d2620;
    }
    .tft-page-home-4 main#view-home-4 {
        position: relative !important;
        display: block !important;
        /* Force block stacking */
        width: 100% !important;
        height: auto !important;
        inset: auto !important;
        border: none !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    .tft-page-home-4 .tft-v4-col {
        display: block !important;
        width: 100% !important;
        height: 65vh !important;
        /* Fixed viewport height chunk */
        min-height: 500px !important;
        position: relative !important;
        border-bottom: 3px solid rgba(212, 245, 76, 0.1);
        margin: 0 !important;
    }
    .tft-page-home-4 .tft-v4-col__content {
        padding: 2rem !important;
        text-align: center;
    }
    .tft-page-home-4 .tft-v4-col__title {
        font-size: clamp(2.5rem, 12vw, 4.5rem) !important;
        line-height: 0.85 !important;
    }
}

/* moved-inline-style-block-3 */

@keyframes flow-right {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(50%);
    }
}

@keyframes flow-down {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(50%);
    }
}

.animate-flow-right {
    animation: flow-right linear infinite;
}

.animate-flow-down {
    animation: flow-down linear infinite;
}

/* ThemeForest hardening additions */

:root {
    --tft-font-display: "Space Grotesk", Inter, "Segoe UI", Arial, sans-serif;
    --tft-font-body: "Plus Jakarta Sans", Inter, "Segoe UI", Arial, sans-serif;
    --tft-font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
}

body {
    font-family: var(--tft-font-body);
}

h1,
h2,
h3,
h4,
h5,
h6,
.font-display,
.hero-title,
.section-title {
    font-family: var(--tft-font-display);
}

code,
pre,
.font-mono {
    font-family: var(--tft-font-mono);
}

.tft-delay-100 {
    transition-delay: .1s;
}

/* --- PATCH: asset path / UI hardening --- */

.tft-team-card-elite__social-link--text {
    min-width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    padding: 0 9px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    line-height: 1;
    background: rgba(255, 255, 255, 0.04);
}

.tft-team-card-elite__social-link--text:hover {
    background: var(--brand-lime, #d4f54c);
    color: #062f24;
    border-color: rgba(212, 245, 76, 0.6);
}

.animate-wave svg {
    transform-origin: 70% 75%;
}

.tft-share-hub__item:hover {
    background: var(--tft-lime);
    border-color: rgba(186, 255, 65, 0.8);
}

.tft-share-hub__item:hover .tft-share-hub__icon {
    background: var(--tft-sidebar) !important;
    color: var(--tft-lime) !important;
    border-color: rgba(212, 245, 76, 0.35);
}

.tft-share-hub__item:hover .tft-share-hub__icon span {
    color: var(--tft-lime) !important;
}

.tft-share-hub__item:hover .tft-share-hub__label {
    color: var(--tft-sidebar) !important;
}

/* ===== Final patch pass ===== */

.tft-back-to-top {
    cursor: pointer;
    overflow: hidden;
    line-height: 0;
}

.tft-back-to-top svg {
    display: block;
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    transition: transform .35s ease;
}

.tft-back-to-top:hover svg {
    transform: translateY(-2px);
}

.tft-share-hub__item:hover {
    background: var(--tft-lime) !important;
    border-color: rgba(186, 255, 65, .82) !important;
    box-shadow: 0 10px 25px rgba(186, 255, 65, .14) !important;
}

.tft-share-hub__item:hover .tft-share-hub__icon {
    background: #062f24 !important;
    color: var(--tft-lime) !important;
    border-color: rgba(6, 47, 36, .4) !important;
    transform: none !important;
}

.tft-share-hub__item:hover .tft-share-hub__icon span {
    color: var(--tft-lime) !important;
}

.tft-share-hub__item:hover .tft-share-hub__label {
    color: #062f24 !important;
    text-shadow: none !important;
    opacity: 1 !important;
}

.tft-h2-vanguard__nav-btn:hover {
    color: #062f24 !important;
}

.tft-h2-vanguard__nav-btn:hover i,
.tft-h2-vanguard__nav-btn:hover svg {
    color: #062f24 !important;
    stroke: currentColor !important;
}

/* cleaner sidebar trigger icon */

[data-lucide="arrow-up-right"] svg {
    stroke-width: 2.15;
}

.animate-wave svg {
    transform: none !important;
}

/* center index hero copy more precisely */

#view-home-1 .tft-slider-h1,
#view-home-1 .tft-cat-badge,
#view-home-1 .tft-slider-action {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

#view-home-1 .tft-slider-action {
    display: flex;
    justify-content: center;
    align-items: center;
}

#view-home-1 .tft-btn-view {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* TFT-ACCORDION-FIX: Precise vertical centration for menu chevrons */

.js-accordion-toggle .rounded-full.bg-brand-lime {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.js-accordion-toggle .rounded-full.bg-brand-lime i[data-lucide] {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 12px !important;
    height: 12px !important;
    line-height: 0 !important;
    margin-top: -1px !important;
    /* Visual nudge to perfectly center the chevron balance */
}

.js-accordion-toggle .rounded-full.bg-brand-lime i svg {
    display: block !important;
    margin: 0 auto !important;
}

/* TFT-FIX: Precise horizontal centration for hero slider typography */

.tft-slider-h1 .text-reveal-wrap {
    display: block !important;
    text-align: center !important;
    width: 100% !important;
    padding-right: 0 !important;
    margin-right: 0 !important;
}

.tft-slider-h1 .text-reveal {
    display: inline-block !important;
    text-align: center !important;
    padding-inline: 0.15em !important;
    /* Symmetrical padding to safeguard italic glyphs without shifting center */
}

/* TFT-FIX: GUARANTEED HORIZONTAL CENTRATION FOR HERO SLIDER (ES2026 PRECISION) */

.tft-slider-h1 {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;
    transform: none !important;
}

.tft-slider-h1 .text-reveal-wrap {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
}

.tft-slider-h1--italic,
.tft-slider-h1--bold,
.tft-slider-h1 span {
    transform: none !important;
    /* Forces removal of skewX(-5deg), translateX(12%), etc. */
    margin-inline: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    text-indent: 0 !important;
    display: inline-block !important;
    text-align: center !important;
    width: auto !important;
}

/* Nuclear reset on specific boutique logic items */

.tft-slider-h1--bold {
    margin-left: 0 !important;
    margin-inline-start: 0 !important;
}

.tft-slider-h1--italic {
    font-style: italic !important;
}

/* TFT-FIX: FINAL SURGICAL HORIZONTAL CENTRATION FOR HERO TEXT (2026 PRECISION) */

#view-home-1 .tft-slider-h1 {
    padding-inline: 0 !important;
    padding-inline-end: 0 !important;
    /* Explicitly nukes the 8vw gutter from line 8929/8973 */
    width: 100% !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

#view-home-1 .tft-slider-h1 .text-reveal-wrap {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    justify-content: center !important;
    text-align: center !important;
    overflow: visible !important;
}

#view-home-1 .tft-slider-h1--italic,
#view-home-1 .tft-slider-h1--bold {
    transform: none !important;
    /* Nukes translateX(12%) from line 3513/8934/8979 */
    margin-inline: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important;
    display: inline-block !important;
    width: auto !important;
    text-align: center !important;
}

/* TFT-FIX: PREMIUM ELITE MARQUEE (MAD 2026 EDITION) */

.tft-ribbon-plus {
    --tft-marquee-speed: 60s;
    --tft-accent: #d4f54c;
    position: relative;
    background: #0d2620;
    overflow: hidden;
}

.tft-ribbon-plus__scan {
    position: absolute;
    left: -100%;
    top: 0;
    width: 30%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(212, 245, 76, 0.08), transparent);
    animation: tftRibbonScanPlus 10s infinite linear;
    pointer-events: none;
    z-index: 1;
}

@keyframes tftRibbonScanPlus {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(400%);
    }
}

.tft-ribbon-plus__meta-wrap {
    position: absolute;
    top: 15px;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    pointer-events: none;
    opacity: 0.15;
    z-index: 5;
    white-space: nowrap;
}

.tft-ribbon-plus__meta-wrap--left {
    left: 40px;
}

.tft-ribbon-plus__meta-wrap--right {
    right: 40px;
    text-align: right;
    justify-content: flex-end;
}

.tft-meta-item {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 8px;
    letter-spacing: 0.5em;
    text-transform: uppercase;
}

.tft-meta-pill {
    padding: 1px 6px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    font-family: ui-monospace, monospace;
    font-size: 7px;
    font-weight: 700;
}

.tft-meta-pill--lime {
    border-color: var(--tft-accent);
    color: var(--tft-accent);
}

.tft-marquee-elite {
    width: 100%;
    overflow: hidden;
    padding: clamp(1rem, 3vw, 2rem) 0;
}

.tft-marquee-elite__inner {
    display: flex;
    width: max-content;
    animation: tftMarqueePlus var(--tft-marquee-speed) linear infinite;
    will-change: transform;
}

@keyframes tftMarqueePlus {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-33.333333%);
    }
}

.tft-marquee-elite__group {
    display: flex;
    align-items: center;
    gap: clamp(2.5rem, 6vw, 8rem);
    padding-right: clamp(2.5rem, 6vw, 8rem);
}

.tft-marquee-elite__word {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(3rem, 10vw, 10rem);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -0.06em;
    color: #fff;
    transition: color 0.4s var(--tft-ease), transform 0.4s var(--tft-ease);
    line-height: 1;
}

.tft-marquee-elite__word--serif {
    font-family: 'Space Grotesk', serif;
    /* Falling back to display font but keeping intent */
    font-style: italic;
    font-weight: 300;
    letter-spacing: -0.02em;
}

.tft-marquee-elite__word--outline {
    -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.15);
    color: transparent;
}

.tft-marquee-elite__word:hover {
    color: var(--tft-accent);
    transform: scale(1.02);
}

.tft-marquee-elite__word--outline:hover {
    -webkit-text-stroke-color: var(--tft-accent);
}

.tft-marquee-elite__icon {
    width: clamp(24px, 5vw, 60px);
    height: clamp(24px, 5vw, 60px);
    color: var(--tft-accent);
    opacity: 0.4;
    transition: opacity 0.4s ease, transform 0.8s ease;
}

.tft-marquee-elite__group:hover .tft-marquee-elite__icon {
    opacity: 1;
    transform: rotate(180deg);
}

@media (max-width: 768px) {
    .tft-ribbon-plus__meta-wrap {
        display: none;
    }
    .tft-marquee-elite {
        padding: 2rem 0;
    }
}

/* TFT-FIX: DARK PREMIUM STAT CARDS (REALIZ 2026) */

.tft-stat-card-new {
    background: #0c4232 !important;
    /* Requested Deep Green */
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1) !important;
}

.tft-stat-card-new__top,
.tft-stat-card-new__label {
    color: rgba(255, 255, 255, 0.4) !important;
}

.tft-stat-card-new__index {
    border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

.tft-stat-card-new__number {
    color: #d4f44e !important;
    text-shadow: 0 10px 40px rgba(212, 245, 76, 0.1) !important;
}

.tft-stat-card-new__line {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.2) 0%, transparent 100%) !important;
}

.tft-stat-card-new:hover {
    border-color: #d4f54c !important;
    background: #0d4d3a !important;
    /* Slightly lighter on hover */
    box-shadow: 0 40px 90px -20px rgba(0, 0, 0, 0.5) !important;
}

.tft-stat-card-new:hover .tft-stat-card-new__number {
    color: #d4f54c !important;
    transform: scale(1.08) !important;
}

.tft-stat-card-new:hover .tft-stat-card-new__line {
    background: #d4f54c !important;
}

.tft-stat-card-new:hover .tft-stat-card-new__top,
.tft-stat-card-new:hover .tft-stat-card-new__label {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* 1. Apply to the Body to protect your layout */

.tft-page-works-alt {
    background-color: #040d0c !important;
    background-image: /* LAYER 1 (TOP): The Grid Lines at 10% Opacity */
    linear-gradient(rgba(212, 245, 76, 0.1) 1.5px, transparent 1.5px), linear-gradient(90deg, rgba(212, 245, 76, 0.1) 1.5px, transparent 1.5px), /* LAYER 2 (MIDDLE): Your Favorite Emerald Glow */
    radial-gradient(circle at 25% 50%, #0a3d2e 0%, #071915 70%, transparent 100%), /* LAYER 3 (BOTTOM): The 50/50 Split (Left Greenish-Black / Right Pure Black) */
    linear-gradient(90deg, #051311 50%, #000000 50%) !important;
    /* Grid size 60px, Gradient fills the screen */
    background-size: 60px 60px, 60px 60px, 100% 100%, 100% 100% !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
}

/* 2. Keep the UI Transparent so the background shows through */

.split-container,
.left-panel,
.right-panel,
.project-item {
    background: transparent !important;
    border: none !important;
}

/* 3. Standard Scroll Behavior (No layout shifts) */

.left-panel {
    overflow-y: auto !important;
    scrollbar-width: none;
}

.left-panel::-webkit-scrollbar {
    display: none;
}

/* 5. Active Title Glow */

.project-item.active h2 {
    color: #d4f54c !important;
    text-shadow: 0 0 25px rgba(212, 245, 76, 0.4);
}

/* 6. Mobile Reset */

@media (max-width: 1024px) {
    .tft-page-works-alt {
        background: #000 !important;
    }
}

/* ---------------------------------------------------------
   Sovereign Elite: Triple Mobile Polish (2026)
   Fixes: About-Alt Line, Home-5 Scroll, Home-7 Button
   --------------------------------------------------------- */

@media (max-width: 1024px) {
    /* 1. Remove Vertical Lines in About-Alt timeline */
    .tft-page-about-alt .step-progress-line {
        display: none !important;
    }
    /* 2. Enable Home-5 Scrollability for small heights */
    .tft-page-home-5,
    .tft-page-home-5 body {
        height: auto !important;
        min-height: 100dvh !important;
        overflow-y: auto !important;
    }
    .tft-page-home-5 .absolute.left-0.md\:left-\[140px\] {
        position: relative !important;
        height: auto !important;
        min-height: 100vh !important;
        overflow: visible !important;
    }
    .tft-page-home-5 #view-home-5 {
        position: relative !important;
        height: auto !important;
        min-height: 100vh !important;
        display: block !important;
        overflow: visible !important;
    }
    /* 3. Shrink Home-7 Case Study Button */
    .tft-page-home-7 .tft-case-bubble.tft-h7-case {
        width: 105px !important;
        height: 105px !important;
        min-width: 105px !important;
        min-height: 105px !important;
        right: 15px !important;
        bottom: 80px !important;
        padding: 10px !important;
    }
    .tft-page-home-7 .tft-case-bubble.tft-h7-case span:first-child {
        font-size: 10px !important;
        text-align: center !important;
        display: block !important;
        width: 100% !important;
    }
    .tft-page-home-7 .tft-case-bubble.tft-h7-case span:last-child {
        font-size: 16px !important;
        text-align: center !important;
        display: block !important;
        width: 100% !important;
    }
}

/* ---------------------------------------------------------
   Sovereign Elite: Global Project Detail & Scroll Fix (2026)
   --------------------------------------------------------- */

@media (max-width: 1024px) {
    /* 1. Centering both HUD and Title on Project-Detail */
    .tft-page-project-detail .tft-hero .absolute.inset-0.flex {
        justify-content: flex-start !important;
        /* Push from top to allow HUD space */
        padding-top: 140px !important;
        text-align: center !important;
    }
    .tft-page-project-detail .tft-hero__hud {
        justify-content: center !important;
        top: 40px !important;
        text-align: center !important;
        flex-direction: column !important;
        gap: 10px !important;
    }
    .tft-page-project-detail .hud-path {
        display: none !important;
        /* Kill the long decorative line that overlaps title */
    }
    .tft-page-project-detail .tft-title-elite {
        align-items: center !important;
    }
    .tft-page-project-detail .title-base {
        font-size: clamp(40px, 12vw, 80px) !important;
        /* Scale down for mobile clarity */
        line-height: 1 !important;
    }
    /* 2. Full Row Images for Project Gallery */
    .tft-page-project-detail .tft-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
    }
    .tft-page-project-detail .grid-item-mid-l,
    .tft-page-project-detail .grid-item-mid-r {
        width: 100% !important;
        grid-column: span 12 !important;
        padding-bottom: 0 !important;
    }
    /* 3. Consolidate Home-5 Scroll (Remove 2 scrollbars) */
    .tft-page-home-5 main#view-home-5,
    .tft-page-home-5 .w-full.md\:w-1\/2.flex.relative {
        overflow: visible !important;
        height: auto !important;
    }
    .tft-page-home-5 #h5-list {
        height: auto !important;
        overflow: visible !important;
    }
}

/* --- ABOUT-ALT MOBILE REFINEMENTS (2026 SOVEREIGN ELITE) --- */

@media (max-width: 1024px) {
    .tft-page-about-alt .capability-card {
        aspect-ratio: auto !important;
        min-height: clamp(400px, 100vw, 550px) !important;
        padding: clamp(2.5rem, 6vw, 3.5rem) !important;
        justify-content: flex-start !important;
        gap: 2.5rem !important;
    }
    .tft-page-about-alt .capability-card h3 {
        font-size: clamp(2.2rem, 9vw, 3rem) !important;
        margin-top: 1rem !important;
    }
    .tft-page-about-alt .capability-card p {
        font-size: 1rem !important;
        line-height: 1.6 !important;
    }
}

/* --- HOME-4 TABLET SCROLL ENFORCEMENT (2026 SOVEREIGN ELITE) --- */

@media (max-width: 1024px) {
    .tft-page-home-4,
    .tft-page-home-4 body {
        overflow-y: auto !important;
        height: auto !important;
    }
    @media (min-width: 768px) {
        .tft-page-home-4 div.absolute.z-10 {
            margin-top: 0 !important;
            padding-top: 0 !important;
            margin-left: 140px !important;
            width: calc(100% - 140px) !important;
            position: relative !important;
            height: auto !important;
            min-height: 100dvh !important;
            overflow: visible !important;
        }
    }
}

/* --- SOVEREIGN ELITE 2026: RESPONSIVE REFINEMENTS --- */

/* 1. Stop Typography Overflow on Split Layouts (Works-Alt) */
.tft-page-works-alt .project-item h2 {
    font-size: clamp(40px, 7.2vw, 130px) !important;
}

/* 2. Global Mobile Logo Safespace */
@media (max-width: 1024px) {
    header a.flex.items-center:first-child img {
        margin-left: 20px !important;
    }
}

/* 3. Portfolio Hover Enforcement & Narrow Mobile Spacing Constraints (Works) */
.tft-page-works .tft-card {
    pointer-events: auto !important;
}
.tft-page-works .tft-card__link {
    pointer-events: auto !important;
    z-index: 50 !important;
    cursor: pointer !important;
}

@media (max-width: 480px) {
    .tft-page-works section.px-8 {
        padding-right: 2rem !important;
        box-sizing: border-box !important;
    }
    .tft-page-works .tft-elite-grid {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* 4. Sovereign Blueprint: Home-2 Short Viewport Clipping Protection */
@media (max-height: 750px) {
    .tft-page-home-2 .tft-h2-vanguard__title {
        font-size: clamp(35px, 7vh, 90px) !important;
    }
    .tft-page-home-2 .tft-h2-vanguard__frame {
        max-height: 40vh !important;
        aspect-ratio: 1.2 / 1 !important; /* Flattened for short viewports */
    }
    .tft-page-home-2 .tft-h2-vanguard__content {
        gap: 1.5rem !important;
        padding-top: 5vh !important;
    }
}

/* 5. Home-4 Massive Top Gap Fix (Aggressive Anchor) */
@media (max-width: 768px) {
    .tft-page-home-4 .tft-inline-18 {
        background-position: center bottom !important;
        background-size: 150% !important; /* Forces the visual core of the asset to scale up, destroying the dark ceiling */
    }
}

/* 6. Sovereign Blueprint: Home-2 Vanguard Responsive Grid Centralization */
@media (max-width: 1024px) {
    .tft-page-home-2 .tft-h2-vanguard__content {
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
        gap: 2rem !important;
        padding-top: 8vh !important;
    }
    .tft-page-home-2 .tft-h2-vanguard__info,
    .tft-page-home-2 .tft-h2-vanguard__media {
        width: 100% !important;
        max-width: 100% !important;
    }
    .tft-page-home-2 .tft-h2-vanguard__frame {
        margin: 0 auto !important;
        max-width: 400px !important;
        width: 100% !important;
        aspect-ratio: 1 / 1 !important;
    }
    .tft-page-home-2 .tft-h2-vanguard__kicker-box {
        justify-content: center !important;
    }
    .tft-page-home-2 .tft-h2-vanguard__kicker-line {
        display: none !important;
    }
}

/* 7. Sovereign Blueprint: About-V2 Timeline Milestone Stacking */
@media (max-width: 768px) {
    .tft-milestone, 
    .tft-milestone--reverse {
        flex-direction: column !important;
        text-align: center !important;
        gap: 2rem !important;
        margin-bottom: 80px !important;
    }
    .tft-milestone__content,
    .tft-milestone__year-side {
        width: 100% !important;
        padding: 0 !important;
    }
    .tft-milestone__content.text-right {
        text-align: center !important;
    }
    .tft-milestone__year-side.text-left,
    .tft-milestone__year-side.text-right {
        text-align: center !important;
    }
    .tft-milestone-marker {
        display: none !important; /* Hide marker on mobile to simplify layout */
    }
}