:root{
      --bg: #0b0d12;
      --card: #111520;
      --muted: #8b98b1;
      --text:  #172b3b;;
      --brand: #6aa5ff;
      --brand-2: #8f67ff;
      --accent: #21d4fd;
      --radius: 16px;
      --shadow: 0 10px 30px rgba(0,0,0,.35);
    }



    /* Card */
    .card{
      background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
      border:1px solid rgba(255,255,255,.06);
      backdrop-filter: blur(10px);
     
     
      overflow: hidden;
      direction: ltr
    }
    

    /* Tabs header */
    .tabs{
      position: relative;
      display: grid;
      grid-auto-flow: column;
      grid-auto-columns: max-content;
      gap: 6px;
      padding: 10px;
      align-items: center;
      overflow-x: auto;
      scrollbar-width: thin;
    
      border-bottom:1px solid #01695F;
    }
    .tabs::-webkit-scrollbar{height:8px}
    .tabs::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:8px}

    .tab-btn{
      --_pad: 10px 14px;
      position: relative;
      appearance: none;
      border: 1px solid transparent;
      border-radius: 999px;
      padding: var(--_pad);
      background: transparent;
      color: var(--text);
      font-weight: 600;
      letter-spacing: .2px;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      cursor: pointer;
      transition: .25s ease;
      white-space: nowrap;
    }
    .tab-btn:hover{
      background: rgba(255,255,255,.06);
      border-color: rgba(255,255,255,.08);
      transform: translateY(-1px);
    }
    .tab-btn[aria-selected="true"]{
      background: linear-gradient(90deg, rgba(111,165,255,.22), rgba(143,103,255,.20));
      border-color: rgba(122,160,255,.5);
    
    }
    .tab-ico{width:18px;height:18px;display:inline-block}

    .indicator{
      position: absolute;
      bottom: 0;
      height: 3px;
      width: 56px;
     
      background: linear-gradient(90deg, var(--brand), var(--brand-2), var(--accent));
      transition: transform .35s cubic-bezier(.2,.7,.2,1), width .35s;
      transform: translateX(10px);
    
    }

    /* Panels */
    .panels{padding: 22px}
    .panel[hidden]{display:none}
    .panel{
      animation: fade .35s ease both;
    }
    @keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

    /* Demo content */
    .grid{
      display:grid;
      grid-template-columns: repeat(12, 1fr);
      gap:16px;
    }
    .col-4{grid-column: span 4}
    .col-6{grid-column: span 6}
    .col-12{grid-column: span 12}

    .tile{
      background: rgba(255,255,255,.04);
      border:1px solid rgba(255,255,255,.06);
      border-radius: 14px;
      padding:16px 18px;
    
    }
    .title{font-size: clamp(18px, 2.2vw, 24px);margin:0 0 4px}
    .muted{color:var(--muted);font-size: 14px;margin:0}

    .cta{
      display:inline-flex;align-items:center;gap:10px;
      border:1px solid rgba(255,255,255,.08);
      background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
      border-radius:12px;padding:10px 14px;text-decoration:none;color:var(--text);
      font-weight:600;transition:.25s ease;box-shadow: 0 6px 14px rgba(0,0,0,.25);
    }
    .cta:hover{transform:translateY(-2px);}

    /* Responsive */
    @media (max-width: 820px){
      .grid{grid-template-columns: repeat(6, 1fr)}
      .col-6{grid-column: span 6}
      .col-4{grid-column: span 6}
    }