:root{
  --light-primary: #fff;
  --clr-bg-muted:#f6f7f8;
  --dark-bg: #000000;
  --dark-primary: #0B1020;
  --clr-text:#0b1320;
  --bg:#070A1A;
  --bio-dark:#31323b;
  --bio-wave: var(--bio-dark);          
  --text:#E9ECF1;
  --muted:#B6BECC;
  --bio-muted:#8A94A6;
  --clr-bg-1:#FFF6DF;
  --accent:#FF2D7A;      
  --accent-hover:#ff4b93;
  --card:#ff1f74;  
  --clr-accent:#D1194A;     
  --clr-accent-2:#E33B62;   
  --modal-bg:linear-gradient(145deg, #070A1A, #ff4b93, #D1194A);   
  --bg-question-plus: #ffe8f9;
  --bg-footer: linear-gradient(to bottom, #31323b, #7a7c8a);
  --clr-border-1:#F1C24F;
  --clr-border-muted:#EFEFEF;
  --dash:#ffffff80;
  --bg-td:var(--clr-bg-1);
  --bg-th:#FFD97A;
  --border-color: #878776;
  --minus-group: #4CAF50;
  --plus-group: #F44336;

  --radius:28px;
  --radius-inner:22px;
  --container:1200px;
  --pm-avatar-size:44px;    
  --bio-avatar: 56px;
}

 html,
  body{
    height:100%;
  }

   .demo-hero{
    position: relative;
    width: 100%;
    background: #0b1433;
    overflow: hidden;
  }
  
  .demo-hero__grid{
    display: grid;
    width: 100%;
  }

  .demo-hero__grid{
      grid-template-rows: calc(var(--vh) * 80) calc(var(--vh) * 20);
      min-height: calc(var(--vh) * 100);
    }

  @media (max-width: 768px){

    .demo-hero{
      position: sticky;
      top:0;
      z-index:3;
    }
    
  }

  @media (min-width: 769px) and (max-width: 1024px){
    .demo-hero__grid{
      grid-template-rows: 70vh 30vh;
      min-height: 100vh;
    }
  }

.demo-hero__frame{
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    background: var(--bg);
  }

.demo-hero__cta{
    position: relative;
    display:flex;
    align-items:center;
    justify-content:center;
    padding: clamp(14px, 2.2vh, 22px);
    background: var(--bg);
    border-top: 1px solid var(--bio-dark);
  }