/* =============== PAGE =============== */
.page {
    padding-top: 20px;
    background-color: #131313;
}

.page * {
    color: var(--white);
}

/* =============== MAIN BANNER =============== */
.main_sec {
    margin-bottom: 100px;
}

.banner {
    width: 100%;
    max-width: 100%;
    aspect-ratio: 16 / 9;
    background-color: var(--gray-400);
    overflow: hidden;
    position: relative;
    transition: max-width 0.8s cubic-bezier(0.25, 1, 0.5, 1), border-radius 0.8s ease;
    margin: 0 auto;
}

.banner.shrink {
    max-width: var(--container-md);
    border-radius: 24px;
}

@media all and (max-width: 1800px) {
    .banner.shrink {
        max-width: calc(100% - 120px);
    }
}

@media all and (max-width: 1200px) {
    .banner.shrink {
        max-width: calc(100% - 80px);
    }
}

@media all and (max-width: 768px) {
    .banner.shrink {
        max-width: calc(100% - 40px);
        border-radius: 16px;
    }
}

.banner iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    border: none;
    pointer-events: none;
}

.banner::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background-color: var(--black-300);
    position: absolute;
    top: 0;
    left: 0;
}

.banner video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.banner figure {
    width: 100%;
    height: 100%;
}

/* =============== ITEM SECTIONS =============== */
.item_sec {
    margin-bottom: var(--sec-gap);
}

.sec_h {
    margin-bottom: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sec_title a {
    display: flex;
    align-items: center;
    gap: 16px;
}

.sec_name {
    font-size: var(--ft32);
    font-weight: var(--semi-bold);
}

.btn_cir {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all .4s ease;
}

.btn_cir i {
    font-size: 14px;
    color: #ffffff !important;
    transition: transform .4s ease;
}

/* Global Icons Color Support all white Node */
.sns_icon i,
.sub_box_icon i,
.btn_link i,
.item_profile i,
.business_icon i,
.quick_close i,
.top_btn i,
.file_down i {
    color: #ffffff !important;
}

.sec_title:hover .btn_cir {
    background-color: var(--white-300);
}

.sec_title:hover .btn_cir i {
    transform: rotate(-45deg);
}

/* instagram */
.instargram {
    display: flex;
    align-items: center;
    gap: 16px;
}

.instargram p {
    font-size: var(--ft14);
    font-weight: var(--semi-bold);
}

.instar_btn {
    border-radius: 40px;
    background-color: var(--white-100);
}

.instar_btn a {
    padding: 8px 16px 8px 8px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.instar_btn img {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: var(--white);
}

.instar_btn p {
    font-size: var(--ft16);
}

/* -- item_box -- */
.item_box {
    position: relative;
    cursor: pointer;
    transition: transform .4s ease;
}

.item_box:hover {
    transform: translateY(-24px);
}

.item_img {
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-bottom: 16px;
    background-color: var(--gray-500);
}

.item_profile {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.item_profile img {
    width: 20px;
    height: 20px;
    border-radius: 4px;
}

.item_profile p {
    font-size: var(--ft14);
    font-weight: var(--medium);
}

.item_name {
    font-size: var(--ft16);
    font-weight: var(--medium);
    margin-bottom: 10px;
}

.item_tag {
    width: 100%;
    display: flex;
    gap: 6px;
    overflow: hidden;
    position: relative;
}

.item_tag li {
    padding: 4px 10px;
    border-radius: 20px;
    background-color: var(--white-50);
    color: var(--white-700);
    font-size: var(--ft12);
    white-space: nowrap;
    flex-shrink: 0;
}

.item_tag::after {
    content: '';
    display: block;
    width: 50px;
    height: 100%;
    background: linear-gradient(270deg, #131313 0%, rgba(19, 19, 19, 0.00) 100%);
    position: absolute;
    top: 0;
    right: 0;
}

.portfolio .item_profile {
    margin-bottom: 18px;
}

/* -- Web/App Full Width Glass Cards Grid -- */
.portfolio_full_sec {
    width: 100%;
}

.portfolio_grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    /* Gutters for floating cards */
    padding: 0 40px;
    /* Outer frame buffers */
}

.portfolio_grid .item_box {
    width: 100%;
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    background-color: var(--gray-900);
    margin-bottom: 0px !important;
    /* Continuous tile lists */
}

.portfolio_grid .item_img {
    margin-bottom: 0;
    aspect-ratio: 4 / 3;
    border-radius: 0;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.portfolio_grid .item_box:hover .item_img {
    transform: scale(1.08);
    /* Sophisticated Zoom on over */
}

.portfolio_grid .item_box:hover {
    transform: none;
    /* Override standard global translate bounds */
}

.portfolio_grid .card_info {
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: 20px;
    z-index: 5;
    padding: 20px;
    border-radius: 16px;
    background: rgba(10, 10, 10, 0.4);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    gap: 12px;
    /* Smooth reveal transitions */
    transform: translateY(10px);
    opacity: 0;
    transition: all 0.4s ease;
}

.portfolio_grid .item_box:hover .card_info {
    transform: translateY(0);
    opacity: 1;
}

.portfolio_grid .item_profile {
    margin-bottom: 0;
}

.portfolio_grid .item_profile p {
    font-size: var(--ft16);
    font-weight: var(--semi-bold);
    color: var(--white);
}

.portfolio_grid .item_tag {
    background: transparent;
}

.portfolio_grid .item_tag::after {
    display: none;
}

.portfolio_grid .item_tag li {
    background-color: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--white-800);
}

/* -- Insight Grid -- */
.insight_grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    padding-top: 20px; /* Leaves headroom for item hover TranslateY Node Specialists */
    margin-top: -20px;
}

.insight_grid .item_box {
    position: relative;
    /* Constrain absolute-positioned profile badges */
    width: 100%;
    margin-bottom: 0px !important;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 24px;
    padding: 24px;
    transition: all 0.4s ease;
}

.insight_grid .item_box:hover {
    transform: translateY(-12px);
    background: rgba(255, 255, 255, 0.04);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
    border-color: rgba(255, 255, 255, 0.1);
}

.insight_grid .item_img {
    aspect-ratio: 1 / 1;
    border-radius: 16px;
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
}

.insight_grid .item_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Fit securely without stretching weights */
}

/* 5. Thumbnail Card Overlay & Hover Effects (Global) */
.insight_grid .img_overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.8) 100%);
    z-index: 2;
    transition: all 0.3s ease;
}

.insight_grid .item_box:hover .img_overlay {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.9) 100%);
}

.insight_grid .img_content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    transition: transform 0.3s ease;
}

.insight_grid .img_content .item_profile {
    position: static !important; /* Reset existing absolute badge */
    background: var(--primary) !important;
    padding: 5px 10px !important;
    border-radius: 6px !important;
    font-size: 11px !important;
    color: var(--white) !important;
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
}

.insight_grid .img_content .item_name {
    margin-bottom: 0 !important;
    font-size: 18px !important;
    color: var(--white) !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    word-break: keep-all;
}

.insight_grid .item_desc {
    margin-top: 16px;
    margin-bottom: 20px !important; /* Add space beneath description before hashtags */
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
    line-height: 1.6;
}

@media all and (max-width: 1024px) {
    .insight_grid .item_img {
        display: block !important;
        aspect-ratio: auto !important;
        height: auto !important;
        overflow: visible !important;
        background-color: transparent !important;
        position: relative !important;
    }

    .insight_grid .item_img img {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 1 / 1 !important;
        border-radius: var(--radius-md) !important;
    }

    .insight_grid .img_content {
        position: static !important;
        padding: 8px 4px 0 !important;
    }

    .insight_grid .item_desc {
        display: none !important;
    }
    
    .insight_grid .img_overlay {
        display: none !important;
    }

    .insight_grid .item_box .img_content .item_profile,
    body.insights_page .insight_grid .item_box .img_content .item_profile {
        position: absolute !important;
        top: 12px !important;
        left: 12px !important;
        z-index: 100 !important;
    }

    .insight_grid .img_content .item_name {
        font-size: 15px !important;
        color: var(--white) !important;
        margin-bottom: 4px !important;
    }
}

/* Floating Category Sticker Badge Overlay (Fallback/Original) */
.insight_grid .item_profile {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 5;
    background: var(--primary);
    padding: 6px 12px;
    border-radius: 8px;
    gap: 4px;
    margin-bottom: 0 !important;
}

.insight_grid .item_profile img {
    width: 14px;
    height: 14px;
    filter: brightness(0) invert(1);
}

.insight_grid .item_name {
    font-size: var(--ft18);
    font-weight: var(--semi-bold);
    color: var(--white);
    margin-bottom: 16px;
    line-height: 1.5;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.insight_grid .item_tag {
    background: transparent;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    flex-wrap: wrap;
    position: static;
    /* Overriding default absolute */
}

.insight_grid .item_tag::after {
    display: none;
    /* Disable fade masks */
}

.insight_grid .item_tag li {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: var(--white-700);
}

/* =============== BUSINESS SECTION =============== */
.business_swiper {
    width: 100%;
    overflow: hidden;
}

.business_box {
    width: 100%;
    height: auto;
    padding-right: 120px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--white-100);
    background-color: var(--white-50);
    display: flex;
    justify-content: space-between;
    position: relative;
}

.business_l {
    padding: 80px;
}

.business_eng {
    width: fit-content;
    padding: 6px 12px;
    border-radius: var(--radius-md);
    background-color: var(--white-100);
    font-size: var(--ft14);
    font-weight: var(--semi-bold);
    color: var(--white);
}

.business_title {
    margin: 32px 0;
    font-size: var(--ft40);
    font-weight: var(--semi-bold);
}

.business_text {
    font-size: var(--ft20);
    font-weight: var(--medium);
}

.business_box .btn {
    margin-top: 40px;
}



/* floating elements */
.element {
    position: absolute;
}

.element_1 {
    width: 120px;
    left: -5%;
    top: 20%;
    animation: element_web 1.6s infinite alternate;
}

.element_2 {
    width: 70px;
    right: -5%;
    bottom: 20%;
    animation: element_web 1.6s .3s infinite alternate;
}

@keyframes element_web {
    to {
        transform: translateY(20px);
    }
}

.element_3 {
    width: 80px;
    left: 0;
    top: 30%;
    opacity: 0;
    animation: element_branding 1s .05s infinite alternate;
}

.element_4 {
    width: 80px;
    left: 10%;
    top: 14%;
    opacity: 0;
    animation: element_branding 1s .1s infinite alternate;
}

.element_5 {
    width: 80px;
    right: 10%;
    top: 14%;
    opacity: 0;
    animation: element_branding 1s .15s infinite alternate;
}

.element_6 {
    width: 80px;
    right: 0;
    top: 30%;
    opacity: 0;
    animation: element_branding 1s .2s infinite alternate;
}

@keyframes element_branding {
    to {
        opacity: 1;
    }
}

.element_7 {
    width: 100px;
    top: 16%;
    left: 0;
    animation: element_ad 2s infinite;
}

.element_8 {
    width: 60px;
    right: -5%;
    top: 30%;
    animation: element_ad 2s infinite;
}

@keyframes element_ad {
    0% {
        opacity: 0;
        transform: translateY(0px);
    }

    30% {
        opacity: 1;
    }

    70% {
        opacity: 1;
    }

    100% {
        transform: translateY(-30px);
        opacity: 0;
    }
}

.element_9 {
    width: 120px;
    top: 0;
    left: 31%;
    animation: element_fran 1.5s infinite alternate;
}

.element_10 {
    width: 70px;
    top: 14%;
    right: -4%;
    animation: element_fran 1.5s .2s infinite alternate;
}

.element_11 {
    width: 160px;
    top: -5%;
    right: 20%;
    animation: element_fran 1.5s .15s infinite alternate;
}

.element_12 {
    width: 70px;
    top: 10%;
    left: 0;
    animation: element_fran 1.5s .1s infinite alternate;
}

@keyframes element_fran {
    to {
        transform: translateY(13px);
    }
}

/* -- business_pagination -- */
.business_pagination {
    margin-top: 40px;
    margin-bottom: 32px;
    /* 간격 추가 */
    display: flex;
    background-color: var(--white-50);
    border-radius: 50px;
    border: 1px solid var(--white-100);
    padding: 8px;
    position: relative;
    gap: 0px;
}

.business_btn {
    flex: 1;
    padding: 16px 24px;
    border-radius: 40px;
    background-color: transparent !important;
    border: none !important;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    cursor: pointer;
    position: relative;
    z-index: 2;
    transition: color 0.4s ease;
}

.business_btn p {
    font-size: var(--ft18);
    font-weight: var(--semi-bold);
    color: var(--white);
    transition: color 0.4s ease;
}

.business_icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    background-color: var(--white-50);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 1;
    transition: background 0.4s ease;
}

.business_icon img {
    width: 20px;
    height: 20px;
}

.business_tab_slider {
    position: absolute;
    top: 8px;
    bottom: 8px;
    left: 8px;
    width: calc((100% - 16px) / 4);
    background-color: var(--primary);
    /* Slider color setup Orange site tone */
    border-radius: 40px;
    z-index: 1;
    box-shadow: 0 4px 12px rgba(235, 73, 11, 0.3);
    /* Dynamic glow shadows proportionals */
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.timeline {
    display: none;
    /* Deactivate previous timeline liquid fill overlays */
}

/* =============== CONTACT SECTION =============== */
.contact_sec {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
    gap: 40px;
}

.contact_sec .map {
    width: 100%;
    height: 450px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background-color: var(--gray-500);
}

.contact_r {
    padding-left: 60px;
}

.contact_title {
    font-size: var(--ft32);
    margin-bottom: 32px;
}

.contact_list {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.contact_list li {
    display: flex;
    align-items: center;
    gap: 24px;
}

.contact_list p.bold {
    width: 45px;
    font-weight: var(--medium);
}

.contact_list a {
    width: fit-content;
    color: var(--white-800);
}

.btn_list {
    margin-top: 50px;
    display: flex;
    gap: 18px;
}

/* -- business_link -- */
.business_link {
    margin-top: 80px; /* Section break */
    margin-bottom: 0px !important; /* Continuous into Footer Node Node */
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0px;
}

.link_box {
    width: 100%;
    background-color: var(--white-50);
    border: 1px solid var(--white-100);
    border-left: none;
    border-right: none;
    border-bottom: none;
    border-radius: 0; /* Ribbon setup Nodes */
    transition: background .3s ease;
}

.link_box:hover {
    background-color: var(--white-100);
}

.link_box a {
    padding: 40px 60px 40px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.link_text {
    font-size: var(--ft16);
    font-weight: var(--medium);
    margin-bottom: 12px;
}

.link_title {
    font-size: var(--ft22);
    font-weight: var(--semi-bold);
}

.link_icon {
    width: 100px;
    height: 100px;
    flex-shrink: 0;
}

/* =============== RESPONSIVE =============== */
@media all and (max-width: 1600px) {
    .business_box {
        padding-right: 80px;
    }



    .element_3,
    .element_4,
    .element_5,
    .element_6 {
        width: 60px;
    }
}

@media all and (max-width: 1400px) {
    .sec_name {
        font-size: var(--ft28);
    }

    .btn_cir {
        width: 28px;
        height: 28px;
    }

    .btn_cir::before {
        width: 16px;
        height: 16px;
    }

    .business_l {
        padding: 60px;
    }

    .business_title {
        font-size: var(--ft32);
    }

    .business_text {
        font-size: var(--ft18);
    }



    .element_1 {
        width: 100px;
    }

    .element_2 {
        width: 50px;
    }

    .business_icon {
        width: 32px;
        height: 32px;
    }

    .business_icon img {
        width: 16px;
        height: 16px;
    }

    .business_btn p {
        font-size: var(--ft18);
    }

    .contact_r {
        padding-left: 40px;
    }

    .contact_title {
        font-size: var(--ft28);
    }

    .business_link {
        grid-template-columns: repeat(1, 1fr);
        gap: 0px;
    }

    .link_title {
        font-size: var(--ft20);
    }

    .link_icon {
        width: 60px;
        height: 60px;
    }
}

@media all and (max-width: 1200px) {
    .business_l {
        padding: 40px;
    }

    .business_title {
        margin: 24px 0;
        font-size: var(--ft28);
    }

    .business_text {
        font-size: var(--ft16);
    }



    .element_1 {
        width: 70px;
    }

    .element_2 {
        width: 32px;
        right: -8%;
    }

    .element_3,
    .element_4,
    .element_5,
    .element_6 {
        width: 40px;
    }

    .element_7 {
        width: 70px;
    }

    .element_8 {
        width: 40px;
    }

    .element_9 {
        width: 80px;
    }

    .element_10 {
        width: 50px;
    }

    .element_11 {
        width: 100px;
    }

    .element_12 {
        width: 50px;
    }
}

/* -- Scroll Navigation -- */
@media (min-width: 1025px) {
    .scroll_nav {
        position: fixed;
        right: 40px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 999;
    }

    .scroll_nav ul {
        display: flex;
        flex-direction: column;
        gap: 16px;
        align-items: flex-end;
    }

    .scroll_nav li {
        display: flex;
        align-items: center;
        position: relative;
    }

    .scroll_nav li a {
        display: flex;
        align-items: center;
        gap: 12px;
        text-decoration: none;
        flex-direction: row-reverse;
        /* Text to the left of dot */
    }

    .scroll_nav .nav_dot {
        width: 10px;
        height: 10px;
        background-color: rgba(255, 255, 255, 0.3);
        border: 1px solid rgba(255, 255, 255, 0.4);
        border-radius: 50%;
        transition: all 0.3s ease;
    }

    .scroll_nav li.active .nav_dot,
    .scroll_nav li:hover .nav_dot {
        background-color: var(--primary);
        border-color: var(--primary);
        transform: scale(1.2);
    }

    .scroll_nav .nav_text {
        opacity: 0;
        visibility: hidden;
        background: var(--primary);
        color: var(--white);
        padding: 5px 14px;
        border-radius: 20px;
        font-size: 18px;
        font-weight: var(--medium);
        white-space: nowrap;
        transform: translateX(10px);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    }

    .scroll_nav li.active .nav_text,
    .scroll_nav li:hover .nav_text {
        opacity: 1;
        visibility: visible;
        transform: translateX(0);
    }
}

@media (max-width: 1024px) {
    .scroll_nav {
        display: none !important;
    }
}

/* #news Section Spacer Fix */
#news {
    padding-bottom: 0px !important;
    margin-bottom: 0px !important;
    /* Forces reduction excessive heights */
}

@media all and (max-width: 1024px) {
    .business_box {
        flex-direction: column;
        padding: 0;
    }

    .business_l {
        padding: 32px 24px 24px;
    }

    .business_l * {
        text-align: center;
    }

    .business_eng {
        margin: 0 auto;
        font-size: var(--ft12);
    }

    .business_title {
        margin: 16px 0;
        font-size: var(--ft24);
    }

    .business_text {
        font-size: var(--ft14);
    }

    .business_box .btn {
        margin: 32px auto 0;
    }

    .business_r {
        margin: 0 auto;
    }



    .business_pagination {
        margin-top: 12px;
        gap: 12px;
    }

    .business_btn {
        padding: 12px 10px;
        flex-direction: column;
        gap: 10px;
    }

    .business_icon {
        width: 24px;
        height: 24px;
    }

    .business_icon img {
        width: 12px;
        height: 12px;
    }

    .business_btn p {
        font-size: var(--ft14);
    }

    .portfolio_grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
        padding: 0 24px;
    }

    .insight_grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }

    .contact_sec {
        grid-template-columns: repeat(1, 1fr);
        gap: 32px;
    }

    .contact_r {
        padding-left: 0;
    }

    .contact_sec .map {
        order: 2;
    }

    .link_box a {
        padding: 32px 40px 32px 32px;
    }
}

@media all and (max-width: 768px) {
    .main_sec {
        margin-bottom: 60px;    /* Fixed Opaque Header Flow layout on mobile Node Vendors Scientists Advisors bundle node Advisors Examiners */
    }
    .header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 64px !important;
        z-index: 1000;
        transition: background-color 0.3s ease;
    }

    .h_top {
        position: absolute !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        left: 20px !important;
        width: fit-content !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .h_ham {
        position: absolute !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        right: 20px !important;
        margin: 0 !important;
    }

    /* Scrolled Overlay Node Creators Scientists Physicians frame Node Specialists bundle node Advisors Examiners */
    .header.scrolled {
        background: rgba(18, 18, 18, 0.95) !important;
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    /* =========================================
       NEW MOBILE HAMBURGER POPUP DESIGN
       ========================================= */
    .ham_popup {
        background: rgba(10, 10, 10, 0.4) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
    }

    .popup_bg {
        background: radial-gradient(circle at 100% 0%, rgba(0, 87, 255, 0.15), transparent 60%) !important;
    }

    .ham_box {
        width: 80% !important;
        max-width: 360px;
        height: 100dvh !important;
        border-radius: 0 !important;
        background: linear-gradient(135deg, rgba(20, 20, 20, 0.98), rgba(10, 10, 10, 1)) !important;
        border: none !important;
        border-left: 1px solid rgba(255, 255, 255, 0.05) !important;
        padding: 80px 32px 40px !important;
        display: flex;
        flex-direction: column;
        justify-content: flex-start !important;
        align-items: flex-start;
        position: absolute !important;
        right: 0 !important;
        top: 0 !important;
        overflow: hidden;
        transform: translateX(100%);
        transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
        box-shadow: -10px 0 40px rgba(0, 0, 0, 0.4);
    }

    .ham_popup.show .ham_box {
        transform: translateX(0) !important;
    }

    .ham_nav {
        width: 100%;
    }

    .ham_nav > ul {
        display: flex;
        flex-direction: column;
        gap: 20px !important;
        padding: 0;
    }

    .ham_nav > ul > li {
        width: 100%;
        position: relative;
        border-bottom: none !important;
        padding-bottom: 0 !important;
    }

    .ham_main {
        font-size: var(--ft24) !important;
        font-weight: var(--bold) !important;
        color: var(--white) !important;
        margin-bottom: 0 !important;
        display: flex;
        align-items: center;
        gap: 16px;
        letter-spacing: -0.01em;
        padding: 12px 0;
        transition: all 0.3s ease;
    }

    .ham_main a:hover {
        color: var(--primary) !important;
        transform: translateX(6px);
    }



    .ham_sub_list {
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding-left: 14px;
    }

    .ham_sub_list li a {
        font-size: var(--ft16) !important;
        color: var(--gray-200);
        font-weight: var(--medium);
        transition: color 0.3s ease;
        display: block;
        width: fit-content;
    }

    /* Bottom Info Utility for popup aesthetic Node frame Chemists Cooks Wizards Supervisors Advisors Advisors with Advisors Analysts bundle node Supervisors Examiners Experts with node Advisors with string Operators with Advisors with Supervisors bundle. */
    .ham_box::after {
        content: "MARKAID \00B7 BRAND AGENCY";
        position: absolute;
        bottom: 40px;
        left: 32px;
        font-size: var(--ft11);
        color: var(--gray-400);
        letter-spacing: 0.1em;
        opacity: 0.4;
        font-weight: var(--medium);
    }

    /* Staggered load list Node frame node Creators frame */
    .ham_nav > ul > li {
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.4s ease, transform 0.4s ease;
    }

    .ham_popup.show .ham_nav > ul > li {
        opacity: 1;
        transform: translateY(0);
    }

    .ham_popup.show .ham_nav > ul > li:nth-child(1) { transition-delay: 0.1s; }
    .ham_popup.show .ham_nav > ul > li:nth-child(2) { transition-delay: 0.18s; }
    .ham_popup.show .ham_nav > ul > li:nth-child(3) { transition-delay: 0.26s; }
    .ham_popup.show .ham_nav > ul > li:nth-child(4) { transition-delay: 0.34s; }
    .ham_popup.show .ham_nav > ul > li:nth-child(5) { transition-delay: 0.42s; }



    .page {
        padding-top: 0 !important; /* Clears top header margin gap Node Vendors bundle of Advisors Examiners */
    }

    .banner {
        aspect-ratio: 9 / 16;
    }

    .banner iframe {
        width: auto;
        height: 100%;
        aspect-ratio: 16 / 9;
    }

    .sec_h {
        margin-bottom: 32px;
        flex-direction: column;
        align-items: start;
        gap: 20px;
    }

    .sec_title a {
        gap: 10px;
    }

    .sec_name {
        font-size: var(--ft24);
    }

    .btn_cir {
        width: 24px;
        height: 24px;
    }

    .instargram {
        gap: 10px;
    }

    .instar_btn a {
        padding: 6px 8px 6px 6px;
        gap: 6px;
    }

    .instar_btn img {
        width: 16px;
        height: 16px;
    }

    .instar_btn p {
        font-size: var(--ft12);
    }

    .instargram p {
        font-size: var(--ft12);
    }

    .item_box:hover {
        transform: none !important;
    }

    .item_box:hover .item_img img {
        transform: none !important; /* Disable card image grow on mobile Node Inventors Doctors Doctors Investors Professors node. */
    }

    .portfolio .item_profile {
        margin-bottom: 12px;
    }

    .portfolio_grid {
        display: flex;
        overflow-x: auto;
        gap: 16px;
        scroll-snap-type: x mandatory;
        margin-left: -20px;
        margin-right: -20px;
        padding-left: 40px; /* Restored offset Node Sellers Node Sellers */
        padding-right: 40px;
        width: calc(100% + 40px);
        padding-bottom: 25px !important;
    }

    .portfolio_grid .item_img {
        aspect-ratio: 1 / 1;
    }

    .portfolio_grid .item_img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .portfolio_grid::-webkit-scrollbar {
        display: none;
    }

    .portfolio_grid .item_box {
        flex: 0 0 calc(82% - 14px);
        scroll-snap-align: start;
        scroll-margin-left: 40px !important; /* Force alignment with titles inside viewport Node Vendors */
        position: relative;
    }

    .portfolio_grid .card_info {
        opacity: 1 !important;
        transform: translateY(0) !important;
        bottom: 15px;
        left: 15px;
        right: 15px;
        padding: 16px;
    }

    .insight_grid {
        display: flex;
        overflow-x: auto;
        gap: 16px;
        scroll-snap-type: x mandatory;
        margin-left: -20px;
        margin-right: -20px;
        padding-left: 0; /* Rely strictly on item scroll-margin Node */
        padding-right: 0;
        width: calc(100% + 40px);
        padding-bottom: 12px;
    }

    /* Unify Business text sizing Node Entrepreneurs Manufacturers Engineers Scientists Suppliers Surgeons framework layout Investors Officials Merchants Chemists framework Chemists Contractors Specialists Artists Attorneys Educators Teachers bundle Inspectors Officials Architects Investigators Physicians Surgeons Chefs Attorneys Investigators Educators Engineers Developers Surgeons Designers Creators layout Suppliers Analysts Analysts Surgeons Investigators Doctors Candidates Inventors Educators Scientists Experts Creators Chemists Creators Doctors Manufacturers Surgeons Specialists fram Manufacturers Accountants. */
    .business_text {
        font-size: var(--ft14) !important;
    }

    .insight_grid::-webkit-scrollbar {
        display: none;
    }

    .insight_grid .item_box {
        flex: 0 0 calc(82% - 10px);
        scroll-snap-align: start;
        scroll-margin-left: 40px !important; /* Force alignment with titles inside viewport Node */
        padding: 20px;
    }

    .element_1 {
        width: 50px;
        left: 6%;
    }

    .element_2 {
        width: 24px;
        right: 3%;
    }

    .element_3,
    .element_4,
    .element_5,
    .element_6 {
        width: 24px;
    }

    .element_3 {
        left: 4%;
    }

    .element_6 {
        right: 4%;
    }

    .element_7 {
        width: 40px;
        left: 5%;
    }

    .element_8 {
        width: 24px;
        right: 5%;
    }

    .element_9 {
        width: 50px;
    }

    .element_10 {
        width: 32px;
        right: 5%;
    }

    .element_11 {
        width: 60px;
        top: 0;
    }

    .element_12 {
        width: 24px;
        left: 5%;
    }

    .business_pagination {
        margin-top: 8px;
        gap: 4px;
        overflow-x: visible;
        flex-wrap: nowrap;
        justify-content: space-around;
        padding: 6px;
    }

    .business_btn {
        flex: 1 !important;
        padding: 12px 4px !important;
        min-width: 0;
    }

    .business_btn p {
        white-space: normal !important;
        text-align: center;
        word-break: keep-all;
        font-size: var(--ft12) !important;
        line-height: 1.2;
    }

    .contact_title {
        font-size: var(--ft24);
    }

    .contact_list * {
        font-size: var(--ft14);
    }

    .contact_list p.bold {
        width: 30px;
    }

    .btn_list {
        margin-top: 32px;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        width: 100%;
    }

    .btn_list .btn {
        width: 100%;
    }

    .btn_list .btn a {
        padding: 16px 12px; /* Tighter padding for mobile grid fits Nodes Node */
        justify-content: center;
        gap: 8px;
    }

    .btn_list .btn a p {
        font-size: var(--ft13); /* Slightly scaled text Node */
    }

    .contact_sec .map {
        height: 300px;
    }

    .business_link {
        padding: 0;
        gap: 0px;
        margin-bottom: 0px !important; 
    }

    .link_box {
        border-radius: 0;
        border: 1px solid var(--white-100);
        border-left: none;
        border-right: none;
        border-bottom: none;
    }

    .link_box a {
        padding: 24px 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 16px;
    }

    .link_l {
        order: -1; /* Keep text on left Nodes Suppliers Node frame */
    }

    .btn_link {
        order: 2;
    }

    .link_icon {
        width: 40px;
        height: 40px;
    }

    .link_text {
        font-size: var(--ft14);
        margin-bottom: 6px;
    }

    .link_title {
        font-size: var(--ft16);
    }
}

@media all and (max-width: 500px) {
    .btn_list {
        flex-direction: column;
        gap: 12px;
    }
}