*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Inter',sans-serif;
    background:#ffffff;
    color:#014b75;
    overflow-x:hidden;
}

:root{
    --cyan:#00c8ff;
    --deep:#07263a;
    --light:#f6fbff;
    --soft:#eaf6fb;
}

section{
    position:relative;
}

.container{
    width:min(1400px,92%);
    margin:auto;
}

/* NAV */

nav{
    position:fixed;
    top:0;
    width:100%;
    z-index:1000;
    backdrop-filter:blur(18px);
    background:rgba(255,255,255,0.7);
    border-bottom:1px solid rgba(0,0,0,0.05);
}

.nav-inner{
    height:78px;
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.logo{
    height:42px;
}

.nav-links{
    display:flex;
    gap:34px;
    font-size:14px;
    font-weight:500;
}

.nav-links a{
    text-decoration:none;
    color:#234;
}

.cta{
    padding:13px 22px;
    border-radius:999px;
    background:linear-gradient(135deg,#00d0ff,#00a8ff);
    color:white;
    font-weight:600;
    border:none;
    box-shadow:0 10px 30px rgba(0,180,255,.25);
}

/* HERO */

.hero{
    position:relative;
    height:75vh;
    min-height:50vh;
    max-height:75vh;
    overflow:hidden;
    display:flex;
    align-items:center;
    padding:clamp(20px, 4vh, 60px) 0;
    background:#081a2c;
}

/* ── Hero video background ── */
.hero-video{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    z-index:0;
    /* Fallback shown instantly while poster/video loads */
    background:
        url('mworld/img/HomeBanner.jpg') center/cover no-repeat,
        linear-gradient(135deg, rgb(10,22,40) 0%, rgb(10,42,74) 50%, rgb(10,22,40) 100%);
}

/* Dark overlay — keeps text readable over any video content */
.hero-video-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(
        135deg,
        rgba(5,12,28,.82) 0%,
        rgba(5,22,50,.65) 50%,
        rgba(5,12,28,.82) 100%
    );
    z-index:1;
}

@keyframes heroFloat{
    0%,100%{
        transform:translateY(0px);
    }
    50%{
        transform:translateY(-18px);
    }
}

@keyframes marquee{
    from{
        transform:translateX(0);
    }

    to{
        transform:translateX(-50%);
    }
}

.hero-gradient{
    position:absolute;
    inset:0;
    background:
    linear-gradient(135deg,
    rgba(0,10,30,.92) 0%,
    rgba(0,30,60,.72) 50%,
    rgba(0,10,30,.92) 100%);
    z-index:2;
}

.hero-lines{
    position:absolute;
    inset:0;
    overflow:hidden;
}

.hero-lines span{
    position:absolute;
    width:1px;
    background:linear-gradient(to bottom,
    transparent,
    rgba(0,200,255,.18),
    transparent);
    filter:blur(.2px);
    animation:beamMove 4s ease-in-out infinite;
}

.hero-lines span:nth-child(1){left:2%;height:100%;animation-delay:0s;animation-duration:3s;}
.hero-lines span:nth-child(2){left:6%;height:100%;animation-delay:.8s;animation-duration:3.4s;}
.hero-lines span:nth-child(3){left:10%;height:100%;animation-delay:1.6s;animation-duration:3.8s;}
.hero-lines span:nth-child(4){left:90%;height:100%;animation-delay:.4s;animation-duration:4.2s;}
.hero-lines span:nth-child(5){left:94%;height:100%;animation-delay:2.2s;animation-duration:4.6s;}
.hero-lines span:nth-child(6){left:98%;height:100%;animation-delay:1.2s;animation-duration:5s;}

@keyframes beamMove{
0%,100%{
opacity:0;
transform:scaleY(.3) translateY(-20px);
}
50%{
opacity:1;
transform:scaleY(1) translateY(0);
}
}

#particles{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    z-index:1;
    pointer-events:none;
}

.hero-grid{
    position:relative;
    z-index:4;
    display:grid;
    grid-template-columns:1.1fr 1fr;
    gap:70px;
    align-items:center;
}

.hero-left{
    color:white;
    padding-left:clamp(32px, 5vw, 60px);
}

.eyebrow{
    display:flex;
    align-items:center;
    gap:12px;
    text-transform:uppercase;
    letter-spacing:.18em;
    font-size:11px;
    font-weight:700;
    color:#00c8ff;
    margin-bottom:24px;
}

.eyebrow::before{
    content:'';
    width:42px;
    height:1px;
    background:#00c8ff;
}

.hero h1{
    font-size:clamp(22px, 4.5vh, 52px);
    line-height:1.05;
    letter-spacing:-.04em;
    margin-bottom:clamp(10px, 1.5vh, 22px);
    color:white;
}

.hero h1 span{
    color:#00c8ff;
}

.hero p{
    max-width:560px;
    line-height:1.8;
    color:rgba(255,255,255,.65);
    font-size:clamp(12px, 1.6vh, 15px);
    margin-bottom:clamp(14px, 2.5vh, 32px);
}

.hero-pills{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:26px;
}

.hero-pill{
    padding:8px 16px;
    border-radius:999px;
    background:rgba(0,200,255,.1);
    border:1px solid rgba(0,200,255,.2);
    color:#00c8ff;
    font-size:12px;
}

.hero-right{
    position:relative;
    height:auto;
}

.floating-card{
    position:absolute;
    border-radius:34px;
    overflow:hidden;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.08);
    box-shadow:0 40px 120px rgba(0,0,0,.28);
    animation:float 8s ease-in-out infinite;
    backdrop-filter:blur(18px);
}

.floating-card::after{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(135deg,rgba(0,200,255,.12),transparent 60%);
}

.floating-card img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.xr-card{
    width:430px;
    height:540px;
    top:40px;
    left:20px;
}

.vr-card{
    width:300px;
    height:380px;
    right:0;
    top:270px;
    animation-delay:1.5s;
}

.banner-glow{
    position:absolute;
    inset:0;
    background:radial-gradient(circle at center,
    rgba(0,200,255,.25),
    transparent 20%);
    filter:blur(80px);
}

.marquee{
    position:absolute;
    bottom:0;
    width:100%;
    overflow:hidden;
    border-top:1px solid rgba(255,255,255,.06);
    border-bottom:1px solid rgba(255,255,255,.06);
    background:rgba(0,10,30,.45);
    backdrop-filter:blur(12px);
    z-index:4;
}

.marquee-track{
    display:flex;
    gap:80px;
    padding:22px 0;
    width:max-content;
    animation:marquee 25s linear infinite;
    font-weight:700;
    color:#00c8ff;
}

/* SERVICES */

.services{
    padding:50px 0 20px;
}

.section-title{
    font-size:clamp(42px,5vw,62px);
    line-height:1;
    letter-spacing:-.05em;
    margin-bottom:18px;
}

.sectionMDT-title{
    font-size:clamp(34px,5vw,34px);
    line-height:1;
    letter-spacing:-.05em;
    margin-bottom:18px;
}

.section-sub{
    max-width:780px;
    color:#6a8798;
    line-height:1.8;
    font-size:18px;
}

.service-card{
    height: fit-content;
    background:white;
    border-radius:30px;
    overflow:hidden;
    border:1px solid rgba(0,0,0,.05);
    transition:.4s ease;
    box-shadow:0 25px 60px rgba(0,0,0,.05);
}

.service-card:hover{
    transform:translateY(-10px);
}

.service-card img{
    width:100%;
    height: auto;
    object-fit:cover;
}

.service-content{
    height: 200px;
    padding:26px;
}

.service-content h3{
    font-size:24px;
    margin-bottom:10px;
}

.service-content p{
    color:#6b8698;
    line-height:1.7;
}

/* SHOWCASE */

.showcase{
    padding:140px 0;
}

.showcase-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:70px;
    align-items:center;
}

.showcase-visual{
    position:relative;
}

.showcase-visual img{
    width:100%;
    border-radius:36px;
    box-shadow:0 40px 100px rgba(0,0,0,.12);
}

.glass-panel{
    position:absolute;
    right:-40px;
    bottom:40px;
    width:280px;
    padding:26px;
    border-radius:28px;
    backdrop-filter:blur(20px);
    background:rgba(255,255,255,.75);
    border:1px solid rgba(255,255,255,.8);
    box-shadow:0 20px 50px rgba(0,0,0,.08);
}

.glass-panel h4{
    font-size:28px;
    margin-bottom:10px;
}

.glass-panel p{
    color:#638091;
    line-height:1.7;
}

/* GX */

.dark-section{
    background:#071722;
    color:white;
    overflow:hidden;
}

.dark-section .section-sub{
    color:rgba(255,255,255,.65);
}

.gx-layout{
    display:grid;
    grid-template-columns:1.2fr .8fr;
    gap:30px;
    margin-top:70px;
}

.gx-main img,
.gx-side img{
    width:100%;
    border-radius:32px;
}

.gx-main img{
    height:620px;
    object-fit:cover;
}

.gx-side{
    display:flex;
    flex-direction:column;
    gap:30px;
}

.gx-side img{
    height:295px;
    object-fit:cover;
}

/* BIM */

.plugins{
    padding:140px 0;
}

.plugin-wall{
    margin-top:60px;
    background:white;
    border-radius:40px;
    padding:50px;
    box-shadow:0 40px 100px rgba(0,0,0,.07);
}

.plugin-grid{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:20px;
}

.plugin-item{
    background:#f8fcff;
    border-radius:24px;
    padding:24px;
    text-align:center;
    border:1px solid rgba(0,0,0,.04);
}

.plugin-item img{
    width:72px;
    height:72px;
    object-fit:contain;
    margin-bottom:18px;
}

.plugin-item h4{
    font-size:14px;
}

/* FOOTER */

footer{
    padding:120px 0 70px;
    background:linear-gradient(to bottom,#ffffff,#eef8ff);
}

.footer-box{
    background:white;
    border-radius:40px;
    padding:70px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    box-shadow:0 30px 80px rgba(0,0,0,.07);
}

.footer-box h2{
    font-size:56px;
    line-height:1;
    letter-spacing:-.05em;
}

.footer-box h2 span{
    color:#00bfff;
}

footer p{
    margin-top:14px;
    color:#678395;
}

@media(max-width:1100px){

.hero-grid,
.showcase-grid,
.gx-layout,
.footer-box{
    grid-template-columns:1fr;
    display:grid;
}

.plugin-grid{
    grid-template-columns:repeat(2,1fr);
}

.hero-right{
    height:auto;
}

}

@media(max-width:700px){

.nav-links{
    display:none;
}

.hero h1{
    font-size:54px;
}

.plugin-grid{
    grid-template-columns:1fr;
}

.footer-box{
    padding:40px;
}

.footer-box h2{
    font-size:42px;
}

}

.alt-blue{
    position: relative;
    background: #081a2c;
    color: white;
    overflow: hidden;
}

.alt-blue::before{
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            135deg,
            rgba(0,10,30,.92) 0%,
            rgba(0,30,60,.72) 50%,
            rgba(0,10,30,.92) 100%
        );
    z-index: 0;
}

.alt-blue .section-title,
.alt-blue .eyebrow,
.alt-blue h2,
.alt-blue h3{
    color:white;
}

.alt-blue .section-sub,
.alt-blue p{
    color:rgba(255,255,255,.72);
}

.blue-particles{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

.alt-blue > *{
    position: relative;
    z-index: 2;
}

.tron-lines{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    z-index:1;
    pointer-events:none;
}

.alt-blue .hero-lines{
    position:absolute;
    inset:0;
    overflow:hidden;
}

.alt-blue .hero-lines span{
    position:absolute;
    width:1px;
    height:100%;
    background:linear-gradient(to bottom, transparent, rgba(0,200,255,.5), transparent);
    animation: beamMove 5s linear infinite;
}

.alt-blue .hero-lines span:nth-child(1){
    left:2%;
    animation-delay:0s;
}

.alt-blue .hero-lines span:nth-child(2){
    left:98%;
    animation-delay:1.5s;
}

.alt-blue .hero-lines span:nth-child(3),
.alt-blue .hero-lines span:nth-child(4){
    display:none;
}

    .flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.7s ease;
    transform-style: preserve-3d;
}
.flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: 6px 6px 0 0;
    overflow: hidden;
}
.flip-card-back {
    transform: rotateY(180deg);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 24px;
    text-align: center;
    color: #fff;
    box-sizing: border-box;
}
.flip-card {
    width: 291px;
    height: 348px;
    perspective: 1000px;
}

  /* Left / Right image cells */
 .xr-img {
    flex: 0 0 30%;
    max-width: 30%;
    overflow: hidden;
}

  .xr-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .xr-img.left  img { object-position: left center; }
  .xr-img.right img { object-position: right center; }

  /* XRTop and XRBottom stay at original 180px */
  .xr-img.left,
  .xr-img.right {
    height: 180px;
    align-self: center;
  }

  /* Car cell */
  .xr-img.car-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
  }
  .xr-img.car-cell img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
  }

  /* VR woman cell — no background */
  .xr-img.vr-cell {
    display: flex;
    align-items: flex-end;
    justify-content: center;
  }
  .xr-img.vr-cell img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
    transform: translateY(-20px);
  }

  /* Text cells */
.xr-text {
    flex: 0 0 40%;
    max-width: 40%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 20px 32px;
    background: transparent;
    text-align: center;
    overflow-wrap: break-word;
}

  .xr-text.vr-text p {
    font-size: 14px;
    line-height: 1.75;
    color: #333;
    font-weight: 300;
  }
  .xr-text.vr-text p em {
    font-style: italic;
    font-weight: 600;
  }

  .xr-text.ar-text .headline {
    font-family: 'Rajdhani', sans-serif;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 8px;
  }
  .xr-text.ar-text p {
    font-size: 13px;
    line-height: 1.75;
    color: #444;
    font-weight: 300;
  }

  .xr-divider {
    height: 4px;
  }

@media (max-width: 900px) {

    .xr-img,
    .xr-text {
        flex: 0 0 100%;
        max-width: 100%;
        height: auto;
    }

    .xr-img.left,
    .xr-img.right {
        height: auto;
    }

    .xr-text {
        padding: 24px 20px;
    }
}

/* ═══════ PRODUCT PANEL SYSTEM ═══════ */

.product-card-wrapper{
    cursor:pointer;
    user-select:none;
    position:relative;
    transition:transform .3s ease;
}

.product-card-wrapper::after{
    content:'';
    position:absolute;
    inset:-8px;
    border-radius:18px;
    border:2px solid transparent;
    transition:border-color .3s ease, box-shadow .3s ease;
    pointer-events:none;
}

.product-card-wrapper.card-hover::after{
    border-color:rgba(0,200,255,.35);
    box-shadow:0 0 22px rgba(0,200,255,.15);
}

.product-card-wrapper.card-locked::after{
    border-color:rgba(0,200,255,.7);
    box-shadow:0 0 28px rgba(0,200,255,.28);
}

.product-card-wrapper.card-locked .product-card img{
    filter:brightness(1.3) saturate(1.4) hue-rotate(-2deg);
}

.product-panel-outer{
    margin-top: 0px;
    width:60%;
    margin-left:auto;
    margin-right:auto;
}

.panel-hint{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    font-size:13px;
    color:#6a8798;
    margin-bottom:12px;
    transition:opacity .4s ease;
}

.panel-hint.hidden{
    opacity:0;
    pointer-events:none;
}

.hint-pulse{
    width:8px;
    height:8px;
    border-radius:50%;
    background:#00c8ff;
    display:inline-block;
    animation:hintPulse 1.4s ease-in-out infinite;
}

@keyframes hintPulse{
    0%,100%{opacity:.3;transform:scale(.8);}
    50%{opacity:1;transform:scale(1.2);}
}

.product-panel-bordered{
    position:relative;
    border:1.5px solid rgba(0,200,255,.28);
    border-radius:28px;
    overflow:hidden;
    height:520px;
    background:#f6fbff;
    box-shadow:0 0 60px rgba(0,200,255,.06);
    transition:border-color .4s ease;
}

.product-panel-bordered:hover{
    border-color:rgba(0,200,255,.45);
}

.panel-content{
    position:absolute;
    inset:0;
    opacity:0;
    pointer-events:none;
    transition:opacity .55s ease;
    overflow:hidden;
}

.panel-content.active{
    opacity:1;
    pointer-events:auto;
}

/* Dark panel (Digital Twin) */
.panel-content.panel-dark{
    background:#081a2c;
    color:white;
}

.panel-content.panel-dark .section-title,
.panel-content.panel-dark .sectionMDT-title,
.panel-content.panel-dark .eyebrow,
.panel-content.panel-dark h1,
.panel-content.panel-dark h2{
    color:white;
}

.panel-content.panel-dark .section-sub,
.panel-content.panel-dark p{
    color:rgba(255,255,255,.72);
}

.panel-content.panel-dark::before{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(135deg,rgba(0,10,30,.92) 0%,rgba(0,30,60,.72) 50%,rgba(0,10,30,.92) 100%);
    z-index:0;
}

.panel-content.panel-dark > .container{
    position:relative;
    z-index:2;
}

/* Keep overlay elements out of normal flow */
.panel-content.panel-dark > .tron-lines,
.panel-content.panel-dark > .hero-lines{
    position:absolute;
    inset:0;
    z-index:1;
}

/* Placeholder panels */
.panel-placeholder-block{
    display:flex;
    align-items:center;
    justify-content:center;
    height:100%;
}

.panel-placeholder-text{
    font-size:clamp(72px,10vw,128px);
    font-weight:900;
    letter-spacing:-.06em;
    color:rgba(0,180,255,.12);
    user-select:none;
}

/* Progress bar */
.panel-progress-wrap{
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    height:3px;
    background:rgba(0,200,255,.1);
    z-index:10;
}

.panel-progress-bar{
    height:100%;
    width:0%;
    background:linear-gradient(90deg,#00c8ff,#00a8ff);
    border-radius:2px;
    box-shadow:0 0 8px rgba(0,200,255,.5);
}

.panel-progress-bar.animating{
    transition:width 3s linear;
    width:100%;
}

/* Card indicator dots row */
.panel-dot-row{
    display:flex;
    justify-content:center;
    gap:10px;
    margin-top:18px;
}

.panel-dot{
    width:7px;
    height:7px;
    border-radius:50%;
    background:rgba(0,200,255,.2);
    border:1px solid rgba(0,200,255,.3);
    transition:background .3s, transform .3s;
}

.panel-dot.active{
    background:#00c8ff;
    transform:scale(1.3);
    box-shadow:0 0 8px rgba(0,200,255,.5);
}

/* ═══════════════════════════════════ */

/* ── Panel inner content sizing ── */
.panel-inner-grid{
    height:100%;
    padding:30px 40px;
    box-sizing:border-box;
    align-items:center;
}

.panel-inner-grid .showcase-visual{
    height:100%;
    display:flex;
    align-items:center;
}

.panel-inner-grid .showcase-visual img{
    width:100%;
    height:100%;
    max-height:480px;
    object-fit:contain;
    border-radius:20px;
    box-shadow:0 20px 60px rgba(0,0,0,.18);
}

/* Scale down typography inside panels */
.panel-content .hero-title{
    font-size:clamp(28px,3.5vw,44px);
    margin-bottom:4px;
}

.panel-content .hero-title-alt{
    font-size:clamp(22px,2.5vw,34px);
    margin-bottom:14px;
}

.panel-content .sectionMDT-title{
    font-size:clamp(18px,2vw,26px);
    margin-bottom:10px;
}

.panel-content .section-title{
    font-size:clamp(22px,2.5vw,38px);
    margin-bottom:12px;
}

.panel-content .section-sub{
    font-size:15px;
    line-height:1.7;
}

.panel-content .eyebrow{
    margin-bottom:14px;
}

/* glass-panel floater should not overflow */
.panel-inner-grid .glass-panel{
    right:0;
    bottom:20px;
    width:220px;
}

/* ═══════ Sidebar Navigation System ═══════ */

.page-layout{
    position:relative;
}

/* sidebar width = card(100) + padding(10+10) + toggle overhang(20) = 140px total */
.sidebar-nav{
    position:fixed;
    top:50%;
    left:0;
    width:120px;           /* card 100px + 10px padding each side */
    background:rgba(255,255,255,.96);
    backdrop-filter:blur(18px);
    border:1px solid rgba(0,200,255,.14);
    border-left:none;
    border-radius:0 24px 24px 0;
    box-shadow:0 18px 45px rgba(0,0,0,.12);
    z-index:2000;
    overflow:visible;
    padding:16px 10px;
    /* collapsed by default: fully hidden + invisible */
    opacity:0;
    transform:translateY(-50%) translateX(-120px);
    transition:transform .38s cubic-bezier(.4,0,.2,1),
               opacity .35s ease;
}

/* expanded: slide in and become visible */
.sidebar-nav.expanded{
    opacity:1;
    transform:translateY(-50%) translateX(0);
}

.sidebar-track{
    display:flex;
    flex-direction:column;
    gap:14px;
    align-items:center;
}

.sidebar-card{
    width:100px;
    border-radius:16px;
    overflow:hidden;
    cursor:pointer;
    transition:transform .25s ease, box-shadow .25s ease, filter .25s ease;
    background:#fff;
}

.sidebar-card:hover{
    transform:translateX(4px) scale(1.04);
    filter:brightness(1.12);
    box-shadow:0 10px 24px rgba(0,200,255,.22);
}

.sidebar-card.active{
    outline:2.5px solid rgba(0,200,255,.8);
    box-shadow:0 0 18px rgba(0,200,255,.35), inset 0 0 8px rgba(0,200,255,.08);
    transform:translateX(3px);
}

.sidebar-card img{
    width:100px;
    max-width:100px;
    display:block;
    object-fit:contain;
}

.sidebar-toggle{
    position:absolute;
    top:50%;
    right:-20px;
    transform:translateY(-50%);
    width:20px;
    height:78px;
    border-radius:0 22px 22px 0;
    background:rgba(0,200,255,.14);
    border:1px solid rgba(0,200,255,.45);
    border-left:none;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    box-shadow:0 0 26px rgba(0,200,255,.45);
}

.sidebar-toggle::before{
    content:'';
    width:14px;
    height:14px;
    border-top:3px solid #00c8ff;
    border-right:3px solid #00c8ff;
    transform:rotate(45deg);
    transition:transform .35s ease;
    filter:drop-shadow(0 0 10px rgba(0,200,255,1));
}

.sidebar-nav.expanded .sidebar-toggle::before{
    transform:rotate(-135deg);
}

.content-stack{
    width:100%;
}

.panel-section{
    width:100%;
    margin-bottom:28px;
    scroll-margin-top:100px;
}

.panel-section .panel-content{
    position:relative !important;
    inset:auto !important;
    opacity:1 !important;
    pointer-events:auto !important;
    overflow:hidden;
    border-radius:0px;
    min-height:700px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    box-shadow:0 20px 60px rgba(0,0,0,.08);
}

.panel-section .panel-content:not(.panel-dark){
    background:#ffffff;
}

/* VMAQ panel overrides: no white background, full stretch so no gap */
.panel-section .panel-content[data-panel="vmaq"]:not(.panel-dark){
    background: transparent;
    padding: 0;
    height: 700px;
    min-height: 700px;
    justify-content: stretch;
    align-items: stretch;
}

/* Make slash-wrap fill the panel-content exactly */
.panel-section .panel-content[data-panel="vmaq"] #vmaq-slash-wrap {
    height: 100% !important;
    min-height: 700px;
    flex: 1;
}

.product-panel-outer,
.panel-dot-row,
.panel-progress-wrap,
.panel-hint{
    display:none !important;
}

@media(max-width:900px){

    .sidebar-nav{
        top:auto;
        bottom:20px;
        transform:translateX(-120px);
    }

    .sidebar-nav.expanded{
        transform:translateX(0);
    }
}

/* ─────────────────────────────────────────── */

.dslc-modules-area[data-modules-area-id="5ab40466801"] {:px;margin-bottom:0px;:px;background-repeat:repeat;background-position:left top;background-attachment:scroll;background-size:auto;border-width:0px;border-style:solid;}

/* ─────────────────────────────────────────── */

/* ── Product Cards ── */

.carousel-shell{
    position:relative;
    display:flex;
    align-items:center;
    gap:0;
}

.mainContent {
    display: flex;
    flex-wrap: nowrap;
    gap: 36px;
    padding: 20px 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    flex: 1;
    /* hide scrollbar */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

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

.product-card-wrapper{
    scroll-snap-align: center;
    flex-shrink: 0;
}

.carousel-btn{
    background:rgba(0,200,255,.1);
    border:1.5px solid rgba(0,200,255,.3);
    color:#00c8ff;
    border-radius:50%;
    width:40px;
    height:40px;
    font-size:24px;
    line-height:1;
    cursor:pointer;
    flex-shrink:0;
    transition:background .2s, border-color .2s;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0;
    z-index:2;
}

.carousel-btn:hover{
    background:rgba(0,200,255,.22);
    border-color:rgba(0,200,255,.7);
}

.carousel-btn:disabled{
    opacity:.25;
    cursor:default;
}

.product-card-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.product-card {
    width: 250px;
    height: 175px;
    position: relative;
    isolation: isolate;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.product-card:hover {
    transform: translateY(-4px);
}

.product-card img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    transition: filter 0.3s ease;
}

.product-card:hover img {
    filter: brightness(1.25) saturate(1.3) hue-rotate(-2deg);
}

.footer {
    text-align: center;
    padding: 20px;
    font-size: 0.85em;
    color: #555;
}

.hero-title {
    font-size: clamp(45px, 5vw, 45px);
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -1px;
    margin-bottom: 8px;
    background: linear-gradient(90deg, #60c8ff 0%, #ffffff 45%, #60c8ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 24px rgba(0, 200, 255, 0.4));
}

.hero-title-alt {
    font-size: clamp(30px, 4vw, 54px);
    font-weight: 900;
    line-height: 1.1;
    margin-bottom: 24px;
    color: #ffd000;
    letter-spacing: -0.5px;
}

/* ── TrueTour device images ── */
.truetour-devices{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:16px;
}

.device-img{
    height:50px;
    width:auto;
    display:block;
}
/* ── TrueTour Monitor Screen ── */
.truetour-wrap{
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    height:100%;
    box-sizing:border-box;
}

/* individual columns */
.truetour-col{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    height:100%;
    box-sizing:border-box;
}

.truetour-col-center{
    padding:20px 0 10px;
    gap:10px;
}

.truetour-col-left{
    align-items:flex-end;
    padding-right:20px;
}

/* logo in left column */
.truetour-logo{
    width:auto;
    height:auto;
    object-fit:contain;
    margin-bottom:75px;
    filter:drop-shadow(0 0 20px rgba(0,200,255,.4));
}

.truetour-screen-wrap{
    position:relative;
    aspect-ratio:2301 / 1863;
    width:100%;
    max-height:85%;
    flex-shrink:0;
}

.monitor-img{
    width:100%;
    height:100%;
    display:block;
    object-fit:contain;
    user-select:none;
    pointer-events:none;
    position:relative;
    z-index:2;
}

.monitor-video{
    position:absolute;
    left:6.82%;
    top:7.62%;
    width:88.62%;
    height:69.08%;
    border:none;
    z-index:1;
    border-radius:4px;
    background:#000;
}

/* ── Carousel fade-edge overlays ── */
.carousel-shell{
    position:relative;  /* already set, but ensure */
}

.carousel-fade-left,
.carousel-fade-right{
    position:absolute;
    top:0; bottom:0;
    width:72px;
    pointer-events:none;
    z-index:3;
    transition:opacity .35s;
}

.carousel-fade-left{
    left:48px;  /* just after the arrow button */
    background:linear-gradient(to right, var(--carousel-bg,#f0f7ff) 0%, transparent 100%);
    opacity:0;  /* hidden when at start */
}

.carousel-fade-right{
    right:48px; /* just before the arrow button */
    background:linear-gradient(to left, var(--carousel-bg,#f0f7ff) 0%, transparent 100%);
    opacity:1;
}

/* ── Card entrance animation ── */
.product-card-wrapper{
    opacity:0;
    transform:translateY(28px);
    /* transition drives the float-in; JS adds .card-visible */
    transition:
        opacity .55s ease,
        transform .55s ease,
        /* keep existing interaction transitions below */
        filter .3s ease;
}

.product-card-wrapper.card-visible{
    opacity:1;
    transform:translateY(0);
}

/* ── Nudge keyframe: peek right then settle ── */
@keyframes carouselNudge{
    0%   { transform:translateX(0); }
    30%  { transform:translateX(-52px); }
    60%  { transform:translateX(-52px); }
    100% { transform:translateX(0); }
}

.carousel-nudge{
    animation: carouselNudge 1.1s cubic-bezier(.4,0,.2,1) forwards;
}

/* ── VRVie Panel — left/right split ── */
/* ── VRVie Panel — left/right split ── */
.vrvie-split{
    display:flex;
    flex-direction:row;
    width:100%;
    height:100%;
    min-height:700px;
}

.vrvie-brand{
    font-family:'Caveat', cursive;
    font-size:clamp(56px, 7vw, 96px);
    font-weight:700;
    color:#035f9f;
    line-height:1;
    letter-spacing:.01em;
}

.vrvie-tagline{
    font-family:'Caveat', cursive;
    font-size:clamp(26px, 3vw, 42px);
    font-weight:700;
    color:#1a7ec8;
    line-height:1.15;
    letter-spacing:.01em;
}

/* Right: 70% — video fills full height */
.vrvie-right{
    flex: 0 0 70%;
    position:relative;
    overflow:hidden;
    background:#ffffff;
}

.vrvie-right video{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:contain;
    display:block;
    transform: scaleX(-1);
}

/* Text side — centered */
.vrvie-left{
    flex: 0 0 30%;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    padding: 48px 40px;
    gap:18px;
    box-sizing:border-box;
    transform: translateX(-385px);
}

.vrvie-btn{
    display:inline-block;
    background:#035f9f;
    color:#fff;
    font-size:15px;
    font-weight:600;
    letter-spacing:.06em;
    text-transform:uppercase;
    padding:13px 44px;
    border-radius:8px;
    text-decoration:none;
    transition:background .22s ease, transform .18s ease, box-shadow .22s ease;
    box-shadow:0 4px 18px rgba(3,95,159,.35);
    margin-top:8px;
}

.vrvie-btn:hover{
    background:#0a71b8;
    transform:translateY(-2px);
    box-shadow:0 8px 24px rgba(10,113,184,.4);
}

/* ── BIM Panel ── */
.bim-wrap{
    display:flex;
    flex-direction:column;
    justify-content:center;
    height:100%;
    padding:20px 24px;
    box-sizing:border-box;
    gap:12px;
    background:#f6fbff;
}

/* Continuous horizontal flex row of all images */
.bim-row{
    display:flex;
    flex-direction:row;
    align-items:center;
    gap:12px;
    overflow:hidden;
}

.bim-item{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
    flex:1;
    min-width:0;
    cursor:pointer;
    padding:8px 4px 4px;
    border-radius:10px;
    border:1.5px solid transparent;
    transition:border-color .25s, background .25s;
    box-sizing:border-box;
}

.bim-item:hover,
.bim-item.active{
    border-color:rgba(0,200,255,.4);
    background:rgba(0,200,255,.06);
}

.bim-item img{
    width:100%;
    max-height:250px;
    object-fit:contain;
    display:block;
}

.bim-item-title{
    font-size:11px;
    font-weight:700;
    color:#1a2a3a;
    text-align:center;
    letter-spacing:.02em;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    width:100%;
}

/* Description text section */
.bim-text-wrap{
    min-height:40px;
    flex-shrink:0;
    text-align:center;
    position:relative;
}

.bim-desc{
    margin:0;
    font-size:13px;
    color:#4a6070;
    line-height:1.6;
    opacity:0;
    position:absolute;
    inset:0;
    transition:opacity .35s ease;
    pointer-events:none;
}

.bim-desc.active{
    opacity:1;
    position:relative;
    pointer-events:auto;
}

/* ── Digital Twin explore button ── */
.mdt-btn{
    display:block;
    width:fit-content;
    margin-top:14px;
    margin-left:auto;
    margin-right:auto;
    background:#035f9f;
    color:#fff;
    font-size:14px;
    font-weight:600;
    letter-spacing:.06em;
    text-transform:uppercase;
    padding:12px 32px;
    border-radius:8px;
    text-decoration:none;
    transition:background .22s ease, transform .18s ease, box-shadow .22s ease;
    box-shadow:0 4px 18px rgba(3,95,159,.35);
}
.mdt-btn:hover{
    background:#0a71b8;
    transform:translateY(-2px);
    box-shadow:0 8px 24px rgba(10,113,184,.4);
}

/* ── BIM header text ── */
.bim-header{
    text-align:center;
    flex-shrink:0;
}

.bim-main-title{
    font-size:clamp(16px, 2vw, 22px);
    font-weight:800;
    color:#035f9f;
    margin:0 0 6px;
    line-height:1.2;
}

.bim-subtitle{
    font-size:clamp(12px, 1.3vw, 14px);
    color:#0a71b8;
    margin:0;
    line-height:1.5;
}

/* ── Hero logo float ── */
.hero-logo-float{
    display:block;
    margin-left:min(100px, 8vw);
    margin-bottom:clamp(4px, 0.8vh, 10px);
    width:auto;
    max-height:min(250px, 32vh);
    max-width:320px;
    object-fit:contain;
    filter:drop-shadow(0 0 30px rgba(0,200,255,.2)) drop-shadow(0 20px 40px rgba(0,0,0,.4));
    animation:heroFloat 8s ease-in-out infinite;
}

/* ─────────────────────────────────────────── */

/* ── Outer wrapper – clips the slash overhang ── */
#vmaq-slash-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 700px;
  overflow: hidden;
  user-select: none;
  display: flex;          /* <── true flex split */
  flex-direction: row;
  cursor: default;
}

/* ── Both panels sit side-by-side, overflow their own content ── */
#vmaq-left-panel,
#vmaq-right-panel {
  position: relative;
  flex: 0 0 auto;         /* width set by JS via style.width */
  height: 100%;
  overflow: hidden;       /* each clips its own content */
  transition: none;       /* JS handles animation */
}

/* ── Right panel: dark bg so video fills it correctly ── */
#vmaq-right-panel {
  background: #07111d;
}

/* ── Video fills right panel exactly ── */
#vmaq-hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

/* ── Diagonal slash overlay ── */
#vmaq-slash-overlay {
  position: absolute;
  top: 0;
  height: 100%;
  width: 80px;            /* wide hit zone */
  z-index: 10;
  cursor: ew-resize;
  touch-action: none;
  transform: translateX(-50%);  /* centres on the split edge */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

/* The glowing vertical line — pure CSS, guaranteed straight */
#vmaq-slash-line {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 100%;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(0,200,255,0)   0%,
    rgba(0,200,255,0.9) 15%,
    white               50%,
    rgba(0,200,255,0.9) 85%,
    rgba(0,200,255,0)   100%
  );
  box-shadow: 0 0 8px 2px rgba(0,200,255,0.55), 0 0 18px 4px rgba(0,200,255,0.25);
}

/* Grab knob */
#vmaq-slash-knob {
  position: relative;
  z-index: 2;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: #ffffff;
  border: 3px solid rgba(0,200,255,0.9);
  box-shadow:
    0 0 0 5px rgba(0,200,255,0.18),
    0 0 36px rgba(0,200,255,0.55),
    inset 0 1px 0 rgba(255,255,255,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
  flex-shrink: 0;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  overflow: hidden;
}
#vmaq-slash-overlay:hover #vmaq-slash-knob,
#vmaq-slash-overlay.dragging #vmaq-slash-knob {
  transform: scale(1.07);
  box-shadow:
    0 0 0 6px rgba(0,200,255,0.32),
    0 0 50px rgba(0,200,255,0.75),
    inset 0 1px 0 rgba(255,255,255,0.2);
}
#vmaq-slash-knob img {
  width: 78%;
  height: 78%;
  object-fit: contain;
  display: block;
  border-radius: 0;
}

/* Side badges */
.vmaq-side-badge {
  position: absolute;
  bottom: 54px;
  font-family: 'Share Tech Mono', 'Courier New', monospace;
  font-size: 9px;
  letter-spacing: 0.18em;
  font-weight: 600;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 2px;
  pointer-events: none;
  z-index: 8;
  opacity: 0;
  transition: opacity 0.3s ease;
}
#vmaq-slash-wrap:hover .vmaq-side-badge { opacity: 1; }
#vmaq-badge-left {
  left: 18px;
  color: #1a5a9a;
  background: rgba(222,238,250,0.88);
  border: 1px solid rgba(74,142,200,0.4);
}
#vmaq-badge-right {
  right: 18px;
  color: #00c8ff;
  background: rgba(7,26,45,0.88);
  border: 1px solid rgba(0,200,255,0.3);
}

/* Drag hint arrows — sit on each side of the knob, inside the overlay */
#vmaq-drag-hint {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 11;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 170px; /* spans across the 150px knob with breathing room */
  pointer-events: none;
  transition: opacity 0.5s ease;
}
#vmaq-drag-hint.hidden { opacity: 0; }

.vmaq-hint-arrow {
  display: flex;
  align-items: center;
  gap: 4px;
}
.vmaq-hint-arrow svg {
  width: 28px;
  height: 28px;
  filter: drop-shadow(0 0 6px rgba(0,200,255,0.9)) drop-shadow(0 0 12px rgba(0,200,255,0.6));
}
/* Pulse-slide animation for left arrow (pointing left) */
@keyframes arrowPulseLeft {
  0%,100% { transform: translateX(0); opacity: 0.6; }
  50%      { transform: translateX(-7px); opacity: 1; }
}
/* Pulse-slide animation for right arrow (pointing right) */
@keyframes arrowPulseRight {
  0%,100% { transform: translateX(0); opacity: 0.6; }
  50%      { transform: translateX(7px); opacity: 1; }
}
.vmaq-hint-arrow.left  svg { animation: arrowPulseLeft  1.4s ease-in-out infinite; }
.vmaq-hint-arrow.right svg { animation: arrowPulseRight 1.4s ease-in-out infinite; }

/* Know More button — inside overlay, below the knob */
#vmaq-know-more {
  position: absolute;
  top: calc(50% + 94px); /* below 150px knob: 75px radius + 19px gap */
  left: 50%;
  transform: translateX(-50%);
  z-index: 12;
  display: inline-block;
  padding: 10px 36px;
  background: rgba(0, 10, 30, 0.78);
  color: #00c8ff;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1.5px solid rgba(0,200,255,0.7);
  border-radius: 4px;
  white-space: nowrap;
  backdrop-filter: blur(8px);
  box-shadow:
    0 0 14px rgba(0,200,255,0.3),
    inset 0 0 8px rgba(0,200,255,0.06);
  transition: background 0.2s ease, box-shadow 0.2s ease, color 0.2s ease, transform 0.18s ease;
  pointer-events: auto;
}
#vmaq-know-more:hover {
  background: rgba(0,200,255,0.15);
  color: #fff;
  box-shadow:
    0 0 24px rgba(0,200,255,0.55),
    inset 0 0 12px rgba(0,200,255,0.1);
  transform: translateX(-50%) translateY(-2px);
}

/* ─────────────────────────────────────────── */

/* ── Scoped reset for maquette root ── */
#maq-root {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: 'Share Tech Mono', 'Courier New', monospace;
}
/* Blueprint grid bg */
#maq-root::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(rgba(74,142,200,.2) 1px, transparent 1px),
    linear-gradient(90deg, rgba(74,142,200,.2) 1px, transparent 1px),
    linear-gradient(rgba(74,142,200,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(74,142,200,.06) 1px, transparent 1px);
  background-size: 80px 80px, 80px 80px, 20px 20px, 20px 20px;
  background-color: #deeefa;
}
/* Three.js canvas */
#maq-c3d {
  display: block;
  position: absolute; inset: 0;
  width: 100% !important; height: 100% !important;
  z-index: 1; cursor: grab;
}
#maq-c3d:active { cursor: grabbing; }
/* Leader overlay canvas */
#maq-leader {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 7; pointer-events: none;
}
/* Header bar */
#maq-header {
  position: absolute; top: 0; left: 0; right: 0; z-index: 10;
  padding: 10px 22px;
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(222,238,250,.88);
  border-bottom: 1px solid rgba(74,142,200,.35);
  backdrop-filter: blur(6px);
}
#maq-header .maq-htitle {
  font-size: 11px; letter-spacing: .22em; color: #1a5a9a; font-weight: 600;
}
#maq-header .maq-hmeta {
  display: flex; gap: 18px; font-size: 9px; color: #4a8ec8; letter-spacing: .12em;
}
#maq-header .maq-hmeta b { color: #1a5a9a; font-weight: 400; }
/* Controls bar */
#maq-controls {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 10;
  padding: 8px 22px;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  background: rgba(222,238,250,.88);
  border-top: 1px solid rgba(74,142,200,.35);
  backdrop-filter: blur(6px);
}
.maq-btn {
  font-family: inherit; font-size: 9px; letter-spacing: .13em;
  padding: 5px 14px; background: transparent;
  border: 1px solid #4a8ec8; color: #1a5a9a;
  cursor: pointer; border-radius: 2px; transition: background .18s, color .18s;
}
.maq-btn:hover { background: #4a8ec8; color: #fff; }
.maq-btn.maq-on { background: #1a5a9a; color: #fff; border-color: #1a5a9a; }
.maq-sep { width: 1px; height: 16px; background: #8cbce0; }
.maq-lbl { font-size: 9px; color: #4a8ec8; letter-spacing: .12em; }
#maq-ang { min-width: 34px; text-align: center; font-size: 9px; color: #1a5a9a; }
/* Annotation bubbles */
.maq-bubble {
  position: absolute; z-index: 8;
  background: rgba(215,235,252,.93);
  border: 1px solid #2e6fa8; border-radius: 3px;
  padding: 6px 10px; pointer-events: none;
  backdrop-filter: blur(4px);
  box-shadow: 0 2px 12px rgba(26,90,154,.16);
  min-width: 135px;
}
.maq-bubble .maq-btitle {
  font-size: 10px; color: #0c447c; font-weight: 600;
  letter-spacing: .07em; margin-bottom: 2px;
}
.maq-bubble .maq-brow {
  font-size: 9px; color: #2e6fa8; letter-spacing: .04em; line-height: 1.75;
}
/* Compass */
#maq-compass {
  position: absolute; bottom: 48px; left: 18px; z-index: 10;
  width: 40px; height: 40px;
  background: rgba(222,238,250,.8);
  border: 1px solid rgba(74,142,200,.4); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
/* Scale bar */
#maq-scalebar {
  position: absolute; bottom: 48px; right: 18px; z-index: 10;
  font-size: 8px; letter-spacing: .14em; color: #4a8ec8;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.maq-sbar {
  width: 70px; height: 4px;
  border: 1px solid #4a8ec8; border-top: none; position: relative;
}
.maq-sbar::before,.maq-sbar::after {
  content: ''; position: absolute; top: -4px;
  width: 1px; height: 4px; background: #4a8ec8;
}
.maq-sbar::before { left: 0; } .maq-sbar::after { right: 0; }
.maq-sbar-mid { position: absolute; top: -4px; left: 50%; width: 1px; height: 4px; background: #4a8ec8; }