/* =========================================================
   TOOLBAR
   ========================================================= */

   #toolbar
   {
       position: absolute;
   
       top: 0;
       left: 0;
       right: 0;
   
       height: 70px;
   
       display: flex;
       align-items: center;
       justify-content: space-between;
   
       padding: 0 28px;
   
       background:
           linear-gradient(
               180deg,
               rgba(4,7,14,0.96),
               rgba(4,7,14,0.72)
           );
   
       border-bottom:
           1px solid
           rgba(255,255,255,0.08);
   
       backdrop-filter: blur(12px);
   
       z-index: 20;
   }
   
   
   /* =========================================================
      BRAND
      ========================================================= */
   
   #brand
   {
       display: flex;
       align-items: center;
   
       gap: 12px;
   }
   
   #brandMark
{
    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;
}
#brandMark img
{
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
   #title {
    text-decoration: none;
    color: inherit;
}
   
   
   #subtitle
   {
       margin-top: 3px;
   
       color: #66758c;
   
       font-size: 8px;
   
       letter-spacing: 1.8px;
   }
   
   
   /* =========================================================
      NAVIGATION
      ========================================================= */
   
   #navigation
   {
       display: flex;
   
       gap: 5px;
   }
   
   
   .navButton
   {
       padding: 9px 13px;
   
       border: 1px solid transparent;
   
       background: transparent;
   
       color: #8793a5;
   
       font-size: 10px;
   
       letter-spacing: 1px;
   
       cursor: pointer;
   
       border-radius: 4px;
   
       transition:
           color 0.2s,
           background 0.2s,
           border 0.2s;
   }
   
   
   .navButton:hover
   {
       color: #ffffff;
   
       background:
           rgba(255,255,255,0.04);
   }
   
   
   .navButton.active
   {
       color: #65c3ff;
   
       border-color:
           rgba(70,180,255,0.25);
   
       background:
           rgba(40,130,200,0.08);
   }
   
   
   /* =========================================================
      HERO
      ========================================================= */
   
   #hero
   {
       position: absolute;
   
       left: 7%;
       top: 25%;
   
       width: 390px;
   
       z-index: 10;
   
       pointer-events: none;
   
       text-shadow:
           0 3px 25px
           rgba(0,0,0,0.8);
   }
   
   
   #heroEyebrow
   {
       color: #52baff;
   
       font-size: 9px;
       font-weight: 700;
   
       letter-spacing: 2.5px;
   
       margin-bottom: 15px;
   }
   
   
   h1
   {
       margin: 0;
   
       font-size:
           clamp(38px, 4.5vw, 68px);
   
       line-height: 0.98;
   
       letter-spacing: -2px;
   
       font-weight: 500;
   }
   
   
   h1 span
   {
       display: block;
   
       color: #7890a9;
   }
   
   
   #hero p
   {
       width: 330px;
   
       margin-top: 22px;
   
       color: #9aa8bb;
   
       font-size: 13px;
   
       line-height: 1.7;
   }
   
   
   #heroActions
   {
       display: flex;
   
       gap: 10px;
   
       margin-top: 25px;
   
       pointer-events: auto;
   }
   
   
   #heroActions button
   {
       padding: 11px 16px;
   
       border:
           1px solid
           rgba(90,190,255,0.35);
   
       border-radius: 4px;
   
       background:
           rgba(15,35,55,0.72);
   
       color: #d9f2ff;
   
       font-size: 10px;
       font-weight: 700;
   
       letter-spacing: 1px;
   
       cursor: pointer;
   
       transition:
           background 0.2s,
           border 0.2s;
   }
   
   
   #heroActions button:hover
   {
       background:
           rgba(35,110,160,0.45);
   
       border-color:
           rgba(100,200,255,0.65);
   }
   
   
   /* =========================================================
      MODEL INFORMATION
      ========================================================= */
   
   #modelInfo
   {
       position: absolute;
   
       right: 34px;
       top: 60px;
   
       width: 220px;
   
       padding: 15px;
   
       border-left:
           2px solid
           #238fd0;
   
       background:
           rgba(4,8,15,0.48);
   
       backdrop-filter: blur(8px);
   
       z-index: 10;
   }
   
   
   .infoLabel
   {
       color: #4baee8;
   
       font-size: 8px;
   
       letter-spacing: 1.7px;
   }
   
   
   #modelName
   {
       margin-top: 8px;
   
       font-size: 14px;
       font-weight: 600;
   }
   
   
   #modelDescription
   {
       margin-top: 5px;
   
       color: #75849a;
   
       font-size: 10px;
   
       line-height: 1.5;
   }
   
   
   /* =========================================================
      METRICS
      ========================================================= */
   
   #metrics
   {
       position: absolute;
   
       left: 7%;
       bottom: 65px;
   
       display: flex;
   
       gap: 35px;
   
       z-index: 10;
   }
   
   
   .metric
   {
       min-width: 135px;
   }
   
   
   .metric span
   {
       display: block;
   
       color: #59677b;
   
       font-size: 9px;
   
       letter-spacing: 1.5px;
   
       margin-bottom: 5px;
   }
   
   
   .metric strong
   {
       color: #a9b6c7;
   
       font-size: 10px;
   
       letter-spacing: 0.7px;
   
       font-weight: 600;
   }
   
   
   /* =========================================================
      STATUS
      ========================================================= */
   
   #status
   {
       position: absolute;
   
       right: 28px;
       bottom: 24px;
   
       color: #58677b;
   
       font-size: 10px;
   
       letter-spacing: 1px;
   
       z-index: 10;
   }
   
   
   /* =========================================================
      HELP
      ========================================================= */
   
   #help
   {
       position: absolute;
   
       bottom: 20px;
       left: 50%;
   
       transform:
           translateX(-50%);
   
       padding: 8px 14px;
   
       background:
           rgba(4,7,13,0.65);
   
       color: #68768a;
   
       border:
           1px solid
           rgba(255,255,255,0.07);
   
       border-radius: 5px;
   
       font-size: 9px;
   
       letter-spacing: 0.3px;
   
       z-index: 10;
   
       pointer-events: none;
   }
   
   
   #help span
   {
       color: #c4cfdb;
   }
   
   
   /* =========================================================
      VIEW PANEL
      ========================================================= */
   
   #viewPanel
   {
       position: absolute;
   
       left: 50%;
       bottom: 200px;
   
       transform: translateX(-50%);
   
       display: flex;
   
       gap: 4px;
   
       padding: 5px;
   
       background:
           rgba(4,7,13,0.65);
   
       border:
           1px solid
           rgba(255,255,255,0.08);
   
       border-radius: 5px;
   
       z-index: 10;
   }
   
   
   #viewPanel button
   {
       padding: 7px 9px;
   
       border: 0;
   
       background: transparent;
   
       color: #68768a;
   
       font-size: 8px;
   
       letter-spacing: 0.8px;
   
       cursor: pointer;
   }
   
   
   #viewPanel button:hover
   {
       color: #ffffff;
   
       background:
           rgba(255,255,255,0.05);
   }
   
   

/* =========================================================
   RESPONSIVE — DYNAMIC SHOWROOM ELEMENTS
   ========================================================= */

@media (max-width: 1000px)
{
    #modelGallery
    {
        left: 6%;
        bottom: 115px;
    }


    #strategyPanel
    {
        right: 20px;
    }
}


@media (max-width: 800px)
{
    #modelGallery
    {
        left: 6%;
        bottom: 105px;

        width: 210px;
    }


    #strategyPanel
    {
        display: none;
    }




    #productStrategyLinks
    {
        display: none;
    }
}


@media (max-width: 500px)
{
    #modelGallery
    {
        left: 6%;
        bottom: 70px;

        width: 190px;

        padding: 10px;
    }


    .galleryTitle
    {
        font-size: 7px;
    }


    #modelGallery button
    {
        padding: 7px 8px;

        font-size: 7px;
    }


}
/* =========================================================
   PRODUCT ENGINEERING PANEL
   ========================================================= */

   #productPanel
   {
    position: absolute;

    right: 220px;
    bottom: 290px;

    width: 200px;
   
       padding: 5px;
   
       background:
           rgba(4,8,15,0.52);
   
       border:
           1px solid
           rgba(255,255,255,0.08);
   
       border-radius: 6px;
   
       backdrop-filter: blur(10px);
   
       z-index: 10;
   
       pointer-events: none;
   }
   
   
   .productPanelTitle
   {
       margin-bottom: 12px;
   
       color: #4baee8;
   
       font-size: 8px;
   
       font-weight: 700;
   
       letter-spacing: 1.7px;
   }
   
   
   .productPanelItem
   {
       display: flex;
   
       align-items: center;
   
       gap: 10px;
   
       padding: 7px 0;
   
       border-bottom:
           1px solid
           rgba(255,255,255,0.05);
   
       color: #8291a4;
   
       font-size: 9px;
   
       letter-spacing: 1px;
   }
   
   
   .productPanelItem:last-child
   {
       border-bottom: 0;
   }
   
   
   .productPanelItem span
   {
       color: #3d9bd0;
   
       font-size: 7px;
   
       min-width: 18px;
   }
   #productPanel,
#strategyPanel
{
    height: 200px;
}
.dynamicUpdate {
    animation: dynamicUpdate 0.6s ease;
}

@keyframes dynamicUpdate {
    0% {
        opacity: 0.45;
        transform: translateY(2px);
    }

    40% {
        opacity: 1;
        transform: translateY(0);
    }

    100% {
        opacity: 1;
    }
}
#brandText
{
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* =========================================================
   VIEW CONTROLS — KEEP VISIBLE
   ========================================================= */

   #viewPanel
   {
       display: flex !important;
   
       position: absolute;
   
       left: 50%;
       bottom: 130px;
   
       transform: translateX(-50%);
   
       z-index: 50;
   
       pointer-events: auto;
   }
   
   #viewPanel button
   {
       display: block !important;
   
       pointer-events: auto;
   }
    /* =========================================================
   DYNAMIC SHOWROOM GALLERY
   ========================================================= */
   #modelGallery
   {
       position: absolute;
   
       left: 50%;
       top: 88px;
   
       transform: translateX(-50%);
   
       width: auto;
   
       padding: 10px 12px;
   
       display: flex;
       flex-direction: row;
   
       align-items: center;
   
       gap: 6px;
   
       background:
           rgba(4,8,15,0.68);
   
       border:
           1px solid
           rgba(255,255,255,0.08);
   
       border-radius: 6px;
   
       backdrop-filter: blur(12px);
   
       z-index: 15;
   
       pointer-events: auto;
   }
   .galleryTitle
   {
       margin-right: 8px;
       margin-bottom: 0;
   
       color: #4baee8;
   
       font-size: 9px;
   
       font-weight: 700;
   
       letter-spacing: 1.7px;
   
       white-space: nowrap;
   }

   #modelGallery button
   {
       width: auto;
   
       padding: 8px 10px;
   
       border:
           1px solid
           rgba(255,255,255,0.06);
   
       border-radius: 4px;
   
       background:
           rgba(255,255,255,0.025);
   
       color: #7e8da1;
   
       text-align: center;
   
       font-size: 9px;
   
       letter-spacing: 1px;
   
       cursor: pointer;
   
       transition:
           color 0.2s,
           background 0.2s,
           border 0.2s;
   }

#modelGallery button:hover
{
    color: #ffffff;

    background:
        rgba(40,130,200,0.10);

    border-color:
        rgba(70,180,255,0.25);
}

/* =========================================================
   STRATEGY PANEL
   ========================================================= */

   #strategyPanel
   {
       position: absolute;
   
       right: 1px;
       bottom: 290px;
   
       width: 220px;
   
       padding: 5px;
   
       background:
           rgba(4,8,15,0.52);
   
       border:
           1px solid
           rgba(255,255,255,0.08);
   
       border-radius: 6px;
   
       backdrop-filter: blur(10px);
   
       z-index: 10;
   
       pointer-events: none;
   }
   
   
   .strategyTitle
   {
       margin-bottom: 12px;
   
       color: #4baee8;
   
       font-size: 8px;
   
       font-weight: 700;
   
       letter-spacing: 1.7px;
   }
   
   
   .strategyItem
   {
       display: flex;
   
       align-items: center;
   
       gap: 10px;
   
       padding: 7px 0;
   
       border-bottom:
           1px solid
           rgba(255,255,255,0.05);
   
       color: #8291a4;
   
       font-size: 9px;
   
       letter-spacing: 1px;
   }
   
   
   .strategyItem:last-child
   {
       border-bottom: 0;
   }
   
   
   .strategyItem span
   {
       color: #3d9bd0;
   
       font-size: 7px;
   
       min-width: 18px;
   }
   
   
   /* =========================================================
      PRODUCT → STRATEGY FLOW
      ========================================================= */
   
   #productStrategyLinks
   {
       position: absolute;
   
       left: 50%;
   
       bottom: 95px;
   
       transform:
           translateX(-50%);
   
       display: flex;
   
       align-items: center;
   
       gap: 10px;
   
       padding: 7px 12px;
   
       background:
           rgba(4,7,13,0.60);
   
       border:
           1px solid
           rgba(255,255,255,0.07);
   
       border-radius: 5px;
   
       backdrop-filter: blur(8px);
   
       z-index: 10;
   
       pointer-events: none;
   
       white-space: nowrap;
   }
   
   
   #productStrategyLinks div
   {
       color: #77879a;
   
       font-size: 7px;
   
       font-weight: 600;
   
       letter-spacing: 1px;
   }
   
   
   #productStrategyLinks span
   {
       color: #3e617a;
   
       font-size: 10px;
   }

   /* =========================================================
      SHOWROOM CONTENT EXTENSIONS
      ========================================================= */
   
      #productPanel,
      #strategyPanel,
      #engineeringPanel,
      #materialsPanel,
      #intelligencePanel
      {
          position: absolute;
      
          z-index: 10;
      
          pointer-events: none;
      }
      
      
      .showroomCard
      {
          background:
              rgba(4,8,15,0.52);
      
          border:
              1px solid
              rgba(255,255,255,0.08);
      
          backdrop-filter: blur(10px);
      
          border-radius: 6px;
      }
      
      
      .showroomLabel
      {
          color: #4baee8;
      
          font-size: 8px;
      
          font-weight: 700;
      
          letter-spacing: 1.7px;
      }
      
      
      .showroomTitle
      {
          margin-top: 7px;
      
          color: #ffffff;
      
          font-size: 14px;
      
          font-weight: 600;
      }
      
      
      .showroomText
      {
          margin-top: 6px;
      
          color: #78879b;
      
          font-size: 10px;
      
          line-height: 1.55;
      }
      
      
      /* =========================================================
         PRODUCT / STRATEGY
         ========================================================= */
      
      .productTag,
      .strategyTag
      {
          display: inline-block;
      
          padding: 5px 8px;
      
          margin-right: 4px;
      
          border:
              1px solid
              rgba(80,180,255,0.2);
      
          border-radius: 3px;
      
          color: #8fa7bd;
      
          font-size: 8px;
      
          letter-spacing: 0.8px;
      }
      
      
      .productTag.active,
      .strategyTag.active
      {
          color: #65c3ff;
      
          border-color:
              rgba(70,180,255,0.35);
      
          background:
              rgba(40,130,200,0.08);
      }
      
      
   /* =========================================================
      MODEL PRESENTATION
      ========================================================= */
   
   .modelBadge
   {
       display: inline-flex;
   
       align-items: center;
   
       gap: 6px;
   
       padding: 5px 8px;
   
       border-radius: 4px;
   
       background:
           rgba(20,80,120,0.18);
   
       border:
           1px solid
           rgba(80,180,255,0.2);
   
       color: #91b8d2;
   
       font-size: 8px;
   
       letter-spacing: 0.8px;
   }
   
   
   .modelBadge::before
   {
       content: "";
   
       width: 5px;
       height: 5px;
   
       border-radius: 50%;
   
       background: #55baff;
   
       box-shadow:
           0 0 8px
           rgba(85,186,255,0.8);
   }
  
   /* =========================================================
      SHOWCASE CARDS
      ========================================================= */
   
      #showcaseCards
      {
          position: absolute;
      
          right: 34px;
          bottom: 55px;
      
          width: 310px;
      
          display: grid;
      
          grid-template-columns:
              repeat(2, 1fr);
      
          gap: 8px;
      
          z-index: 9;
      
          pointer-events: none;
      }
      
      
      .showcaseCard
      {
          min-height: 108px;
      
          padding: 13px;
      
          background:
              linear-gradient(
                  145deg,
                  rgba(9,18,31,0.72),
                  rgba(4,8,15,0.48)
              );
      
          border:
              1px solid
              rgba(255,255,255,0.07);
      
          border-radius: 5px;
      
          backdrop-filter: blur(10px);
      
          box-shadow:
              0 10px 30px
              rgba(0,0,0,0.18);
      }
      
      
      .showcaseCardLabel
      {
          color: #4baee8;
      
          font-size: 9px;
      
          font-weight: 700;
      
          letter-spacing: 1.5px;
      }
      
      
      .showcaseCardTitle
      {
          margin-top: 8px;
      
          color: #dce8f3;
      
          font-size: 11px;
      
          font-weight: 600;
      }
      
      
      .showcaseCardText
      {
          margin-top: 6px;
      
          color: #6f7e91;
      
          font-size: 12px;
      
          line-height: 1.5;
      }
      
      


#strategyPanel,
#productPanel,
#engineeringPanel,
#materialsPanel,
#intelligencePanel,
#showcaseCards,
#productStrategyLinks
{
    display: none;
}