/* ============================================================================
   TOKENS / CSS VARIABLES
   ============================================================================ */

:root {
    --wrapper-top-pad: 20px;
    --wrapper-top-pad-transfom: calc(var(--wrapper-top-pad) * -2);

    --wrapper-top-pad-mobile: 20px;
    --wrapper-top-pad-transfom-mobile: calc(var(--wrapper-top-pad-mobile) * -2);

    --gap: 2em;
    --section-padding: calc(3.5em + (var(--gap) * 2));
    --container-padding: 2em;

    --size-unit: 16; /* body font-size in design - no px */
    --size-container-ideal: 1440; /* screen-size in design - no px */
    --size-container-min: 992px;
    --size-container-max: 1920px;
    --size-container: clamp(var(--size-container-min), 100vw, var(--size-container-max));
    --size-font: calc(var(--size-container) / (var(--size-container-ideal) / var(--size-unit)));
}

/* ============================================================================
   RESPONSIVE TOKENS
   ============================================================================ */

@media screen and (max-width: 991px) {
    :root {
        --container-padding: 1.5em;

        /* Tablet sizing system */
        --size-container-ideal: 834;
        --size-container-min: 768px;
        --size-container-max: 991px;
    }
}

/* Mobile Landscape */
@media screen and (max-width: 767px) {
    :root {
        --container-padding: 1em;
        --section-padding: calc(var(--gap) * 2);

        /* Mobile sizing system */
        --size-container-ideal: 390;
        --size-container-min: 480px;
        --size-container-max: 767px;
    }
}

/* Mobile Portrait */
@media screen and (max-width: 479px) {
    :root {
        --size-container-ideal: 440;
        --size-container-min: 0px;
        --size-container-max: 479px;
    }
}

/* ============================================================================
   BASE / RESET / SCROLLBAR
   ============================================================================ */

html, body {
    height: 100%;
    min-height: 100%;
}

html,
body {
    -webkit-font-smoothing: antialiased;
}

/* Hide Scrollbar */
body ::-webkit-scrollbar,
body::-webkit-scrollbar {
    display: none;
}

/* IE & Edge */
body {
    -ms-overflow-style: none;
}

/* Firefox */
html {
    scrollbar-width: none;
}

/* ============================================================================
   LAYOUT WRAPPERS / CONTAINERS
   ============================================================================ */

.inner-wrapper {
    overflow: hidden;
}

/* Horizontal text animation container */
.horisontal-container {
    z-index: 1;
    max-width: var(--size-container);
    padding-left: var(--container-padding);
    padding-right: calc(var(--container-padding) + 2vw);
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    padding-block: 8rem;
}

.horisontal-text-animation .horisontal-container {
    height: 100vh;
    margin: -100vh 0;
    position: relative;
    display: flex;
    align-items: center;
}

.horisontal-text-animation .horisontal-container .horisontal-text {
    color: #ffffff;
    white-space: nowrap;
    font-size: 228px;
    line-height: 1;
    font-weight: 500;
    font-family: "Clash Grotesk", Sans-serif;
    padding: 0 101vw;
    letter-spacing: -0.025em;
    width: max-content;
}

@media screen and (max-width: 1450px) {
    .horisontal-text-animation .horisontal-container .horisontal-text {
        font-size: 180px;
    }
}

@media screen and (min-width: 1550px) {
    .horisontal-text-animation .horisontal-container .horisontal-text {
        font-size: 250px;
    }
}

/* ============================================================================
   HOVER / UNDERLINE / MICRO-INTERACTIONS
   ============================================================================ */

.fill-container {
    position: relative;
    overflow: hidden !important;
    cursor: pointer;
    transition: color 0.5s ease-in-out !important;
}

.gradient-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #ffffff;
    transform: translateY(100%);
    z-index: -1;
}

.fill-container .fill-text h2 {
    transition: color 0.5s ease-in-out !important;
    opacity: 1;
}

.fill-container.active .fill-text h2 {
    color: #040202 !important;
    opacity: 1;
}

.animated-container {
    display: inline-block;
    position: relative;
    cursor: pointer;
}

.animated-t h2,
.animated-t span {
    transition: color 0.3s ease-in-out;
    cursor: pointer;
    display: inline-block;
    white-space: nowrap;
}

.underline-effect {
    position: relative;
    display: inline-block;
    cursor: pointer;
    overflow: hidden;
}

.underline-effect::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background-color: #fff;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease-out;
}

/* Lift hover */
.transform-animate {
    transform: translate(0px, 0px);
    transition: all .5s ease;
}
.transform-animate:hover {
    transform: translate(0px, -5px);
}

/* Underline hover */
.underline-animate {
    transition: all .5s ease;
}
.underline-animate::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    height: 3px;
    width: 0;
    background-color: #ffffff;
    transition: width 0.5s ease;
}
.underline-animate:hover::after {
    width: 100%;
}

/* ============================================================================
   IMAGE / MASK / VISUAL STACK
   ============================================================================ */

.g_visual_wrap {
    position: relative;
    display: grid;
    grid-template-areas: "stack";
}
.g_visual_wrap > * {
    grid-area: stack;
}
.g_visual_wrap img {
    display: block;
    width: 100%;
    height: auto;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
.g_visual_wrap .mask {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    will-change: clip-path, opacity, transform;
    z-index: 1;
}

/* ============================================================================
   BODY / WRAPPER ACTIVE STATE (layout transform)
   ============================================================================ */

body {
    transition: all .5s ease;
}

body.active {
    padding-left: 20px;
    padding-right: 20px;
    padding-top: var(--wrapper-top-pad);
    background-color: #d8f900 !important;
    overflow: auto;
}

.wrapper_padding {
    position: fixed;
    z-index: 20;
    transition: all .5s ease;
    opacity: 0;
    height: var(--wrapper-top-pad);
    top: var(--wrapper-top-pad);
    left: 0;
    background-color: #d8f900;
    transform: translate(0px, var(--wrapper-top-pad-transfom)) scale(1.2, 1.2);
    width: calc(100vw - 40px);
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

.wrapper_padding.active {
    opacity: 1;
    top: 0;
    transform: translate(0px, 0px);
    padding-left: 20px;
    padding-right: 20px;
}

.wrapper_padding svg {
    margin-bottom: -32px;
}

.bash_wrapper {
    border-radius: 33px 33px 0 0;
    position: relative;
    transition: all .5s ease;
}

/* ============================================================================
   HEADER (SMART HEADER) + MOBILE RULES
   ============================================================================ */

@media (max-width: 767px) {
    body.active {
        padding-left: 0px;
        padding-right: 0px;
        padding-top: 0px;
        background-color: #d8f900 !important;
        overflow: auto;
    }

    .bash_wrapper {
        border-radius: 0;
    }

    .wrapper_padding {
        display: none;
        position: absolute;
        height: var(--wrapper-top-pad-mobile);
        top: var(--wrapper-top-pad-mobile);
        transform: translate(0px, var(--wrapper-top-pad-transfom-mobile)) scale(1, 1);
    }

    .wrapper_padding.active {
        padding-left: 10px;
        padding-right: 10px;
    }

    .smart-header {
        backdrop-filter: blur(0);
    }

    .mobile-menu-wrapper {
        opacity: 0;
        transition: all .5s ease;
    }
    .mobile-menu-wrapper.active {
        opacity: 1;
    }

    .h-text-opacity {
        opacity: 0;
        display: none;
        transform: translateY(-250%);
        transition: all 0.3s ease;
    }
}

.smart-header.active {
    backdrop-filter: blur(0);
}

.smart-header.active .text-change h2 {
    color: #040202 !important;
}
.smart-header.active .text-change span {
    color: #ffffff !important;
}
.smart-header.active .underline-animate::after {
    background-color: #040202;
}

.h-text-opacity {
    opacity: 0;
    transform: translateY(-100%);
    transition: all 0.3s ease;
}

.smart-header.active .h-text-opacity {
    opacity: 1;
    display: flex;
    transform: translateY(0);
    transition: all 1s ease 0.3s;
}

/* ============================================================================
   REVEAL ANIMATIONS (TEXT + SVG)
   ============================================================================ */

/* Start hidden for reveal text blocks */
.char-text-reveal,
.word-text-reveal,
.line-w-text-reveal .reveal-lines {
    overflow: hidden;
    opacity: 0;
}

/* Unified ready state (JS toggles .reveal-ready) */
.reveal-ready {
    opacity: 1;
}

/* Normalize Elementor nested wrappers inside reveal-lines */
.reveal-lines .elementor-widget-container {
    display: block !important;
    position: static !important;
}
.reveal-lines .elementor-heading-title {
    display: block !important;
    white-space: normal !important;
    width: 100% !important;
}
.reveal-lines .tline {
    display: block;
    overflow: hidden;
}

/* Char / word / line initial transforms */
.char-text-reveal .char {
    transform: translateY(100px);
    transition: transform .5s;
    opacity: 0;
}

.word-text-reveal .word {
    will-change: transform;
    transform: translateY(400px);
    transition: transform .5s;
}

.line-w-text-reveal {
    display: block;
}
.line-w-text-reveal .line {
    will-change: transform;
    display: inline-block !important;
    overflow: hidden;
}
.line-w-text-reveal .word {
    opacity: 0;
    display: inline-block;
    transform: translateY(100px);
    transition: transform .5s;
    will-change: transform;
}

.only-line-text-reveal .line {
    display: inline-block;
    overflow: hidden;
}

/* SVG reveal initial state (when not ready) */
.reveal-svg:not(.reveal-ready) {
    opacity: 0 !important;
    transform: translateY(16px) scale(0.95);
}

/* Global not-ready state for reveal blocks */
.char-text-reveal:not(.reveal-ready),
.word-text-reveal:not(.reveal-ready),
.line-w-text-reveal:not(.reveal-ready),
.reveal-lines:not(.reveal-ready) {
    opacity: 0;
    will-change: opacity;
}

/* ============================================================================
   UNDERLINE STATES (ACTIVE)
   ============================================================================ */

.conteiner-underline-animate,
.header-underline-animate {
    position: relative;
    transition: all .5s ease;
}

.conteiner-underline-animate::after,
.header-underline-animate::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    height: 1px;
    width: 0;
    background-color: #ffffff;
    transition: width 0.5s ease;
}

.conteiner-underline-animate.active::after,
.header-underline-animate.active::after {
    width: 100%;
}

/* ============================================================================
   TYPO / OPACITY UTILS
   ============================================================================ */

.p-word-opacity {
    opacity: 0.7;
}
.footer-title {
    opacity: 0.5;
}
.half-opacity {
    opacity: 0.5;
}
.m-left {
    margin-left: 150px
}

@media screen and (max-width: 768px) {
    .m-left {
        margin-left: 100px;
    }
}

/* Card underline special case */
.overflow-card .conteiner-underline-animate::after {
    bottom: -50px;
    background-color: #040202;
}
@media screen and (max-width: 768px) {
    .overflow-card .conteiner-underline-animate::after {
        bottom: -10px;
    }
}

/* ============================================================================
   ACCORDION / FAQ
   ============================================================================ */

.accordion-item {
    transition: .5s;
}

.accordion-heading {
    cursor: pointer;
    transition: background-color 0.7s ease;
}
.accordion-heading h2 {
    transition: background-color 0.7s ease;
}

.arrow {
    transition: transform 0.3s ease;
}

.accordion-answer {
    overflow: hidden;
    height: 0;
    padding: 0 50px 0 10px;
}

@media only screen and (max-width: 600px) {
    .accordion-answer {
        padding: 0 20px 0 0px;
    }
}

.accordion-item.active {
    transition: ease 0.7s;
    background-color: #ffffff !important;
}

.accordion-item.active .accordion-heading h2 {
    transition: ease 0.7s;
}

/* ============================================================================
   TEST MENU (height animation)
   ============================================================================ */

.test-menu {
    height: 80px !important;
    overflow: hidden;
    transition: all .5s ease;
    will-change: height;
}

.test-menu.open {
    height: calc(100vh - 80px);
}

/* ============================================================================
   NAVBAR / OVERLAY (fixed bottom menu)
   ============================================================================ */

.navbar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    opacity: 0;
    pointer-events: none;
    z-index: 400;
    transition: opacity 0.3s ease;
}

.navbar-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

/* Navbar shell */
.navbar {
    font-family: "ClashGrotesk-Variable", Sans-serif;
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translate(-50%, 50px);
    width: 800px;
    background: #1e1e1e;
    border-radius: 20px;
    color: white;
    overflow: hidden;
    z-index: 500;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    opacity: 0;
    pointer-events: none;
    transition: none;
}

.navbar.ready {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* Header */
.navbar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 60px 0 20px;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    height: 50px;
}

.navbar-header-content {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 10px;
    justify-content: space-between;
}

.navbar-logo a {
    color: white;
    text-decoration: none;
    font-weight: bold;
}

.navbar-logo img {
    width: 90px;
    height: auto;
}

.navbar-page {
    background: white;
    color: #111;
    padding: 5px 15px;
    border-radius: 15px;
    font-size: 14px;
}

/* Socials */
.navbar-socials {
    display: none;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    padding: 15px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    width: auto;
}

.navbar-socials a {
    color: white;
    z-index: 901;
    font-size: 14px;
}

/* Trigger layer */
.navbar-header-trigger {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(50px);
    width: 800px;
    height: 50px;
    cursor: pointer;
    z-index: 900;
    opacity: 0;
    pointer-events: none;
    transition: none;
}

@media (max-width: 768px) {
    .navbar,
    .navbar-header-trigger {
        width: calc(100vw - 60px);
    }
}

.navbar-header-trigger.ready {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

.navbar-toggle {
    color: #ffffff;
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 22px;
    font-weight: bold;
}

/* Menu */
.navbar-menu {
    pointer-events: none;
    padding: 20px;
    flex-grow: 1;
    overflow: hidden;
}

.navbar-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.navbar-menu li {
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 30px;
    opacity: 0;
    transform: translateY(20px);
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: flex-start;
    gap: 20px;
}

.navbar-menu a {
    text-decoration: none;
    color: #ffffff;
}

.navbar.open .navbar-menu {
    pointer-events: auto;
}

/* Inside submenu */
.menu-inside {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
}

.menu-inside a {
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 25px;
    opacity: 0;
    transform: translateY(20px);
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: flex-start;
    gap: 20px;
}

.image-inside {
    overflow: hidden;
    width: 100px;
    height: 60px;
}
.image-inside img {
    width: 100px;
    height: 60px;
    transform: scale(1);
    transition: transform .5s ease;
    object-fit: cover;
}
.menu-inside a:hover img {
    transform: scale(1.2);
}

/* Menu top area */
.menu-top {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    padding-bottom: 50px;
}

.menu-top img {
    width: 80px;
    height: auto;
}

.menu-top .left-side {
    font-size: 25px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.talk-btn {
    padding: 5px 15px;
    font-size: 15px;
    background-color: #ffffff;
    border-radius: 999px;
    color: #040202 !important;
}

/* ============================================================================
   OVERLAP SECTIONS (scroll / stacking)
   ============================================================================ */

.overlap {
    position: relative;
    min-height: 100vh;
    width: 100%;
    z-index: 1;
    will-change: transform;
    transition: initial !important;
}

.overlap + .overlap {
    margin-top: 0vh;
}

.overlap-wrap-auto {
    position: relative;
    width: 100%;
    transition: initial !important;
}